📌 목차

✨ 네이버 부스트코스 HTML/CSS 강의

💁🏻

Part2.CSS

CSS 이해하기
단위, 배경, 박스모델
폰트, 텍스트
레이아웃
미디어쿼리

✅ 4. CSS 이해하기

웹 페이지를 사람에 비유해보자면, 마크업 언어(HTML)는 몸의 구조(뼈, 근육)를 담당하고
CSS는 옷과 신발과 같이 외적으로 꾸며주는 역할을 한다고 생각하자.~

CSS 구문
CSS 적용 방식

CSS 문법

h1 {
  color: yellow;
  font-size: 2em;
}

선택자(selector) : "h1"
속성(property) : "color"
값(value) : "yellow"
선언(declaration) : "color: yellow", "font-size: 2em"
선언부(declaration block) : "{ color: yellow; font-size:2em; }"
규칙(rule set) : "h1 { color: yellow; font-size:2em; }"

선택자와 선언부 사이, 선언과 선언 사이는 앞뒤로 개행을 해도 상관이 없습니다.
하지만 속성이름과 속성값 사이에는 개행을 하면 안 됩니다.

CSS의 속성(Property)과 HTML의 속성(Attribute)

HTML에도 속성이 있고, CSS에도 속성이 있습니다. 두 가지는 전혀 다른 것입니다.
HTML의 속성은 영어로 attribute이고, CSS의 속성은 property입니다.
둘 다 한국어로 번역할 때 "속성"이라고 하므로 잘 구분하셔야 합니다.

CSS 주석

/* 주석 내용*/

주석 내용은 여러 줄로 선언할 수 있음

CSS의 적용

CSS와 문서를 연결하는 방법은 4가지가 있습니다.

Inline

Inline은 해당 요소에 직접 스타일 속성을 이용해서 규칙들을 선언하는 방법입니다. 해당 요소에 직접 입력하기 때문에 선택자는 필요하지 않게 되고, 선언부에 내용만 스타일 속성의 값으로 넣어주면 됩니다. Inline 스타일 방식은 코드의 재활용이 되지 않기 때문에 자주 사용하지 않습니다.

Internal

Internal은 문서에 <style>을 활용한 방법입니다. <style>은 <head>내부에 들어가며 <style>안에 스타일 규칙이 들어갑니다. 많은 페이지가 있는 경우에는 모든 페이지에 저마다의 규칙을 선언해줘야 합니다. 페이지가 많고 스타일 규칙 내용이 많아지면 관리가 어려워집니다.

External

External은 외부 스타일 시트 파일을 이용한 방법입니다. 외부 스타일 시트는 스타일 규칙들을 별도의 외부 파일을 만들어 넣는 방식입니다. 외부 파일은 확장자가 .css가 되며 css 파일이라고 부릅니다. 외부 스타일 시트 방식은 파일 관리가 편하면서도 용량이 작기 때문에 주로 사용되는 방법입니다.

Import

Import는 스타일 시트 내에서 다른 스타일 시트 파일을 불러오는 방식입니다.

<style>내부 상단이나 외부 스타일 시트 파일 상단에 선언하는데 성능상 좋지 않아서 거의 쓰이지 않습니다.

선택자

선택자는 복잡하고 다양한 요소들 사이에서 내가 원하는 요소만을 선택할 수 있도록 도와줍니다.

그룹화 : 선택자는 쉼표를 이용해서 그룹화를 할 수 있습니다. *(별표)기호로 문서 내에 모든 요소를 선택할 수도 있습니다.

선택자 이름	설명
요소 선택자 (태그 선택자)	선택자 부분에 태그 이름이 들어감. 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용됨
`class` 선택자	요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 `class` 선택자를 활용하는 것 맨 앞에 .(마침표)를 찍어줌
`id` 선택자	`class` 선택자와 비슷. 마침표기호 대신 #(해시)기호를 쓰면 됨. 요소에는 `id`를 쓰면 됨.
속성 선택자	속성 선택자는 대괄호를 이용해서 선언하며 대괄호 안에 속성 이름이 들어갑니다.

id선택자와 class 선택자와의 차이점

.기호가 아닌 #기호 사용
태그의 class 속성이 아닌 id 속성을 참조
문서 내에 유일한 요소에 사용
구체성

선택자의 조합

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

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

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

속성 선택자

단순 속성으로 선택
정확한 속성값으로 선택
부분 속성값으로 선택 : 부분 속성값으로 선택은 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다릅니다.

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

문서 구조 관련 선택자

문서 구조의 이해

부모와 자식 관계
조상과 자손 관계
형제 관계

문서 구조 관련 선택자

자손 선택자 : 자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분을 합니다.
자식 선택자 : 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣습니다.
인접 형제 선택자 : 인접 형제 선택자는 선택자 사이에 + 기호를 넣습니다.

가상 선택자

가상 선택자에는 가상 클래스와 가상 요소가 있습니다. 가상 클래스 선택자는 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용할 수 있는 선택자입니다.

:pseudo-class {
    property: value;
}

가상 클래스 이름	설명
:first-child	첫 번째 자식 요소 선택
:last-child	마지막 자식 요소 선택
:link	하이퍼 링크이면서 아직 방문하지 않은 앵커
:visited	이미 방문한 하이퍼링크를 의미
:focus	현재 입력 초점을 가진 요소에 적용
:hover	마우스 포인터가 있는 요소에 적용
:active	사용자 입력으로 활성화된 요소에 적용

