1. position 속성 - relative, absolute, fixed
- css 레이아웃을 배워봅시다.
https://ko.learnlayout.com/position.html 정리해보기
#main {
width: 600px;
margin: 0 auto;
}위 css는 블록 엘리먼트의 넓이를 600px로 고정하고 화면의 중앙에 위치하게 하지만 브라우저 창이 엘리먼트 넓이보다 작을 때는 좌우 스크롤바가 생성된다.
어떻게 상황을 개선할 수 있을까?
#main {
max-width: 600px;
margin: 0 auto;
}이렇게 하면 해당 엘리먼트의 최대 넓이가 600px가 되기 때문에 창을 아무리 키워도 넓이가 고정되어 훨씬 가독성이 좋아진다.
.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}simple은 마진때문에 더 작게 출력, fancy의 경우 패딩과 테두리 값 때문에 훨씬 크게 출력이 된다.
여기에 box-sizing : border-box;를 주게 되면 둘 다 500px 넓이로 출력이 된다.
** 참고 : box-sizing은 최근 나온 기술이기 때문에 아래와 같이 webkit과 moz도 함께 넣어주는 것을 권장.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;- position
static은 기본값으로 설정되어 있으며 위치를 바꿀 수 없다.
relative는 기본적으로 static과 같은 위치에 있지만 해당 위치에서 값의 변화를 주면 위치가 이동한다.
fixed는 viewport에 따라 위치가 고정되며 페이지가 스크롤되더라도 늘 같은 곳에 위치하게 된다.
absolute는 조상 요소에 특정 포지션이 부여되지 않았다면 position:static이 기본인 본문을 기준으로 위치하게 된다. 따라서 주로 position relative를 부모요소에 주고 자식요소에 absolute를 주면 부모를 기준으로 위치하게 된다.
이미지를 텍스트가 감싸는 형태가 됨
img에 float을 줬을 때 이미지가 영역을 벗어나는 경우가 생기는데 이 때 overflow: auto;를 주면 영역이 이미지에 맞게 넓어진다.
flex 정리 글
2. inline, inline-block, block 에 대해서
-
block : 한줄을 다 차지. 줄바꿈이 일어남.
: div(기본), p, form, header, footer, section -
inline : 컨텐츠만큼 영역을 차지함.
: span(기본), a, img
- inline-block : inline과 비슷하지만 너비와 높이를 지정할 수 있다.
인라인 블록 텍스트 정렬
- none : script와 같은 일부 특별 엘리먼트로서 none을 기본값으로 한다. 이 값은 엘리먼트를 보이고 감출 때 사용된다.
** display none은 아예 페이지에서 렌더링하지 않지만 hiddend은 보이지만 않고 렌더링이 일어난다.
