베트남에서 개발자 하려고 아둥바둥

단순히 텍스트를 줄 바꿈 하는것은 태그로만 알고 있었다. 그런데 반응형으로 하려니 막힌다 모바일 버전에서는 줄이 바뀌고 테블릿 버전부터는 한줄로 텍스트를 표시하고 싶었다 Client Testimonial 위와 같이 줄바꿈하고 싶은 텍스트는 span태그 안에 작성하면 된다 .second_line_testimonial_title { @include mq($BREAKPOINT-XS) { display: block; } @include mq($BREAKPOINT-MD) { display: inline; } } 위와 같이 CSS를 작성해주면 모바일 버전에서만 줄바꿈이 적용된다

프론트엔드/HTML,CSS 2023. 6. 30. 17:37

위와 같이 코드를 작성한 상태. 반응형으로 하기위해 검색을 해서 내가 처음 완성했을때의 CSS (1) .video__box { min-width: 100%; min-height: 100%; @include mq($BREAKPOINT-XS) { height: rem(200); } @include mq($BREAKPOINT-MD) { height: rem(715); } } (1)과 같이 작성하는 경우 보이는 영상의 형태 화면 크기에 따라 영상 옆으로 검은색 띠가 표시 된다. 이를 위해 코드를 다시 수정했는데 여기서 내가 전혀 생각지 못한것은 padding-bottom 에서 %값으로 비율을 맞추는 부분 .iframe__container { position: relative; width: 100%; height..

프론트엔드/HTML,CSS 2023. 6. 13. 15:42

pug에서 반복문을 활용하면 코드양을 줄일 수 있다 만약 a태그에서 여러개의 다른 img를 넣을때 3줄의 코드로 간단히 정리 가능하다 a(href='#').banner__icon +img('images/icons/fb_icon.png') a(href='#').banner__icon +img('images/icons/in_icon.png') a(href='#').banner__icon +img('images/icons/be_icon.png') a(href='#').banner__icon +img('images/icons/tw_icon.png') a(href='#').banner__icon +img('images/icons/ball_icon.png') 아이콘의 이름은 전부 00_icon.png로 통일되어 있..

프론트엔드/HTML,CSS 2023. 6. 6. 16:51

@import 를 사용한것을 Partial(파샬)이라고 한다 소스에서 반복되는 부분을 분리/ 분산시켜서 모듈화 시키는 것이다 @import 사용을 권장하지 않는다? ---backgroundColor.scss--- $color: red; ---fontColor.scss--- $color: blue; ---wrapper.scss--- @import "backgroundColor"; @import "fontColor" body{ font-color: $color } 위와 같은 사태가 생길 수 있다 1. @import는 모든 변수에 대해 글로벌하게 접근 가능하다 2. 코드가 복잡해지고 길어질 수록 변수명이 중복될 수 있으며 3. 이로 인해 $color 로 접근하는 경우 마지막에 import된 곳의 변수 값을 따..

프론트엔드/HTML,CSS 2023. 5. 26. 17:42

처음 HTML,CSS를 배울때는 막연하게 외우려고 했던 개념인데, 이번에 확실하게 이해했으며, 이를 기록해둔다 rem 앞에 있는 r이 'root' 를 의미한다 즉 최상위 요소를 의미하는 것이다 HTML에서 최상의 요소는 이다. 예를 들어 html 의 font-size 값이 15px 일 경우. html { font-size: 15px; } 그리고 새로 만든 span의 폰트 사이즈를 5rem으로 하는 경우. span { font-size: 5rem; /* 폰트사이즈는 75px이 된다 */ } 만약 폰트 사이즈를 px로 정하고 width 값을 em으로 하는 경우. span { font-size: 20px; /* span에서 폰트사이즈는 20px로 고정된다 */ width: 10em; /* 200px이 된다 *..

프론트엔드/HTML,CSS 2023. 5. 22. 20:10

팀내 프론트 엔드 과제를 위해 pnpm설치해야 하는 상황 Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/pnpm' [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/pnpm'] 위와 같은 에러를 만났다. 해결하기 위해서 아래와 같이 sudo를 사용해서 해결했다. 1) sudo npm install -g pnpm 2) pnpm i 설치 완료 후 실행 pnpm dev

프론트엔드/HTML,CSS 2023. 5. 17. 19:19