가상 요소

가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있습니다. 가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있습니다. 선언 방법은 가상 클래스와 같게 콜론을 사용하며, CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다. 하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용하셔야 합니다.

::pseudo-element {
    property: value;
}

가상 요소 이름	설명
:before	가장 앞에 요소를 삽입
:after	가장 뒤에 요소를 삽입
:first-line	요소의 첫 번째 줄에 있는 텍스트
:first-letter	블록 레벨 요소의 첫번째 문자

cascading 규칙

cascading은 스타일 규칙들이 어떠한 기준으로 요소에 적용되는지를 정한 규칙입니다. cascading은 폭포가 내려오는 모양처럼 단계적인 이라는 의미를 지니며, 모든 스타일 규칙들은 cascading의 단계적인 규칙에 따라 요소에 적용됩니다.

5. 단위, 배경, 박스모델

속성

정의와 구문
단위 : 절대길이 / 상대길이
색상
background :
배경에 관련된 속성에는 색상, 이미지, 반복 여부 등 여러 속성이 존재하고, 이 속성들을 한 번에 모아서 사용할 수도 있습니다.
markup background: [-color] [-image] [-repeat] [-attachment] [-position];
boxmodel
border : border 속성은 요소의 테두리에 관련된 속성을 지정할 때 사용합니다.
padding : adding 영역은 border와 content 사이의 여백
margin : margin은 border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역
margin & padding : 두 속성의 차이를 이해하기
width : 정확히는 content 영역의 너비를 지정하는 것을 의미
height : width와 마찬가지로 정확히는 content 영역의 높이를 지정하는 것
boxmodel 정리

6. 폰트, 텍스트

HTML이 처음 등장했을 때는 이미지를 표현하는 기능도 없는 문자만 존재하는 미디어였습니다. 그러므로 HTML에서 서체와 관련된 부분은 가장 밀접한 분야이면서 동시에 속성의 빈도수도 가장 많습니다. 폰트 속성, 텍스트 속성, 간격 관련 속성 등 다양한 서체 관련 속성이 있습니다.

타이포그래피의 구조

폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 합니다. 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다.

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

속성

타이포그래피
font-family : 글꼴을 지정하는 속성
line-height : 행간 조정
font-size : 글꼴의 크기를 지정
font-weight : 글꼴의 굵기를 지정하는 속성
font-style : 글꼴의 스타일을 지정하는 속성
font-variant : 글꼴의 형태를 변형하는 속성으로 소문자를 작은 대문자로 변환할 수 있습니다.
font : font-style, font-variant, font-weight, font-size/line-height, font-family 속성들을 한 번에 선언할 수 있는 축약형 속성
webfont : @font-face - 웹에 있는 글꼴을 사용자의 로컬 환경(컴퓨터)으로 다운로드하여 적용하는 속성
vertical-align : 요소의 수직 정렬을 지정하는 속성
text-align : 인라인 요소의 수평 정렬에 사용
text-indent : 텍스트의 들여쓰기를 지정하는 속성
text-decoration : 텍스트의 장식을 지정하는 속성
단어 관련 속성 : white-space, letter-spacing, word-spacing, word-break, word-wrap

7. 레이아웃

속성

display :
모든 요소는 자기가 기본적으로 가지고 있는 display 값이 있고
그 값에 따라 블록 레벨, 인라인 레벨 등 렌더링 박스의 유형이 결정됩니다.
visibility : CSS에서 요소를 숨기는 방법 중 하나.
float : 요소를 float(요소를 보통의 흐름에서 벗어나게 함) 시킬지 지정하는 속성
clear : 요소를 floating 된 요소의 영향에서 벗어나게 하는 속성
position : 요소의 위치를 정하는 방법을 지정하는 속성
z-index : 요소가 겹치는 순서(쌓임 순서 또는 stack order)를 지정하는 속성
HTML/CSS 유효성 검사 : HTML/CSS이 익숙하지 않을 때는 반드시 코드 작성 후 항상 유효성 검사하는 습관을 들이세요!

8. 미디어쿼리

소개

미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다.

@media(at media)

미디어 쿼리는 CSS2 Media Types을 확장했기 때문에 선언 방법은 동일합니다.

@media mediaqueries { /* style rules  */ }

@media 로 시작하며, 이 키워드는 이제부터 미디어 쿼리를 시작한다 라는 뜻입니다. 미디어 쿼리 구문은 미디어 타입(Media Types)과 미디어 특성(Media Features)으로 이루어져 있습니다.

viewport

스마트폰 이전 시대에는 대부분의 웹 페이지가 데스크탑 모니터 사이즈를 고려해서 제작되었기 때문에 모바일 기기처럼 작은 화면에서는 모두 보이지 않아 좌우로 스크롤을 해야만 내용을 볼 수가 있었습니다. 그래서 모바일 브라우저들은 뷰포트(viewport)라는 가상의 화면을 만들고 그 화면에 페이지를 나타내기 시작했습니다.

여기에서 실제 우리가 보는 스마트폰의 스크린 사이즈(device-width/height)와 브라우저가 화면을 나타내는 가상의 화면 사이즈(viewport)의 차이가 생기게 됩니다.

그래서 모바일 safari에서 뷰포트를 설정할 수 있는 태그를 도입해서 뷰포트의 크기와 스케일을 조정할 수 있게 했습니다.