고래씌

[CSS] 1-1. CSS개요, 선택자 ① (inline-style 태그, 태그 선택자, id 선택자, class 선택자) 본문

Front-End/CSS

[CSS] 1-1. CSS개요, 선택자 ① (inline-style 태그, 태그 선택자, id 선택자, class 선택자)

고래씌 2023. 11. 1. 15:06

1. CSS(Cascading Style Sheets)

- 마크업 언어가 실제로 화면에 표시되는 방법을 기술하는 언어(HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 언어)

- W3C에서 CSS를 웹 표준으로 지정함

 

2. CSS select(선택자)

▶ Selector란?

: 현재 HTML문서 내에서 특정한 요소를 선택하는 문자 또는 문자열. 스타일을 적용하고자하는 요소를 선택하는 방법

 

 

1) <head>태그 안의 style 태그

- style : css 코드만 작성할 수 있는 영역을 제공하는 태그

- style 태그 안에서는 주석을 /* */ 만 사용할 수 있다!

 

div {border : 1px solid black;}

=> 모든 div태그에 테두리를 1px 두께의 검은 실선을 만들어라

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01_CSS개요, 선택자 1</title>
    <style>
        /* CSS 주석 style태그 안에서만 사용할 수 있음 */
        /* style :  css 코드만 작성할 수 있는 영역을 제공하는 태그 */

        /* 태그 선택자 */
        div { border : 1px solid black;}
        /* 모든 div 태그에 테두리를 1px 두께의 검은 실선을 만들어라 */

        strong{
            background-color: yellow;  /* 배경색 노랑색 */
        }
    </style>
</head>
<body>
    <div>
        <strong>d</strong>
    </div>
</body>
</html>

 

 

2) 태그 선택자

: 현재 HTML 문서 내에 같은 태그들을 선택하는 선택자

 

[작성법]

태그명 {css코드;}

 

■ <head>태그

    <style>
        div { border : 1px solid black;}
        /* 모든 div 태그에 테두리를 1px 두께의 검은 실선을 만들어라 */

        strong{
            background-color: yellow;  /* 배경색 노랑색 */
        }

        span {
            background-color: pink;
        }
    </style>

 

■ <body>태그

    <div>
        <strong>strong 태그에 작성한 내용</strong>
        <br>

        <span>span 태그에 작성된 내용입니다.</span>
        <ul>
            <li>
                <strong>strong 태그에 작성한 내용</strong>
            </li>
            <li>
                <span>span 태그에 작성된 내용입니다.</span>
            </li>
            <!-- 얼마나 깊게 들어가던 상관없음 어디든 찾아가서 style태그를 적용시켜줌 -->
        </ul>
    </div>

=> 얼마나 깊게 들어가던 상관이 없다! 어디든 찾아가서 style 태그를 적용시켜줌

 

 

 

3) id 선택자 (#id 속성값)

- HTML 문서 내에서 id속성의 속성값과 값이 일치하는 요소를 선택하는 선택자

- ★중요!★ id 속성 값은 페이지 내에서 유일해야한다.

→ 중복되는 id 속성 값이 있으면 안된다!

 

 

- JAVA : 낙타등 표기법(helloWorld)
- HTML : 하이픈 표기법(li-1, class-1) / 언더바 표기법(li_1, class_1)
=> 이런식으로 변수명을 표기한다!

 

 

[작성법]

#id 속성값{css코드;}

 

■ head 태그

    <style>
        #li-1{background-color: red;}
        #li-2{background-color: orange;}
        #li-3{background-color: yellow;}
        #li-4{background-color: green;}
        #li-5{background-color: blue;}

        /* 만약 여러개의 선택자를 동시에 사용하고 싶을 때는? */
        /* 콤마(,)를 이용해 여러 선택자 동시 작성을 할 수 있다 */
        #li-1, #li-2, #li-3{
            background-color: white;
        }
    </style>

Q. 만약 여러개의 선택자를 동시에 사용하고 싶을 때는? 
=> 콤마(,)를 이용해 여러 선택자 동시 작성을 할 수 있다.

 

 

■ body 태그

    <ol>
        <!-- li#li-${id 선택자 테스트$}*5 -->
        <li id="li-1">id 선택자 테스트1</li>
        <li id="li-2">id 선택자 테스트2</li>
        <li id="li-3">id 선택자 테스트3</li>
        <li id="li-4">id 선택자 테스트4</li>
        <li id="li-5">id 선택자 테스트5</li>
    </ol>

 

 

 

4) class 선택자(.class 속성값)

- HTML 문서 내에서 같은 class 속성 값을 가지는 태그를 모두 선택하는 선택자

 

[작성법]

.class속성값 {css코드} 

 

 

■ head 태그

    <style>
        .test-1{color : red;}
        .test-2{
            color : white;  /* 글자 색 변경 */
            background-color: black;
        }

        /* 미리 사용하고자하는 css 코드를 작성하고 이후에 HTML에 클래스를 지정할 때 사용 */
        .aaa{
            font-weight: 900;  /* 글자 굵기 조절 */
        }
    </style>

 

■ body 태그

    <ul>
        <!-- li.test-${클래스 선택자 테스트$}*5 -->
        <li class="test-1">클래스 선택자 테스트1</li>
        <li class="test-2">클래스 선택자 테스트2</li>
        <li class="test-2">클래스 선택자 테스트3</li>
        <li class="test-1">클래스 선택자 테스트4</li>
        <li class="test-2">클래스 선택자 테스트5</li>

        <li class="aaa">클래스 선택자 테스트6</li>

        <!-- 어러 클래스 적용 가능하다! class속성안에 띄어쓰기하여 사용하고 싶은 style 작성 -->

        <li class="aaa test-2 test-1">클래스 선택자 테스트6</li>
    </ul>

 

- 여러 클래스 적용 가능하다. class 속성 안에 띄어쓰기하여 사용하고 싶은 style 작성하면된다.

 

- ★ 여러 클래스 작성 시 class 속성값의 순서는 의미가 없다...!!

- 하지만...
  ☞ style 태그내의 css 코드 작성 순서에 따라 다르게 적용될 수 있음
  ☞ 같은 속성이 있다면 마지막에 작성된 속성이 적용(style태그안)이 된다!
  ☞ 클래스가 아래에 있더라도 id가 있다면 id가 그때는 먼저 적용됨

 

 

 

5) * 선택자

    <style>
        * {
            /* 글꼴 크기 */
            font-size: 20px;

            /* 글꼴 모양 */
             /* font-family: ; */
        }
    </style>

=> 모든 글씨 크기가 20px으로 증가함

 

저작자표시 비영리 변경금지

'Front-End > CSS' 카테고리의 다른 글

[CSS] 2. CSS 선택자 우선순위  (0) 2023.11.02
[CSS] 1-5. CSS 선택자 ⑤ (기타 선택자)  (0) 2023.11.02
[CSS] 1-4. CSS 선택자 ④ (일반 구조 선택자, 형태구조 선택자, 부정선택자  (2) 2023.11.02
[CSS] 1-3. CSS 선택자 ③ (문자열 속성 선택자)  (0) 2023.11.02
[CSS] 1-2. CSS 선택자 ②(기본 속성 선택자, 자식 선택자, 후손 선택자, 반응 선택자, 상태 선택자, 동위 선택자 & 실습문제)  (0) 2023.11.01
'Front-End/CSS' Related Articles more