190528 HTML/CSS 학습 노트 - 2

1. 좋은 id, class 이름 짓는 Convention이 있으니 찾아서 사용하도록 하자

 

+ 지인으로부터 도움받은 링크 ↓

[CSS] 디버깅 시간을 절약 할 수있는 CSS 명명 규칙

[코드스쿼드] CSS 클래스와 네이밍

2. id, class 사용은 팀 or 개인이 정한 규칙을 따르면 된다.

 

3. style을 HTML 페이지에 적용하는 세 가지 방법

 

inline

- HTML 태그 안에 바로 적용하는 방법

- inline 적용 법이 같은 속성 중 가장 우선순위이다.

<span style="color:red;"> hello world </span>

 

internal

- head 태그 안에 넣는 방법

<style>
	span {
    	color: red;
        }
</style>

 

external

- css 파일을 만들어 link 태그로 적용하는 방법

- 유지 보수가 쉬워 가장 많이 사용한다

<link rel="stylesheet" type="text/css" href="main.css" />

 

4. CSS 상속

상위 설정된 스타일을 하위에서도 쓴다 라는 개념. 재사용 측면에서 유용하다.

즉 부모 태그에 적용된 스타일을 자식 태그에도 적용되게 하자.

 

border나 padding과 같은 배치와 관련된 속성은 상속에 영향을 받지 않고, color 나 font-size는 영향을 받는다.

 

5. 캐스캐이딩(Cascading) : computedstyle이 결정되는 방식

CSS는 여러 가지 스타일 정보를 기반으로 최종적으로는 '경쟁'에 의해서 적절한 스타일이 반영된다.

 

선언 방식에 따른 차이

inline > internal > external 

span {
	color : red;
    }

span {
	color : blue;
    }

위 경우처럼 동일한 경우 blue가 나중에 선언되었으므로 blue가 출력된다.

 

body > span {
	color : red;
    }

span {
	color : blue;
    }

이 경우에는 body 가 더 구체적인 코드이므로 red가 출력된다.

 

id값과 class 중 id 스타일이 우선시 된다. 

#a와. a 중 #a가 id 값을 나타낸다.

 

자세한 검색은 'css specificity'를 찾아보자. Element별로 점수를 매기는 기준을 알려준다.

 

즉, 캐스캐이딩은 선언된 코드 중 우선순위에 따라 적용되는 것을 의미한다.

 

6. Selector를 활용한 DOM 탐색

css selector는 HTML의 요소를 tag, id, class, html 태그 속성 등을 쉽게 찾아주는 방법.

 

element에 style을 지정하기 위해서, 3가지 기본 선택자를 사용할 수 있음.

선택자는 head 태그 안에 들어간다. 

 

1. tag    2.id    3.class

 

1. tag

시작 태그에 있는 tag를 적어 스타일을 적용 

 

2. id

id 태그에 있는 value를 선택할 땐 #value로 적용한다.

 

3. class

class 태그에 있는 value를 선택할 땐. value로 적용한다.

 

같이 사용도 가능하다.

div.myclass {color : red;}
div#myclass {color : blue;}

그룹 선택도 가능하다

h1, span, div {color : red;}
h2, span, div#if {color : red;}
h3.span, div.classname {color : red;}

하위 요소 선택 (공백)

#jisu span {color : red;}

<div id="jisu">
	<div>
    	<span> span tag </span>
    	</div>
    <span> span tag 2 </span>
</div>

자식 선택 (>)

#jisu > span {color : red;}

<div id="jisu">
	<div>
    	<span> span tag </span>
    	</div>
    <span> span tag 2 </span>
</div>

n번 째 자식 요소를 선택 (nth-child)

#jisu > p:nth-child(2) {color : red;}

<div>
	<h2>단락 선택</h2>
    <p>첫 번째 단락입니다</p>
    <p>두 번째 단락입니다</p>
    <p>세 번째 단락입니다</p>
    <p>네 번째 단락입니다</p>
</div>

css 작업할 때 cheatsheet를 활용해 작업할 때 사용해도 좋을 것 같다.