티스토리 뷰

Web/HTML & CSS

6강 : CSS 기본1

개발을해보자 2020. 2. 28. 02:50

6-1. 선택자란?

특정 태그를 선택하여 해당 태그의 속성을 변경할 때 사용한다.

보통 style 태그 안에서 선택자에 속성을 부여한다.

 

선택자의 자세한 사용법은 다음에 나온다.

 

 

6-2. tag 선택자

특정 태그를 선택하여 CSS 속성을 적용한다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      div {
        background-color: #eeee33; border:5px solid #ffd800;
      }

      h1 {
        background-color: #00ff21;
      }
    </style>
</head>
<body>
  <h1>제목 입니다.</h1>
  <p>본문 입니다.</p>

  <div>
    <h1>제목 입니다.</h1>
    <p>본문 입니다.</p>
  </div>

  <div>
    또 하나의 DIV 입니다.
  </div>
</body>
</html>

style 태그 내부를 보면

 

div 태그의 background-color가 #eeee33 으로 설정되고 border는 5px solid #ffd800으로설정된다.

여기서 border 속성에는 테두리의 두께, 종류, 색상을 명시해주면 된다. 

위의 예시에서는 div의 테두리 두께가 5px인 #ffd800의 색을 가진 실선이 적용된다.

 

h1 태그의 background-color는 #00ff21 으로 설정된다. (약간 연두색)

 

위에 제시된 선택자일수록 CSS 속성이 더 먼저 적용되고 나중에 제시될수록 CSS 속성이 늦게 적용된다.

이러한 특성은 다음에 나오는 전체 선택자와 함께 사용할 수 있다.

 

 

 

6-3. * 선택자 (+특정 tag 선택자와의 혼합)

문서 전체를 선택해주는 선택자이다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
      * {
        color: #ffd800; font-weight: bold;
      }

      p { color:red; }
      li { color:blue; }
      h1 { text-decoration:underline; }
    </style>
</head>
<body>
  <div>
    <h1>제목 입니다.</h1>
    <p>본문 입니다. 본문 입니다. 본문 입니다. 본문 입니다. 본문 입니다. 본문 입니다.</p>
    <ol>
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
      <li>menu4</li>
      <li>menu5</li>
    </ol>
  </div>
</body>
</html>

전체 선택자를 이용해 공통적인 CSS 속성을 부여해주고, 그 다음에 tag 선택자를 하나하나 지정해서 CSS 속성을 부여해준다.

 

* 선택자로 문서 전체에 color와 font-weight를 적용시켜준 후

p 태그, li 태그, h1 태그 각각에 다른 CSS 속성을 주는 방식을 사용했다.

 

예를 들어..

검정 화면에 * 선택자를 이용해 흰색으로 모두 칠해주고,

화면에 나와있는 구성요소(집, 나무, 사람, 자동차) 각각에 다른 속성을 주어,

최종적으로는 흰 배경에 빨간 집, 초록 나무, 파란 사람, 노란 자동차가 있게 해주는 방식이다. 

 

기본 HTML 파일은 화면에 꽉 차 있지 않고 margin과 padding이 약간씩 있는데 디폴트인데

* {
        margin: 0;
        padding: 0;
}

와 같이 설정해주면서 페이지를 꽉 채워 사용할 수 있게 해준다.

 

잘 이용하면 효율적으로 사용할 수 있지만, 태그 간의 연관관계를 제대로 파악하지 못할 경우에는 CSS 속성들이 꼬여서 혼란을 야기할 수 있다는 사실!!

 

 

 

 

 

 

 

출처

https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C#

인프런 실전 HTML & CSS 강좌

'Web > HTML & CSS' 카테고리의 다른 글

8강 : CSS 기본3  (0) 2020.02.29
7강 : CSS 기본2  (0) 2020.02.28
5강 : HTML 기본4  (0) 2020.02.28
4강 : HTML 기본3  (0) 2020.02.27
3강 : HTML 기본2  (0) 2020.02.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
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 31
글 보관함