css
-
display와 float의 차이Web/CSS 2020. 1. 12. 12:04
Navigation bar에서 설명했듯 display: inline-block; 과 float: left;는 비슷한 효과를 보여준다. 이번 편에서는 그 차이에 대해서 정확하게 알아보도록 하자. 아래 코드와 그 결과를 보도록 하자. See the Pen PoweLvv by Catnap421 (@catnap421) on CodePen. float의 경우, p태그의 내용이 박스 옆에 오고, display의 경우, 아래에 오는 걸 확인할 수 있다. 즉 하단에 다른 태그를 입력하면 그 결과를 쉽게 확인할 수 있다. float의 경우, 해당 요소의 크기만큼 할당해서 바짝 붙이기 때문에 box 요소가 float 되고 난 후, 남은 공간에 p요소가 오게 된다. 그러나 display의 경우, display: inline..
-
Navgation bar(내비게이션 바)Web/CSS 2020. 1. 11. 21:47
Nav bar(이하 내비게이션 바) 디자인은 CSS 레이아웃에서 중요한 역할을 한다. 내비게이션 바를 디자인할 때 크게 가로와 세로 두 가지 경우로 나눌 수 있다. 코드를 통해서 어떻게 가로와 세로로 디자인하는 지를 살펴보고, 그때 각 프로퍼티가 어떠한 역할을 하는지 알아보자. 가로로 디자인할 때(horizontal) See the Pen qBEYQrj by Catnap421 (@catnap421) on CodePen. Example explained: float: left; - use float to get block elements to slide next to each other display: block; - Displaying the links as block elements makes the ..