display
position
float
flex
우리가 이렇게 배우기로 했는데 float은 비중이 적어요.
우선 css를 할 때 display로 해보고 안될때 position으로 넘어가는 방식으로 한다.
position속성에서 static은 겹칠 수 없다.
absolute는 겹칠 수 있다. 겹치고 싶다! 얘는 여기저기 뚫고 다닐 수 있다!
비유를 하자면 static은 사람이고, absolute는 유령이라고 생각하면 된다.
그리고 부모에게 position : relative 속성을 줬을 때 얘는 이제 부모의 공간 안에서만 움직일 수가 있다.
position : relative; 유령의 집 가둘 수 있는 상태가 됐어. 그래서 집을 못뚫어!!
section {
border : 10px solid red;
width : 300px;
position : relative;
}
section > img {
display : block;
width : 100%;
}
section > div {
position : absolute;
top: 50%;
left: 50%;
background-color : gold;
font-size : 2rem;
}나는 50%로 해서 얘가 사진에 정중앙에 있길 바랬는데...
요렇게 위치가 이상하다 ㅠㅠㅠ
section {
border : 10px solid red;
width : 300px;
position : relative;
}
section > img {
display : block;
width : 100%;
}
section > div {
position : absolute;
top: 50%;
left: 50%;
background-color : gold;
font-size : 2rem;
transform : translateX(-50%) translatey(-50%);
}
div사이즈의 기준으로 가운데 정렬을 해야되지 않을까?
transform : translateX(-50%) translatey(-50%)로 x축과 y축을 기준으로.. 맞춰야 한다고 한다.
%의 기준은 div의 넓이를 기준으로 한다.
이건 flex가 있기 전에 많이 사용한 방법이라고 한다.
참고하면 됩니다.
1차를 제외하고 씩다 숨겨라! 마우스를 올렸을 때 나타내라.
TIP
- ul > li > a 는 불변의 패턴이다.
- ul은 ul을 자식으로 둘 수 없다.
- a는 대부분의 경우 오직 텍스트만 가질 수 있다.
- li는 li를 자식으로 둘 수 없다.
- ul의 자식은 무조건 li 여야 한다.
- li는 그 어떤 것도 자식으로 가질 수 있다.
fixed
position 에서 fixed로 속성을 정해놓으면 스크롤바를 따라다닌다.
white-space
white-space : nowap; 는 줄바꿈하지 마라!!!
근데 글이 넘친다, 하면 이럴 때 overflow:auto; 라고 했을 때 지가 알아서 스크롤 생성해준다.
요고 두개는 묶어서 사용해주면 된다.
white-space : nowap; 는 줄바꿈하지 마라!!!
에다가 overflow : nowrap;
text-overflow: ellipsis; 이렇게 주면 넘친 글이 숨겨지고 ... 이렇게 표시가 됩니다.
사실 여기까지만 알아도 됩니다~ 충분히 사용할 수 있어요
복습
집에서 html 34강 복습해봐용
정말 중요하니까 잘 알아둬야 합니다 ㅠㅠㅠ
36강 : 3차 풀 다운 메뉴
이거까지 다 할 수 있으면 html, css는 모두 파악을 할 수 있게 된겁니다.
이것들을 활용해서 하면 레이아웃은 아주 껌입니다!!!!
display, visibility와 opacity..? 에 대해서 알아보면 좋아용
transition 속성도 한 번 알아보자...
