CSS 강좌 /선택자 / 전체 선택자(Universal Selector)


전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다.

예를 들어
* {
  color: blue;
}

는 모든 요소의 색을 파란색으로 만듭니다.

다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉,
*.abc { color: blue; }
.abc { color: blue; }

는 같은 결과를 만듭니다.

예제

모든 요소의 글자 모양을 기울임꼴로 만드는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>대한민국</h1>
    <p>서울특별시</p>
    <ul>
      <li>강남구</li>
      <li>용산구</li>
    </ul>
  </body>
</html>

 

위코드 값의 결과는 다음과 같습ㄴ다.

 


               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

CSS 강좌 / 타입 선택자(Type Selector)

 

 

 

오늘은 홈페이지의 글자의 타입을 지정해 주는 타입 선택자에 관하여 학습합니다.

타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다.

예를 들어
p {
  color: blue;
}

는 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다.

예제

h1 요소의 글자색은 파랗게, blockquote 요소의 글자를 기울임꼴로 만드는 예제입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      h1 {
        color: blue;
      }
      blockquote {
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <h1>평화의 왕이시여!</h1>
    <p>죄와 두려움이 창궐한 세상에서 저희를 평화의 길로 인도하시는 목자시여!

불변하는 본성 불변하는 사랑의 하나님이여!
    </p>
    <h1>
    Proin 주의 무한하신 가슴으로 이 작은 인생들을 품어주시고 금년 한 해의 인생을 은혜로 인도하심을

믿고 즐거워하며 영광 돌리게 하옵소서.

오늘 예배에 성령의 기름 부음이 있어 마리아가 주님께 부은 향기름과 같이 향기로운 예배

되게 하시어 저희들의 예배를 흠향하시며 기도를 열납하여 주시옵소서.
    </h1>
    <p>
미약함에도 불구하고 저희는 예수그리스도 안에서 은통을 받은 사람들이라

이 은총을 감사한다면 진정 겸손한 감사와 신앙을 품고 저희에게 주어진 삶의 시간들을 경외와

순종으로 감당하게 하소서.
    </p>
    <blockquote>
   
    존귀하신 하나님!

말씀의 사자이신 담임목사님과 올 한 해도 함께 하셔서 성령으로 충만하게 하옵시며

말씀의 권위에 세우시며 영적인 은혜를 더하셔주소서.

육신의 건강, 가정의 행복, 사역의 승리를 주시옵소서.

이 시간도 그의 사역에 큰 열매 주시옵소서.
    </blockquote>
  </body>
</html>

 

위 코드 실행한 결과는

 

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

CSS 강좌 / 박스 모델(Box Model)

 

HTML 요소는 박스(box)로 이루어져 있습니다. 박스 위에 박스를 얹거나 박스들을 배열하여 문서를 만들어 나갑니다.

예를 들어 다음과 같이 코드를 작성했다면
<body>
  <header>
    <h1>Lorem</h1>
  </header>
</body>

body 박스 위에 header 박스가 있고, header 박스 위에 h1 박스가 있는 것입니다.

박스의 구성

하나의 박스는 바깥 여백 영역, 테두리 영역, 안쪽 여백 영역, 내용 영역으로 구성됩니다. 다음은 각 영역을 살펴보기 위한 간단한 예제입니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      h1 {
        margin: 30px;
        border: 30px solid #dddddd;
        padding: 30px;
      }
    </style>
  </head>
  <body>
    <h1>Box Model</h1>
  </body>
</html>

웹브라우저로 보면 아래와 같은 결과 값이 나옵니다.

 

 

 

각 영역의 구분이 명확하지 않으므로 IE의 요소 검사로 보도록 하겠습니다.

 

색이 있는 모든 영역이 h1 요소입니다. 각 색이 나타내는 영역은 다음과 같습니다.
•① : 바깥 여백 영역(Margin Area)
•② : 테두리 영역(Border Area)
•③ : 안쪽 여백 영역(Padding Area)
•④ : 내용 영역(Content Area)

각 영역을 꾸밀 때 사용하는 속성은 다음과 같습니다.
•바깥 여백 : margin 속성
•테두리 : border 속성
•안쪽 여백 : padding 속성
•박스의 가로 크기 : width 속성
•박스의 세로 크기 : height 속성
•박스의 크기 기준 : box-sizing 속성
•박스의 배경 : background 속성

               

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,