CSS 기초

CSS (Cascading Style Sheets)

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어다. 지금까지 학습한 HTML로 웹 페이지의 구조를 잘 세우고 나서, 더 나은 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있다.

 

사용자 인터페이스(UI; user interface)

인터페이스는 컴퓨터와 교류하기 위한 연결고리다. 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부른다.

 

컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 “사용자"를 붙여 사용자 인터페이스, UI라고 부릅니다.

직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양이다.

 

좋은 사용자 경험(UX; user experience)은 직관적이고 쉬운 UI에서 나온다.

 

CSS 문법 구성

 

CSS는 html에로 링크를 이용하여 사용가능하다.

<link rel="stylesheet" href="index.css" />

CSS(Cascading Style Sheet)는 stylesheet이므로 rel 속성에 stylesheet 를 추가한다. href 속성에는 파일의 위치를 추가해야 한다.

 

id와 class의 차이점

 

color	글씨 색상 변경
font-family	글꼴 변경
font-size	글씨 크기 변경
font-weight	글씨 굵기 변경
text-decoration	밑줄, 가로줄
letter-spacing	자간
line-height	행간
text-align	가로로 정렬

 

• 절대 단위: px, pt 등
• 상대 단위: %, em, rem, ch, vw, vh 등
• 브라우저의 기본 글자 크기는 1rem
• 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우 vw, vh를 사용한다. 웹사이트의 보이는 영역을 Viewport라고 한다. vw, vh 는 각각 viewport width와 viewport height를 뜻하며, 1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻한다.
• h1, p, div 등은 줄바꿈이 된다.(block 요소) 하지만 span은 줄바꿈이 되지 않는다.(inline 요소)

• 박스를 구성하는 요소

border(테두리) - 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할 수 있도록 만든다.

margin(바깥 여백) - 위, 오른쪽, 아래, 왼쪽 순으로 값을 정한다. (padding도 동일)

 

Box sizing

왼쪽은 기본 box 사이즈를 설정했을때이고, 오른쪽은 border-box를 설정했을 때다. 오른쪽이 실제 박스를 설정하는 값이므로 border-box가 권장된다.

 

Selector

*{}	전체 셀렉터
h1{} div{}	태그 셀렉터 - 같은 태그명을 가진 요소를 선택한다.
header > p	자식 셀렉터 - header의 자식 p 태그를 선택한다. (손자 아님 자식만 선택)
header p {}	후손 셀렉터 - header의 자식 p 뿐만아니라 손자, 후손 p까지 전부다 선택한다.
section ~p	형제 셀렉터 - 같은 부모(section)를 가진 동등한 관계의 p를 선택한다.

가상 클래스 셀렉터