CSS-적용방법 & 선택자

3 분 소요

CSS를 HTML에 적용하는 3가지 방법

외부 스타일 시트
- HTML 문서 내에 CSS가 포함되어 있는 것이 아니라 .css파일을 따로 만들어 html문서 내에 head태그부분에 link태그를 통해 불러오는 방법
```
 <head>
   <meta charset="utf-8">
   <title>css 기본 문법</title>
   <link type = "text/css" rel = "stylesheet" href = "mystyle.css">
 </head>
 <body>
        
 </body>
```

내부 스타일 시트

외부 스타일 시트와 다르게 html문서 내에서sytle태그를 통해 css를 정의하는 방법이다.

외부 스타일 시트와 동일하게 head 태그 내에서 정의한다.

 <head>
   <meta charset="utf-8">
   <title></title>
   <link rel="stylesheet" href="/css/master.css">
   <style>
     p { color : 빨강;}
     h1 { color : 파랑;}
     table { background-color : 노랑;}
     ul { background-color : 파랑;}
   </style>
 </head>
 <body>
   <p>하하호호</p>
   <h1>호호하하</h1>
   <table>
     <tr>
       <td>헤이</td>
       <td>하이</td>
     </tr>
     <tr>
       <td>호이</td>
       <td>후위</td>
     </tr>
   </table>
   <ul>
     <li>호호호호</li>
     <li>쿠쿠</li>
   </ul>
 </body>

인라인 스타일 시트
- 위의 두 방법과는 다르게 이건 각각의 태그 안에서 직접 css를 정의내리는 방법이다.
- 태그 안에서 sytle속성을 통해 정의한다.
```
 <head>
   <meta charset="utf-8">
   <title></title>
 </head>
 <body>
   <p style= "color : red;">하하호호</p>
   <h1 style = "font-family : serif;">호호하하</h1>
 </body>
```

선택자

앞으로 90% 이상으로 비중을 차지하여 쓰일 선택자는 3가지이다.
선택자는 html문서에 있는 정보를 선택하여 css문을 적용시킬 때 쓰인다. 그래서 보통 html 문서의 head태그에 위치한다.

타입선택자 (태그 선택자)
- html의 태그이름을 사용한 선택자이다. (위의 내부 스타일 시트 예시코드를 참고하면됨)
아이디 선택자
- 선택자 중에서 가장 많이 쓰이는 선택자로 말그대로 html 태그 내의 id속성을 집어넣어 #을 통해 id명을 호출하는 원리이다.
클래스 선택자
- 아이디 선택자와 원리는 똑같으며 id속성이 아닌 class속성을 이용하며 호출할 때는 . 을 이용한다.
id와 class의 차이

→ id는 #id {}으로 가고 class는 .class {}으로 간다. → class는 무언가를 그룹핑, id는 어느 한가지대상을 식별한다. → class는 행정학과, 정외과 등등, id는 학번이라고 비유하면 이해하기 쉬움. → 그래서 id=”first”;라고 해놓았으면 더이상 first라는 id를 만들면 안된다. (예외처리에 능함) → 그래서 class는 포괄적이고 id는 타겟팅이 강함.

선택자 우선순위는 id → class → tag 이다.

      <head>
        <style>
          .vs {
            font-weight:bold;
          }
          #first {
            color : blue;
          }
          span {
            background-color : coral;
          }
        </style>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <p>Lorem ipsum <span id = "first";class="vs">java</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp <span class="vs">java</span> or incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <span class="vs">java</span> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commo<span class="vs">java</span> do consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse <span class="vs">java</span>cillum <span class="vs">java</span> dolore eu fugiat nulla pariatur. Excepteur si <span class="vs">java</span> nt occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum <span class="vs">java</span>.</p>
      </body>

색상

표현방법

이름표현
- h1 {color : red;}
10진수 표현
- h1 {color : rgb(153, 102, 25)}
16진수 표현
- h1 {color : #ffd800}
퍼센트 표현
- h1 {color : rgb(60%, 40%, 10%)}

폰트

표현방법

font-family → 텍스트의 폰트를 설정할 때 쓰임.
```
 p {
   font-family: "Times New Roman", Times, serif;
 }
```
- 위와 같이 만약 첫번 째로 쓴 속성값이 클라이언트 컴퓨터에 지정되지 않았을 수도 있기 때문에 뒤에 여러 속성값을 쓰는 것이 좋다.
font-style
- 이건 그닥 중요하진 않으나 헷갈릴 수 있는데 그저 해석으로만 보면 폰트설정은 font-style일 것 같으나 이건 그저 이텔릭체 설정을 도와주는 속성이다. 혼동 x
font-weight
- 이건 글씨 굵게할지 설정하는 속성
```
 p {
 font-weight : bold;
 }
```
font-size
- 말그대로 폰트의 크기 설정
```
 p {
 font-size : 12pt;
 }
 .first {
 font-weight : 40px;
 }
 p {
 font-weight : 200%;
 }
```
- 위 세가지만 구분하면 되는데 12pt는 가장 기본으로 12포인트 글씨를 말하는거고 40px는 글씨의 높이 40px라는 뜻이다. 200%는 부모태그인 body태그의 글씨보다 2배 키운다는 의미이다.

텍스트 스타일 설정

※ 가장 많이 쓰이는 3가지로 구분하여 설명하자

color
- 앞서 많이 나왔듯 글씨의 색깔을 설정할 때 쓰이는 속성
text-align
- 텍스트의 수평정렬을 지정한다.

    <head>
    <style>
    h1 {
      text-align: center;
    }
    p.date {
      text-align: right;
    }
    p.main {
      text-align: justify;
    }
    </style>
    </head>
    <body>
    <h1>CSS text-align Example</h1>
    <p class="date">May, 2014</p>
    <p class="main">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
    <p><b>Note:</b> Resize the browser window to see how the value "justify" works.</p>
    </body>

3, text-transform

대소문자 변환을 지정한다.

    <head>
    <style>
    div.a {
      text-transform: uppercase;
    }
    
    div.b {
      text-transform: lowercase;
    }
    
    div.c {
      text-transform: capitalize;
    }
    </style>
    </head>
    <body>
    <h1>The text-transform Property</h1>
    
    <h2>text-transform: uppercase:</h2>
    <div class="a">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    
    <h2>text-transform: lowercase:</h2>
    <div class="b">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    
    <h2>text-transform: capitalize:</h2>
    <div class="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    
    </body>

CSS 우선순위 - 상속
- 상위에서 적용한 스타일은 하위에도 반영된다.
- 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.
- 하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생긴다.
- 예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있다.
- 그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않는다.

Twitter Facebook LinkedIn

GreatLaboratory

CSS-적용방법 & 선택자

CSS를 HTML에 적용하는 3가지 방법

선택자

색상

폰트

텍스트 스타일 설정

공유하기

댓글남기기

참고

NestJS (2)

NestJS (1)

스레드의 동작 (feat. Python)

Kafka