CSS

대분류

CSS

날짜

2024/07/01

CSS (Cascading Style Sheet)

•

HTML 문서의 색이나 모양 등 외관을 꾸미는 언어이다.

•

CSS 로 작성된 코드를 스타일 시트(style sheet) 라고 부른다.

HTML 문서에 CSS3 스타일 시트 만들기

•

<style></style> 태그에 스타일 시트 작성

◦

<head> 태그 내에서만 사용한다.

•

sytle 속성에 스타일 시트 작성

•

스타일 시트를 별도 파일로 작성한 뒤, <link> 태그나 @import 로 불러서 사용

스타일 상속

•

부모태그로부터 스타일을 상속받는다.

스타일 합치기와 오버라이딩

태그에 적용되는 모든 스타일이 합쳐지고, 동일한 스타일은 순위가 높은 스타일이 우선 적용된다.

Selecter

종류

•

태그 이름 

•

class

◦

점으로 시작해야 한다.

◦

class 속성으로만 지정이 가능하다.

•

id

◦

# 으로 시작한다.

◦

id 속성으로만 지정이 가능하다.

전체 셀렉터

•

* 를 사용하여 모든 태그에 적용시키는 셀렉터이다.

속성 셀렉터

•

HTML 태그의 특정 속성에 대해 값이 일치하는 태그에만 스타일을 적용하는 셀렉터

•

예

◦

input[type=text] {…}

◦

type 속성값이 text 인 <input> 태그에 적용한다.

가상 클래스 셀렉터

어떤 조건이나 상황에서 스타일을 적용하도록 만든 셀렉터이다.

유형	셀렉터	설명
마우스	:hover	마우스가 올라갈 때 스타일 적용
마우스	:active	마우스로 누르고 있는 상황에서 스타일 적용
폼 요소	:focus	폼 요소가 키보드나 마우스 클릭으로 포커스를 받을 때 스타일 적용
링크	:link	방문하지 않은 링크에 스타일 적용
링크	:visited	방문한 링크에 스타일 적용
블록	:first-letter	<p>, <div> 등과 같은 블록형 태그의 첫 글자에 스타일을 적용한다. ::first-letter 와 동일하며, <span> 과 같은 인라인 태그에는 적용되지 않는다.
블록	:first-line	<p>, <div> 등과 같은 블록형 태그의 첫 라인에 스타일을 적용한다. ::first-line 과 동일하다.
구조	:nth-child(even)	짝수 번째 모든 자식 태그에 스타일을 적용한다.
구조	:nth-child(1)	첫 번째 자식 태그에 스타일을 적용한다.

조합

2 개 이상의 셀렉터 조합

•

조합에 적합한 HML 태그에만 저용한다.

자식 셀렉터

•

부모 자식 관계인 두 셀렉터를 > 기호로 조합한다.

•

예

◦

div > strong {…}

◦

<div> 의 직계 자식인 <strong> 에 적용되는 스타일 시트이다.

자손 셀렉터

•

자손 관계인 2 개 이상의 태그를 나열한다.

•

예

◦

ul strong {…}

◦

<ul> 의 자손 <strong> 에 적용되는 스타일 시트이다.

색 표현

•

16 진수 코드로 표현한다. # ~

•

10 진수 코드와 RGB() 로 표현한다. rgb(red,green,blue)

•

색 이름으로 표현

텍스트

•

text-indent: <length>|<percentage>;

•

text-align: left|right|center|justify;

•

text-decoration: none|underline|overline|line-through;

표준 단위

단위	의미
em	배수
%	퍼센트
px	픽셀 수
cm	센티미터
mm	밀리미터
in	인치 1in = 2.54cm = 96px
pt	포인터. 1pt = 1in 의 1/72 크기
pc	피카소(picas).1pc = 12pt
deg	각도

CSS

CSS (Cascading Style Sheet)

HTML 문서에 CSS3 스타일 시트 만들기

스타일 상속

스타일 합치기와 오버라이딩

Selecter

종류

전체 셀렉터

속성 셀렉터

가상 클래스 셀렉터

조합

2 개 이상의 셀렉터 조합

자식 셀렉터

자손 셀렉터

색 표현

텍스트

표준 단위

Cursor