CSS

CSS 작업을 하기 전 환경 세팅은 생산성에 큰 영향을 줍니다. 환경 세팅 작업 중 하나인 Reset CSS는 브라우저에서 제공하는 못생긴 요소들을 reset 시켜 주는 작업입니다. a, button, input, textarea, list 와 같이 기본적으로 스타일이 좀 붙어있는 것들을 주로 손보게 됩니다. https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings..

box-shadow 요소에게 그림자를 줄 때 사용하는 property입니다. h-offset (x축) v-offset (y축) blur spread color 의 속성을 가지며, 위 번호의 순서대로 속성을 입력해줘야 합니다. /* offset-x | offset-y | color */ box-shadow: 60px -16px teal; /* offset-x | offset-y | blur-radius | color */ box-shadow: 10px 5px 5px black; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); /* inset | offset..

Grid System container - grid system의 적용 범위 column gutter - 간격을 위한 여백 container는 grid의 적용 범위입니다. 보통 12개의 column으로 나누어 표현합니다. gutter는 요소간의 간격을 위해 만드는 여백입니다. Bootstrap 반응형 grid system을 지원합니다. 를 이용하여 사용하며 grid system 사용시 위계를 지켜야 합니다. 원하는 내용 이 html의 위계를 지키지 않으면 고치기 힘든 버그가 생길 수 있습니다. col-sm-1 col-md-3 col-lg-2 col-xl-12 와 같이 사이즈를 분기로 column 수를 바꿔줄 수 있습니다.

Transition: 속성값을 변경할 때 animation을 줍니다. Animation: 자유롭게 애니메이션을 부여합니다. Transition의 속성 property duration [timing-funtion] [delay] [ ] 표시는 생략 가능 property css 속성을 선택합니다. all로 해당 요소의 모든 속성을 선택할 수도 있습니다. .box { transition: background-image 1000ms; transition: all 1000ms; } duration transition의 변화가 얼마만큼의 시간동안 일어나는지 정해줍니다. 단위: ms, s .box { transition: background-image 1000ms; /* transition: all 1s; */ } ..

background-color 배경 색상 hex, rgb, rgba로 표현합니다. .bg { background-color: #fff; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 1); } background-image 배경 이미지 url( )을 필수적으로 사용해야 합니다. .bg { background-iamge: url('./assets/img1.jpg'); backgound-image: url('https://plus.unsplash.com/premium_photo-1690164161383-f5ff30a790bc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8f..

텍스트를 이쁘게 디자인 할 때 쓰입니다. font-size 글씨의 크기 .text { font-size: 24px; } px, em, rem의 세 가지 단위를 사용합니다. em (equal to capital m) 실제로 적용된 폰트 사이즈가 기준입니다. ex) 폰트 사이즈가 12px이라 하면 1em = 12px 그렇지만 폰트 사이즈를 em으로 나타내기엔 조금 불안정한 감이 있습니다. rem (root em) root는 html 문서를 뜻합니다. html에 적용된 font-size = 1 rem line-height 줄 간격을 뜻합니다. .text { font-size: 16px; line-height: 1.5; } 단위로는 px, em, rem을 사용합니다. 줄 간격은 em을 많이 사용하기 때문에 단위..

반응형 웹을 만들기 위해 필요한 css 선언입니다. HTML 단에서는 viewport meta, CSS에서는 media query가 선언되어야 반응형을 만들 수 있습니다. @media screen and (min-width:768px) and (max-width:991px) { /* CSS 작성 */ }

flexbox를 사용할 때 필요한 네 가지 과정 flexbox 사용 가로정렬? 세로정렬? 한 줄? 여러 줄? 플렉스박스 사용하기 flexbox 사용 정렬을 하고자 하는 요소의 부모에게 flex 선언을 해줘야 합니다. .flexbox { display: flex; /*inline-flex도 가능*/ } flex도 일종의 box type입니다. 가로, 세로 선택하기 정렬을 어느 방향으로 할 것인지 알려줘야 합니다. .flexbox { display: flex; flex-direction: row; /* row | row-reverse | column | column-reverse */ } 축(axis) flex를 사용하면 두 개의 축(axis)이 생깁니다. main axis : flex-direction 방..