CONTENTS
CSS 기능
1. css 작업순서
2. 드롭다운 메뉴
3. position: absolute;
------------------------------
CSS 기능
1. css 작업순서
|
1. 부모가 자식 정렬: display: flex;
하위 flex, align, justify 관련 속성들
2. 자기자신 정렬
position
transform:translate()
margin, padding
3. 크기: width, height (px, %)
|
html
<body>
<header class="container">
<div class="img_box">
<img src="./img/famms_logo.png" alt="logo">
</div>
<nav>
<ul class="nav">
<li>home</li>
<li>pages</li>
<li>products</li>
<li>blog</li>
<li>contact</li>
<li>cart</li>
<li>search</li>
</ul>
</nav>
</header>
</body>
css
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
/* 마지막에 container 주기 */
.container{
width: 80%;
margin: 0 auto;
}
/* 1. 직계 부모 정렬 */
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
/* background-color: aqua; */
}
/* 2. 자기자신 정렬 x */
/* 3. 크기 */
header .img_box{
width: 20%;
/* background-color: blueviolet; */
}
header .img_box img{
width: 100%;
}
/* 1. 직계 부모 정렬 */
header .nav{
display: flex;
/* background-color: blue; */
/* padding: 20px */
}
/* 2. 자기자신 정렬 */
header nav ul li{
margin-right: 20px;
/* background-color: red; */
}
/* 3. 크기x */
/* width, height 안주고 hover 영역 키울 때 padding 사용 */
header nav ul li:hover{
padding: 10px;
background-color: aquamarine;
}
cf)- background-color 또는 border로 영역 확인
- .container 마지막에 사용(직계에 따로 사용)
-box 크기 설정하고 이미지 크기(img) 100% 주면 됨
-자식 요소 정렬 안될 때 width 늘려서 확인(콘텐츠 사이즈로 설정되어 있음)->너비주면 flex 가능
-width, height 안주고 hover 영역 키울 때 padding 사용
*마우스 우클릭->문서 서식: 자동 들여쓰기 기능
2. 드롭다운 메뉴
-사용자가 특정 메뉴 항목을 "클릭하거나, 마우스를 올렸을 때" 숨겨져있던 하위 메뉴 항목들이 나타남
-하위 메뉴 항목들은 특정 메뉴와 관련이 있고 추가적인 메뉴임
◎ 드롭다운 메뉴의 원리
1)드롭다운 메뉴는 특정 메뉴와 관련된 내용이니, 특정 메뉴 항목(li)과 같이 묶여있어야함
2)드롭다운메뉴는 특정 메뉴 항목 바로 밑에 배치되어야하고 다른 메뉴 항목에 영향을 주지 않아야 함
3)보이지 않게 숨겼다가 특정 조건(클릭하거나 마우스를 올렸을 때)을 만족하면, 나타나야함
◎ 드롭다운 메뉴의 원리의 코드화
1)드롭다운메뉴는 특정 메뉴와 관련된 내용이니, 특정 메뉴 항목(li)과 같이 묶여있어여함
2)드롭다운메뉴는 특정 메뉴 항목 바로 밑에 배치되어야하고 다른 메뉴 항목에 영향을 주지 않아야 함
/* 특정 항목의 추가 메뉴 배치 작업 */
/* 특정 항목 li를 선택하여 하위 요소가 position:absolute; 했을 때의 기준점 제시 */
.main_menu > :nth-child(1){
position: relative;
}
/* 특정 항목 li를 기준으로 position:absolute;하고 위치 조정: absolute해야 다른 메뉴 항목에 영향을 주지 않음 */
.sub_menu{
position: absolute;
top: 30px;
left: 0;
}
3)보이지 않게 숨겼다가 특정 조건(클릭하거나 마우스를 올렸을 때)을 만족하면, 나타나야함
.sub_menu{
position: absolute;
top: 30px;
left: 0;
display: none;
/* 배치 끝나면 시각, 구조적 숨기기*/
}
/* 특정 조건 지정하고, sub_menu 나타나도록 속성 지정 */
.main_menu>li:nth-child(1):hover .sub_menu{
display: block;
/*첫번째 항목에 마우스를 올렸을 때 숨겨져 있는 메뉴 나타나도록 지정 */
}
기본 드롭다운메뉴 구현
html
<body>
<ul class="main_menu">
<li>Portfolio</li>
<li>Calender
<ul class="sub_menu">
<li>Event1</li>
<li>Event2</li>
<li>Event3</li>
</ul>
</li>
<li>Resume</li>
<li>Blog</li>
</ul>
</body>
css
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
/* main_menu 가로, 가운데 정렬 */
.main_menu{
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
/* 직계 li 설정 margin, padding 간격 주기 */
.main_menu>li{
margin-right: 20px;
padding: 10px;
font-size: 20px;
background-color: yellow;
}
/* 특정 메뉴 항목에 position: relative; 주기 */
.main_menu>li:nth-child(2){
position: relative;
}
/* 드롭 다운 메뉴 position: absolute; 설정 */
.sub_menu{
position: absolute;
top: 45px;
left: 0; /* 라인 맞추기 */
padding: 20px;
font-size: 20px;
background-color: blue;
display: none;
}
.sub_menu>li{
margin: 2px;
}
/* 드롭다운 메뉴 hover시 표시 */
.main_menu>li:nth-child(2):hover .sub_menu{
display: block;
}
3. position: absolute;
◎position: 요소의 배치 방법 설정
◎ HTML 기본 배치 원칙
-요소와 요소는 겹칠 수가 없음-> 유일한 예외 조건이 position:absolute;
-블록 레벨 요소는 세로로 쌓이고, 인라인 레벨 요소는 가로로 쌓임
◎position: absolute; 특징
1) 기준점: 부모/조상 중에 position: absolute; 값을 가진 요소를 기준, 없다면 body 태그 기준
2) 기준점에 대한 top, bottom, left, right 속성과 값을 사용할 수 있음
3) 첫번째 기본 배치 원칙에 대한 예외 조건이므로, 요소와 요소가 겹칠 수 있어 z-index 속성을 쓸 수 있음
4) 요소끼리 겹칠 수 있다는 것은 문서 흐름에서 제거된 것임 (absolute된 요소의 빈 자리를 다른 요소가 채울 수 있음)
5) 가로, 세로 중앙 정렬하기가 수월함
position: absolute 사용하기
html
<body>
<div class="level1">
<div class="level2">
<div class="level3">
<p class="content">내용</p>
</div>
</div>
</div>
</body>
css
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
.level1{
width: 300px;
height: 300px;
margin-top: 100px;
margin-left: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: yellow;
}
.level2{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
background-color: aqua;
}
.level3{
position: relative;
width: 100px;
height: 100px;
background-color: chartreuse;
}
.content{
position: absolute;
top: 0%;
left: 0px;
}
* position: absolute는 부모 요소에 relative가 여러 개 있을 경우 가까이 있는 relative를 기준으로 적용