✨ SEB FE
Unit3 CSS 기초
💡 단순한것이 가장 훌륭한 것이다. 그리고 현명한 사람만이 그런 것을 볼 수 있다.
"The simple things are also the most extraordinary things, and only the wise can see them."
-파울로 코엘료(Paulo Coelho)
📌 CSS
🔍 CSS?
CSS(Cascading Style Sheets) : 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어이다.
CSS로 HTML에서 사용자가 웹 애플리케이션에 접근할 수 있는 UI를 만들게 된다.
사용자가 서비스를 이용하기 위해서는 꼭 UI(User Interface)가 필요하다. 이때 HTML만으로 UI를 제공하게 된다면, 좋은 UX(User Experience)를 만들 수 없다. 좋은 UX는 직관적이고 쉬운 UI에서 나온다.
사용자에게 편리한 UI를 제공하여 좋은 UX를 만들어내는 것이 중요한데 이때 사용되는 스타일 시트 언어가 CSS이다.
CSS에서는 색상, 글꼴, 크기, 정렬 등의 스타일을 부여할 수 있다.
전부 외울 필요 X 실습으로 css를 익히고 상황에 맞게 필요한 속성을 찾아서 사용할 수 있어야한다.
💡 단위
글꼴 크기, 화면 크기 등 크기를 다룰 때는 크기의 단위가 무엇보다 중요합니다. 크기의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있습니다.
- 절대 단위: px, pt 등
- 상대 단위: %, em, rem, ch, vw, vh 등
글꼴 사이즈
-
기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 px(픽셀)을 사용.
-
상대 단위인 rem을 추천한다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다.
화면 사이즈
-
반응형 웹(responsive web)에서 기준점을 만들 때 -> 디바이스 크기를 나누는 기준을 px로
-
화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 -> vw, vh를 사용
🔍 Box Model
모든 콘텐츠는 각자의 영역을 가지고 일반적으로 하나의 콘텐츠로 묶이는 요소들이 하나의 Box가 된다. (Box는 항상 직사각형이고, 너비(width)와 높이(height)를 가짐)
줄 바꿈이 되는 Box(block) vs. 옆으로 붙는 Box(inline, inline-block)
Box의 종류는 줄 바꿈이 되는 Box, 줄 바꿈이 없이 옆으로 붙는 Box로 구분할 수 있다. 줄 바꿈이 되는 Box는 block Box, 줄 바꿈이 일어나지 않고, 크기 지정을 할 수 없는 Box는 inline Box라고 부른다. 그리고 이 두 가지 Box 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block Box의 특징을 가지는 inline-block Box도 있다.
| block | inline-block | inline | |
|---|---|---|---|
| 줄 바꿈 여부 | 줄 바꿈이 일어남 | 줄 바꿈이 일어나지 않음 | 줄 바꿈이 일어나지 않음 |
| 기본적으로 갖는 너비(width) | 100% | 글자가 차지하는 만큼 | 글자가 차지하는 만큼 |
| width, height 사용 가능 여부 | 가능 | 가능 | 불가능 |
Box를 구성하는 요소
border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있다.
top, right, bottom, left 순서로 영역의 크기를 조절할 수 있다.
/*예시!!1*/
p {
border: 1px solid red;
margin: 10px 20px 30px 40px;
padding: 10px 20px 30px 40px;
}
/* 위치 따로 조정도 가능! */
p {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}💡Box를 벗어나는 콘텐츠는 overflow 속성을 통해 다룰 수 있다
auto -> 스크롤 생성
hidden -> 벗어난 콘텐츠 숨기기
🔍 Selecter
selecter는 css에서 스타일을 적용할 대상을 표현하는 것이다.
기본 selecter
*{} /*전체 selecter*/
div{} /*tag selecter*/
#id{} /*id selecter*/
.class{} /*class selecter*/
a[href]{} /*attribute selecter*/자식, 후손, 형제 selecter
자식 selecter: “ > “
첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
후손 selecter: “ “
첫 번째로 입력한 요소의 후손을 선택
형제 selecter: “ ~ “
같은 부모요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택
인접 형제 selecter: “ + ”
인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택가상 클래스 selecter
가상 클래스는 요소의 상태 정보에 기반해 요소를 선택합니다.
아래 예시인 a태그말고도 button, div등 상태 변화에 기반을 둔 스타일을 설정하고 싶을 때 사용할 수 있다.
a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */UI 요소 상태 selecter
input:checked + span { } /*체크 상태일 때 선택합니다. */
input:enabled + span { } /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span { } /*사용 불가능한 상태일 때 선택합니다. */✨ 마무리
전부터 계속 약했던 부분이다.. css.. ㅍ_ㅍ 요소 하나하나에 속성을 넣고 부모와 자식의 관계까지 고려해서 작성해야하기 때문에, 가장 두려워한 부분이기도 했다. 확실히 실습으로 내가 원하는 부분을 꾸며보는 것이 도움이 되는 것 같다! 앞으로 꾸준히 연습하면서 css 기술 발전시켜 보자!
