본문 바로가기
Web developer/[CSS]

[CSS_01][WEB] CSS 적용하기

by 보끔밥0130 2023. 2. 12.
728x90

웹 페이지를 디자인하는 것이 유지 보수가 쉽게 수행하도록 도와줍니다.

 

html에 css 명령어로 해석하라는 명령어를 수행해야 합니다.

 

html에 css를 삽입하는 방법

 

① <style></style> 태그 삽입

② style 속성을 사용

 

● 기본 문법

 

① 태그 삽입 방법

<style> 
	a {
     color: black;
     }
</style>

a {} 는 선택자 (Selector)

color:red는 선언 (Declaration)

color는 속성 (Property)

red는 값 (Value)

; (세미콜론) 적용한 효과 사이의 구분자

대상을 선택하고, 그 대상을 어떻게 디자인할지 선언하는 방식입니다.

 

② 스타일 속성 삽입

적용 하고 싶은 태그 안에 style = "color:red"

 

▶ Property 

 

text-decoration

밑줄 효과

 text-decoration: none;

 text-decoration: underline;

 

font-size:40px;

text-align: center;

 

▶ Selector

코드의 중복을 줄이기 위한 그룹화 class

 

class 속성은 여러개 값이 가능하고 띄어쓰기로 구분합니다.

 

id에 지정된 값은 단 한번만 등장해야합니다. (예외적인 값을 지정할 때 사용합니다)

 

우선 적용 순위

id > class > tag

 

태그 안에 

class = "g1 g2" id = "active"

 

.g1 {

   color:gray;

}

 

#active {

    color:red;

}

 

#active ol{

    color:red;

}

728x90

'Web developer > [CSS]' 카테고리의 다른 글

[CSS_05][WEB] css 코드의 재사용  (0) 2023.02.13
[CSS_04][WEB] 반응형 웹 - 미디어 쿼리  (0) 2023.02.13
[CSS_03][WEB] 그리드  (0) 2023.02.12
[CSS_02][WEB] 박스 모델  (0) 2023.02.12

댓글