728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>폰트</title>
            <meta charset="UTF-8">
            <style>
                a {
                    font-family: sans-serif;
                    /*
                    외부에서 가져온 폰트 혹은 serif, sans-serif, monospace 중 사용 가능. 후술한 세개의 폰트는 브라우저에서 설정된 폰트를 사용하는 것*/
                    font-size: 32px;
                    font-weight: lighter;
                    /*
                    normal : 일반 굵기(기본값)
                    bold : 굵게
                    bolder : 더 굵게
                    lighter : 얇게
                    */
                }
            </style>
    </head>
    <body>
        <a>아무내용</a>
    </body>
</html>

 

728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

포지셔닝  (0) 2022.12.19
형태  (0) 2022.12.19
형제 선택자  (0) 2022.12.19
특성 선택자  (0) 2022.12.19
클래스 선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 형제</title>
            <meta charset="UTF-8">
            <style>
                /*
                인접 형제 선택자
                '선택지 A' + '선택자 B'{
                    ...
                }
                위 선택자는 '선택자 A'에 의해 선택된 요소 바로 뒤에 붙어서 나오는 '선택자 B'에 해당하는 요소를 선택한다.
                */
                a + b {
                    color: red;
                }
                /*
                형제 선택자
                '선택지 A' ~ '선택자 B'{
                    ...
                }위 선택자는 '선택자 A'에 의해 선택된 요소 뒤에 나오는 '선택자 B'에 해당하는 요소를 선택한다.
                */
                a ~ b {
                    background-color: yellow;
                }
            </style>
    </head>
    <body>
        <div>
            <b>0</b>
            <a>1</a>
            <strong>?</strong>
            <b>2</b>
            <b>3</b>
        </div>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

형태  (0) 2022.12.19
폰트  (0) 2022.12.19
특성 선택자  (0) 2022.12.19
클래스 선택자  (0) 2022.12.19
자식 선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 특성(속성)</title>
            <meta charset="UTF-8">
            <style>
                a {
                    cursor: pointer;
                }
                a:hover {
                    text-decoration: underline;
                }
                a[disabled] {
                    color: gray;
                    cursor: default;
                }
               
                a[disabled]{
                    text-decoration: none;
                }
                /* 우선순위
                0. 겹치는 속성에 대해서만 적용이 된다.
                1. 선택자가 보다 상세하게 명시된 선택자가 우선순위를 가진다.
                2. 선택자의 상세한 정도가 같다면 보다 아래 쪽에 명시된 선택자가 우선순위를 가진다.
                */

                /*
                ['속성 이름'] {
                    ...
                }
                '속성 이름'에 해당하는 속성이 있는 선택자
                */
                /*
                ['속성 이름'='속성 값']{
                        ...
                }
                '속성 이름'에 해당하는 속성 값이 '속성 값'인 선택자
                */
            </style>
    </head>
    <body>
        <a>Hello</a>
        <a disabled>Hello</a>
        <a>Hello</a>
        <input type="test" disabled>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

폰트  (0) 2022.12.19
형제 선택자  (0) 2022.12.19
클래스 선택자  (0) 2022.12.19
자식 선택자  (0) 2022.12.19
자손 선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 클래스</title>
            <meta charset="UTF-8">
            <style>
                /*
                클래스 선택자
                .'클래스 이름' {
                    ...
                }
                HTML 태그에 부여된 class 속성(Attribute)을 기준으로 선택
                */
                a.color-red{
                    color: red;
                }
                /* a태그 이면서, color-red 클래스를 가지는 것*/
                a.back-yellow {
                    background-color: yellow;
                }
                a.color-red.back-yellow {
                    text-decoration: underline;
                }
                /* a태그 이면서,color-red와 back-yellow 클래스를 모두 가지는 것*/
            </style>
    </head>
    <body>
        <a class="color-red">1</a>
        <a class="color-red back-yellow">2</a>
        <a class="back-yellow">3</a>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

형제 선택자  (0) 2022.12.19
특성 선택자  (0) 2022.12.19
자식 선택자  (0) 2022.12.19
자손 선택자  (0) 2022.12.19
요소 선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 자식</title>
            <meta charset="UTF-8">
            <style>
                /*
                '부모 선택자' > '선택자' {
                    ...
                }
                */
                div > a{
                    color: red;
                }
                span > a{
                    color: blue;
                }
            </style>
    </head>
    <body>
        <a>I'm child of body</a>
        <div>
            <a>I'm child of div</a>
            <span>
                <a>I'm child of span</a>
            </span>
        </div>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

특성 선택자  (0) 2022.12.19
클래스 선택자  (0) 2022.12.19
자손 선택자  (0) 2022.12.19
요소 선택자  (0) 2022.12.19
그룹 선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 자손</title>
            <meta charset="UTF-8">
            <style>
                /*
                '부모/선조 선택자' '선택자' {
                    ...
                }
                */
                div a{
                    color: red;
                }

            </style>
    </head>
    <body>
        <a>I'm child of body</a>
        <div>
            <a>I'm child of div</a>
            <span>
                <a>I'm child of span</a>
            </span>
        </div>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

클래스 선택자  (0) 2022.12.19
자식 선택자  (0) 2022.12.19
요소 선택자  (0) 2022.12.19
그룹 선택자  (0) 2022.12.19
선택자  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 요소</title>
            <meta charset="UTF-8">
            <style>
                /*
                '태그 이름' {
                    '속성' : '값';
                    ...
                }
                */
                SPAN {
                    color: red;
                }
                DIV {
                    color: blue;
                }
            </style>
    </head>
    <body>
        <SPAN>ABC</SPAN>
        <DIV>123</DIV>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

자식 선택자  (0) 2022.12.19
자손 선택자  (0) 2022.12.19
그룹 선택자  (0) 2022.12.19
선택자  (0) 2022.12.19
태그활용(회원가입창만들기)  (0) 2022.12.19
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>선택자 : 그룹</title>
            <meta charset="UTF-8">
            <style>
                /*
                그룹 선택자 : 서로 다른 두 개 이상의 선택자에게 동일한 CSS 속성을 적용하기 위해 사용.
                '선택자 A', '선택자 B', '선택자 C', ... {
                    ...
                }
                */
                a, b, strong, sup, sub {
                    color: red;
                }
            </style>
    </head>
    <body>
        <a>I'm a.</a>
        <a>I'm b.</a>
        <strong>I'm strong.</strong>
        <sup>I'm sup.</sup>
        <sub>I'm sub.</sub>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

자손 선택자  (0) 2022.12.19
요소 선택자  (0) 2022.12.19
선택자  (0) 2022.12.19
태그활용(회원가입창만들기)  (0) 2022.12.19
ul 태그  (0) 2022.12.18

+ Recent posts

728x90
반응형
">

티스토리툴바