daniel7481의 개발일지

[웹 프로그래밍(풀스택)]CSS-FE 본문

Naver Boostcourse

[웹 프로그래밍(풀스택)]CSS-FE

daniel7481 2021. 12. 9. 19:24
반응형

1) CSS 선언 방법

선택자, property, value로 구성되어 있다. 

span(selector(선택자)) {

color(property):red(value);

}

대개 이런식으로 표현한다.

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

-inline

-internal

-external

같은 property에 다른 value를 넣었을 때 위 순서대로 적용이 된다(inline이 제일 우선이다)

inline

html 태그 안에다가 넣는 방법

<span style = 'color:red;'>

구조를 설명하는 코드에 CSS가 들어있으니 구조와 스타일이 섞여 있어서 유지 보수가 어렵고 관리하기가 어렵다

internal

head 안에 style을 바로 넣는 방법

장점: 별도의 CSS 파일을 관리하지 않아도 된다. 서버에 CSS 파일을 부르기 위해 별도의 브라우저가 요청을 보내지 않아도 됨

<style>
    div > p{
      font-size:20px;
     }
   </style>

external

별도의 CSS 파일을 만들어서 inlcude 시키는 방법. 제일 많이 사용한다.

<link rel="stylesheet" href="...">

2) 상속과 우선순위 결정 - 1

상속을 통해 자식이 부모의 속성을 상속 받을 수 있다. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  body > div{
    color: green;
    font-size : 20px;
    border: 2px solid slategray;
  }
  </style>
</head>
<body>
<div>
  <span>my text is upper!</span>
  <ul>
    <li>
      <span>my text is dummy</span>
      <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, quae odio totam rerum autem earum reiciendis dignissimos cum reprehenderit laboriosam ex nobis blanditiis dicta labore velit mollitia quas excepturi minus.</p>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

head 아래에 있는 body > div는 body 예하에 있는 div에 이러한 속성을 부여하라는 뜻이다. 보면 color, font-size 등은 상속이 되지만, border, padding 등은 상속이 되지 않는다.

노트: span은 본질적으로는 아무 의미가 없지만, div랑 같이 어떤 특성을 공유하는 요소를 묶을 때 사용할 수 있다. div랑 같은 용도이지만 div는 block이고 span은 인라인 요소다.

3) 상속과 우선순위 결정 - 2

cascading

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

선언 방식에 따른 차이

inline > internal > external(앞에서 제시한 바와 같다)

span{
	color : red;
}
span{
	color: blue;
}

위와 같이 동일한 노드를 가르킬 경우 나중에 선언한 것이 적용이 된다.

body > span{
	color : red;
}
span {
	color : blue;
}

위 상황에서 color : red가 적용된다. 더 구체적으로 설명한 것이 우선 순위에 있다.

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

#a {
	color : red;
}
.b {
	color : blue;
}

#a와 .b가 가르키는 노드는 같다. 위 결과는 red로 칠해진다. id값에는 더 높은 점수를 준다. 점수제로 규칙을 정하는데, id는 class보다 점수가 높다고 한다. 그렇다고 class에 더 구체적으로 설명이 되어 점수가 id랑 동등해졌다고 해도 id가 항상 우선순위에 있다.

3) CSS Selector

패턴 매칭을 시키는 방법이다. DOM트리에서 HTML의 요소를 tag, id, class, html 등을 통해 쉽게 찾아주는 방법. 

element에 style을 적용하기 위해 tag, id, class가 있다.

tag: <span>을 사용하면 모든 <span>에 영향을 준다

id: #id이름으로 찾을 수 있다.(모든 id에 적용이 되지만 한 html페이지에서 하나만 사용하는 것이 좋다) 또는 span#id로 표시할 수도 있다.

 #myspan{
 	color : red;
}
span#myspan {
	color : red;
}
<span id = 'myspan'>my text is upper!</span>

class: .class이름으로 찾을 수 있다. 혹은 element.class로 구체적으로 표시할 수 있다.

.myspan {
	color : red;
}
span.myspan {
	color : red;
}
<span class = 'myspan'>my text is upper!</span>

그룹 선택

h1, span, div { color : red }
h1, span, div#id { color : red }
h1.span, div.classname { color: red }

같은 스타일을 입히고 싶은 애들을 콤마로 묶어서 지정할 수도 있다.

하위 요소 선택(공백)

<div id = 'jisu'>
	<div>
    	<span> span tag </span>
    </div>
    <span> span tag 2 </span>
</div>
#jisu span { color : red }
#jisu > span { color : red }

첫 번째는 jisu id 하위에 있는 모든 요소를 선택하는 것이고(span tag와 span tag 2 전부 적용), 두 번째는 jisu id의 자식에 있는 span을 적용하는 것이다(span tag2만 적용).

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

테스트: 밑의 <p>태그 중 몇 번째가 빨간 색일까?

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    #jisu > p:nth-child(2) { color : red }
  </style>
</head>
<body>
  <div id='jisu'>
    <h2>단락 선택</h2>
    <p>첫 번째 단락</p>
    <p>첫 번째 단락</p>
    <p>첫 번째 단락</p>
    <p>첫 번째 단락</p>
  </div>
</body>
</html>

직접 확인해본 결과, 첫 번째 단락이 빨간색으로 칠해졌다.

생각해보기

p:nth-child와 p:nth-of-type의 차이점은?

전자는 종류와 상관없이 n번쨰 요소를 적용하고, 후자는 앞에 주어진 element type(p)인 요소들 중에서 n번째 요소를 적용한다. 위 예제를 예로 들면 nth-child(2)가 첫 번째 단락에 적용됬는데, 이 이유는 #jisu에 h1인 요소를 카운트 했기 때문이다. nth-of-type을 적용하면 nth-of-type(2)는 두 번째 단락에 적용된다.

반응형

'Naver Boostcourse' 카테고리의 다른 글

[웹 프로그래밍(풀스택)]CSS-FE(3)  (0) 2021.12.10
[웹 프로그래밍(풀스택)] CSS-FE(2)  (0) 2021.12.09
[웹 프로그래밍(풀스택)]HTML-FE  (0) 2021.12.08
[웹 프로그래밍(풀스택)]Web 개발의 이해(Summary)  (0) 2021.12.08
[웹 프로그래밍(풀스택)]Web 개발의 이해- FE/BE(4)  (0) 2021.12.08
'Naver Boostcourse' Related Articles more