CSS

정리 기준
1. 평소에 사용하면서도 애매하게 알고 있었던 것
2. 있다는 건 알고 있지만 평소에 잘 사용하지 않아 이번 기회에 다시 한번 짚고 가는 것

CSS 구문

selector { property: value }

h1 { 
  color: yellow 
}

CSS 적용

1. Inline
   html 파일 안에서 해당 요소에 직접 스타일 적용

<div style="color:red;"> 내용 </div>

2. Internal
   html 파일 안에서 head 태그 안에 style 태그를 활용하여 스타일 적용

<style> div {color: red;} </style>

3. External
   외부 css 파일에 스타일을 작성하고 html에서 아래와 같이 연결하여 스타일 적용

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

4. Import
   css 파일 내에서 다른 css 파일을 불러와서 적용하는 방식

@import url("css/style2.css");

선택자

1. 요소 선택자(태그 선택자)

h1 { color: yellow; }

2. class 선택자

css 파일
.foo { font-size: 30px; }

html 파일
<p class="foo"> ... </p>

3. id 선택자

css 파일
#bar { background-color: yellow; }

html 파일
<p id="bar"> ... </p>

4. 선택자 조합

/* 요소와 class의 조합 */
p.bar { ... }

/* 다중 class */
.foo.bar { ... }

/* id와 class의 조합 */
#foo.bar { ... }

5. 속성 선택자

css 파일
p 태그 중 class나 Id속성을 가지고 있는 요소
p[class] { color: silver; }
p[class][id] { text-decoration: underline; }

p 태그 중 class가 'foo'인 요소, Id가 'title'인 요소
p[class="foo"] { color: silver; }
p[id="title"] { text-decoration: underline; }

html 파일
<p class="foo">Hello</p>
<p class="bar">CSS</p>
<p class="baz" id="title">HTML</p>

[class~="bar"] : class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택
[class^="bar"] : class 속성의 값이 "bar"로 시작하는 요소 선택
[class$="bar"] : class 속성의 값이 "bar"로 끝나는 요소 선택
[class*="bar"] : class 속성의 값이 "bar" 문자가 포함되는 요소 선택

css 파일
p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */

html 파일
<p class="color hot">red</p>
<p class="cool color">blue</p>
<p class="colorful nature">rainbow</p>

6. 문서 구조 관련 선택자
   자손 선택자: 선택자 사이에 아무 기호 없이 공백으로 구분함

/* <div>의 자손 요소인 <span>를 선택하는 선택자 */
div span { color: red; }

자식 선택자: 선택자 사이에 꺽쇠 기호(>)로 구분함

/* <div>의 자식 요소인 <span>를 선택하는 선택자 */
div > h1 { color: red; }

인접 형제 선택자: 선택자 사이에 + 기호로 구분함

div + p { color: red; }

/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택 */
body > div table + ul { ... }

가상 클래스(pseudo class)

미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스
:first-child : 첫 번째 자식 요소 선택
:last-child : 마지막 자식 요소 선택
:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited : 이미 방문한 하이퍼링크를 의미
:focus: 현재 입력 초점을 가진 요소에 적용
:hover: 마우스 포인터가 있는 요소에 적용
:before : 가장 앞에 요소를 삽입
:after : 가장 뒤에 요소를 삽입
:first-line : 요소의 첫 번째 줄에 있는 텍스트
:first-letter : 블록 레벨 요소의 첫 번째 문자

속성 - 단위 - 상대 길이

%: 부모의 값에 대해서 백분율로 환산한 크기
em: font-size를 기준으로 값을 환산, 소수점 3자리까지 표현 가능
rem: root의 font-size를 기준으로 값을 환산
vw: viewport의 width값을 기준으로 1%의 값으로 계산

속성 - 색상

컬러 키워드: ex) yellow, red
16 진법

• 6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타내며, 첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미함 ex) #RRGGBB
• 6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있음 ex) #aa11cc 는 #a1c로 축약
  RGB( ): RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의하며, 0~255의 정수로 된 값을 지정. 0 → 255는 검정 → 흰색으로 값의 변화를 나타냄
  RGBA( ): 기존 RGB에서 A값이 추가된 형태. rgb(R, G, B, A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 나타냄. A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기하며, 0 → 1은 투명 → 불투명으로 값의 변화를 나타냄 ex) rgba( 0, 0, 0, 0)는 투명한 색상

background 속성

background: [-color] [-image] [-repeat] [-attachment] [-position];

타이포그래피의 구조

em: 폰트의 전체 높이
ex(=x-height): 해당 폰트의 영문 소문자 x의 높이
Baseline: 소문자 x를 기준으로 하단의 라인
Descender: 소문자에서 baseline 아래로 쳐지는 영역, 서체에 따라 descender의 길이가 다름(g,j,p,q,y)
Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역(b,d,h,l)

webfont 속성

@font-face: 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성

@font-face {
    font-family: webNanumGothic; /* 사용자 지정 웹 폰트명 */
    src: url(NanumGothic.eot); /* 적용 될 웹 폰트의 경로 */
    font-weight: bold; /* 필요에 따라 지정 */
    font-style: italic; /* 필요에 따라 지정 */
}

단어 관련 속성

white-space: 요소 안에 공백을 어떻게 처리할지 지정하는 속성

• normal: 공백과 개행을 무시, 필요한 경우에 자동 줄바꿈 O, 기본 값
• nowrap: 공백과 개행을 무시, 자동 줄바꿈 X
• pre: 공백과 개행을 표현, 자동 줄바꿈 X
• pre-line: 공백은 무시, 개행만 표현. 필요한 경우에 자동 줄바꿈 O
• pre-wrap: 개행은 무시, 공백만 표현. 필요한 경우 자동 줄바꿈 O

clear 속성_레이아웃

요소를 floating 된 요소의 영향에서 벗어나게 하는 속성

• none: 양쪽으로 floating 요소를 허용(기본값)
• left: 왼쪽으로 floating 요소를 허용하지 않음
• right: 오른쪽으로 floating 요소를 허용하지 않음
• both: 양쪽으로 floating 요소를 허용하지 않음

HTML/CSS 유효성 검사 테스트

The W3C Markup Validation Service

Media query

미디어 타입

• all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
  미디어 타입
• width, height, device-width, device-height, orientation(세로/가로 모드), aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

@media screen { ... }
@media screen and (min-width: 768px) { ... }
@media (min-width: 768px) and (max-width: 1024px) { ... }
@media (color-index)
    : 미디어 장치가 color-index를 지원하면 적용
@media screen and (min-width: 768px), screen and (orientation: portrait), ...
    : 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용(and 키워드와 반대)

Viewport

설정 시, head 태그 안에 meta 태그 사용

• width(height) : 뷰포트의 가로(세로) 크기를 지정. px단위의 수치가 들어갈 수 있지만, 대부분 특수 키워드인 "device-width(height)"를 사용(뷰포트의 크기를 기기의 스크린 width(height) 크기로 설정)
• initial-scale : 페이지가 처음 나타날 때 초기 줌 레벨 값을 설정(소수값)
• user-scalable : 사용자의 확대/축소 기능을 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

참고자료

boostcourse 비전공자를 위한 HTML/CSS