본문 바로가기

CSS/디자인

[CSS]웹 디자인 해보기-blog 1편 기획

[Blog] 웹 뷰만 만들어보자.

1. 뷰 기획하기.


만들고자하는 blog는 3단형 blog입니다.


먼저 각 부분을 나누어봤어요.


div 태그로 감쌀부분(wrapper)의 이름을 굵은 글씨로 정해 놓구요.


좀 더 구체화 해서 기획 했어요.


기획에서 구체적으로 하지 않으면 나중에 무얼할지 모르게 되요.


wrapper가 가려서 안보이는 부분은 투명도를 줘서 굵은 글씨가 보이도록 했어요.


반응형 웹으로 기획하자.


width가 1100px 이상일 때.



width가 600px 이상 ~ 1100px 미만일 때


sidebar를 없앴어요.

 


width가 600px 미만일 때


header가 state 와 contents사이로 이동하도록 했어요.





2편에선 구현을 시작할게요.

'CSS > 디자인' 카테고리의 다른 글

[CSS]웹 디자인 해보기-blog 2편 구현-1  (0) 2018.12.06