| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
- 뭐임마
- 포기도 습관이 된다.
- 네카라쿠배
- 목록 태그
- h1~h6 태그
- ul 태그
- li 태그
- 패캠
- 첫 시작
- table
- 공부 기록용(비공개)
- 네카라쿠배 팁
- strong 태그
- form 입력양식
- HTML escape
- form 텍스트입력
- u 태그
- 뭐
- form 문법
- html 기본 태그
- br 태그
- p 태그
- 소프트웨어 장인
- 공부 기록용
- img 태그
- 왜?
- 프론트엔드 과정
- ATOM
- 의문
- ol 태그
- Today
- Total
끈기의 힘 : 뉴비에서 풀스텍으로
[인프런/생활코딩] 섹션2. 적용 순서_ 상속? 캐스케이딩? 본문
1. 상속
: HTML의 태그들, 즉 element들을 디자인할 때, 어떤 엘리먼트의 속성값을 줘서 효과를 주면 그 엘리먼트에 속해 있는 하위의 엘리먼트가 그 속성을 이어받게 되는 성질.
★ 주석 넣는 법 : /* */ 사이에 원하는 내용 넣기.
ex) ★ 무엇이 더 효율적인 선택인가? 주석에 있는 것처럼 따로 따로 css를 적용하는 것과
가장 외곽에 있는 html 하나만 적용하는 방식 중에서 말이다. 당연히 전체를 표현해줄 수 있는 HTML에서 배운 부모-자식 태그 관계처럼 부모의 컬러를 자식들이 물려 받는 ‘상속’의 표현이 더 효율적일 것이다. ★
즉, 일단은 html에 전체적으로 css를 적용하고 특정 부분에는 id 선택자를 활용하는 것이 훨씬 경제적이고 생산성이 높다고 할 수 있다. 다음 그림처럼 말이다. (더 적은 코드로 더 많은 일을 할 수 있게 되었다.)
★ 제대로 상속이 되었는 지 확인하는 법은 만든 웹사이트에서 F12를 눌러 페이지 소스를 검사해서 상속을 의도한 부분을 클릭하면 다음 그림처럼 오른쪽 하단에 Inherited from html 이라 뜨는 게 보일 것이다!!
본문에서의 가장 외곽에 있는 표현은 당연히 <body> 태그일 것이다. 여기에 css를 적용해보고자 한다. ex) body{border:1px solid red;} border는 테두리, solid는 깔끔한 단선이란 속성
★ 근데 여기서 중요한 점은! <body> 태그 하위 태그인 <h1>이나 <ul> <li> 태그에도 똑같이 테두리와 단선이 생겼어야 했는데 그렇지가 않았다. 왜 그럴까?
: 속성 by 속성이다. 즉, 속성마다 다르다. 어떤 속성은 상속되는 것이 유리하고 어떤 것은 그렇지 않은 경우가 있으므로 그렇게 동작된다. 즉, 여태동안 배운 ‘font’ ‘color’는 상속이 되지만, 테두리 ‘border’ ‘solid’ 등은 상속되지 않는다!! ★
그럼 어떤 속성이 상속되고 상속되지 않는지 궁금할 것이다.
https://www.w3.org/TR/CSS21/propidx.html
Full property table
www.w3.org
위 사이트는 CSS2 시절에 관한 상속여부를 확인할 수 있는데 별 차이 읎다.
★ 1행 5열에 보믄 inherited? 라고 보일텐데 거기에 속성마다 y or n가 뜨니 참고하자잉!
(테두리와 관련된 표현들은 거의 다 '상속'되지 않는 걸 확인 가능.)
2. 캐스케이딩(Cascading) 기능 ★
CSS(Cascading Style Sheet) 1994년 초 등장.(내가 태어난 년degree)
HTML엔 기본적인 디자인이 되어있다. <h1~6>나 <a> 태그 등. 시간이 지나며, 캐스케이딩 기능엔 사용자(User)도
‘자기’가 보고자 하는 웹페이지의 디자인에 대한 자기 결정권이 있어야 한다.라고 생각.
ex) 자기가 보는 웹페이지의 글씨를 키우거나, 원하는 색상으로 바꿀 수 있는 등
또한, 웹페이지를 만든 사람(Author)도 자기 결정권이 필요하다고 생각하게 됨.
즉, 웹브라우저, 사용자, 저자 이 3자가 서로 조화를 이뤄, 웹을 만들어 간다는 철학
-> 이 웹의 창시자들이 선택한 언어 ‘CSS’
조화의 대가 : 우선순위가 필요.
즉, 웹브라우저도 기존 디자인이 있고, 사용자도 디자인을 적용하고 싶고 저자도 디자인을 적용한다면 하나의 웹 페이지가 여러 디자인의 영향이 불가피. 그로 인한 문제점 : ‘우선순위’
★ 우선순위 규칙 ★
1) 위의 3자가 어떤 하나의 태그를 동시에 적용했다고 한다면 관계는
웹브라우저 < 사용자 < 저자 (일반적인 상식과도 같으니 외울 필요 없고 다음부터가 중요.)
이렇긴 한데, 사실 대부분의 웹브라우저 사용자가 직접 CSS를 수정할 수 있는 기능을 제공하지 않음.
3. 캐스케이딩 실습 ★★
: 하나의 태그에 여러 CSS 효과가 중첩되었을 때의 우선순위에 대한 규칙에 대해 알아보자.
이렇게 여러 효과가 중첩이 되었을 때, 어떤 색이 이길 것(어떤 것이 우선순위)이냐?
결론적으로 말한다면,
1) style attribute
2) id selector
3) class selector
4) tag selector 순으로 간다. 스타일 속성이 다 이긴다.
그렇다면, 왜 그럴까? 몰라도 상관없지만 ‘왜?’라는 생각을 갖고 있는 게 중요.
근데, 이 선택자들 우선순위를 다 외우기는 힘들다. 그렇기에 규칙을 알아보자.
우선, li{color:red;} #idsel{color:blue;} .classsel{color:green;} 중 뭐가 더 포괄적이냐? li 태그가 가장 거친 표현이다. 무슨 말이냐면, 가장 포괄적인 규칙이라고 보면 된다. 그러니까 li가 지는 것이고, 그다음 class 선택자는 원하는 태그들을 여러 개 선택할 수 있으니 태그 선택자보단 더 정교함. 그다음 더 정교한 선택자는 ‘id’ 선택자. 특정한 부분에만 효과를 넣을 수 있으니 id 속성값은 중복되면 안되니까, id 선택자가 좀 더 구체적인 선택자.
style이라 하는 속성에 들어있는 CSS는 id 선택자와 동등한 위치에 있어서 비슷해 보일 순 있지만, style이 더 구체적인 속성이다. 즉, 일반적인 것이 우선순위가 제일 낮고 구체적인 것의 우선순위가 높다. 그래야 생산성이 높아진다.
ex) 만들었던 것처럼 모든 li 태그에 대해 컬러를 빨강으로 하고, 특정 부분에 따라 다른 디자인을 적용하는 것이 훨씬 일을 더 줄이는 것이다. 바로 이러한 것과 관련된 것을 ‘캐스캐이딩’이라 한다.
★★ 어떤 선택자를 쓰던 간에, 모든 우선순위를 뛰어넘을 방법이 있다? 뿌쓩빠쓩 ㅂㅅTV
ex) li 태그를 우선순위로 표현하고 싶다면 다음과 같이 하면 된다.
li{color:red !important;} 원하는 속성과 속성값 뒤에 !important; ‘느낌표important’를 적어주기만 하면 그게 제일 먼저
나오게 된다!!!!!!! ★★ 근데 주의할 점은 속성과 속성값 뒤에 새미콜론( ; )이 있다면 !important가 인식되지 않는다!!
♥ !important는 근데, 좋은 방법이라 할 수 없다. 너무 어렵고 복잡하다면 쓸 수 있지만, 웬만하면 우선순위를 잘 활용하여 코딩하는 것이 모두에게 좋은 방법이니까 열공하자! ♥
