그럼에도 불구하고

👨‍💻

[Visual Studio Code] css 사용하기 / nth-child / nth-of-type 본문

HTML, CSS/Function implementation

[Visual Studio Code] css 사용하기 / nth-child / nth-of-type

zenghyun 2022. 10. 23. 21:47

css란?

 

cascading style sheet로 html 문서를 꾸미기 위해 사용한다.

 

 

<!DOCTYPE html>
<html lang="ko">
<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>
        u,a{
            text-decoration: none;
        }
        /* 선택자, selector : 태그, 클래스, 아이디, 집합선택자, 가상선택자, 속성선택자 */

        h1{ text-decoration: underline;}
        /* h1태그 전체를 지정 */
        h1:nth-child(2){text-decoration: overline;}
        /* 부모를 기준으로 두번째 자식 */
        h1:nth-child(3){text-decoration: overline;}
        /* 부모를 기준으로 세번째 자식 */
        h1:nth-child(4){text-decoration:underline overline;}
        /* 부모를 기준으로 세번째 자식 */
        h1:nth-of-type(5){color: blueviolet;}
        /* HTML 파일안에서 다섯번째 h1 */
        p {color: orange;}
        .second_p {color: red}
        #third_p {color:rgb(4, 84, 4)}
    </style>
</head>
<body>
    <h1>한글은 아름다운 글입니다.</h1>
    <h1>한글은 아름다운 글입니다.</h1>
    <h1>한글은 아름다운 글입니다.</h1>
    <h1>한글은 아름다운 글입니다.</h1>
    <h1>한글은 아름다운 글입니다.</h1>
    <p><u>한글은 아름다운 글입니다.</u></p>
    <p class="second_p"><u>한글은 아름다운 글입니다.</u></p>
    <p id="third_p">한글은 아름다운 글입니다.</p>
    <p><s>STRIKE</s></p>
    <p><del>DELETE</del></p>
    <!-- s,del : 취소선 태그 -->
</body>
</html>

 

css를 이용하기 위해서는 title 태그 바로 아래에 <style></style>와 같이 적고 사용하면 된다. 

 

내가 사용하고 싶은 태그의 이름을 적거나 id class와 같이 이름을 지정해서 사용할 수 있다. 

 

h1 { 내용 } : h1 태그 전체에 내용을 적용시킨다.

 

h1:nth-chid {?} { 내용 } : h1중 부모(여기서는 body)를 기준으로 ? 번째 h1태그만 내용을 적용시킨다. 

 

h1:nth-of-type(?) { 내용} : html 파일 전체에서 ?번째 h1태그만 내용을 적용시킨다.

 

 

nth는 visual studio code에서만 사용이 가능한 것 같다.

 

 class와 id는 원하는 태그에 작성하면 된다. 

 

<내가 쓸 태그 class="이름">

 

<내가 쓸 태그 id="이름">

 

와 같이 적용하고 

 

css를 사용할 때는

 

class는 .이름 { 내용 }

 

id는 #이름 { 내용 }

 

과 같이 작성하고 사용하면 된다.

 

html

 

결과

 

 

 

'HTML, CSS > Function implementation' 카테고리의 다른 글

[Visual Studio Code] justify-content  (0) 2022.11.01
[Visual Studio Code] scroll-behavior: smooth  (0) 2022.10.29
[Visual Studio Code] overflow 사용하기  (0) 2022.10.29
[Visual Studio Code] ol/ul/dl 태그 사용하기  (0) 2022.10.23
[Visual Studio Code]img태그 / a태그 사용하기  (0) 2022.10.23
'HTML, CSS/Function implementation' Related Articles more
Comments