position 활용

<style>

        .ex{

            width: 600px;

            border: 5px solid #333;

            margin: 100px;

        }

        .box{

            width: 400px;

            padding: 50px;

            background: #eaeaea;

            border-top: 3px solid hotpink ;

        }

    </style>

기본적으로 내용을 입력하게 되면 왼쪽 상단이 디폴트 값이기 때문에 위와 같이 나온다. 디자인상으로 텍스트 박스를 중앙 위로 올리고 싶을때 사용하는것이 position : relative이다. 해당 위치에서 옮길거기 때문에 딱히 부모에게 relative를 주지 않아도 된다.

.box{

            width: 400px;

            padding: 50px;

            box-sizing: border-box;

            background: #eaeaea;

            border-top: 3px solid hotpink ;

            position: relative;

            left: 100px; top: -50px;

        }

 

해당 박스의 초기 상태에서 위치를 이동시켜 해당 상태로 만들 수 있고 위로 더 옮길 것이기 때문에(부모 위로 올라갈것이기 때문에) top : -50px을 쓴것이다.

<div class="ex">

        <ul class="list">

            <li>

                <img src="./images/01.jpg" alt="이미지">

                <span class="num">01</span>

                <p>Lorem ipsum dolor</p>

            </li>

            <li>

                <img src="./images/02.jpg" alt="이미지">

                <span class="num">02</span>

                <p>Lorem ipsum dolor</p>

            </li>

            <li>

                <img src="./images/03.jpg" alt="이미지">

                <span class="num">03</span>

                <p>Lorem ipsum dolor</p>

            </li>

        </ul>

    </div>

 

내용들을 기입하고

*{margin: 0; padding: 0;

        box-sizing: border-box;}

        ul{list-style-type: none;}

        .ex{

            width: 1180px;

            margin: 30px auto;

            /* border: 5px solid skyblue; */

        }

        .list{

            display: flex;

            justify-content: space-between;

        }

        .list li{

            position: relative;

        }

        .list li .num{

            display: block;

            width: 50px; height: 50px;

            font-size: 30px;

            text-align: center;

            line-height: 50px;

            position: absolute;

            top: -25px; left: 50%;

            color: aliceblue;

            margin-left: -25px;

            background-color: turquoise;

        }

        .list li p{

            /* background: pink; */

            width: 100px;

            position: relative;

            left: 20px; top: -30px;

            padding-top: 70px;

            padding-left: 10px;

            border-left: 1px solid #000;

        }

 

무엇에 기준을 줘야하고 어떻게 위치를 이동해야 할지를 잘 인지하고 사용해야 원하는 디자인을 만들어낼 수 있다.

 

숫자에 블럭을 주고 위치를 중앙에 맞춰 준뒤 (text-aline, line-height) position으로 해당 이미지 위치를 맞추어 준다. 상단 위쪽으로 빼줄거기 때문에 top : -25px을 넣어 바깥으로 빼주고 해당 위치에서 더 중앙에 올 수 있게 마진을 왼쪽으로 빼준다. (옆 형제에 영향을 주지 않도록)

 

텍스트는 원하는 디자인 만큼의 width값을 넣어주고 해당 개체만 옮길거기 때문에 position : relative를 설정해 위치를 맞추어 주고 박스의 크기와 디자인적인 요소를 추가해 주면된다.

---

기본 셋팅과 원하는 넓이와 위치를 넣어주고

<style>

        *{margin: 0; padding: 0;

        box-sizing: border-box;}

        ul{list-style-type: none;}

        .ex{

            width: 1180px;

            margin: 30px auto;

            /* border: 5px solid skyblue; */

        }

        .list{

            display: flex;

            justify-content: space-between;

        }

       

    </style>

       설명_1

 

        .list li{

            position: relative;

        }

        .list li .mask{

            background: rgba(0, 0, 0, 0.5);

            position: absolute;

            left: 0; top: 0;

            width: 100%; height: 100%;

        }

          설명_2

 

            .list li .mask{

            background: rgba(0, 0, 0, 0.5);

            position: absolute;

            left: 0; top: 0;

            width: 100%; height: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

            color: #fff;

            font-size: 24px;

            flex-direction: column;

        }

 

 

