TIL - [CSS 기초]

728x90

CSS

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

알아야 할 단위

절대 단위 : px, pt, cm 등...

* 픽셀(px)은 보기 장치에 상대적이다. 낮은 dpi 장치의 경우 1px은 디스플레이의 하나의 장치 픽셀(도트)이다. 프린터 및 고해상도 화면의 경우 1px는 여러 장치 픽셀을 의미한다.

상대 단위 : %, em, rem, ch, vw, vh 등...

상대 길이 단위는 다른 길이 속성에 상대적인 길이를 지정합니다. 상대 길이 단위는 서로 다른 렌더링 매체 간에 더 잘 조정된다.

Tip : em 및 rem 단위는 완벽하게 확장 가능한 레이아웃을 만드는 데 실용적이다.
* Viewport = 브라우저 창 크기. 뷰포트의 너비가 50cm이면 1vw = 0.5cm입니다

글꼴 사이즈를 정할 때

기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우

px(픽셀)을 사용한다. 픽셀은 크기가 고정된 절대 단위이기 때문에 사용자 접근성이 불리하다.

글꼴의 크기를 픽셀로 설정하면, 글꼴 크기를 더 크게 설정하더라도 글꼴의 크기는 항상 설정된 픽셀로 고정된다.

제목(heading)을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정했으나 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과를 초래할 수 있다. 그리고 픽셀은 모바일 기기처럼 작은 화면이면서, 동시에 고해상도인 경우에도 적합하지 않다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일(upscale) 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우도 있다. 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.

2. 일반적인 경우

상대 단위인 rem을 추천한다. root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다. (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변한다.)

화면 사이즈를 정할 때

반응형 웹(responsive web)에서 기준점을 만들 때 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼 때, 가로 모드로 볼 때, 태블릿으로 볼 때가 각각 다르다. 이때에는 디바이스 크기별로 CSS를 달리 적용해야 한다. 이때, 디바이스 크기를 나누는 기준을 보통 px로 정합니다. 예를 들어 iPhone 12 Pro Max의 너비는 414px 이다. 보통 450px 미만의 너비를 갖는 디바이스는 스마트폰 세로 모드로 생각해도 좋다.
화면 너비나 높이에 따른 상대적인 크기가 중요한 경우에는 vw, vh를 사용하자. 웹사이트의 보이는 영역을 Viewport라고 한다. vw, vh 는 각각 viewport width와 viewport height를 뜻하며, 1vw 는 보이는 영역 너비의 1/100을, 1vh 는 보이는 영역 높이의 1/100을 뜻한다. (참고로 <body> 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤 했을 때 보이는 영역까지 포함했을 때 비율)

셀렉터

전체 셀렉터

* { }

attribute 셀렉터

같은 속성을 가진 요소를 선택한다.

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

자식 셀렉터

자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. 아래 예시의 경우 <header> 요소 바로 아래에 있는 두 개의 <p> 요소는 선택되지만, <span> 요소의 자식인 <p> 요소는 선택되지 않는다.

header > p { }

예시)

<header>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
	<p> <!-- 선택 -->
		<span>
			<p></p>
		</span>
	</p>
</header>

후손셀렉터

후손 셀렉터는 첫 번째로 입력한 요소의 후손까지 선택한다. 아래 예시의 경우 <header> 요소의 자식인 <p> 요소뿐 아니라, <header> 요소의 자식의 자식인 <p> 요소까지 모두 선택된다.

header p { }

형제 셀렉터

형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다.

header ~p { }

인접 형제 셀렉터

인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다.

header +p { }

<header>
	<section></section>
	<p></p> <!-- 선택 -->
	<p></p>
	<p></p>
</header>

가상 클래스 셀렉터

가상 클래스는 요소의 상태 정보에 기반해 요소를 선택한다.

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

UI 요소 상태 셀렉터

input:checked + span { } /*체크 상태일 때 선택. */
input:enabled + span { } /*사용 가능한 상태일 때 선택 */
input:disabled + span { } /*사용 불가능한 상태일 때 선택*/

구조 가상 클래스 셀렉터

p:first-child { } // p 태그가 첫번째 자식이면
ul > li:last-child { } // ul 자식에서 li가 마지막 자식이면
ul > li:nth-child(2n) { } // ul 자식에서 li가 짝수 자식이면
section > p:nth-child(2n+1) { } // section 자식에서 p가 홀수 자식이면
ul > li:first-child { } // ul 자식 중 li가 첫번째 자식이면
li:last-child { } //li 가 마지막 자식이면
div > div:nth-child(4) { } // div 자식 중 div 태그기 4번째 자식이면
div:nth-last-child(2) { } // div태그 중 마지막에서 시작하는 2번째 자식이면
section > p:nth-last-child(2n + 1) { } // section 자식 p 중 마지막에서 시작하는 홀수 자식이면
p:first-of-type { } // p 요소 중 첫번째 요소
div:last-of-type { } // div요소 중 마지막 요소
ul:nth-of-type(2) { } // ul 요소 중 2번째 요소
p:nth-last-of-type(1) { } // p 요소 중 마지막에서 첫번째

728x90

'📚 FrontEnd -Study > HTML, CSS' 카테고리의 다른 글

[CSS] em / rem (0)	2023.02.18
TIL - [HTML/CSS 기초] (0)	2023.02.16
[HTML 기초] (0)	2023.02.14
css/ initial vs inherit vs unset (0)	2022.12.10
css/list sytle type (0)	2022.12.10

LOTUS'S STUDY RECORD

TIL - [CSS 기초]

CSS

알아야 할 단위

글꼴 사이즈를 정할 때

화면 사이즈를 정할 때

셀렉터

전체 셀렉터

attribute 셀렉터

자식 셀렉터

후손셀렉터

형제 셀렉터

인접 형제 셀렉터

가상 클래스 셀렉터

UI 요소 상태 셀렉터

구조 가상 클래스 셀렉터

'📚 FrontEnd -Study > HTML, CSS' 카테고리의 다른 글

댓글

티스토리툴바

TIL - [CSS 기초]

CSS

알아야 할 단위

글꼴 사이즈를 정할 때

화면 사이즈를 정할 때

셀렉터

전체 셀렉터

attribute 셀렉터

자식 셀렉터

후손셀렉터

형제 셀렉터

인접 형제 셀렉터

가상 클래스 셀렉터

UI 요소 상태 셀렉터

구조 가상 클래스 셀렉터

'📚 FrontEnd -Study > HTML, CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바