웹브라우즈의 html 문서의 특정한 정보를 나타내기 위한 태그로 meta 라는 태그가 있음... 모바일 웹은... 브라우저의 화면 설정과 관련된 정보를 제공하기위해 뷰포트 meta 태그를 사용함 (viewport)...

컴퓨터 모니터는 어디서 보든 비슷하게 보인다...

스마트폰은... 제조사마다 모델마다 사이즈가 다 다름... 근데... 항상 스마트폰 규격에 딱 맞게 조회가 된다.... <meta charset="utf-8" name = "viewport" content = "width=device-width", initial-scale=1.0, minimum-scale=1.0, userscalable=no" />

그럼... 스마트폰에서 header의 레이아웃을 만들면...?

toggle -> 누르면 다른 메뉴가 보임 (dropdown menu 처럼)

gnb_wrap { display:none; border:10px solid #333333}

toggle:checked ~ #wrap > #gnb_wrap {display:block;}

토글이 체크되어있을때 wrap의 gnb wrap 자손의 display 가 block됨.. 아닐때는 그냥 #gnb_wrap {display none} 이렇게 됨...

<div id="wrap">
    <header id="main_header">
        <a class="left" href="#none"><img src="img/category.png" alt="category"/></a>
        <h1>Mobile</h1>
        <label class="right" for="toggle" onclick=""><img src="img/menu.png" alt="menu" /></label>
    </header>

여기서 label class = "right" for "toggle"가 현재 태그가 작동되면 toggle (input id = toggle) 이놈을 작동시키고.. 이건 상태 선택자 (css)에 의해서 체크 가 되어있으면 gnp wrap이 block...즉 보인다~

스마트폰 part 3

가로와 세로로 볼때 않깨지게 하는 방법~

li가 너무 길때 끝을 "..."으로 하는 방법 ->

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static. This value creates a new stacking context when the value of z-index is not auto. Its effect on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.

liamchoi943 / http

스마트폰 레이아웃 #28

gnb_wrap { display:none; border:10px solid #333333}

toggle:checked ~ #wrap > #gnb_wrap {display:block;}