HTML5와 CSS3를 이용한 간단한 Web페이지 만들기[헤더 구조 꾸미기] -part4-

전 시간에 HTML로 기본적인 내용을 짯으니

이번에는 CSS를 사용해서 좀 더 이쁘기 설정을 해보도록 할게요

위에 보이는 사진이 CSS 적용하기 전 입니다.

이제 적용을 해보도록 할게요 ㅎㅎ

중앙 정렬하는 내용은 암기해주세요!

여기서 /* 절대 좌표*/

이 부분 있쬬?

지금은 아무런 변화가 없을거에요 그치만 좀있다가 nav들의 위치를 절대 적으로 위치를 지정해 주기 위해서 사용하는 것 입니다.

여기서 잠깐 개념 위치 속성에 대해 개념정리좀 하고 넘어가도록 할게요

절대적 좌표와 상대적 좌표가 무슨 뜻 인가요?

절대적 좌표는 x, y 좌표를 설정하여 절대적 위치를 지정해 주는 것 입니다.

쉽게 말해서 요소의 위치를 개발자가 마음대로 정해줄 수 있어요

상대적 좌표는 요소를 입력한 순서대로 상대적으로 위치를 지정해 주는 것 입니다. ㅎㅎ

그래서 사용자가 마음대로 위치설정을 못해요~

그리고 좌표를 설정하는 속성 중에서 position 속성이 있는데요 이 속성은 HTML태그의 위치를 설정 방법(절대적, 상대적)을 변경할때 사용하는 속성 입니다.

position 속성의 키워드

<상대적 위치 좌표 키워드>

-static 키워드 : 태그가 위에서 아래로 순서대로 배치

-relative 키워드 : 초기 위치 상태에서 상하좌우로 위치를 이동

<절대적 위치 좌표 키워드>

-absolute 키워드 : 절대적 위치 좌표를 설정

-fixed 키워드 : 화면을 기준으로 절대적 위치 좌표를 설정(ex 핸드폰 어플 개발[핸드폰 마다 화면 크기가 다름])

★position 속성의 공식 -> 완전 중요!!!!

① 자손에게 position속성을 absolute 키워드로 적용하면 부모에게 height 속성을 입력한다.

② 자손의 position 속성을 absolute 키워드로 적용하면 부모의 position 속성을 relative 키워드로 적용한다.

이 내용들은 꼭 암기해 주세요!!!

계속 정리해도록 할게요

위에 공식에서 "자손의 position 속성을 absolute 키워드로 적용하면 부모의 position 속성을 relative 키워드로 적용한다"

라고 정의를 내렷던거 기억 나시죠?(기억 안나면 금붕어임)

여기서도 보시면 #main_header > #title 

여기서 사용된건 자손 선택자 인데요 html내용에 보시면 main_header의 자손은 title와 main_gnb, main_lnb

인것을 확인할 수 있습니다.

그래서 공식에 따라서 현재 부모의 position 속성에 relative(상대적 위치 좌표)키워드를 적용햇으니

자손의 position 속성을 abolute키워드로 적용시킨 것 입니다.

그러면 결과기 이렇게 나와요 ㅎㅎ

위처럼 설정을 해줫는데요 top:0; bottom:10px; right:0; left:0;

이게 무슨뜻이냐면

붉은색으로 칠해진 칸이 있는데 여기서 푸른색으로 칠해진 칸이 header 칸 입니다.

(제가 맨 처음에 설정을 해주어서 그래요)

여기서 top:0 은 파란색 칸에서 얼마나 떨어지게 하느냐 인데 0으로 했으니 안떨어지고

bottom:10px은 바텀에서 10px만큼 띄워라 라는 뜻인데 그래서 저렇게 띄워진 것 입니다.

※이번 포스팅에서 가장 중요한 내용!!

위치 속성 공식을 암기하기