화면이 유동적일때 고정시키고 싶을때
가운데 정렬
position:absolute;
top:50%;
left:50%;
transform:translatex(-50%)
translatey(-50%);
transform:translate(-50%,-50%);
position이 absolate일 때
top left를 쓸 때 가운데 정렬을 하는데 맞지 않아 보이지만
기준이 왼쪽 가장자리이기 때문에 맞다
하지만 우리가 원하는 것은 아니기 때문에 이때 우리는 transform을 쓸 수 있다
transformx 와 transformy를 통해 x,y 값을 정할 수 있고
transform:translate(-50%,-50%) 이렇게로도 쓴다
유동적이게 움직이고 싶을 때
1.
position:absolute;
left:100px;
top:100px;
bottom:100px;
right:100px;
2
position:absolute;
left:40%;
top:40%;
bottom:40%;
right:40%;
position:absolute;
left:40%;
top:40%;
width:40%
height:40%
유동적 움직임
div:nth-child(1){
background-color:darkcyan;
top:0;
left:0;
right:50%;
bottom:50%;
}
div:nth-child(2){
background-color:darkgray;
top:50%;
left:0%;
right:50%;
bottom:0%;
}
div:nth-child(3){
background-color:yellow;
top:50%;
left:50%;
right:0%;
bottom:0%;
}
div:nth-child(4){
background-color:pink;
top:0%;
left:50%;
right:0;
bottom:50%;
white-space:nowrap : 줄바꿈을 안하겠다는 것
overflow-x: hidden : 넘칠 때 숨기겠다는 것
overflow-x: scroll : 텍스트 길이에 상관없이 스크롤 만들어줌
overflow-x: auto : 텍스트가 길어지면 스크롤바 생성
text-overflow:ellipsis: ... 처리
2차 메뉴 만들때
ul 안에는 li 못들어오니까
li 안에 ul 넣고 li 넣음
border와 outline 의 차이점
border은 늘리고 outline(absolute)은 유령처럼 되고 레이아웃을 건드리지 않는다
ul ul
ul 아래에 있는 모든 ul포함
