CSS(Cascading Style Sheets)

HTML과 함께 웹을 구성하는 기본 프로그래밍 요소로 html 문서에서 디자인 부분을 담당하는 코드

HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 브라우저마다 동일하게 표현할 수 있도록 한다.

웹 문서의 내용과 상관없이 디자인만 바꾸거나, 디자인은 그대로하면서 내용만 바꾸고 싶을 때 사용하기 좋다.

 

 

폰트 - 크기, 글꼴, bold, italic, underline, 색상

박스모델링 - 배경, 테두리, 여백(margin, padding), 그림자

레이아웃 - 박스모델링, 가로세로, display, float, 좌표, position, grid, flex

애니메이션

 

 

 

CSS 적용방법

1. 내부 스타일시트

html 파일 내에 스타일을 정의하는 방법

<head></head> 태그 사이에 style 태그를 삽입하고 <style></style> 태그 부분에 원하는 스타일을 작성한다.

html 과 css가 한 파일에 있기 때문에 작업이 간편하지만 CSS를 재활용할 수 없다.

 

2. 외부 스타일시트

별도의 파일에 CSS 문서를 작성하고 해당 CSS를 html 문서에서 불러와서 스타일을 적용시키는 방법

link:css 이용해서 동일한 서버의 CSS를 불러오거나, url으로 다른 서버의 CSS를 불러온다. 

 

3. 인라인 스타일

태그에 직접 디자인 속성 스타일을 지정할 수 있는 방법

디자인을 편리하게 바로 적용할 수는 있지만 html과 섞여 있기 때문에 추후에 관리하기 어렵다.

html에 style=""으로 추가한다.

 

 

 

 

선택자(selector) : 디자인을 적용할 태그를 선택하는 방법

CSS는 선택자와 선언부로 구성된다.

선택자는 스타일을 지정할 HTML 요소를 가리키고, 선언부에는 CSS 속성 이름과 값이 포함된다.

선택자 {속성:값, 속성:값....}

 

 

1. 태그선택자

태그명{속성: 값...}

태그선택자는 태그명으로 선택, 특정 태그에 스타일을 적용한다.

태그 선택자를 정의하면 해당 태그들의 공통적인 디자인을 표현하기 때문에 웹문서의 해당 태그의 모든 요소들에 동일한 스타일이 적용된다.

 

 

<style>  
	b{
            color: red;
            text-decoration: underline;
        }
</style>

b태그를 선택자로 정의하였고, 해당 문서에서 모든 b 태그는 정의한 빨간색, 밑줄 스타일이 적용된다.

 

 

 

 

2.id 선택자   

#id명{속성:값...}

태그중에 특정한 부분에 고유한 속성을 넣고 싶을 때 사용하는 선택자

 

 

<style>
#under{
            text-decoration: underline red;
            font-style: italic;
        }
        </style>

id명이 under으로 설정된 태그 부분만 기울임꼴+빨간색밑줄  스타일이 적용된다.

 

 

 

 

3. 전체선택자

*{속성:값...}

모든 요소들에 동일한 효과를 줄 때 사용하는 선택자

 

h2태그 밑의 모든 요소에 같은 속성을 부여하고 싶다면, * h2{  } 로 사용하면 됩니다.

 

 

 

 

4. class 선택자   

.class명{속성:값...}

미리 CSS로 디자인을 만든 후에 해당 디자인이 필요한 경우 여러 종류 태그에게 디자인을 적용하는 방식

  <style>
        .red{
            color: red;
        }
        .under{
            text-decoration: underline;
        }
    </style>

클래스 2개 만들었다.

 

 

<body> <p class="red under"> 내용 </p> </body>

 class속성이 red, under으로 2개 클래스 지정해주어 디자인이 2종류가 적용된다.

 

 

 

 

5. 선택자 우선순위

id선택자> class선택자> tag선택자 순으로 우선 순위를 가진다.

클래스선택자나 태그선택자로 스타일이 정의되어 있어도 특정 태그에 id선택자로 준 태그가 적용된다.

 

 

<p id="blue" class="red"> 내용 </p>

class의 빨간색이 적용되지 않고 id로 지정해둔 파란색이 적용된다.

 

 

 

조합선택자

조합 선택자는 기본선택자 2개 이상을 한 번에 사용하는 선택자

 

1. 그룹 선택자

선택자,선택자...{속성:값...}

여러 선택자를 그룹으로 묶는 기능

선언한 스타일이 중복될 때 그룹화 하면서 코드를 줄이는 방법이다.

<style>
td{color:red}
th{color:red}
</style>

 

다른 태그에 동일한 스타일이 적용된다. 

 

<style>
td,th{color:red}
</style>

간단히 그룹선택자로 묶을 수 있다.

 

 

2. 자식선택자

자식 선택자는 계층구조에서 바로 아래 오는 자식요소만을 선택한다.
선택자와 선택자는 ">"으로 구분한다.
선택자1 > 선택자2 {...} : 선택자1의 자식요소 선택자2만 선택

 

<style>
        p>span{
            text-decoration: underline;
        }
    </style>

p태그 아래에 있는 span태그에만 적용되었다.

 
 
 
 

3. 자손 선택자

자손 선택자는 계층 구조에서 하위에 오는 모든 자손을 선택한다.
선택자1 선택자2 {...} : 선택자1의 자손 중에 선택자2를 선택

 

.container > ul li {color:gray;}

자식 선택자, 자손 선택자를 조합했다.

container 태그 선택자의 자식 ul 의 자손 li에 CSS가 적용된다.

 

 

 

4. 인접 형제 선택자

인접 형제 선택자는 + 기호를 사용하며, 선택자가 같은 계층에 있을 때 바로 뒤의 선택자로 지정한다.

선택자1 + 선택자2 {...} : 같은계층의 선택자1 바로 뒤의 선택자2를 선택 

 

h1 + h2 {
    text-decoration: underline;
}

h1 태그 바로 뒤에 있는 h2 태그 하나만 CSS가 적용된다.

 

 

 

5. 일반 형제 선택자

~기호를 사용하여 두 선택자가 같은 계층에 있을 때 선택자1 뒤에 있는 모든 선택자2 태그를 지정한다. 

선택자1 ~ 선택자2 {...} 

 

h1 ~ h2 {
    text-decoration: underline;
}

h1 태그 뒤에 있는 모든 h2 태그에 CSS가 적용된다. 

 

 

 

 

 

'WEB > CSS' 카테고리의 다른 글

Box Model / content-box, border-box / background-clip / 배경 이미지 설정 태그  (1) 2022.05.31
넘치는 텍스트, 공백 표현하는 태그 : overflow, text-overflow, white-space  (0) 2022.05.30
목록태그 CSS : 리스트 블릿기호 변경, 들여쓰기/내어쓰기  (0) 2022.05.30
font-size : medium, smaller, larger, px, % / em, rem 비교 / 줄 바꿈, 글자 간격, 단어 간격  (0) 2022.05.30
CSS : display 태그 속성 - none, block, inline, inline-block  (0) 2022.05.30

티스토리툴바