[코딩 자율학습 HTML+CSS+자바스크립트] 2주차-2 학습

Web/HTML+CSS+JS

[코딩 자율학습 HTML+CSS+자바스크립트] 2주차-2 학습

Y freesia 2025. 1. 14. 11:04

≣ Contents

6. CSS 필수 속성 다루기

CSS의 특징

적용 순서는 기본 스타일 < 사용자 정의 스타일 < 마지막에 적용된 스타일

개별성 규칙 점수(사용된 선택자 종류를 파악해 점수를 계산)가 높으면 우선 순위가 높다

* 개별성 규칙 점수를 계산해 주는 사이트 : https://specificity.keegan.st/

Specificity Calculator

Specificity Calculator A visual way to understand CSS specificity. Change the selectors or paste in your own.

specificity.keegan.st

상속

<예제코드>

<!DOCTYPE html>
<html lang="en">

<head>
    <title>가상 요소 선택자</title>
    <style>
        div {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>Hello world!</p>
    </div>
</body>

</html>

단위

%	해당 속성의 상위 요소 속성값에 상대적인 크기
em	부모 요소의 텍스트 크기에 상대적인 크기
rem	html 태그의 텍스트 크기에 상대적인 크기
vw	뷰포트의 너비를 기준으로 상대적인 크기
vh	뷰포트의 높이를 기준으로 상대적인 크기

셀프 테스트

1. 포스트 잇

<!DOCTYPE html>
<html lang="en">
<head>
    <title>셀프 테스트</title>
    
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="postit">
        <h1>애 국 가</h1>
        <p>1. 동해물과 백두산이 마르고 닳도록 <br>
            하느님이 보우하사 우리나라 만세<br>
            무궁화 삼천리 화려 강산<br>
            대한 사람 대한으로 길이 보전하세<br>
        2. 남산 위에 저 소나무 철갑을 두른 듯<br>
            바람 서리 불변함은 우리 기상일세<br>
            무궁화 삼천리 화려 강산<br>
            대한 사람 대한으로 길이 보전하세</p>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Namum+Pen+Script&display=swap');

* {
    margin: 0px;
    padding: 20px;
    box-sizing: border-box;
}
#postit{
    width: 420px;
    height: 420px;
    background-color: #ff9;
    transform: rotate(10deg);
    text-align: center;
    font-family: "Nanum Pen Script",cursive;
}
#postit h1{
    font-size: 44px;
    margin-bottom: 20px;
    font-weight: normal;
}
#postit p{
    font-size: 25px;
    margin-bottom: 20px;
}

2. 로그인

<!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>login Test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form id="formLogin" action="#">
        <fieldset>
            <button id="btnGoogle" type="button">
                <img src="google.png" alt="Google Icon"/>
                Log in with Google
            </button>
        </fieldset>
        <p>or</p>
        <fieldset>
            <label for="username">
                <input type="text" id="username" name="username" placeholder="Username">
            </label>
            <label for="password">
                <input type="password" id="password" name="password" placeholder="Password">
            </label>
            <button id="btnLogin" type="submit">
                LOGIN
            </button>
        </fieldset>
        <a href="#">Forgot your password?</a>
    </form>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
    font-family: 'Roboto';
}

#formLogin{
    width: 304px;
    height: 390px;
    padding: 28px 38px;     /* 상하 여백 28px, 좌우 여백 38px */
    border: 1px solid #000;
    margin: 100px auto; /* 상하 가운데 정렬 */
}

fieldset {
    border: none;
}

#btnGoogle{
    width: 228px;
    height: 44px;
    margin-bottom: 21px;
    display: flex; /* 아이콘과 텍스트 나란히 배치 */
    justify-content: center;    /* 가로 중앙 정렬 */
    align-items: center;    /* 세로 중앙 정렬 */
    gap: 8px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    border: 1px solid #000;
    color: #504444;
    background-color: transparent;
    transition: background-color 0.3s; /* 애니메이션 효과 */
}

#btnGoogle:hover {
    background-color: #f0eeee; /* mouse over */
}

#btnGoogle:active {
    background-color: transparent; /* button Click */
}

#btnGoogle img {
    width: 15px;
    height: 15px;
}

#formLogin p{
    text-align: center;
    font-size: 16px;
    margin-bottom: 21px;
    font-weight: bold;
    color: #504444;
}

