[Front-End] css

지연·2023년 8월 11일

웹개발

목록 보기

3/7

CSS란?

Cascding Style Sheets의 약자로 HTML태그에 디자인을 입혀주는 기법이다.
그렇다면 html을 두고 굳이 css를 함께 쓰는가?
→문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요성을 줄여주기 때문이다.

selector

cs에서 셀렉터를 작성하는 방법은 기본적으로 HTML의 태그이름, 클래스 속성, id속성에 대한 명시가 있다.

태그이름

selector{
	..css 본문..
    }

특정 태그를 가리킨다. HTML내에 동일 태그가 존재할 경우, 모든 태그 요소를 일괄 처리 한다.

클래스 속성

.selector{
	... css 본문 ... 
    }

셀렉터 이름 앞에 점(.)을 붙여 표시하고 HTML 태그의 class 속성에 점을 제외한 이름을 명시하여 지정한다.
태그의 종류를 가리지 않고 여러 요소에 복수 지정이 가능하다.
(→재사용의 목적)
selector의 이름 자유 지정 가능

id 속성

#selector{
	..css 본문..
    }

셀렉터 이름 앞에 #을 붙여 표시하고, HTML태그의 id속성에 #을 제외한 이름을 명시하여 지정한다
💡 id 속성의 값은 HTML 페이지 내에서 중복 사용 될 수 없다(고유 특성, 그래서 스크립트 작성 시 id값을 받아와서 사용하는 경우가 많다)
selector의 이름 자유 지정 가능

조합형 selector

tag.class{
	...css 값..
    }
tag#id{
	...css 값..
    }

id값이나 class값을 태그 이름과 함께 명시하여 적용하는 형태로,
셀렉터가 지정하는 대상을 자세하게 명시할 수 있다
태그, 클래스, 아이디를 독립적으로 명시할 때 보다 우선적으로 적용된다.

and의 의미를 갖는 콤마(,)사용

selector1, selector2, selector3, ...{
	css 적용 ..
    }

여러 개의 요소에 동일한 CSS 내용을 적용하기 위해 셀렉터를 ','로 구분하여 일괄 처리 할 수 있다.
태그, class, id 등 모든 형태의 CSS셀렉터가 가능하다.

복잡한 형태의 selector

셀렉터의 종류와 표현법에 대한 설명이다.

자식 selector

“>”로 구분한 구조적 표현
“>”은 html의 계층 구조의 표현을 의미
A>B일 경우에는 B요소는 반드시 A의 1depth안에 존재한다.

자손 selector

공백으로 구분하여 태그의 구조를 표현한다
자식 셀렉터는 반드시 idepth안에 존재해야했다면 자손 셀렉터는 depth는 제한하지 않는다.
p div #pwd라고 명시할 경우, p태그 안의 div 태그 안의 pwd라는 id값을 갖는 요소라는 의미가 되어 두번째 textfield를 가리킨다
명시 과정에서 중간단계를 생략해도 된다. 몇 depth를 더 내려가던, 지정한 태그의 범위 안에 존재하기만 하면 된다.