3. CSS - (1)

박하린·2021년 5월 14일

💻 3-1. CSS 선언 방법

✍️ CSS 의 구성

span {
color : red;
}

span : selector (선택자)
color : property
red : value

✍️ style을 HTML에 적용하는 세가지 방법

1. inline

HTML 태그 안에다 적용한다.
다른 CSS 파일에 적용한 것 보다 가장 먼저 적용된다.

<p style="border : 1px solid gray; color : red; font-size : 2em;">

2. internal

style 태그로 지정한다.
구조와 스타일이 섞이게 되므로 유지보수가 어려운 단점
별도의 CSS 파일을 관리하지 않아도 되며 서버에 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없다.

<head>
	<style>
  	p {
  		font-size : 2em;
  		border : solid gray;
  		color : red;
  		}
	</style>
</head>

<body>
  <div></div>
<body>

3. external

외부파일 (.css)로 지정하는 방식
CSS 코드가 아주 짧지 않다면 이 방법으로 구현하는 것이 가장 좋다.
internal 코드와 같은 css 코드를 구현하고, style.css 와 같은 별도의 파일로 만든다.
이후에 아래처럼 link 태그로 추가

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    ....
  </body>
</html>

4. 우선순위

inline
internal 과 external 동등 (-> 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.)

💻 3.2 상속과 우선순위 결정

✍️ CSS 상속

MDN CSS 계단식 및 상속
계단식 (Cascade)
- 동일한 우선순위를 갖는 두 규칙이 적용될 때, CSS에서 마지막에 나오는 규칙이 사용된다.
우선순위 (Specify)
- 동일한 요소에 다른 선택자의 규칙이 적용될 때, 선택자의 우선순위에 따라 적용된다.
  - 우선순위 : class > 요소(태그)
상속 (Inheritance)
- 부모 요소에서 설정된 일부 CSS 속성 값은 자식 요소에 의해 상속되며, 일부는 상속되지 않는다.
- box-model 이라고 불리는 속성들 (width, height, margin, padding, border)와 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 속성되지 않는다.
- 이렇게 CSS 는 꽤 smart 하다..

✍️ cascading

MDN Specificity

선언방식에 따른 차이

body > span {
	color : red;
} // 이경우에는 마지막에 나오는 것보다 위에 것이 더 구체적으로 표현되었기 때문에 위의 style 적용

span {
	color : Blue;
}

ID > CLASS > ELEMENT 순으로 반영

📎 < CSS >

#a {
	color : red;
} // ID
.b {
	color : blue;
} // CLASS
div {
	color : green;
} // ELEMENT

📎 < HTML >

<div id="a" class="b">
  text...
</div>

위의 경우에 결과적으로 color 는 red 적용된다.

우선순위 : id > class > element

💻 3.3 CSS Selector

MDN CSS Selector link
HTML의 요소를 tag, id, class, html 태그 속성 등을 통해 쉽게 찾아주는 방법이다.
규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴

✍️ 3가지 기본 selector

1. tag(type) selector

span {
	color : red;
 }

2. id selector

#spantag {
	color : red;
}

3. class selector

.spanClass {
	color : red;
}

✍️ attribute selector

element에 특정 속성이 있는지에 따라 선택

a[title] { }

또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택

a[href="http://example.com"] {}

✍️ pseudo-class selector

< HTML >

<div class="harin">
  <p>1. p1</p>
  <span>2. span1</span>
  <p>3. p2</p>
  <span>4. span2</span>
  <p>5. p3</p>
</div>

nth-child : 부모 element의 모든 자식 element 중 n번째

< CSS >

.harin > p:nth-child(5) {
	color : red
    }

결과 :
result

nth-of-type : 부모 element의 특정 자식 element 중 n번째

< CSS >

.harin > p:nth-of-type(2) {
	color : red;
}

결과 : result

✍️ Combinator

Descendant Combinator
- (공백)
- 모든 자손 element에 적용
Child Combinator
- >
- 바로 아래의 자식 element 에게만 적용

박하린

깃허브: https://github.com/khakaa

이전 포스트

2. HTML

다음 포스트

3. CSS - (1)

💻 3-1. CSS 선언 방법

✍️ CSS 의 구성

✍️ style을 HTML에 적용하는 세가지 방법

1. inline

2. internal

3. external

4. 우선순위

💻 3.2 상속과 우선순위 결정

✍️ CSS 상속

✍️ cascading

선언방식에 따른 차이

ID > CLASS > ELEMENT 순으로 반영

💻 3.3 CSS Selector

✍️ 3가지 기본 selector

1. tag(type) selector

2. id selector

3. class selector

✍️ attribute selector

✍️ pseudo-class selector

✍️ Combinator

2. HTML

3. CSS - (2)

0개의 댓글