22-12-22 css - 박스레이아웃(position)

티스토리 뷰

CSS

22-12-22 css - 박스레이아웃(position)

JadeStone 2022. 12. 22. 15:55

*디자인 시작할 떄 이렇게 해주고 시작하는게 좋음.

    *{padding:0; margin:0; list-style: none;}

패딩 과 마진 없애주고 리스트에 점 없애주기.

그래야 모양이 내가 생각하는데로 나올것임.

#박스 레이아웃 position ★★★★★

*absolute 랑 fixed만 알면 됨.

* html은 3d로 이루어져 있음. z축 방향으로 움직인다고 생각하면됨.

position:absolute;를 주고

position:relative 를 아무데도 주지 않으면 body 기준으로 올라온다.

부모에 relative 줌.

<!DOCTYPE html>
<html lang="en">
<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>
        *{margin: 0; padding:0;}
        .list{
            width: 50%;
            margin:0 auto;
            border: 1px solid #777;
        }

        p{height: 100px;}

        .content{
            position: relative;
        }

        .item1{background-color: aqua;}
        .item2{
            background-color: red;
            /*포지션 absolute를 적용하면 부모에 relative가 들어갑니다. (들어가지 않으면 위치가 body기준이 됨)*/
            /*포지션을 적용하면 top, bottom 중 1개, left, right중 1개를 선택해서 위치조정*/
            position: absolute;
            top: 10px; /*위치조정*/
            left: 30px;
            width: 50px; /*크기조정*/
            height: 50px;
        }
        .item3{background-color: yellow;}
    </style>

</head>
<body>
    
    <div class="list">
        <div class="content">
            <p class="item1">포지션</p>
            <p class="item2">포지션</p>
            <p class="item3">포지션</p>
        </div>
    </div>

</body>
</html>

결과

또 다른 예

- 코드

<!DOCTYPE html>
<html lang="en">
<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>
        section{width: 500px; overflow: hidden; margin: 0 auto; }
        section .box {float: left; width: 25%; background-color: aqua; height:100px;}

        .pos{
            background-color: red;
            /*상대위치(박스의원래위치)기준으로 z축으로 올림*/
            /* position:relative;  */
            position:absolute;
            top:20px;
            left:20px;
        }
    </style>


</head>
<body>

    <!--position: relative; 가 있는 위치 기준으로 올라가게 됩니다-->
    
    <section style="position:relative;">
        <div class="box">박스1</div>
        <div class="box">박스1</div>
        <div class="box">박스1</div>
        <div class="box" >
            박스1
            <div class="pos" >포지션</div>
        </div>

    </section>

</body>
</html>

결과

*fixed

창에 포지션 지정해준 부분을 고정해줌.

코드

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

<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>
        *{margin:0; padding: 0; list-style:none;}
        section{height:2000px; background-color: aqua; margin-top: 150px;}

        header{
            background-color: #fff;
            position:fixed; /*스크롤을 따라다님*/
            left:0;
            top:0;
            width:100%;

            text-align: center;

            z-index: 5;
        }

        .menu ul{background-color: #000}
        .menu ul li{display: inline;}
        .menu ul li a{
            display: inline-block;
            color: #777;
            text-decoration: none;
            width: 50px;
            height: 50px;
            line-height:50px;
        }

    .side{
        position:fixed;
        right:0px;
        top:200px;

        /*포지션이 겹치는 경우 z축의 우선순위 지정 보통 1~10 사이값*/
        z-index: 10;

        background-color:#282828;
        text-align: center;
    }
    .side ul li a{
        color: #fff;
        text-decoration:none;
        font-size:14px;

        display:inline-block;
        height: 40px;
        line-height: 40px;
        width:80px;

        border-top:1px solid #777
        
    }


    </style>

</head>

<body>

    <header>
        <div>
            <img src="img/bgimg.png" alt="로고">
        </div>
        <nav class="menu">
            <ul>
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
                <li><a href="#">메뉴</a></li>
            </ul>
        </nav>
    </header>

    <aside class="side">
        <ul>
            <li><a href="#">카톡</a></li>
            <li><a href="#">전화번호</a></li>
            <li><a href="#">메뉴</a></li>
            <li><a href="#">메뉴2</a></li>
        </ul>
    </aside>


    <section>
        내용.....
    </section>

</body>

</html>

여기서 주의할 점은

포지션을 준 요소가 2개이상일 때 서로 겹치지 않게 해주기 위해서

z-index 속성을 각각 포지션 요소에 주었다는것.

z-index 속성을 이용해서 포지션들 사이에서 누가 더 위에 올라올 것인지 지정해준다.

- z-index속성

- position 에서 고급스킬 중에 sticky 라고 있음.

*sticky

포지션이 top에서 부터 지정해준 px; 위치에 도달하면 스크롤이 움직임과 동시에 포지션을 지정해준 요소도 같이 이동한다.

-sticky 사용 조건-

1. sticky는 top, bottom, left, right중 필수적으로 하나를 설정해야합니다.

2. 부모태그에 overflow 속성이 있다면 동작이 안 됩니다.

3. top속성에 fixed되는 지점을 기록하면 됩니다.

예시)화면

