[CSS] HTML에 디자인을 입혀보자 :: <style> 태그

HTML 으로만 구현된 무미건조한 문서에 CSS 는 디자인 효과를 입혀준다.

 

HTML <style> 속성을 사용하면, CSS <style> 태그와 동일한 효과를 줄 수 있는데, 왜 우리는 HTML 으로만 구현하지 않고

CSS 언어를 또 배우려는 것일까?

 

 

그 이유는

1. HTML이 구조에만 전념하게 하기 위해

2. CSS로 디자인 하는 것이 훨씬 효율적이기 때문에

네이버, 구글과 같이 대기업인 경우에는 HTML 그 자체로도 상당히 구조가 복잡하기 때문에 HTML 문서에 디자인을 입히는 것에는

한계가 있다. 예를들어 십만개의 a 태그에 style 속성을 일일히 십만번 적용해야 한다면 개발자들은 다 퇴사할거다 ..

 

(ex) <a href="1.html" style="color:red"> 브리 </a> 

       // 위 내용이 sytle 속성

(ex) <style> a {color:red;} </style>

       // 위 내용이 style 태그

 

 

추가로 하나의 속성에 대해서 여러개의 style 효과를 넣을 수 있는데, 이런 경우에는 세미콜론(;) 을 사용한다.

세미콜론이 각각의 구역을 구분해주는 역할을 한다.

(ex) <sytle>  a {color:red; background-color:black;} </style>

 

---

How to find CSS property?

 

HTML 에서 배웠던것과 동일하게 우리는 CSS 의 모든 속성을 외울 수 없다. 우리에게는 구글이 있다.

'css text size property', 'css text center property', 'css text align property' 등

키워드 입력하면 어떤 속성을 사용해야 하는지 알려준다.

 

 

---

tag vs class 선택자 vs id선택자

 

HTML 에는 선택자라는 요소가 있다.

여러 태그에 대해 같은 효과를 주고 싶을때 group 으로 묶어야한다.

 

grouping 하기 위한 두가지 방법은 class 와 id 값을 설정하는 것

 

(ex) <a href="1.html" class="red"> 브리 </a>

(ex) <a href="2.html" id="blue"> 브리 </a>

 

red class 에 CSS 효과를 주기 위해서는 <style> .red {color=red;} </style>

blue id 에 CSS 효과를 주기 위해서는 <style> #id {color=blue;} </style>

class 선택자를 지칭하기 위해서는 온점(.) 을, id 선택자를 지칭하기 위해서는 샾(#)을 사용한다.

 

클래스 간 우선순위도 있다.

1. id > class > element(일반 태그) 순으로 우선순위가 높다

2. 최신 작성된 코드가 우선순위가 높다

 

 

오늘은 어쩌다 보니 이론 내용만 학습했다.

내일은 웹사이트에 직접 CSS 요소를 넣어보는 걸로 !