설명_1

.list li 에 position : relative을 넣어서 부모의 기준을 잡아주고 .list li .mask로 position : absolute를 넣어 위치를 left, top을 0에 넣어서 이미지에 맞도록 넣어주고 background 색상에 투명도와 함께 넣어서 이미지가 가려지도록 하고 크기와 높이를 각각 100%로 넣어 크기도 맞춰준다.

 

설명_2

텍스트 박스 자체를 flex하여 가로 배치하고 글자의 배치를 중앙으로 맞춰주기 위해서 justify-content : center, align-items: center 를 지정해주고 (해당 속성들은 flex 속성이 있어야 적용이 된다.) 이렇게 설정하면 숫자와 텍스트가 flex 때문에 가로 정렬이 되어있어서 flex-direction : column을 넣어서 세로로 배치해주면 된다.

.list li:hover .mask{

            opacity: 0;

        }

 

화면에 먼저 보이는 이미지:hover 변경 후 이미지 :마우스를 데면 배경이 사라지면서 이미지가 나오도록 할 수도 있다. 해당 이미지 스타일 속성에 transition : 원하는 시간 (ex : 1s, 0.5s ...) 을 설정하면 서서히 드러나서 자연스럽게 사라지도록 할 수도 있다.

.list li .mask{

            background: rgba(0, 0, 0, 0.5);

            position: absolute;

            left: 0; top: 0;

            width: 100%; height: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

            color: #fff;

            font-size: 24px;

            flex-direction: column;

            transition: 0.3s;

        }

---

또 다른 효과를 줄 수도 있는데 텍스트가 아래에서 위로 올라오는것 처럼 보이도록 하는 효과이다.

여기서 텍스트 박스에 position : absolute를 주고 top :100% 으로 주면 자손이 부모 밖을 나가게 된다. 

.list li{

            position: relative;

            border: 1px dotted red;

            overflow: hidden;

        }

이 텍스트 박스를 overflow : hidden 로 숨기고 hover에 top을 주어서 위로 나오도록 효과를 넣어준다. 해당 효과를 빠르게 나오도록 하여야 자연스러워 보이기 때문에 시간을 0.3s 정도로 설정하고

.list li:hover .mask{

            top: 0;

        }

top을 0으로 넣어주면 커서를 대면 위로 올라오도록 한다.

.list li{

            position: relative;

            border: 1px dotted red;

            overflow: hidden;

        }

        .list li .mask{

            background: rgba(0, 0, 0, 0.5);

            position: absolute;

            right: 100%; top: 0;

            width: 100%; height: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

            color: #fff;

            font-size: 24px;

            flex-direction: column;

            transition: 0.3s;

        }

        .list li img{

            display: block;

        }

        .list li:hover .mask{

            right: 0;

        }

 

이런식으로 해당 박스의 위치를 달리 설정해 기준을 두고 다른 방향으로 나올수 있도록 할 수 있다. (위 코딩을 왼쪽에서 오른쪽으로 박스가 나오도록 설정한것)

---

- 선택자

.gnb>li : 자손 선택자 - 직계 자손만 가능하고 후손에게 적용할 경우 적용되지 않는다. 중첩으로 쓸 수 있고 (ex : gnb>li>a>img) 중간의 부모들을 모두 적어줘야 한다.

.gnb li : 후손 선택자 - 후손을 선택하는 것인데  중간 단계의 부모들을 모두 생략할 수 있고 후손만 선택하는 것으로 여기서 주의 할것은 태그 선택을 할 경우 그 아래의 모든 태그들이 선택될 수 있기 때문에 각각 태그에 클래스를 지정해서 선택해주는 것이 오류없이 선택하기 좋다.

---

2dapth

1dapth 2dapth의 기본적인 구조 이고 많이 쓰이게 된다. 위 구조의 반복이기 때문에 기억해두는것이 좋다.

/*폰트 호출*/

        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

        *{margin: 0; padding: 0;

        box-sizing: border-box;}

        a{text-decoration: none;

        color: inherit;}

        ul,ol{

            list-style: none;

        }

        body{

            font-size: 16px;

            font-weight: 400;

            font-family: "Noto Sans KR", sans-serif;

            color: #242424;

 

초기화와 기본 속성값을 입력해주고

#header{

            display: flex;

            /* background: pink; */

            height: 120px;

            align-items: center;

            border-bottom: 1px solid #eaeaea;

        }

 

