Visual Studio Code float로 layout 지정하기

1. Float로 Layout 지정하기

1 - 1 코드 - body

간단하게 이런 형식의 layout을 지정하고 싶을 때,

    <div class="menu">
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#" class="active">저는요</a>
          </li>
          <li>
            <a href="#">Portfolio</a>
          </li>
          <li>
            <a href="#">Contact Me</a>
          </li>
        </ul>
    </div>

    <div class="container">
        <div class="header">
            <h2>header 영역</h2>
        </div>
        <div class="main">
            <div class="nav">
                <h2>nav 영역</h2>
            </div>
            <div class="section">
                <h2>section 영역</h2>
            </div>
        </div>
        <div class="footer">
            <h2>footer 영역</h2>
        </div>
    </div>

div 태그의 속성을 menu로 지정하고 리스트 태그를 이용해 메뉴를 만들었다.

각 항목마다 누르면 링크므로 반응하지만 href가 #이기 때문에 이동하지는 않는다.

 

다른 div 태그의 속성은 container로, 그 안에는 div 태그의 속성 header , main , footer가 있고 

main 안에 div 태그의 속성 nav , section이 존재한다.

 

1 - 2 Style

        ul {
        list-style-type: none;
        overflow: hidden;
        background-color: dodgerblue;
        }

ul의 스타일을

list-style-type을 none으로 주어 리스트 옆에 붙는 기호를 삭제하고

 

자식요소들에게 float가 적용되어 있을 때는 부모 높이가 사라지는 현상이 생기므로

이럴 때는 아래와 같이 속성을 준다.

overflow: hidden;

말 그대로 넘치는 것을 숨긴다는 뜻으로 받아들이면 될 것 같다.

background color로 색을 주었다.

 

        li {
        float: left;
        }

리스트라 세로로 나열되지만 float 성질로 left를 주면 왼쪽에서 오른쪽으로 나열된다.

 

        li a {
        display: inline-block;
        padding: 15px 15px;
        text-align: center;
        text-decoration: none;
        color: white;
        }

        li a:hover {
        background-color: orange;
        color: lime;
        }

        .active {
        background-color: black;
        }

        * {
            box-sizing: border-box;
        }

li 태그의 안 모든 a에게 style을 부여한다.

인라인 블록으로 , 패딩은 상하좌우 15px , 가운데정렬, 링크속성이라 아래 밑줄이 있는데 밑줄삭제, 색은 하얀색으로 설정

 

hover란 커서가 접근하면 반응했을 때 style을 부여한다.

li 태그의 안 모든 a에게 커서가 접근하면 background 색은 오렌지, 글 색상은 라임색으로 지정했다.

class 속성에 active에 백그라운드 색으로 블랙을 지정해서 active 속성이 있는 "저는요"는 검은색이 되었다.

 

* 은 밑의 모든 것이란 뜻으로 모든 것에 box-sizing으로 border-box를 주었다. ( 테두리 )

 

h2에 가운데 정렬을 주고

 

header , nav , section , footer에 테두리를 주고 색을 지정했다.

nav에 width를 30% , section에 70%을 주어서 한 줄에 표현했고, 

        .main::after {
            content: "";
            clear: both;
            display: table;
        }

float 해제 공식으로 해제 후 재지정으로 footer 영역을 아래로 내린 것이다.

 

        @media (max-width: 800px) {
            .nav {
                width: 100%;
            }
            .section {
                width: 100%;
            }
        }

@media 속성으로 만약 가로범위가 800 이하로 떨어질 경우

nav 태그와 section 태그가 100%으로 , 즉 한 줄로 표현되도록 하였다.