CSS_태그정리

Notice

Recent Posts

Recent Comments

Link

« 2024/11 »
일	월	화	수	목	금	토
					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

Tags more

Archives

Today

Total

관리 메뉴

Development Project

CSS_태그정리 본문

Language/HTML&CSS

CSS_태그정리

나를 위한 시간 2022. 1. 17. 21:48

CSS란?
- CSS
  - Cascading Style Sheets의 약자
  - HTML문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어
```
h1{color:red;}
```
- CSS의 필요성
  - HTML : 정보표현 및 디자인 => HTML은 정보표현 / CSS는 디자인 (유지보수 편의성 + 재사용성)
  - 웹 문서의 내용과 상관없이, 디자인만 바꾸거나 디자인은 그대로 두고 웹 문서의 내용 변경이 용이함
선택자 종류 개요
- 잠시생략...이걸 어케 적어...;;

전체 선택자 (*)
- HTML 페이지 내부의 모든 태그를 선택함 => html태그 및 head태그, title태그, style태그까지 선택함

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css test</title>
    <style>
      * {color : red;}
    </style>
  </head>
  <body>
    <h1>h1태그</h1>
    <p>p태그</p>
    <hr />
  </body>
</html>

태그 선택자
- HTML 페이지 내부에서 특정 종류의 태그를 모두 선택할 때 사용하는 선택자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        color: red;
      }
      h2,
      h3 {
        font-size: large;
      }
      p {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <h1>h1태그</h1>
    <h2>h2태그</h2>
    <p>p태그1</p>
    <p>p태그2</p>
    <h3>h3태그</h3>
  </body>
</html>

아이디 선택자와 클래스 선택자

아이디 선택자 (#)
- 특정한 id 속성을 가지고 있는 태그를 선택할 때 사용하는 선택자
- 정의한 후, 한 페이지에서 한번만 사용함 > 그렇지 않으면, 웹 표준 테스트에서 오류

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #header {
        width: 800px;
        margin: 0 auto;
        background: red;
      }

      #wrap {
        width: 200px;
        margin: 0 auto;
        overflow: hidden;
      }

      #aside {
        width: 600px;
        float: left;
        background: blue;
      }

      #wrap {
        width: 600px;
        float: left;
        background: green;
      }
    </style>
  </head>
  <body>
    <div id="header">
      <h1>div header아이디 속 h1태그</h1>
    </div>
    <div id="wrap">
      <div id="aside">
        <h1>div wrap아이디 속 div aside아이디 속 h1태그</h1>
      </div>
      <div id="content">
        <h1>div wrap아이디 속 div content아이디 속 h1태그</h1>
      </div>
    </div>
  </body>
</html>

클래스 선택자 (.)
- 특정한 클래스 속성을 가지고 있는 태그를 선택할 때 사용하는 선택자

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .select {
        color: red;
      }
    </style>
  </head>
  <body>
    <li class="select">클래스 select li태그 1</li>
    <li>단순 li태그 1</li>
    <li class="select">클래스 select li태그 2</li>
    <li>단순 li태그 2</li>
  </body>
</html>

속성 선택자

기본 속성 선택자
- 다른 선택자와 함께 사용하는 선택자

선택자 형태	설명
선택자[속성]	특정한 속성이 있는 태그를 선택
선택자[속성=값][속성=값]	특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      input[type="text"] {
        background: red;
      }
      input[type="password"] {
        background: blue;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="text" />
      <input type="password" />
    </form>
  </body>
</html>

문자열 속성 선택자
- 태그에 지정한 속성의 특정 문자열을 확인함

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img[src$="PNG"] {
        border: 5px solid green;
      }
      img[src$="JPG"] {
        border: 5px solid orange;
      }
    </style>
  </head>
  <body>
    <img src="../NAVER.PNG" width="250px" height="200px" />
    <img src="../KAKAOTALK.JPG" width="200px" height="250px" />
  </body>
</html>