label input {
    width: 228px;
    height: 44px;
    padding: 0px 10px; /* 버튼 내부 여백 */
    margin-bottom: 21px;
    border: transparent;
    background-color: #eaeaea;
}

#formLogin input {
    padding: 0px 20px;
    color: red;
}

#btnLogin {
    width: 228px;
    height: 44px;
    padding: 10px; /* 버튼 내부 여백 */
    margin-bottom: 21px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    border: 1.5px solid #000;
    background-color: #373f3c;
    transition: background-color 0.3s; /* 애니메이션 효과 */
}

#btnLogin:hover {
    background-color: #495450; /* mouse over */
}

#btnLogin:active {
    background-color: #373f3c; /* button Click */
}

a[href]{
    text-decoration: none;  /* 링크의 기본 밑줄을 제거 */
    font-size: 14px;
    color: #2c3432;
    text-align: center;
    display: block;     /* 링크를 블록 요소로 설정 (전체 가로 영역을 차지하게 함) */
}

3. 목차

<!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>Wiki List Test</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="list">
        <h1>목차</h1>
        <ol>
            <li>
                <span>1</span>
                <a href="#">역사</a>
                <ol>
                    <li>
                        <span>1.1</span>
                        <a href="#">개발</a>
                    </li>
                    <li>
                        <span>1.2</span>
                        <a href="#">최초 규격</a>
                    </li>
                    <li>
                        <span>1.3</span>
                        <a href="#">표준 버전의 역사</a>
                        <ol>
                            <li>
                                <span>1.3.1</span>
                                <a href="#">HTML 버전 스케줄</a>
                            </li>
                            <li>
                                <span>1.3.2</span>
                                <a href="#">HTML 초안 버전 스케줄</a>
                            </li>
                            <li>
                                <span>1.3.3</span>
                                <a href="#">XHTML 버전</a>
                            </li>
                        </ol>
                    </li>
                </ol>
            </li>
            <li>
                <span>2</span>
                <a href="#">마크업</a>
                <ol>
                    <li>
                        <span>2.1</span>
                        <a href="#">HTML 요소</a>
                    </li>
                    <li>
                        <span>2.2</span>
                        <a href="#">데이터 형식</a>
                    </li>
                    <li>
                        <span>2.3</span>
                        <a href="#">문서 형식 선언</a>
                    </li>
                </ol>
            </li>
        </ol>
    </div>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Roboto&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box; /* 패딩 포함 크기 계산 */
    font-family: "Nanum Gothic", serif;
}

.list {
    width: 346px;
    height: 265px;
    background-color: #f8f9fa;
    border: 1px solid #000;
    padding: 6px 5px 12px;      /* 위쪽 여백 6px, 좌우 여백 5px, 아래쪽 여백 12px */
    margin: 20px auto;
}

.list h1{
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    padding-top: 6px;
}

.list ol li {
    list-style: none;
    font-size: 13px;
}

.list ol li a{
    color: #0645ad;
    text-decoration: none;
    font-size: 13px;
    height: 21px;
    display: inline-block;
}

.list ol li ol{
    margin-left: 26px;
}

7. 효과적인 레이아웃을 위한 CSS 속성 다루기

CSS 속성 다루기

레이아웃을 설계하기 위한 필요한 것들

- HTML5: 시맨틱 태그

- CSS3 : 플렉스 박스와 그리드 레이아웃

플렉스 박스 레이아웃 (Flex box layout) : 유연하게 레이아웃을 구성할 수 있도록 다양한 속성들을 제공
그리드 레이아웃 : 2차원 방식으로 레이아웃으로 설계할 수 있도록 고안된 스타일 속성
(반응형 웹을 위한) 미디어 쿼리 : 접속하는 미디어 타입과 특징, 해상도에 따라 다른 스타일 속성을 적용하는 기술
뷰포트(Viewport) : 접속한 기기에서 보이는 실제 영역의 크기

셀프 테스트

1. 플렉스 박스 레이아웃

<!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>Flex Box</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
   <div class="flex-container">
    <figure>
        <img src="images/1.jpg" alt="sample 1">
    </figure>
    <figure>
        <img src="images/2.jpg" alt="sample 2">
    </figure>
    <figure>
        <img src="images/3.jpg" alt="sample 3">
    </figure>
    <figure>
        <img src="images/3.jpg" alt="sample 4">
    </figure>
    <figure>
        <img src="images/5.jpg" alt="sample 5">
    </figure>
    <figure>
        <img src="images/6.jpg" alt="sample 6">
    </figure>
   </div>
