CSS코딩 - 생활코딩 6~7강

주제 : CSS

 

교재 : 생활코딩 

 

내용 :

 

1. css 효과

 

1-1.효과2 : text-decoration: none;  : 텍스트의 모든 꾸밈(ex)밑줄)이 없어지게 된다.

 

1-2.효과3 : font-size:~px; : 텍스트의 크기를 px단위로 조절

 

1-3효과4 : text-align:~; : 텍스트의 정렬에 대한 설정(왼,중,오)

 

2. html 속성

class : class 속성이 적용된 텍스트들을 하나의 그룹으로 묶는다.

ex) class="saw"이라면 saw(보았던=접속했던) 텍스트를 하나의 그룹으로 묶게 됨. 

 

3.선택자 응용

3-1.saw{~} : class속성값이 saw인 텍스트를 ~과 같이 디자인한다.

ex) .saw{color:gray;} saw로 그룹화 된 텍스트의 색을 회색으로 설정 

 

3-2 class 속성 심화 : class 속성의 값 자리에는 여러개의 값이 들어올 수 있음, 띄어쓰기로 구분함

ex)< li><a href="2.html" class="saw active"> CSS</a></li>

*나아가 하나의 태그에는 여러개의 속성이 들어올 수 있음

*active라는 속성값은 버튼 클릭 등과 같이 '활성화한 요소'를 의미 

Q.여기에서는 머물고 있는(활성화한) 2.html 페이지에서 CSS를 빨간색으로 표시한다는 뜻으로 해석해도 될란지??

A.네 그렇게 해석하면 됩니다~

 

3-3.여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있음

saw와 actvie라는 선택자를 통해서 a태그 공동으로 제어!

 

3-4. 선택자 적용 순서

앞서 설명했듯이 a태그가 .saw와 .active라는 선택자에 의해 공동으로 제어 되는데, 웹페이지에서 확인하면 CSS가 빨간색으로 뜬다. 그 이유는 가장 최근에 한 명령이 우선적으로 적용되기 때문. 

 

3-5 id 선택자 

ex) class"saw active" -> class="saw" id="active"로 바꿔주고, <style>에 #active를 통해 적용 가능

-> 후순위가 .saw선택자임에도 불구하고, id선택자의 효과가 우선 배정 

 

3-6 선택자 사이의 우열

id 선택자 > class 선택자 > 태그 선택자 순으로 우선적용된다.

- id값은 단 한 번만 설정가능하기에 우선적용

- 구체적인 선택자가 포괄적인 선택자보다 우선적용된다.

->why? 포괄적인 선택자를 먼저 적용 후, 예외적 선택자 적용하는것이 효율적이기 때문

- 선택자의 등급이 같다면 앞서 언급했듯이 가장 최근(마지막)에 명령한 선택자 우선적용

w3c 선택자 우선순위

 

궁금증

*태그랑 텍스트랑 헷갈림

예를 들어 <li><a href="2.html" class="saw"> CSS</a><li>라는 코드와

<style> .saw{color.gray;} </style>라는 코드가 있다면 

볼드체 코드들이 꾸며주는 것은 HTML에 적용된 태그인지, HTML이라는 텍스트인지 정확히 정의하고 싶다..

Q. 이고잉샘은 a태그라고 하시는데, 스타일의 선택자가 기본적으로 태그(또는 속성)이며, 한 태그 안에 이미 태그가 적용되는 텍스트도 포함되어 있기에 태그에 스타일이 정의된다고 생각하면 되는걸까?

A. css 디자인 시에 태그가 기본적이며 효율적인 하나의 단위라고 생각하면 될 것 같다. CSS문법이 기본적으로 태그단위로 이루어지는 것 같고, 텍스트 단위의 꾸미기보다 태그단위의 꾸미기가 적용범위가 훨씬 넓으니까!