CSS 기초문법 복습하기

2024/03/03

안녕하세요 lika-7 입니다.

이번시간에는 css 기초문법을 복습하도록 하겠습니다

CSS 작성법

CSS는 하나 이상의 선택자에 여닫는 중괄호롤 블록을 구성하여 작성하며, 각 블록에는 다양한 스타일 속성을 나열 합니다

선택자 {속성명: 속성값;속성명: 속성값;}

CSS 우선순위

우선순위 타입 설명

1	중요성	속성값 뒤에 !important를 붙인 속성, 모든 스타일보다 우선함
2	인라인	HTML 요소의 sytle 속성을 직접 지정한 스타일
3	미디어 타입	특정 CSS가 정의되어 있지 않다면 속성 정의는 모든 미디어 타입에 적용
4	사용자 정의	사용자 정의 CSS가 HTML 문서에 있는 CSS보다 우선함
5	선택자 특정성	특정 컨텍스트 선택자(#heading o)는 일반 정의보다 우선함
6	규칙 순서	마지막에 선언한 규칙이 우선순위가 가장 높음
7	부모상속	속성을 지정하지 않으면 부모 요소를 상곡함
8	HTML 문서 안에서의 CSS 속성	CSS 규칙이나 CSS 인라인 스타일은 기본 브라우저 값을 덮어씀
9	브라우저 기본값	가장 낮은 우선순위, 브라우저 기본값은 W3C 초깃값 사양에 정의되어 있음

전체 선택자

전체 선택자는 HTML의 모든 요소에 적용합니다. 단일 선택자, 복합 선택자로 하위 요소까지 스타일을 적용할 수 있습니다.

CSS	스타일 적용 범위
* {     color : red }	<section>     <h1>사이트 제목</h1>     <div>         <p>콘텐츠 내용</p>         <p>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>     </div> <section>

타입 선택자

타입 선택자는 이름이 선택자와 같은 요소에 스타일을 적용합니다

CSS	스타일 적용 범위
* {     color : red }	<section>     <h1>사이트 제목</h1>     <div>         <p>콘텐츠 내용</p>         <p>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>     </div> <section>

 

CSS	스타일 적용 범위
* {     color : red }	<section>     <h1>사이트 제목</h1>     <div>         <p>콘텐츠 내용</p>         <p>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>     </div> <section>

속성 선택자

속성 선택자는 요소의 특정 속성에 스타일을 적용합니다

CSS	스타일 적용 범위
a[href]{     color : red;     text-decoration: underline }	<section>     <h1>사이트 제목</h1>     <div>         <p data=”콘탠츠 내용” >콘텐츠 내용</p>         <p data=”콘탠츠 내용” >콘텐츠 내용</p>         <a href=”#”>관련 링크</a>     </div> <section>

CSS	스타일 적용 범위
p[data]{     color : blue; }	<section>     <h1>사이트 제목</h1>     <div>         <p data=”콘탠츠 내용” >콘텐츠 내용</p>         <p data=”콘탠츠 내용” >콘텐츠 내용</p>         <a href=”#”>관련 링크</a>     </div> <section>

아이디 선택자

HTML 문서에서 아이디는 유일한 특성이 있으므로 아이디 선택자는 페이지 내에서 한 곳에만 적용됩니다.

CSS	스타일 적용 범위
#wrap{     border : soild 1px #ddd; }	<section id=”wrap”> </section> <section id=”wrap_content”> </section>

클래스 선택자

클래스 선택자는 아이디 선택자와는 다르게 공통으로 여러 곳에 스타일을 적용할 수 있습니다.

CSS	스타일 적용 범위
.content{     padding : 10px;     color : red;     border : soild 1px #ddd }	<section id=”wrap”>     <h1>사이트 제목</h1>     <div>         <p class=”content”>콘텐츠 내용</p>         <p class=”content”>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>     </div> </section>

하위 선택자

하위 선택자는 지정된 하위 요소를 선택하여 스타일을 적용합니다. 일반적으로 텍스트와 관련된 속성들은 부모 요소로부터 상속됩니다. 다음 예에서 <div> 요소의 <p> 요소는 padding과 border 속성은 상속되지 않지만, color 속성은 상속되어 지정됩니다.

CSS	스타일 적용 범위
#wrap div{     padding : 10px;     color : red;     border : soild 1px #ddd }	<section id=”wrap”>     <h1>사이트 제목</h1>     <div>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>         <div>서브 콘텐츠</div>     </div> </section>

자식 선택자

자식 선택자는 부모 요소의 바로 아래 자식 요소만 석택하여 스타일을 적용합니다

CSS	스타일 적용 범위
#wrap > div{     padding : 10px;     color : red;     border : soild 1px #ddd }	<section id=”wrap”>     <h1>사이트 제목</h1>     <div>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>         <div>서브 콘텐츠</div>     </div> </section>

형제 선택자

부모가 같은 요소를 형제 요소라고 합니다

형제 선택자는 부모가 같은 모든 형제 요소에 스타일을 적용합니다

같은 계층에 있는 h1의 형제인 div 요소에 스타일을 적용합니다

CSS

스타일 적용 범위

h1 ~ div{     padding : 10px;     color : red;     border : soild 1px #ddd }

<section id=”wrap”>     <h1>사이트 제목</h1>     <div>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>         <div>서브 콘텐츠</div>     </div>     <div>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>         <div>서브 콘텐츠</div>     </div> </section>

인접 형제 선택자

인접 형제 선택자는 부모가 같은 형제 중에 바로 다음에 있는 요소에 스타일을 적용합니다.

h1 다음에 나오는 형제 요소 하나만 적용합니다

CSS

스타일 적용 범위

h1 + div{     padding : 10px;     color : red;     border : soild 1px #ddd }

<section id=”wrap”>     <h1>사이트 제목</h1>     <div>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>         <div>서브 콘텐츠</div>     </div>     <div>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>         <div>서브 콘텐츠</div>     </div> </section>

가상 클래스

가상 클래스pseudo-class는 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 따라 가상의 선택자를 지정하여 스타일을 적용합니다.

예를 들어 링크 스타일을 적용하거나 마우스이벤트, 키보드 이벤트에 관한 스타일을 적용합니다.

타입 설명

선택자:link{속성명: 속성값}	방문하지 않은 링크의 스타일 적용
선택자:visited{속성명: 속성값}	방문 링크의 스타일 적용
선택자:active{속성명: 속성값}	요소의 마우스 클릭, 키보드가 눌린 상태의 스타일 적용
선택자:hover{속성명: 속성값}	요소에 마우스가 올라가 있는 동안의 스타일 적용
선택자:focus{속성명: 속성값}	요소에 포커스가 머물러 있는 동안의 스타일 적용

구조적 가상 클래스 선택자

구조적 가상 클래스는 위치를 기준으로 한 선택자 입니다. 같은 요소가 있을 때 위치에 따라 스타일을 적용합니다.

타입 설명

선택자:nth-child(n)	선택자의 지정한 순서(n=정수)에 따라 해당 요소의 스타일 적용
선택자:nth-of-type(n)	같은 유형의 요소 중 지정된 순서에 따라 해당 요소의 스타일 적용
선택자:nth-last-of-type(n)	같은 유형의 요소 중 끝으로부터 일치하는 해당 요소의 스타일 적용
선택자:first-child(n)	첫 번째 요소에 스타일 적용
선택자:last-child(n)	마지막 요소에 스타일 적용

부정 선택자

부정 선택자는 조건에 맞지 않는 요소를 선택하여 스타일을 적용합니다

CSS

스타일 적용 범위

wrap div:not(.subcontent) {     padding : 10px;     color : red;     border : soild 1px #ddd }

<section id=”wrap”>     <h1>사이트 제목</h1>     <div>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>         <div>서브 콘텐츠</div>     </div>     <div>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <p class=”content” data=”콘텐츠 내용”>콘텐츠 내용</p>         <a href=”#”>관련 링크</a>         <div>서브 콘텐츠</div>     </div> </section>