CSS 레이아웃
레이아웃에는 보통 block, inline 엘리먼트가 있다.
Block element - 새 줄에서 시작해 좌우로 최대로 늘어난다.
<div>,<p>,<form>,<header>,<footer>,<section>등이 있다.
Inline element - 단락 안에서 흐름을 해치지 않고, 이어서 적힌다. Inline 엘리멘트에는 margin top bottom이 적용이 안 된다. (Block 요소에만 적용된다)
⚙️ inline-block 형식으로 해주면 margin top bottom을 적용할 수 있다.
<span>,<a>이 있다.
div 태그의 width 설정
<div> 는 블록 엘리먼트로 좌우로 꽉 채워 차지하지만 css를 사용하여 width를 설정해줄 수 있다.
⚙️ margin: 0 auto 를 통해 해당 엘리먼트를 컨테이너 안에서 가로 중앙에 오게 할 수 있다.
⚙️ max-width: 를 통해서 창이 작은 곳에서도 가로 스크롤을 할 필요 없이 화면이 작은 창에 맞춰진다.
box-sizing: border box
예를 들어, <div>의 넓이를 50px로 지정을 했을 경우에 실제로 개발자도구나 배경화면에 색깔을 넣어 확인해봤을 때, 내가 지정한 50px보다 더 커진 경우를 볼 수 있다. (테두리와 패딩이 지정된 너비보다 그 이상으로 엘리먼트를 늘리기 때문이다.)
그렇기 때문에 처음 css를 작성할 때 default 값으로 하기와 같이 지정을 해놓으면 내가 원하는만큼의 사이즈로 크기를 정할 수 있다.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
스크롤 없애기
아래와 같이 body에 overflow를 활용하여 스크롤을 없애고 화면에 맞출 수 있다.
body {
overflow-x: hidden; // 가로 스크롤 없애기
overflow-y: hidden; // 세로 스크롤 없애기
}position 프로퍼티
기본값으로 position: static; 으로 설정되어 있다. 이런 상태는 위치가 지정된 것이 아니라고 한다. 다른 값으로 지정된 엘리먼트에 대해서 위치가 지정됐다고 표현한다.
position: relative
position: relative 만 적었을 경우에는 static이랑 다를 바가 없다. 하지만 엘리먼트에 top, right, bottom, left 값을 넣어주면 기본 위치에서 값만큼 엘리멘트가 이동한다.
(기존 본인의 자리에서 지정한 상대적인 위치로 이동한다.)
❗️ 부모 태그에 relative를 적어주면 자녀 태그에 있는 absolute의 상대적인 위치가 부모를 벗어나지 않고 테두리 안에서 이동하게 된다. (부모에 relative가 적혀있지 않았다면, 심지어 부모 태그에 margin을 줘서 공간을 줬다고 해도 그것을 무시하고 문서 제일 왼쪽 꼭지점 기준으로 이동했을 거다.
position: fixed
position: fixed 는 페이지가 스크롤 되더라도 지정된 곳에 고정되어 있는 것이다. top, right, bottom, left 값을 통해 위치를 조정할 수 있다.
⚙️ 모바일 브라우저에서는 고정 엘리먼트 지원이 불안정할 수 있다.
❗️ 무조건 문서를 기준으로 이동하게 된다. 부모 태그에 relative가 있어도 무시하고 문서 기준으로 상대적 위치로 이동한다.
position: absolute
position: absolute 는 위치가 지정된(static이 아닌) 부모 엘리멘트를 기준으로 삼고 그 부모 엘리멘트 내에서 top, right, bottom, left 값으로 위치를 지정할 수 있다.
⚙️ 부모 엘리멘트에는 position: relative 를 적어줘야 한다. 안 적으면 문서 본문(document body) 기준으로 삼는다.
웹사이트 구축 시 초기화 셋팅
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
html, body {height: 100%} - 전체 화면 사용을 위해