0316_Web page를 꾸미는 역할, CSS

CSS (Cascading Style Sheets)

기존 HTML이 정보에 집중하는 언어라면, CSS는 디자인적 요소를 책임지는 별도의 언어이다.

HTML로 웹 페이지에 들어갈 정보를 일단 입력하고 나면, CSS를 통해 사용자로 하여금 간편하고 보기 좋도록 페이지를 꾸며준다.

 

도입 배경을 간단히 설명하면 다음과 같다. 원래는 HTML 의 기존 틀 안에서 스타일적 요소를 넣어 페이지를 꾸미다 보니 정보 요소와 디자인적 요소가 혼재되어 코드가 지저분해지고 용량이 커지며 사용자들이 많아질수록 불편을 겪을 수 밖에 없는 구조가 되었는데, 이런 문제를 해결하기 위해 새로운 언어를 개발하였고 그게 바로 CSS이다.

 

장점 CSS 덕분에, 코드의 중복성을 제거하고 /  웹페이지의 유지 및 보수가 용이해지고 / 코드 가독성이 높아졌다. /

 

코드 사용 

 

1. 스타일 태그

 

다음 사진을 비유로 간단히 정리하면,

(사실 그냥 제니가 예뻐서 가져왔다ㅎ)

<style>
    jennie's s20 {
     color : red 
     }
</style>

{전체}를 declaration(효과)

- 제니폰을 selector(선택자)

- color을 property(속성)

- red를 value(값)

으로 지정

 

property속성으로 여러 개가 함께 들어갈 수 있고, 띄어쓰기로 각 속성들을 구분.

*모르는 속성값들은 검색하며 찾아보기 e.g. ) css text center property 이런 식으로 검색어 입력하기

 

2. 스타일 속성

속성은 선택자 사용 불필요.

 

우선순위

기본적으로 태그 선택자 < 클래스 선택자 < id 선택자 순이다. 단, 동급이면 마지막에 나온 효과가 적용된다. 즉, 포괄적인 것보다 구체적인 게 우선한다. id는 단 한번만 사용가능하며 중복 불가하다.

 

 

 

++ 추가