스마트폰 레이아웃 예제
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0,user-scalable=no" /><title></title><style>* {margin:0;padding:0;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}li {list-style:none;}a {text-decoration:none;}#main_header {height:45px;background: url('resources/img/bg_header.png');position:relative;text-align:center;line-height:45px;}#main_header > h1 {color: #ffffff;}#main_header > a, #main_header label {display:block;height:32px;position:absolute;}#main_header > a.left {width:80px;left:10px;top:7px;}#main_header > label.right {width:64px;right:10px;top:7px;}#toggle {display:none;}#gnb_wrap {display: none;border: 10px solid #333333;}#toggle:checked ~ #wrap > #gnb_wrap {display:block;}#gnb ul {background-color:#ffffff;overflow:hidden;}#gnb ul li {float:left;margin:10px 20px;padding:0;padding-right:40px;text-align:center;font-size:1.1em;border:1px solid #cccccc;box-sizing:border-box;}#lnb {height:60px;background-color:#137163;}#lnb ul {overflow:hidden;}#lnb ul li {float:left;width:20%;height:60px;line-height:60px;color:#ffffff;font-weight:bold;font-size:1.2em;text-align:center;border:1px solid #cccccc;box-sizing:border-box;}#section {padding:10px;color:#303030;}#section #section_body p:nth-child(1) {padding:10px 0;color:#3da4e8;font-size:1.1em;font-weight:bold;}#section #section_body p:nth-child(2) {background-image:url('./resources/img/visual14.jpg');background-repeat:no-repeat;background-position-x:-600px;}#footer {padding:10px;text-align:center;}#footer .logo {border-top:1px solid #5e5e5e;border-bottom:1px solid #5e5e5e;padding:10px 0;}#footer .info {padding-top:10px;font-size: 1.3em;font-weight:bold;}#footer .addr {color: #515151;font-size: .9em;}</style></head><body><input id="toggle" type="checkbox" /><div id="wrap"><header id="main_header"><a class="left" href="#none"><img src="./resources/img/category.png" alt="category" /></a><h1>Mobile</h1><label class="right" for="toggle" onclick=""><img src="./resources/img/menu.png" alt="menu" /></label></header><div id="gnb_wrap"><div id="gnb"><ul><li><a href="#none">gnb1</a></li><li><a href="#none">gnb2</a></li><li><a href="#none">gnb3</a></li><li><a href="#none">gnb4</a></li><li><a href="#none">gnb5</a></li><li><a href="#none">gnb6</a></li><li><a href="#none">gnb7</a></li><li><a href="#none">gnb8</a></li></ul></div></div><div id="lnb_wrap"><div id="lnb"><ul><li><a href="#none">lnb1</a></li><li><a href="#none">lnb2</a></li><li><a href="#none">lnb3</a></li><li><a href="#none">lnb4</a></li><li><a href="#none">lnb5</a></li></ul></div></div><div id="section"><div id="section_header"><h1>하이서울브랜드</h1><hr /></div><div id="section_body"><p>서울시가 인정한 최고의 공동브랜드 하이서울브랜드!<br />서울을 대표하는 믿을 수 있는 우수기업브랜드 하이서울이 있습니다.<br /></p><p>서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br />서울시와 서울산업진흥원(SBA)이 공동으로 지원하는 하이 서울브랜드 사업은 우수한 기술력과 상품력을 보유하고 있으나 고유브랜드 육성에 어려움을 겪고 있는 우수기업들이 서울시가 인정한 중소기업 공동브랜드인 하이서울브랜드를 활용하여 제품 경쟁력을 강화할 수 있도록 각종 홍보 마케팅을 지원하는 사업입니다.<br /></p></div></div><footer id="footer"><div class="logo"><img src="http://www.sba.seoul.kr/kr/images/footer/f_logo.png"></div><div class="info">서울산업진흥원</div><div class="addr">121-904 서울 마포구 월드컵북로 400(상암동)</div></footer></div></body></html><!--5라인width=device-width : 플랫폼 가로 크기에 맞춤, 수치를 넣으면 그수치에 맞게 맞춰짐initial-scale=1.0 : 페이지 로딩시 확대비율maximum-scale=1.0 : 최대확대비율minimum-scale=1.0 : 최소축소비율user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)18라인label의 for 속성을 사용하게 되면 입력박스(input)와 라벨(label)간 연관을 줄수있다.28라인백그라운 이미지의 경로 즉, 이미지 소스를 정의하는 url 값을 사용해야 한다.url 값만 사용하면 컨테이너 엘리먼트의 좌상에서부터 수평과 수직 방향으로 반복될 것이다.29라인css Position : https://www.zerocho.com/category/CSS/post/5864f3b59f1dc000182d3ea157라인태그가 보이지 않게 되는데, visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않는다.56 ~ 67라인menu버튼을 누르면 toggle checked 되면서 #gnb_wrap의 display:block 됌다시 누르면 display:none82라인엘리먼트에 box-sizing을 지정하면 해당 엘리먼트의 패딩과 테두리가 더는 너비를 늘리지 않는다.box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있다.css 단위별 폰트사이즈(px,pt,em,%)CSS의 표준권고안에 따르면 크기 단위는 절대단위와 상대단위로 구분됩니다.- 절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적- 상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.- ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.- px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.- % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.- pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위출처: http://zinee-world.tistory.com/131121라인배경이미지가 반복적으로 적용되지 않고 한번만 적용됩니다.-->
'프론트엔드 > HTML CSS' 카테고리의 다른 글
| %, rem, em, px 차이 (0) | 2019.02.26 |
|---|---|
| 미적감각 없는 개발자를 위한 반응형 프레임워크 (0) | 2018.05.28 |
| CSS 초기화 코드 (0) | 2018.03.21 |
| float 속성 사용할 때 주의할 점. (0) | 2018.03.21 |
| article, section, div 차이 (1) | 2018.03.18 |
