자기소개 페이지를 만들면서 헷갈렸던 css 기본문법 정리
p.s 헷갈릴 때마다 보려고 정리하는 작성하는 글입니다
Margins vs Padding
기본적으로 box는 이런 구조를 가지고 있다.
margin과 padding은 border을 경계로 나누어진다.
다시 말해서, margin은 element의 바깥 공간을 다루고 padding은 elemetn의 안쪽 공간은 다룬다.
그렇다면 언제 Margins 혹은 Padding 을 사용할까?
Margin
-
페이지에서 element의 위치를 바꾸려고 할 때 사용한다.
element를 위아래 또는 좌우로 이동시킬 수 있다. 만약에 페이지의 width가 고정되어있다면margin: auto로 값을 지정해서 element를 중앙에 위치시킬 수 있다. -
빈공간 혹은 근처 element 간의 간격을 지정할 수 있다.
-
element 간을 겹치게 할 때 사용한다.
broken grid effect을 사용할 때 유용하다.
Padding
-
content와border사이에 공간을 주기위해서 사용한다. -
element의 크기를 바꾸기 위해서 사용한다.
buttons의 클릭 영역을 넓힐때 사용할 수 있다.
표기법
기본적으로 표기법은 시계방향으로, 위 오른쪽 아래 왼쪽 순으로 설정해줘야한다.
ex) margin: 10px 20px 30px 40px;
-
상하와 좌우가 각각 같다면,
margin: 30px 20px; -
상하좌우 모두 같다면,
margin: 10px; -
좌우가 같고 위 아래가 다르다면,
margin: 10px 20px 30px(위:10px 좌우:20px 아래:30px) -
예제
#box1, #box2, #box3{
width: 400px;
margin: 0 auto;
border: solid 1px red;
padding: 20px;
}✔️ 박스의 중앙 배치
< div > 태그와 같은 박스 요소를 중앙에 배치할 때는 다음과 같이 좌우측 마진을 auto로 설정한다
margin : 0 auto;
✔️ 글자나 이미지의 중앙 정렬
박스 내에 있는 글자나 이미지를 중앙에 정렬할 때에는 다음과 같이 text-align 속성의 속성 값 center를 사용한다.
text-align: center;
Position/ Float/ Display
Position
position속성은 HTML 요소의 위치를 지정하는 데 사용한다.
종류는 static, relative, absolute, fixed, sticky 이렇게 5가지가 있다.
static
static은 모든 태그의 기본값이다.
inline 이라면 왼쪽에서 오른쪽, block 이라면 위에서 아래로 쌓인다.
relative
relative는 요소의 상대 위치를 지정하는 속성 값이다.
원래 있어야 할 지점을 기준으로 상대적인 위치로 요소를 이동시킨다.
absolute
element가 가장 가까이에 위치한 부모 요소에(static이 아닌) 상대적인 위치로 배치된다.
이를 위한 선제 조건은 부모 요소의 position 속성 값이 relative, absolute, fixed 중 하나이어야 한다. 그렇지 않다면 body를 기준으로 배치가 된다.
fixed
요소를 브라우저 화면의 특정 위치에 고정시킬 때 사용한다. 다시 말해서 스크롤 바를 아래로 내려도 요소가 브라우저 화면의 기존 위치에 고정되어 있다.
- '자기소개 페이지'를 쓸 때 실제로 사용한 예제
/*css*/
.about i{
font-size:3rem;
position:fixed;
bottom:10px;
right:20px;
color: white;
}<!--html-->
<a href="#container"><i class="fas fa-chevron-up"></i></a>각 section에 있을 때home 페이지로 돌아가게 하는 화살표를 화면 아래쪽에 배치하고 싶었다.
스크롤을 내려도 각 section마다 위치하게 하기위해 position: fixed 속성을 써주었다.
sticky
element가 문서의 일반적인 흐름에 따라 배치된다. top, right, bottom, left 속성들의 값을 기준으로 flow root 및 해당 element 를 포함하는 containing box에 대한 상대적 위치에 배치된다.
따라서 top, right, bottom, left 속성을 주어주지 않는다면 static으로 배치되는 것과 같다.
fixed 속성과 마찬가지로 스크롤을 하더라도 화면에 보여진다.
하지만 fixed는 뷰포트를 기준으로 하기 때문에 요소들이 겹쳐보일 수 있지만, sticky를 사용하면 요소들이 겹쳐보이지 않는다.
✔️ z-index
z-index는 어느 객체가 앞 혹은 뒤로 배치 될지 순서를 결정하는 속성이다.
position (relative, absolute, fixed) 속성이 적용된 요소에서만 작동한다.
- auto: 기본값으로 z-index를 지정하지 않은 것과 같다
- number: 배치 순서를 결정, 숫자가 낮을 수록 뒤에 배치되며 숫자가 높을수록 앞에 나옴, 음수도 가능
- initial: 기본값으로 설정함
Float
float 속성을 이용하면 웹 페이지의 요소를 공중에 띄워서 화면의 좌측 또는 우측에 배치할 수 있다.
속성 값으로는 left, right이 존재한다.
float 속성이 적용된 요소 다음에 오는 요소를 float 속성의 영향을 받지 않고 새로운 줄에 배치하고자 할 때에는 clear 속성을 사용한다.
- 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{ float: left; }
</style>
</head>
<body>
<div><img src="ocean.jpg"></div>
<h3 style="border: solid 1px red;">바다</h3>
<p syle="border: solid 1px red;"> 바다에 놀러가고 싶다</p>
</body>
</html>이렇게 코드를 구현한다면 이미지 다음에 오는 글 제목과 단락은 이미지의 우측에 배치된다.
이때 div{ float: left; } 아래에
h3 { clear: left; }를 써주면 글 제목과 단락이 이미지 박스 다음의 새로운 줄에서 시작된다. (이미지 밑으로 배치가 된다.)
다시 말해서 clear 속성을 사용하면 그 이전에 적용된 float 속성이 해제되어 clear 속성이 적용된 요소는 새로운 줄에 배치된다.
(float: right; 와 float: left; 둘 다 해제할 때는 clear: both;를 써준다. )
Display
HTML 요소를 브라우저 화면에 표시하는 작업인 디스플레이 방식에는 인라인(inline) 과 블록(block)이 있다.
inline
- 수평방향으로 요소가 배치되면 줄 바꿈이 적용되지 않는다.
- 박스의 크기를 설정하는 width와 height 속성이 적용되지 않는다.
- 상하단 마진인 margin-top과 margin-bottom 속성이 적용되지 않는다.
block
- 해당 요소의 앞 뒤에 자동 줄 바꿈이 일어나 새로운 줄에 요소가 표시된다. 달리 말하면 수직 방향을 요소가 배치된다.
- 박스의 크기를 설정하는 width와 height 속성이 적용된다.
- 모든 마진 설정이 가능하다.
inline-block
- 인라인 방식에서와 같이 요소가 수평 방향으로 배치되고, 줄 바꿈은 일어나지 않는다.
- 블록 방식에서와 같이 박스의 크기 설정이 가능하다.
- 블록 방식에서와 같이 모든 마진 설정이 가능하다.
none
HTML요소를 화면에서 감추는 데 사용된다.
- display 속성이 사용되지 않을 경우
모든 HTML 요소는 display 속성의 초기 값이 미리 설정되어 있어 설정된 대로 요소가 화면에 표시된다.
인라인/블록의 기본설정과 HTML 요소
| 인라인(inline) | 블록(block) |
|---|---|
| < span >, < a >, < input >, < textarea >,< br >, < button >, < select >, < option >, < script > 등 | < div >,< p >, < h1 >, < h2 >,..., < form >, < footer >, < section > |
참고자료:
https://blog.hubspot.com/website/css-margin-vs-padding