이 상태에서 스크롤을 내리면 아래와 같이 sticky를 지정해준 부분이 움직인다.

코드

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

<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>
        * {
            margin: 0;
            padding: 0;
        }

        .inner1 {
            height: 200px;
            background-color: yellow;
        }

        .inner2 {
            background-color: red;

            /*
            1. sticky는 top, bottom, left, right중 필수적으로 하나를 설정해야합니다.
            2. 부모태그에 overflow 속성이 있다면 동작이 안 됩니다.
            3. top속성에 fixed되는 지점을 기록하면 됩니다.
            */

            position: sticky;
            /* top:100px; scroll의 위치가 위에서부터 100px부터 움직인다. */
            top:0;
            left:0;
        }

        .inner3 {
            height: 2000px;
            background-color: green;
        }
    </style>

</head>

<body>

    <section>
        <div class="inner1">

        </div>
        <aside class="inner2">
            sticky는 특정높이 전까지는 고정으로 있다가, 특정높이 도달하면 fixed되는 속성
        </aside>
        <div class="inner3">
            내용...
        </div>

    </section>

</body>

</html>

#position 실습

선생님이 작성해주신 코드

<!DOCTYPE html>
<html lang="en">
<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>
        .wrap {
            border: 1px solid #777;
            width: 800px;
            margin: 0 auto;
            padding: 10px;
            position: relative;
        }
        .wrap-img {
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .wrap-img img {width: 50px;}

        .wrap-content {
            padding-left: 60px;
            overflow: hidden;
        }
        .wrap-content .left {float: left;}
        .wrap-content .right {float: right;}

        .wrap-content textarea {
            width: 100%;
            height: 150px;
            box-sizing: border-box;
            resize: vertical;
        }

        .left input {display: block;}


    </style>

</head>
<body>
    
    <div class="wrap"><!-- margin: 0 auto -->
        <div class="wrap-img"><!-- 포지션 -->
            <img src="img/bgimg.png" alt="물고기">
        </div>

        <div class="wrap-content"><!-- 패딩left -->
            <textarea ></textarea>
            <div class="left"><!-- float: left -->
                <input type="text">
                <input type="text">
            </div>

            <button type="button" class="right">등록</button><!-- float:right -->
        </div>
    </div>

    <div class="wrap">
        <div class="wrap-img"><!-- 포지션 -->
            <img src="img/bgimg.png"  alt="물고기">
        </div>

        <div class="wrap-content">
            <div class="left">
                <p style="margin: 0;"><strong>제목</strong></p>
                <p style="margin: 0;"><small>내용</small></p>
            </div>

            <button type="button" class="right">삭제</button>
            <button type="button" class="right">수정</button>
        </div>
    </div>





</body>
</html>

#그림자 속성

# css 내용 끝

css 내용은 이렇게 끝.

여지껏 배운 내용들로 충분히 모든 것을 만들어 나갈 수 있다고 하셨음.

개발자 도구를 이용해 다른 싸이트들이 어떻게 만들어졌는지 관찰해보고

디자인을 해보면 실력이 금방 늘어난다고 함

<기억할 내용>

*position의 자리값을 줄 때

( 이 내용 : top, bottom중 하나, left, right중에 하나로 위치를 조정한다.)

-top:100px;을 주면 위로 올라가는게 아니라 위에서 100px 정도 떨어진 위치로 이동한다.-right: 100px; 을 주면 오른쪽에서 100px정도 떨어진 위치로 이동된다.즉, 각각 해당하는 방향에서 주어진 값만큼 떨어진다는 점 기억해두도록 하자.

저작자표시 (새창열림)

'CSS' 카테고리의 다른 글

22-12-26 반응형 디자인, 부트스트랩 (0)	2022.12.26
22-12-23 CSS - 디자인 실습 (0)	2022.12.23
22-12-21 css기초- 패딩과마진 , 박스사이징,박스레이아웃, float (0)	2022.12.21
22-12-20 css기초 - 단위, 선택자, 폰트, border속성, 텍스트 속성, 텍스트 정렬, display속성, background속성 (0)	2022.12.20
22-12-13 CSS시작 - VS코드 설치(개발환경셋팅), HTML태그 (0)	2022.12.13

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

글 보관함

웹 개발

티스토리 뷰

22-12-22 css - 박스레이아웃(position)

'CSS' 카테고리의 다른 글

티스토리툴바