헤더 아이템배치 / Position / 배경중첩

스타일링 : 방(크기), 가구,가구배치

레이아웃이란 ? 크기와 위치를 잡아주는것

헤더영역에 가구를 배치하면서 absolute를 주로  썼다. 그 이유는

header라는 콘텐트방이 크기가 고정되어있기 때문에 절대위치로 지정해줄 수 있다.

• absolute지정시 원점 ?
• offset영역을 할 영역에 relative를 지정 -> 하위부분에 absolute
• 문서의 기준 : absolute
• 현재위치 : relative
• 화면위치 : fixed

Header item 배치 / 헤더 아이템 위치

헤더영역은 고정이다. 위아래 높이가 달라지지않는다.

콘텐트가 위치하는 방이 달라지지않는다.

logo와 메인메뉴들의 위치가 다르다.

고정위치에 배치방법

position : absolute, relative, fixed

logo에 absolute적용 모습

Logo에 position:absolute 적용시 생기는 문제 

창을 줄이면 다른메뉴들은 움직이는데 로고만 고정되어있다.

로고가 파란색의 범위(콘텐트가있어야할 범위)를 벗어나 왼쪽에  쏠려있다.

창을 줄이면 다른메뉴들은 움직이는데 로고만 고정되어있다.

같은범주안에 로고 넣기

부모를 relative를 주고 자식을 absolute를 한후 left와 top 을 적용했다.

float-content 부모를 기준(파란색)으로 logo의 위치가 left 0, top 23적용된다. 

---

Position  속성

기본값 static :부모나 조상이 relative가 없으면 전체페이지 좌상단

• relative를 적용하지않았을떄, 문서좌상단이 기준이되어 left , top이 적용된다.
• 1. 부모없이 포지셔닝을 absolute로 하면 문서좌상단이 기준이되고 left, top적용
• 2. 부모없이 포지셔닝을 fixed로 하면 화면이 기준이 되고 left,top적용 
• 3. 어떤박스안에서 위치를 정하고싶으면 박스(부모)를 relative로 지정하고 자식(지정하고싶은아이템)을 absolute로하면 부모를 기준으로 left,top이 적용된다.
• 가까운 relative 포지셔닝되어있는것을 기준으로 원점이 바뀐다.
• 부모가 relative, 자식이 relative면 각자의 원래 위치가 기준이 된다.

static 일때 left와 top을 적용해도 의미가없다.

left와 top에 영향을 미치려면 최소한 absolute / relative / fixed / sticky이어야한다.

기준점이다르다.

• absolute : 부모나 조상이 relative가없으면 전체페이지의 좌측상단의 기준으로 left 0, top 23px 적용
• relative : 원위치, 현재위치의 기준에서 left 0, top 23px이 적용
• fixed : 화면좌상단(화면을 기준) , 화면은 스크롤이안됨,

logo에만 absolute를적용하면 문서의 좌상단을 기준으로 적용되어 float-content밖에 위치하게된다.

float-content를 부모로 만들고(position : relative), logo를 부모기준으로 위치하게한다.

 

absolute의 기준점

자식들이 모두 relative 포지셔닝된다면 ? 

• 형이 위치를 바꾸어도 동생은 그대로 있고, 부모의 영역만 커진다.
• 영역이 비어있는데 큰 영역이 만들어진다.
• 좌표계산시에도 어렵다.
• relative로 하나씩 값을 지정해줘도 되지만 부모의 크기문제가 발생한다.

부모밑에 모두 static일경우

형이 absolute일경우 동생이 다시 자리를 차지한다 / relative는 자리를 동생이 채우지않고 비우게되고 부모영역이 넓어진다.

---

헤더아이템을 오른쪽기준으로 정렬시키기.

콘텐트중에 오른쪽기준으로 정렬해야하는 것들이 있다.

Home/로그아웃/회원가입에 동일하게 left,top을 적용해도되지만

콘텐트길이가 길어진다면 ? 왼쪽기준일때 오른쪽으로 늘어난다. 오른쪽벽을만나면 콘텐트가 깨진다. (내려쓰기되거나)

콘텐트가 길어질때 깨진화면

오른쪽으로 기준하면 왼쪽으로 늘어난다. 

---

aside의 배경 : 그라데이션 + 장식

1.그라데이션 : 콘텐트가 늘어난만큼 반복되어야하는 부분

2.장식 : 반복x

한 영역에 두 개의 박스가 필요하다.

aside와 main을 감싸는 블록을 만들고 그 블록에 배경을 넣고 aside에도 배경(장식)을 넣는다.

body와 aside사이에 <div class="float-content">를 넣었을때 body에 적용된 레이아웃이 깨졌다.

body > float-content > aside 순

body에 적용되어있근 그리드(레이아웃)

중간에 다리(<div class="float-content">) 가 생긴느낌. 바디자손(aside와 main)에게 적용하려해놓고 바디에게 넣은것.

어사이드가 왼쪽으로 쏠려있다

float-content에 레이아웃을 적용한다 ( float-content안에 aside와 main이 포함)

•  

이미지크기와 float=content크기가 동일해서 center를 뺴도 무관하다.

 repeat-y : 반복을 수직으로한다

 

---

Visual의 콘텐트영역에 그림넣기

우측 : 적용한 모습