2024. 6. 13 - CSS3

<style>
        /* % 사이즈 */
        p:nth-child(1) {}
        p:nth-child(2) {
            /* font-size: 100%; */
            /* font-size: 1em; */
            /* 국내에서는 px를 주로 사용 */
            font-size: 16px;
        }
        p:nth-child(3) {
            /* font-size: 150%; */
            /* font-size: 1.5em; */
            font-size: 24px;
        }
        p:nth-child(4) {
            /* font-size: 200%; */
            /* font-size: 2em; */
            font-size: 32px;
        }
</style>
    
    
    <body>
	    <div>box-1</div> <!--첫 번째 형제 -->
	    <div>box-2</div>
	    <div>box-3</div>
    <header>
        <div>box-4</div>
    </header>
    
</body>
HTML
복사

•

border-radius

•

버튼 만들기 실습

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css_btn</title>
    <style>
        #btn {
            margin: 50px;
            background-color: orangered;
            width: 250px;
            height: 150px;
            border: 20px solid #dddddd;

            /* 전체적으로 이벤트 적용됨 */
            border-radius: 40px;
        }

        #btn>a {
            display: block;
            height: 150px;
            color: #FFFFFF;
            text-decoration: none;
            cursor: pointer;

            text-align: center;
            line-height: 150px;
            
            font-size: 48px;
            font-style: italic;
            font-weight: bold;
        }

        .fs-32 {font-size: 32px;}
        .fs-2m {font-size: 2em;}
        .fs-lg {font-size: large;}
        .fs-sm {font-size: small;}

        .font_gs {font-family: '궁서체';}

        /* a:hover {
            background-color: blueviolet;
            color:azure
        } */

        #btn:hover {
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <h3 class="fs-32 font_gs">안녕하세요</h3>
    <h3 class="fs-2m">안녕하세요</h3>
    <h3 class="fs-lg">안녕하세요</h3>
    <h3 class="fs-sm">안녕하세요</h3>

    <div id="btn">
        <a>click</a>
    </div>
</body>
</html>
HTML
복사

•

웹 폰트 적용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css_webfont</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Jua&family=Nanum+Gothic&family=Nanum+Pen+Script&display=swap" rel="stylesheet">

    <style>
        h1 {
            /* background-color: #cccccc; */
            border: 1px solid black;
            width: 500px;
            margin: 30px;
        }

        .b_sd {
            box-shadow: 10px 10px 10px gray;
        }

        h1:hover {
            background-color: yellow;
            color: blue;
        }

				/* 폰트 지정 */
        .ff-nanum-pen {
            font-family: "Nanum Pen Script", cursive;
            font-weight: 400;
            font-style: italic;
        }
        
        .ff-jua {
            font-family: "Jua", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

        .ff-nanum-gothic {
            font-family: "Nanum Gothic", sans-serif;
            font-weight: 400;
            font-style: normal;
        }
    </style>

</head>
<body>
    <h1 class="ff-jua b_sd">모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</h1>
    <h1 class="ff-nanum-gothic b_sd">모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</h1>
    <h1 class="ff-nanum-pen b_sd">모든 인류 구성원의 천부의 존엄성과 동등하고 양도할 수 없는 권리를 인정하는</h1>
</body>
</html>
HTML
복사

2. 속성

절대 위치 좌표: 요소의 X 좌표와 Y 좌표 설정해 절대 위치 지정

상대 위치 좌표: 요소 입력 순서에 따른 상대 위치 지정

키워드	설명
static	상대 위치 좌표 설정
relative	초기 위치에서 상하좌우로 이동
absolute	절대 위치 좌표 설정
fixed	화면을 기준으로 절대 위치 좌표 설정

•

폰트 지정

◦

폰트 : 사이즈, 컬러, 두께, 스타일, 폰트 패밀리(웹폰트)

•

이미지

◦

사이즈 (폭, 높이)

•

텍스트 : 정렬, 줄 간격

•

배경 : 색상, 이미지

•

block : 사이즈(높이, 폭), 보더, 마진, 패딩

2024. 6. 13 - CSS3

목차

복습

2. 속성