CSS | W3School Band Templates 클론코딩

CSS 정리

navbar 가로 / 세로 비교

.w-bar (가로 바)

.w-bar {
width: 100%;
overflow: hidden
}
.w-center .w-bar {
display: inline-block;
width:auto;
}
.w-bar .w-bar-item {
padding: 8px 16px;
float: left;
width: auto;
border: none;
display: block;
outline:0;
}
.w-bar .w-dropdown-hover,
.w-bar .w-dropdown-click {
position: static;
float: left;
}
.w-bar .w-button {
white-space: normal;
}
.w-bar:before, .w-bar:after {
content: "";
display: table;
clear: both;
}

.w-bar-block (세로 바)

.w3-bar-block .w3-center 
.w3-bar-item {
text-align:center
}
.w-bar-block .w-bar-item {
width:100%;
display:block;
padding:8px 16px;
text-align:left;
border:none;
}
.w-bar-block .w-dropdown-hover,
.w-bar-block .w-dropdown-click {
width: 100%;
}
.w-bar-block .w-dropdown-hover 
.w-dropdown-content,
.w-bar-block .w-dropdown-click
.w-dropdown-content {
min-width: 100%
}
.w-bar-block .w-dropdown-hover 
.w-button,
.w-bar-block .w-dropdown-click 
.w-button {
width:100%;
text-align:left;
/*button은 center*/
padding:8px 16px
}

• center클래스에서 가로는 bar클래스에 display: inline-block과 width:auto,
  세로는 bar-item에 text-align: center
• bar-item에
  가로는 width:auto, 세로는 width:100%
  가로는 float:left, 세로는 text-align:left
• dropdown에 가로는 position:static, float:left, 세로는 width:100%
• dropdown content에 세로는 min-width:100%
• button에 가로는 white-space: normal(기본값)
• dropdown button에 세로는 width:100%, text-align: left, padding: 8px 16px
• 가로는 before, after에 clearfix - content:””, display:table, clear:both

!important ⇒ stylesheet에서 나중에 적힌 속성이 override됨.

.content .container .display-container 비교

.container::after, .container::before {
content:"";
display:table;
clear:both;
}

.display-container {
position:relative;
}

.content {
margin-left:auto;
margin-right:auto;
}
.content {
max-width:980px;
}