비전공자 IT 코딩독학 #13 : CSS 선택자의 우선순위 및 캐스케이딩

안녕하세요 길잃은문돌이입니다. :D 다들 12편까지 잘 따라오셨는지?? 오늘은 조금 중요한 파트를 공부를 해야할 것같습니다. 이전에도 이야기 드린것 처럼 점점 어려워 지는 느낌이 없지 않아 있는데, 오늘은 점점 선택자의 심화 내용인

"과연 여러가지 선택자를 동시에 쓴다면 어떻게 될까?" 라는 질문에서 시작하는 선택자의 우선순위에 대해서 이야기를 해보고자 합니다. 이는 캐스캐이딩이라고도 하며, CSS가 HTML을 이기고 디자인 특화 마크업언어로 자리 맺음을 하게 만든 주요한 기능이라고 할 수 있죠.

비전공자 IT 코딩독학 # 13 : CSS 선택자의 우선순위 및 캐스케이딩 시작하죠.

 

혹시 못보신 분들을 위해서 12편도 들고왔습니다!!

 

비전공자 IT 코딩독학 #12 : CSS 기초 2편 선택자 / 폰트

---

 

 

1. 캐스캐이딩(cascading)

 

웹브라우저는 html을 해석하는 기계이며, 기본적으로 html에 기본적인 디자인이 되어있다. h1, h5이며,

 

웹브라우저와 사용자와 저자의 조화가 되어야한다. 하지만, 이러한 조화를 위해서는 '우선순위'를 정해야한다.

웹브라우저도 디자인을 할 수 있고 css코드도 디자인을 할 수 있고 사용자도 웹브라우저를 통해서 자신이 보고있는 브라우저의 디자인을 바꿀 수 있다. 

 

 

웹브라우저 < 사용자 < 저자

 

---

2. 선택자의 우선순위

 

 

하나의 html 태그에 여러가지 디자인이 섞였을때, 우선순위를 부여하는 방법,  

 

<li>html</li>

<li id ="idsel" class="classsel" style= "color:powderblue">css</li>

<li>java</li>

 

일때, 

 

여러가지 중첩한 css속성을 넣는다면, 어떻게 될까?

 

<style>

li{color:red;}

#idsel{color:"blue"}

.classsel{color:"green";}

 

id와 class와 style에 li선택자에 각각의 컬러를 넣는다면?

→ style이 이긴다.

 

그렇다면 , style을 뺀다면?

→ id가 이긴다.

 

그렇다면 id를 뺸다면?

→ class가 이긴다

 

즉, 

태그 선택자 < class선택자 < id선택자 < style HTML 태그 속성

 

일반적(포괄적)<  유일한(정교한)

 

어떤 선택을 하든, 모든 선택자를 뛰어 넘을 수 있는 우선순위를 줄 수 있다
→ !important;

 

즉, 태그 선택자(li)에 !important;를 준다면, id, style태그 속성 을 이긴다. 

 

---

 

3. inline 레벨 방식, block 레벨 방식

 

자기 자신만을 공간을 차지  : inline 레벨

자기 자신 + 화면 전체 공간을 차지 : block 레벨

 

*display속성* 을 사용하면 inline을 block으로, block을 inline으로 바꿀 수 있다
inline → block 
ex)
<style>
a{
display: block;
}
</style>

 

※ a태그는 기본적으로 inline 레벨이다.

 

 

block → inline
ex)
<style>
h1{
display:inline;
}
</style>

 

※h1은 기본적으로 block레벨이다.

 

---

 

4. 박스 모델 

 

박스모델이 css중에서 가장 많이 사용한다.

여백, 위치를 조정하는 과정 모든 엘리먼트는 바깥을 구성하고 있는 박스와 같이 보이지 않는 선이 있기에, 박스모델이라 한다.

 

1) 테두리 만드는 법 

<sytle>

p{

border-width:10px;

border-style: solid;

border-color:red;

}

</style>

★축약형★
p{
border: 10px solid red;
}

 

 

 

padding :  안쪽의 간격 (겨울에 패딩을 입는다, 입으면 몸이 부풀어 오른다)

margin : 바깥쪽의 간격

※inline 레벨에서는 weight와 height 값이 무시 된다.

 

---

5. 박스사이징

 

이전에 이야기 한것 처럼, inline이든 block이든 모든 엘리먼트는 보이지않는 선이 둘러 쌓인 박스를 가지고 있다.

 

기본적으로, 컨텐츠 영역이라는게 있는데,

기본적으로 width와 height는 콘텐츠 영역의 크기를 말한다.

 

 

 

지금 여기서의 위에 hello의 컨텐츠 영역은 밑에 hello보다 컨텐츠 영역이 길다.

 

여기서 두개의 엘리먼트에

width: 150px을 주게 된다면, 위에서 말한것과 같이 콘텐츠 영역의 길이가 150px로 수정이 된다

 

 

 

전체적인 박스 크기는 다르더라도 width:150px을 줬기 때문에 안에 흰색 콘텐츠 영역은 150px로 동일하게 된다. 하지만 직관적이지 않기 때문에 직관적이기 위해서 

 

box-sizing:border-box를 사용해서 

 

위와 같은 박스 자체를 맞출 수 있다. 사실상 이러한 형태는 극단적이긴 하지만, 테두리의 차이가 얼마없는데 콘텐츠 영역 때문에, 차이가 나는 경우도 있다고 합니다.

 

오늘은 오합지졸처럼 여러가지를 동시에 배웠는데, 좀 내용이 미약할 수도 있네요.. 저도 낙서를 하면서 강의도 듣고 이해도 해야하다보니, 나름대로 정리를 하긴 했지만, 지금 목차를 나누는 과정에서 조금 오합지졸 느낌이 있네요. 조금 더 신경써서 비전공자 IT 코딩독학 14편을 짜보도록 하겠습니다 :D