기본적으로 height를 지정하진 않지만 헤더같은 영역은 설정하는 것이 배치에 좋다 그렇기 때문에 임의적으로 크기를 설정해주고 align-item을 넣어서 헤더에 들어가는 logo를 중앙에 배치 되도록 하고 display:flex를 넣어 가로 배치해준다. 

 

.nav{

            width: 700px;

            margin-left: 50px;

        }

        .gnb{

            display: flex;

        }

        .gnb .d1{

            width: calc(100%/6);

            text-align: center;

            position: relative;

        }

 

네비 자체의 영역을 설정해주고 (디자이너가 상단메뉴로 넣어주고자 하는 영역을 설정) logo와 떨어지도록 margin-left를 넣어서 거리를 만들어준다. 1dapth의 부모인 .gnb에게 flex를 넣어서 가로배치 하여주고 1dapth각 서로 일정하게 떨어지도록 width 설정을 calc(100%/6) 하여 (메뉴가 6개니까) 일정하게 정렬하고 해당 글의 정렬을 text-align 으로 중앙정렬로 넣어준다.

 

*그리고 1dapth 밑으로 2dapth를 둘것이기 때문에 1dapth가 부모라고 할 수 있다. 1dapth를 기준으로 2dapth의 위치를 옮길것이기 때문에 position: relative를 넣어서 기준으로 잡아준다.

 

.d2_bg{

            background-color: #fff;

            position: absolute;

            left: 50%; top: 120px;

            margin-left: -90%;

            width: 180%;

            padding: 10px 10px;

            display: none;

            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);

        }

 

2dapth를 해당부모에서 벗어나 이동하기 위해서 position: absolute 속성을 지정하여 1dapth만 부모의 영역에 놔두고 1dapth를 기준으로 위치를 잡아준다 기본적으로 left 값을 50%를 넣어서 기존 위치에서 50%에 해당하는 위치로 옮겨주고 top으로 기준에서 아래로 띄워준다.

 

2dapth의 원하는 크기 값을 width를 넣어주고 (이때 부모의 크기를 자세하게 할 수 없기 때문에 %로 넣어준다 ex: 150%,180%) 설정한 넓이 값에서 2분의 1값을 margin-left로 넣어 중앙에 배치되도록 하여준다. 

 

padding을 주어서 2dapth의 박스에 사용자가 쉴공간을 넣어주고 display : none을 넣어서 사용하지 않을때는 보이지 않게 설정한다

 

box-shadow 를 넣어서 스타일요소를 적용한다. (이때 색은 단순한 색으로 지정하는것이 아니라 rbga로 투명도를 넣어서 지정해야 자연스럽게 보일 수 있다.)

.gnb>li>a{

            /* background-color: pink; */

            display: block;

            line-height: 120px;

        }

        .gnb .d1:hover .d2_bg{

            display: block;

        }

 

여기까지 진행하게 되면 사용자가 1dapth를 사용하기엔 범위가 너무 작아서 사용에 불편함을 가질 수 있다. 그렇기 때문에 inline요소인 a태그를 display : block 으로 블럭 속성을 적용해 넓이와 높이가 적용되도록 하고 line-height로 헤더의 높이만큼 넣어 범위를 늘려준다.

 

그리고 hover를 설정하는데 1dapth에 커서를 데었을때 변형되도록 .d1에 :hover를 설정하고 이로 인해서 .d2_bg가 나오도록 이어서 경로를 설정하고 display : block로 설정해 주면 된다.

 

* 코딩을 진행하다 보면 같은 태그를 여러번 반복해서 사용하게 되는데 이때 스타일 적용에 많은 영향을 줄 수 있다. 이때 자손경로를 사용하여서 해당 자손안의 태그에게만 스타일을 적용할 수 있다.

그렇기 때문에 경로 설정은 가장 중요한 부분이라 할 수 있다. 

 

---

속성으로 태그를 만들때 사용  작성 후 Tab 키