개발 공부 기록하기

DAY 4. CSS 기본 선택자 본문

프밍/CSS

DAY 4. CSS 기본 선택자

태영(泰伶) 2022. 8. 25. 23:12

Universal Selector (전체 선택자)

* { 속성: 속성값; }

  • 문서의 모든 요소에 style 적용할 때 씀.
  • browser 기본 style을 초기화하고 싶을 때도 씀.

            ex, browser에 기본으로 되어 있는 margin & padding을 0으로 지정

 

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>상품 소개 페이지</title>
         <style>
            * {
               margin: 0;
               }
         </style>
      </head>
      <body>
         <img src="images/cat.jpg">
      </body>
   </html>

 

 

 

Type Selector (타입 선택자)

태그명 { 속성: 속성값; }

  • 그 tag를 쓴 모든 곳에 style 적용

 

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>상품 소개 페이지</title>
         <style>
            p {
               font-style: italic;    /* 이탤릭체 */
               }
         </style>
      </head>
      <body>
         <div>
            <h1>레드향</h1>
            <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
            <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
            <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
         </div>
      </body>
   </html>

 

 

 

Class Selector (클래스 선택자)

.클래스명 { 속성: 속성값; }

 

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>상품 소개 페이지</title>
         <style>
            p {
               font-style: italic;   /* 이탤릭체 */
            }
            .accent {
               border: 1px solid #000;   /* 테두리 */
               padding: 5px;             /* 테두리와 내용 사이의 여백 */
            }
            .bg {
               background-color: #ddd;   /* 배경색 */
            }
         </style>
      </head>
      <body>
         <div>
            <h1 class="accent bg">레드향</h1>
            <p>껍질에 붉은 빛이 돌아<span class="accent">레드향</span>이라 불린다.</p>
            <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
            <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
         </div>
      </body>
   </html>

 

 

 

id Selector (id 선택자)

#아이디명 { 속성: 속성값; }

  • 웹 문서에서 한 번만 적용할 수 있음.      cf, 클래스 선택자(class selector)는 여러 번 가능.
  • 주로 웹 문서 레이아웃 관련 style이나 웹 요소에 JAVASCRIPT 프로그램을 쓰면서 요소 구별할 때 씀.

 

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>상품 소개 페이지</title>
         <style>
            #container {
               width: 500px;			/* 너비 */
               margin: 10px auto;		/* 중앙 배치 */      
               padding: 10px;			/* 테두리와 내용 사이 여백 */
               border: 1px solid #000;	/* 테두리 굵기와 색깔 */
            }
         </style>
      </head>
      <body>
         <div id="container">
            <h1>레드향</h1>
            <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
            <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
            <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
         </div>
      </body>
   </html>

 

 

 

Group Selector (그룹 선택자)

선택자1, 선택자2 { 속성: 속성값; }

 

<!Doctype html>
   <html>
      <head>
         <meta charset="UTF-8">
         <title>상품 소개 페이지</title>
         <style>
            h1, p {
               text-align: center;      /* 중앙 정렬 */
                  }
         </style>
      </head>
      <body>
         <div>
            <h1>레드향</h1>
            <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
            <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
            <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
         </div>
      </body>
   </html>
저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

DAY 5 - 스타일 상속  (0) 2022.08.27
DAY 5. 캐스케이딩 스타일 시트(CSS) 정의 & 스타일의 우선 순위  (2) 2022.08.27
DAY 4. 스타일 속성 & 속성값  (0) 2022.08.25
DAY 4. 스타일 & 스타일 시트  (0) 2022.08.25
DAY 4. 웹 문서에 디자인 입히기  (0) 2022.08.25
'프밍/CSS' Related Articles more
Comments