TIL(today I learned)

2020.10.15 #TIL

노랑세희 2020. 10. 16. 00:05

 오늘 학원에서는 기본적인 position에 대해 중점적으로 배웠다. 알고 있던 내용이지만 모르던 부분도 알게 되어 매우 유익하고 재밌었다. 특히 relative로 좌표를 움직이면 블럭의 자릿값이 남아있다는 것은 처음 알았다. 그리고 absolute, fixed는 자릿값을 남기지 않아서 position주면 아래의 요소가 블럭 요소 자리로 올라온다. 또한 div.a에 relative; left: 10px; top: 10px;을 주었을때 div.b와 겹치게 된다면 relative를 준 div.a가 화면 위로 보이게 되는데 이때 div.b를 위로 올리고 싶으면 div.b에 position: relative; 만 주면 a위로 올라오게 된다. 두 div에 모두 relative를 줬기 때문에 이후에 순서를 바꾸고자 한다면 z-index를 사용하면 된다.

 z-index는 꼭 position이 들어간 요소에만 사용할 수 있는데 나는 이걸 확실히 알고 있지 않았어서 position 없이 z-index만 주고 왜 안되나 했던 적이 있었다. 오늘 다시금 확실히 알게 되었다. 이제 똑같은 실수는 안할 수 있다!

 

 그리고 늘 궁금했던 효과를 오늘 배웠다. 마우스 hover하면 메뉴 아래에 선이 가운데에서 쭉 펼쳐지는 것이 궁금했었다.

HTML & CSS

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

 

<style>

*{

    margin: 0;

    padding: 0;

    list-style: none;

    text-decoration: none;

    color: #000;

}

.section{

    margin: 0 auto;

    width: 800px;

    height: 100px;

    background: #eee;

}

.section ul{

    padding: 25px 0 0;

    width: 100%;

}

.section ul li{

    float: left;

    position: relative;

}

.section ul a{

    display: block;

    width: 200px;

    height: 50px;

    line-height: 50px;

    background: tan;

    text-align: center;

}

.section ul p{

    position: absolute; left: 0; bottom: 0;

    width: 100%;

    height: 4px;

    transform: scale(0, 1);

    transition: all .3s;

    background: brown;

}

.section ul li:hover p{

    transform: scale(1, 1);

}

</style>

</head>

<body>

    <div class="section">

        <ul>

            <li><a href="#a">menu1</a>

                <p></p>

            </li>

            <li><a href="#a">menu2</a>

                <p></p>

            </li>

            <li><a href="#a">menu3</a>

                <p></p>

            </li>

            <li><a href="#a">menu4</a>

                <p></p>

            </li>

        </ul>

    </div>

</body>

</html>

 * 간단 예시라서 iternal css로 작성함

 

 

결과

아래선이 가운데에서 양쪽으로 쭉 뻗어 나오는 효과를 주었음

 

 

저녁에 개인 공부로 css counter라는 명령어를 배웠다. 작성 방법 정도만 파악해서 아직 깊게 알진 못한다.

* counter

 - 숫자가 필요한 곳 (ex. 넘버링)에 자동으로 채워주는 명령어
 - ie8 이상부터 가능
 
 - counter-reset, counter(), counter-increment 등을 사용
   1. counter-reset 
     - 숫자 초기화하는 속성, counter가 들어갈 요소의 형제나 부모요소에 작성함
     - counter-reset: 명령어 ; 로 작성함
    2. counter
     - 요소에 conter(명령어); 로 작성함
    3. counter-increment
     - 초기화 0부터 몇 배수로 숫자를 계산할지 지정함
     - 요소에 counter-increment: 명령어 1;로 작성