티스토리 뷰

코딩/HTML&CSS

[6주 3일차] HTML&CSS

ehzim 2023. 11. 15. 16:54

 

 

 

- box-sizing

속성 값 의미 기본값
content-box 너비(width, height)만으로 요소의 크기를 계산 content-box
border-box 너비(width,height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산  

 

* border-box

padding값과 margin 값을 포함하여 요소의 크기 결정

 

 

 

 

 

- display

속성값 의미
blcok 블록 요소(<div> 등)
inline 인라인 요소(<span> 등)
기타 table, table-cell, flex 등
none 요소의 박스 타입이 없음(요소가 사라짐)

 

 

* 인라인→블럭 하는 이유

크기 조정을 위해 요소 변경한다.

(인라인 요소는 크기 조정이 안된다(width, height))

 

* flex

인라인 요소로 바꾸는 것과 동일하다.

 

 

 

 

 

 

 

예제 4-13

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div.hide{
            display:none;
        }
    </style>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>Toggle</button>
    <div>요소</div>

    <script>
        const el = document.querySelector("div");
        const btn = document.querySelector("button");
        btn.addEventListener("click",function()
        {
            if(el.classList.contains("hide")){
                el.classList.remove("hide");
            }
            else{
                el.classList.add("hide");
            }
        });
    </script>
</body>

</html>

 

<script>를 살펴보면 addEventListener를 보면 파라미터로 click과 function 함수를 받는다.

function함수를 실해아하면 hide가 있는지 확인하고 없으면 클래스를 <div class='hide>와 같이 삽입하고 있으면 remove 하여 제거한다.

 

 

 

 

결과

 

 

 

 

 

 

- position-sticky (p.57)

 

창의 스크롤 영역 기준으로 배치한다.

스크롤을 생성하여 Sticky의 영역을 조절할 수 있다.

 

 

 

 

 

 

예제 4-15

 

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="sticky.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="section">
        <h1>Title1</h1>
    </div>
    <div class="section">
        <h1>Title2</h1>
    </div>
    <div class="section">
        <h1>Title3</h1>
    </div>
    <div class="section">
        <h1>Title4</h1>
    </div>
    <div class="section">
        <h1>Title5</h1>
    </div>
    <div class="section">
        <h1>Title6</h1>
    </div>
    <div class="section">
        <h1>Title7</h1>
    </div>
</body>
</html>

 

 

.section{
    height: 200px;
    border: 4px dashed lightgray;

}
.section h1{
    text-align: center;
    line-height: 2;
    font-size: 24px;
    font-weight: bold;
    position: sticky;
    top:0;
}

 

 

결과

 

 

결과를 살펴보면,

스크롤이 다음 페이지로 넘어가기전까지 텍스트가 유지되다가 다음 페이지로 넘어가면 다음 텍스트로 넘어간다.

 

 

 

 

저작자표시

'코딩 > HTML&CSS' 카테고리의 다른 글

[7주 1일차] HTML&CSS  (0) 2023.11.20
[6주 5일차] HTML&CSS  (1) 2023.11.17
[6주 2일차]HTML&CSS  (0) 2023.11.14
[6주차 2일] CSS  (0) 2023.11.14
[6주차 1일] CSS  (1) 2023.11.13
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday