layout 만들기
2016. 7. 15. 13:24ㆍ[개발] 지식/Publish
연습을 위해, 네이버까페 홈화면의 레이아웃을 잡아봤다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.header {height:55px;background-color:#00c73c;}
.gnb {height:38px; border:1px solid #ccc;}
section {text-align:center;}
footer {text-align:center;}
.cafestory {display:inline-block; width:950px; height:260px; border:1px solid #ccc; margin-top:20px;}
.memberCount {display:inline-block; width:950px; height:45px; border:1px solid #ccc; margin:5px 0;}
.leftContent {display:inline-block; width:660px; height:900px; border:1px solid #ccc; margin-right:-4px;}
.rightContent {display:inline-block; width:290px; height:900px; border:1px solid #ccc; margin-left:-3px;}
.footer {display:block;height:90px; border:1px solid #ccc; margin-top:-4px; border-top:3px solid #000;}
</style>
</head>
<body>
<header>
<div class="header"></div>
<div class="gnb"></div>
</header>
<section>
<div class="cafestory"></div>
<div class="memberCount"></div>
<div class="leftContent"></div>
<div class="rightContent"></div>
</section>
<footer>
<div class="footer"></div>
</footer>
</body>
</html>
아직 미숙하지만 일단 겉모양이라도 만들어보려고 했다..
개념이 덜잡힌 상태라 여러가지 의문점이 생각났는데, 이는 다음과 같다.
- semantic을 위해 <section>, <footer> 와 같은 HTML5 태그들을 굳이 사용해야 하는가? DIV로 대체하면 안되는가?
-> 시맨틱 웹을 구현하기 위해서는 가능한 의미적인 마크업을 사용하는 것이 좋다. 물론 div를 쓰나 section을 쓰나 구현은 가능하다. 하지만 시맨틱을 어디까지 신경쓸 것인지에 대한 개인의 선택에 따라 사용하면 된다.
- 브라우저를 확대/축소할 경우 레이아웃이 깨지는데 inline-block이 아닌 다른 방법을 사용해야 하는가?
-> inline-block으로 레이아웃을 잡을 수 있다. 하지만 브라우저의 크기에 따라 결과물이 변하는 것을 원하지 않는다면, wrapper 기능을 하는 태그로 감싸주면 된다.
- 각 요소들의 width/height를 고정값(px)으로 주는 것이 맞는 것인가?
-> 개인의 자유. 틀린 코딩은 없다. 브라우저 크기에 따라 동적으로 변하는 콘텐츠를 만들고 싶다면 고정 크기가 아닌 block 요소와 퍼센테이지를 잘 활용하는 것이 더 좋을 것이다.
'[개발] 지식 > Publish' 카테고리의 다른 글
| IE에서 focus()가 정상적으로 처리되지 않는 현상 (0) | 2017.05.17 |
|---|---|
| [레이아웃] 레이아웃 잡기 (float) (0) | 2017.02.24 |
| [layout] 왼쪽 가변 오른쪽 고정(불변) - 수정중 (0) | 2016.11.11 |
| [animation] loading - square 분석 (0) | 2016.09.06 |
| 부트스트랩 템플릿 코드 (0) | 2016.08.03 |
<