float2 align 정렬 (margin, position, float) margin 속성을 이용한 가운데 정렬 margin 속성값을 auto로 설정하면, 해당 요소를 감싸고 있는 컨테이너 요소를 기준으로 수평 방향 가운데 정렬이 됩니다. 이때 해당 요소는 특정한 너비를 가져야 하며, 너비를 제외한 나머지 공간은 좌우로 균등하게 나뉘어 여백으로 만들어집니다. 따라서 이 방법을 사용하기 위해서는 반드시 해당 요소의 width 속성값을 먼저 설정해야만 합니다. ex) div { width: 300px; margin: auto; padding:10px } position 속성을 이용한 좌우 정렬 절대 위치 지정 방식으로 위치한 요소는 정상적인 레이아웃에서 벗어나 다른 요소와 겹칠 수 있게 됩니다. position 속성을 이용하여 정렬할 경우에는 요소에 margin과 padding .. 2021. 4. 25. float 속성(clear, overflow) float float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. ex) img { float: left; margin-right: 20px; } ex) html css div.page { border: 3px solid #CD5C5C; overflow: auto; } /가장 바깥을 overflow로 막음 h2 { text-align: center; } header{ border: 3px solid #FFD700; } nav { border: 3px solid #FF1493; width: 150px; float: left; } .. 2021. 4. 25. 이전 1 다음