JAVA 웹개발 과정 국비 35일차 정리

35일차

※ 배우는 과정이므로 정확하지 않을 수 있습니다.
잘못된 점은 알려주시면 수정하도록 하겠습니다!

---

1. Layout 이어서..

1) margin:auto

주로 컨테이너를 정렬할 때 margin:auto를 사용하여 중앙으로 정렬한다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

2) CDN 방식

mailbox를 만드는 실습을 하는 도중 mail 아이콘을 가져와서 사용하는 방법을 배웠다.
Content Delivery Network의 약자를 따서 CDN 방식이라고 부르는데, CSS뿐만 아니라 여러 분야에서 사용하는 것 같다.
외부에서 만들어진 CSS를 가져다가 사용하는 방식을 CSS CDN방식이라고 한다.
free로 이용할 수 있는 icon들이 모여있는 fontawesome.com 에서 mail 아이콘을 가져와보자.

① link 코드 가져오기

fontawesome 사이트에서는 찾기가 어려워서 구글에 검색했다.
font awesome cdn이라고 치면 아래와 같은 link 코드를 찾을 수 있다.
이 코드를 head 태그 안에 넣어준다.

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

② 원하는 아이콘 삽입하기

사이트에 들어가서 icon을 누르고 Free를 눌러서 mail을 검색하면 다양한 아이콘들을 볼 수 있다.
mailbox 이미지에 잘 맞을 것 같은 아이콘 하나를 선택한다.
그리고 Strat Using This Icon을 누르면 HTML 코드가 하나 나오는데 복사하여 원하는 html 코드 부분에 붙여넣기를 하면 된다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

3) Positioning

지금까지 요소의 위치를 조정하려면 margin을 주거나 padding을 줘서 움직여주던지 아니면 align을 이용하여 정렬을 했었다.
그러나 이렇게하면 다른 요소들까지 영향을 받기 때문에 하나의 위치를 조정할 수 있는 position속성을 이용한다.

① position:static

모든 html element는 기본적으로 position 속성을 가지고 있다.
default 값이 바로 static이다.
단어의 뜻으로 유추할 수 있듯이, static은 고정되어 움직일 수 없고, top이나 left 속성을 주어도 움직이지 않는다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

② position:relative

요소의 위치를 조정하기 위한 가장 직관적인 방법이다.
기존 자신이 있었던 위치를 기준으로 움직인다.
top과 left는 이해하기 쉽다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

그러나 right와 bottom은 보통 생각하는 방식과는 약간 다르다.
아래 초록색 div는 맨 아래쪽에서 50px 떨어져 있을 것 같지만 오히려 위쪽을 뚫고 들어가서 반 가까이 먹혀있다.
bottom:50px 이 동작하는 방식은 ‘기존 div박스가 원래 있었던 자리의 아래쪽(bottom) 선에서 50px만큼 멀어진다’라고 이해해야 한다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.

③ position:absolute

relative가 기존 자신이 있었던 위치를 기준으로 움직였다면, absolute는 position 속성이 static이 아닌 조상을 순서대로 찾아 올라가며 만약 만나면 그 조상을 기준으로 삼는다.
body까지 찾아 올라갔는데도 static이 아닌 조상이 없다면 body가 그대로 기준이 된다.

relative보다 absolute가 더 자주 쓰이는 이유는 요소 안에 요소를 배치하기 쉬워지기 때문이다.
핑크박스 안에 초록박스를 정중앙에 넣고 싶다고 하자.
relative를 쓰면 이전에 있던 위치를 신경쓰며 계산해서 이동 값을 넣어야 할 것이다.
그러나 absolute를 쓰면 핑크박스를 기준으로 움직일 수 있으므로 편하게 위치시킬 수 있다.
따라서 relative는 단독으로 위치 이동을 위해 쓰이기보다는 absolute의 기준점이 되게 하기 위해 주는 경우가 대부분이다.

See the Pen css by kkongkeozzang (@kkongkeozzang) on CodePen.