CSS 기초 정리

CSS (Cascading Style Sheets)

CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어

HTML로 구조를 세우고, 사용자 경험(UX, user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성

 

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

 사람과 사물 또는 시스템, 기계, 컴퓨터 프로그램 등 사이에서 의사소통을 할 수 있게 만들어진 매개체.

 

사용자 경험(UX; user experience)

제품,시스템,서비스를 사용하면서 인간이 얻게 되는 지각과 반응의 합.

 

CSS 내용 분해하기

 

 

 셀렉터(selector) : 요소 이름이나 id 또는 클래스를 선택

 선언 (Declaration) : 요소에 적용할 수 있는 내용의 속성을 작성

 

* id와 class의 차이점을 반드시 기억하세요.

 

※id                                                                                          ※class

#으로 선택	.으로 선택
한 문서에 단 하나의 요소에만 적용	동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용	스타일의 분류(classification)에 사용

 

배경 색상이나, 이후에 나올 박스 테두리 색상을 적용할 수도 있습니다.

.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}

 

이 외에도

 

font-family : 글꼴(폰트)의 속성 

font-size : 크기

• 굵기: font-weight
• 밑줄, 가로줄: text-decoration
• 자간: letter-spacing
• 행간: line-height
• 글꼴(폰트)의 속성: font-family 
• 크기 : font-size

줄 바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

 

	block	inline-block	inline
줄바꿈 여부	줄바꿈이 일어남	줄바꿈이 일어나지 않음	줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)	100%	글자가 차지하는 만큼	글자가 차지하는 만큼
width, height 사용 가능 여부	가능	가능

 

박스를 구성하는 요소

CSS 박스 모델은 다음 그림만 기억하면 됩니다.

[그림] border(테두리)를 기준으로 padding(안쪽 여백)과 margin(바깥 여백)이 있습니다.

 

 

border (테두리)

margin (바깥 여백)

padding (안쪽 여백)

모든 요소에 box-sizing: border-box를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산됩니다. 일반적으로 box-sizing은 HTML 문서 전체에 적용합니다. box-sizing을 일부 요소에만 적용하는 경우, 혼란을 가중시킬 수 있습니다. 앞으로 레이아웃과 관련된 이야기를 할 때는 border-box 계산법을 기준으로 이야기합니다. 박스 크기 측정 기준 두 가지를 항상 기억해 주세요.

* content-box는 박스의 크기를 측정하는 기본값입니다. 그러나 대부분의 레이아웃 디자인에서 여백과 테두리를 포함하는 박스 크기 계산법인 border-box를 권장합니다.

기본 셀렉터

attribute 셀렉터

attribute 셀렉터는 같은 속성을 가진 요소를 선택합니다. (모두 암기하실 필요는 없습니다.)

a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식 / 후손 / 형제 셀렉터

자식 : header > p  { }

후손 : header  p  { }

형제 : header ~ p  { }

인접 형제 : header + p  { }

 

기타 셀렉터

가상 클래스 셀렉터

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */

구조 가상 클래스 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

 

박스모델의 개념과 다양한 셀렉터들을 구분하고 이해할 줄 알아야 한다.

Unit4 CSS 셀렉터 연습 100점 맞기