2011웹표준[04] 실전예제(네비게이션,버튼,박스,포지션)

2011년 02월 15일

[ABYDOS] 웹 표준

(4강) 실전예제-네비게이션,버튼,박스

1. 네비게이션

목차(INDEX)

2. 버튼스타일

3. 박스모델링

4. 중앙정열 팁

4. 포지셔닝

4. 플로팅

ABYDOS Copyright abydos All rights Reserved.

실전예제1-네비게이션

• http://www.highdots.com/products/css-tab-designer/

http://naradesign.net/open_content/reference/navigation.html

http://www.highdots.com/images/ctd/css_tab_designer_v2h.png

http://www.highdots.com/images/ctd/css_tab_designer_v2.0.png


실전예제2-버튼 스타일

• http://naradesign.net/wp/2008/10/31/203/

http://www.iwebtoolsonline.com/html-and-css-rounded-corner-button-generator

http://petitmuto.net/study_css/CSSTextButton01/CSS%20Text%20Button%20Design%20With%20Icon.htm


박스모델링

• Css에서는 각각요소에 생성된 사각형 영역을 ‘박스’라고 표현

• 박스의 구성 Content+padding+border+margin

• 화면에서 보이는 부분 :content+padding+border • 화면에서 보이지 않는 부분 : Margin

Width값의 범위 • 잘못된 width값(x) : content+padding+border =>화면보다 커짐 • 올바른 width값(o) : padding,border를 제외한 순수한 content영역

표시방법(display 속성) 배치방법과 위치(position, top, right, bottom, left 속성) 플로트(float, clear 속성) 겹쳐지는 순서(z-inddex 속성) 텍스트의 표기 방향(direction 속성, Unicode-bidi 속성) 폭과 높기(width 속성, height 속성) 인라인박스의 높이(line-height 속성) 인라인박스나 칸의 수직위치(vertical-align 속성)


박스모델링 – 중앙정열 Tip

• <table> 중앙정열 align="center‚ • css 레이아웃 margin=‚0 auto;"

Margin=‚0 auto;‛

Vertical-align

• <table> 엘리먼트를 이용할 때는 valign 혹은 height="100%"와 같은 속성을 이용 세로정렬이 자유롭지맊 css에서는 쉽지 않다.

• vertical-align 특성 사용할 수 있는 범위는 td 와 inline 속성에서 적용 가능<td>,<img>,<input>

중앙정렬을 위해 img, input, select {vertical-align: middle;}를 추가해준다.


중앙정열 Tip-position 속성과 negative margin

<style type="text/css"> #middle { position: absolute; top: 50%; left: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; } </style>

1. position: absolute; 브라우저를 중심으로 offset 지정 가능 2. top 50%; left: 50%; 3. 블럭크기의 절반맊큼 음수마짂을 주게 되면 엘리먼트의 정중앙이 화면의 정중앙과 일치


Tip-100%높이 유지하는 레이아웃

div {height: 100%:}가 적용되지 않는 이유

div 속성에서 height: 100%;를 주었음에도 랜더링시 적용되지 않는 이유는 height 값의 기본은 상위 엘리먼트 이기 때문 따라서 body의 height: 100%;로 지정되어 있지 않을 경우 하위 div {height: 100%;}는 랜더링 불가 마찬가지로 html역시 height: 100%;로 지정되어 있어야 한다. html > body > div 순서로 height: 100%로 지정

<style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #head { height: 100px; background: #ddd; position: relative; z-index: 1; } #body { min-height: 100%; margin: -100px 0 -50px 0; } #content-area { padding: 100px 0 50px 0; } #foot { height: 50px; background: #ddd; } </style>


LAYOUT -포지셔닝(position)

• Position의 속성

Absolute (절대적 위치)

relative (상대적 위치)

브라우저를 기준으로 위치 속성을 사용 하며 parent 요소에 의해 하위 위치에 있다면 그 곳을 기준으로 합니다.

top, left, right, bottom을 통해서 좌표를 잡는데 실제 브라우저를 기준으로 위치하게 됩니다.

객체가 위치 속성에 의해 설정 되거나 태그내에 위치시 마지막 위치를 기준으로 상대값을 정해 줍니다.

즉, 포지션을 정하지 않은 상태에서 보면 그곳에 위치가 브라우저에 나올것입니다. 바로 그곳을 기준으로 포지션에 relative를 사용해서 top, left, right, bottom을 이용해서 위치를 정할수 있습니다

Fixed (고정 위치) –브라우저창에 고정

static (기본 위치) –기본값


LAYOUT –포지셔닝(position)

• Position의 속성

• absolute • relative

예제를 보세요


LAYOUT – 플로팅(float)

• float:left – 박스이동, 정렬 (float 속성)

•속성 : float •값 : left, right, none, inherit •기본값 : none •적용대상 : position 속성의 값이 'static' 인 요소(content 속성으로 생성된 내용 제외) 속성 값에 대한 의미 float: left : 그 요소를 왼쪽으로 float된 블록 박스로 맊든다. float: right : 그 요소를 오른쪽으로 float된 블록 박스로 맊든다. float: none : 그 요소를 float 하지 않는다. float 속성을 적용하는 요소는 어떠한 형태로든 폭을 지정해야 하는 규칙이 있다. float는 뒤에 오는 엘리먼트에도 영향-float가 헤제되지 않는다. (clear 속성으로 해제 가능)


LAYOUT – 플로팅 해제 (clear)

• Clear:both; – 박스이동, 정렬해제 (clear 속성)

•속성 : clear •값 : left, right, none, both, inherit •기본값 : none •적용대상 : 블록 레벨 요소 속성 값에 대한 의미는 다음과 같다. • clear: none - float 유효, float는 해제되지 않는다. • clear: left - 왼쪽 float 해제 • clear: right - 오른쪽 float 해제 • clear: both - 좌우 양측 float 해제 clear 속성은 float 된 박스 뒤에 이어지는 박스가 인접하지 않게 배치하는 속성이다.

예제를 보세요 Float를 clear하는 4가지 방법. http://naradesign.net/wp/2008/05/27/144/


LAYOUT - 레이아웃

• 다음시갂에 이어서…^-^

감사합니다. ABYDOS


과제

1. Css 네비게이션을 활용하여 현재 짂행중인 프로젝트

‘용식이v1.0’의 네비게이션 메뉴를 맊든다.

2. Css 버튺이미지를 활용하여 현재짂행중인 프로젝트

‘용식이v1.0’의 버튺 라이브러리를 맊든다.

2011웹표준[04] 실전예제(네비게이션,버튼,박스,포지션)

Documents