</body>
</html>

.flex-container{
    display:flex;		/* Flexbox를 사용하여 자식 요소를 나란히 배치 */
    width:500px;
    flex-wrap:wrap;		/* 자식 요소가 한 줄에 다 들어가지 않으면 다음 줄로 넘김 */
    justify-content:space-between;		/* 자식 요소들 사이를 균등하게 배치 */
  }
  figure{
    width:calc(33% - 5px);	/* 각 figure 요소의 너비를 부모 컨테이너의 33%로 설정하되, 5px을 뺌 */
    font-size:0;
    margin:0;
    margin-bottom:10px;
  }

2. 그리드 레이아웃

<!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>Grid</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
   <div class="grid-container">
    <div class="grid-item item1"><span>1</span></div>
    <div class="grid-item item2"><span>2</span></div>
    <div class="grid-item item3"><span>3</span></div>
    <div class="grid-item item4"><span>4</span></div>
    <div class="grid-item item5"><span>5</span></div>
    <div class="grid-item item6"><span>6</span></div>
    <div class="grid-item item7"><span>7</span></div>
    <div class="grid-item item8"><span>8</span></div>
    <div class="grid-item item9"><span>9</span></div>
    <div class="grid-item item10"><span>10</span></div>
   </div>
</body>
</html>

.grid-container {
  display: grid;
  width: 500px;
  margin: 0 auto;
  color: #fff;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}

.grid-item {
  width: 100%;
  background-color: #ffd980;
  position: relative; /* 자식 요소를 이동시키기 위해 부모를 상대 위치로 설정 */
}

.grid-item span{
  position: absolute; /* 숫자를 절대 위치로 설정 */
  top: 5px;     /* 위쪽에서 5px 아래로 이동 */
  left: 5px;    /* 왼쪽에서 5px 오른쪽으로 이동 */
}

.grid-item:nth-child(2n) {
  background-color: #ffb333;
}

.item2 {
  grid-column: 2/4;
  grid-row: 1/3;
}

.item3,
.item5 {
  grid-column: 4/6;
}

3. 미디어 쿼리 레이아웃

<!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>Grid</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
   <div class="grid-container">
    <div class="grid-item item1"><span>1</span></div>
    <div class="grid-item item2"><span>2</span></div>
    <div class="grid-item item3"><span>3</span></div>
    <div class="grid-item item4"><span>4</span></div>
    <div class="grid-item item5"><span>5</span></div>
    <div class="grid-item item6"><span>6</span></div>
    <div class="grid-item item7"><span>7</span></div>
    <div class="grid-item item8"><span>8</span></div>
    <div class="grid-item item9"><span>9</span></div>
    <div class="grid-item item10"><span>10</span></div>
   </div>
</body>
</html>

.grid-container{
  display:grid;
  width:500px; 
  margin:0 auto;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:100px 100px 100px 100px;
  grid-gap:10px;
  color:white;
}

.grid-item span{
  position: absolute; /* 숫자를 절대 위치로 설정 */
  top: 5px;     /* 위쪽에서 5px 아래로 이동 */
  left: 5px;    /* 왼쪽에서 5px 오른쪽으로 이동 */
}

.grid-item{
  width:100%;
  background-color:#ffd980;
  position: relative; /* 자식 요소를 이동시키기 위해 부모를 상대 위치로 설정 */
}
.grid-item:nth-child(2n){
  background-color:#ffb333;
}
.item2{
  grid-column:2/4;
  grid-row:1/3;
}
.item3,
.item5{
  grid-column:4/6;
}

@media (max-width:500px){
  .grid-container{
    width:100%;
    grid-template-columns:1fr 1fr 1fr;
    grid-template-rows:100px 100px 100px 100px 100px;
  }
  .item3,.item5{
    grid-column:unset;
  }
  .item10{
    grid-column:1/4;
  }
}

저작자표시 비영리 변경금지 (새창열림)

[코딩 자율학습 HTML+CSS+자바스크립트] 2주차-2 학습

6. CSS 필수 속성 다루기

7. 효과적인 레이아웃을 위한 CSS 속성 다루기

6. CSS 필수 속성 다루기