04/01 HTML/CSS 아이템 포지셔닝(가구배치)

우리가 만들어야 할 헤더부분

 

 

 

 

 

 

현재 상태 : 뉴렉처 로고가 아직 방이다 -> 인라인블럭으로 보이게..

 

 

 

 

 

 

 

 

 

 

포지셔닝

 

 

컨텐츠 블럭은 고정

 

 

 

 

디자이너가 가져온 높이 너비 정보

 

 

포지셔닝 해주었는데 원하던 영역에 있지 않는 것을 볼 수 있다

 

 

빨간 줄 안쪽에 위치해야 함.. -> absolute 때문에  -> 부모에 relative 해주면 기준 바꿀 수 있어

 

 

 

 

 

 

 

포지셔닝...  헷갈린다면 다시 보고오기

yeonee3219.tistory.com/29

03/12 HTML/CSS Grid, Position

 

 

 

 

 

 

 

 

 

부모영역에 relative 포지셔닝 해주어서 / 부모영역 안쪽으로 기준을 한정해주었다

 

 

*

 position 을 다 absolute로 해줄경우에는 상대적으로 배치하는 것이기 때문에 부모의 크기가 커진다 

  -> 그거 해결할거면 사용해도 무관

 

절대적으로 자리를 정해놓기 위해서 컨텐츠마다 absolute로 포지셔닝 해준 것 ( 대신 relative로 꼭 기준잡아줘야 함 )

 

 

 

 

 

 

 

 

 

똑같이 다른 것도 해주자

 

 

 

 

 

메인메뉴와 검색폼까지 해줌

 

 

 

 

 

 

 

 

 

 

오른쪽 두개는 왜 안해줬는가? ->   left으로 주면 안됨 -> 로그인이 로그인, 로그아웃으로 바뀌면 오른쪽으로 크기가 늘어나면 컨텐츠 깨질 수 있어

 

 

 

 

 

right로 주면 컨텐츠 길이가 길어진다해도 왼쪽으로 길어져서 컨텐츠가 깨지지 않겠다                                         

 

 

 

 

 

 

비주얼부분 만들기

 

 

 

 

 

 

 

 

aside부분 만들기

 

 

 

 

aside부분에 뒷배경처럼 이미지가 들어가야 한다

 

그러려면 body안쪽에 따로 블럭을 만들어줘야 하는데..

 

 

 

왼쪽 사진처럼 만들게 되면 그리드가 깨져버린다

 

-> 오른쪽 사진의 바디 안쪽 그리드를 새로만든 블럭에 새로 바꿔주면 됨

 

 

 

 

body 안의 aside와 main을 어우르는 float-content에 그리드 해주면 된다

 

 

 

 

 

 

 

 

 

 

aside 배경 입히기