/
/

CSS 기초

CSSReset CSS선택자속성
avatar
전상욱
2025.04.10
·
4 min read

CSS3의 시작

HTML5가 '정보와 구조화, CSS3가 'Styling'의 정의'라는 본연의 임무에 충실하도록 명확하게 구분하기 시작함.

각자의 문법을 갖는 별개의 언어.

HTML과 CSS의 연동 방식

  • Link Style : 외부 CSS파일 연결

  • Embedding Style : head태그 내부에 style태그를 생성 -> style태그 안에 선언

  • Inline Style : html태그의 속성(style="")으로 선언

Link Style이 가장 일반적.
Inline Style은 js에서 동적으로 생성시 사용하는 경우도 있지만 웬만하면 Link Style로 통일

Reset CSS

브라우저마다 존재하는 Default Style을 초기화하기 위함.

Example Reset.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

선택자

선택자 종류

  • 전체 선택자 (ex. *)

  • 태그 선택자 (ex. tagName)

  • ID 선택자 (ex. #idName)

  • Class 선택자 (ex. .className)

  • 속성(Attribute) 선택자 (ex. [title="제목"])

  • 복합 선택자

    • 후손 선택자 (ex. div p)

    • 자식 선택자 (ex. div > p)

    • 인접형제 선택자 (ex. div + div)

    • 일반형제 선택자 (ex. div ~ div)

  • 가상 클래스 선택자

    • 링크, 동적 선택자 (ex. :link, :visited, :active, :focus)

    • Element 상태 선택자 (ex. :checked, :enabled, :disabled)

    • 구조 가상 선택자 (ex. :first-child, :last-child)

    • 부정 선택자 (ex. :not(div))

    • 정합석 체크 선택자 (ex. :valid(div), :invalid(div))

  • 가상 요소 선택자 (ex. ::after, ::before)

프로퍼티 값의 단위

키워드

  • 문자로 정해진 값. (ex. display속성의 block, inline, inline-block)

숫자 단위

  • px : 디바이스 별로 픽셀 크기가 다르기 때문에 명확하진 않음.

    • 대부분 브라우저는 1/96인치 = 1px로 인식

  • em : 요소에서 지정된 폰트 사이즈의 배수.

    • 대부분 브라우저는 1/96인치 = 1px로 인식

    • 콘텐츠 사이즈 설정, 콘텐츠를 포함하는 컴테이너 크기 설정에 상대적인 설정이 가능하여 편리

    • 중첩된 자식 요소에 사용하면 모든 자식 요소에 영향을 미치므로 주의

  • rem : 최상위 요소 (html)의 폰트 사이즈를 기준으로 함

  • % : 백분률 상대 단위. (부모 요소 사이즈에 상대적임)

  • vw : 뷰포트를 기준으로 너비 (상대적 사이즈)

  • vh : 뷰포트를 기준으로 높이 (상대적 사이즈)

색상 표현 단위

  • red, green, blue 등 색상의 이름.

  • hex코드, rgb코드, rgba코드, hsl코드, hsla코드 등 사용가능

- 컬렉션 아티클