sanguk.dev
작성완료
CSS 기초

CSS 기초

CSS3는 HTML5와의 명확한 구분을 통해 스타일링을 정의하며, 외부 CSS 파일 연결, 내부 스타일 태그, 인라인 스타일 등 다양한 연동 방식을 지원한다. Reset CSS는 브라우저의 기본 스타일을 초기화하는 데 사용되며, 여러 선택자 유형과 프로퍼티 값의 단위(픽셀, em, rem 등)를 통해 스타일을 설정할 수 있다. 색상 표현은 이름, hex 코드, rgb 코드 등 다양한 방식으로 가능하다.

CSS & SASS & SCSS

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을 초기화하기 위함.

예제

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코드 등 사용가능