rem
기준이 되는값을 지정된 배수로 변환해 표현한 크기를 의미
만약 body에 폰트사이즈를 지정? -> 모든자식요소 들은 font-size영향받음..
body {
font-size:24px;
}
.test{
font-size:1.5em //calculate 24px*1.5 24px의 1.5
}
<div class="Test"> 24*1.5em=36
test
<div class="Test"> 36*1.5em=54
test
<div class="Test">test</div> //54*1.5em=81
</div>
</div>
상대적으로 커지는걸 볼수있다 왜그런가?
각각의 div는 각 부모의 폰트를 상속받아
점점 커지게되는것 !
rem이란?
Root(최상위)
최상위 태그에 요소를 지정한것 기준
VW,VH
뷰포트의 너비값과 높이값!
브라우저 높이값이 1000일때 1vh는 10px이 됌..!
1000px 기준 만약? 100vh라면? 몇일까?
-> 1000px이돼는것!
float
float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
<div class="header">
<div class="header-left">tag</div>
<div class="header-right">right</div>
</div>
.header-left{
float:left;
}
.header-right{
float:right;
}
좌우 배치되는것을 볼수있다.
float 삭제
clear:both;
Form
form 태그의 method 속성은 폼 데이터(form data)가 서버로 제출될 때 사용되는 HTTP 메소드를 명시합니다.
get
폼 데이터를 HTTP GET 메소드로 전송함.
POST
폼 데이터를 HTTP POST 메소드로 전송함.
.gnb-menu ul .active::before{ 밑에 작은 칸 생성
content:"";
width:15px;
height:3px;
background-color: white;
position: absolute;
bottom: 0;
left:50%;
transform: translate(-50%,0);
}
.gnb-menu ul li:hover::before{ hover시 생기는 칸!
content:"";
width:5px;
height:3px;
background-color: white;
position: absolute;
bottom: 0;
left:50%;
transform: translate(-50%,0);
}
.gnb-menu ul li:hover{ hover시 색상변경
color:darkgray;
}
header .gnb .menu{
display: flex;
align-items: center;
grid-area: menu;
justify-content: flex-end;
margin:10px;
}
hover 시 밑에 작은칸 생성밑
숙소에 하단바 생성!
