14 th  Study 웹 표준 교과서 제 6 장  크로스 브라우저 레이아웃  -  브라우저를 차별하지 않는 레이아웃 기법 ( 5 ~ 16 장 두둥 !!) 2008/07/30. Toz  강남점 .  박아름 ( 호브레드 )
<ul><li>여백조절 </li></ul><ul><ul><li>Body  요소의 여백 조절  - Body { margin : 0; padding : 0 } </li></ul></ul><ul><li>중앙정렬  </li><...
<ul><li>기본디자인 </li></ul><ul><ul><li>밑 선을 점선으로  : text-decoration 을 ‘ none’  시킨 후 ‘ border-bottom:1px dotted’ 로 표현 </li></u...
<ul><li>레이아웃 기법 (4)- 텍스트 </li></ul><ul><li>강조  : em  요소 , strong  요소 </li></ul><ul><li>생략어와 두문자어 </li></ul><ul><ul><li>생략어...
<ul><li>레이아웃 기법 (5)- 제목 글 </li></ul><ul><li>제목 글의 시선 집중효과 </li></ul><ul><ul><li>※  웹 표준 교과서 참고  : P.421 </li></ul></ul><ul...
<ul><li>레이아웃 기법 (7)- 목록 </li></ul><ul><li>ul  요소 </li></ul><ul><ul><li>순번과 관계없이 리스트를 표현 . </li></ul></ul><ul><ul><li>선을 지정...
<ul><li>레이아웃 기법 (8)- 테이블 </li></ul><ul><li>선을 이용하여 격자 선을 표현 </li></ul><ul><ul><li>border-collapse  속성에 ‘ collapse’ 지정 – 결합...
<ul><li>레이아웃 기법 (10)- 이미지 대체 기법 </li></ul><ul><li>display  속성 이용 </li></ul><ul><ul><li><h1><span>Title</span></h1> / H1 sp...
<ul><li>레이아웃 기법 (12)- 인쇄용 스타일 </li></ul><ul><li>인쇄용 스타일 준비 </li></ul><ul><ul><li>외부스타일 안에 부분적으로 적용  (@midia  규칙에 ‘ print’ ...
<ul><li>@page  규칙과 페이지 미디어 대상 속성 </li></ul><ul><ul><li>@page  규칙과 함께 이용되는 속성  (size, mark, page  속성 )  은  opera  등 일부 브라우저...
운영회의 <ul><li>참석  :  이군 ,  비티 ,  혜윰 ,  호브레드 ,  유자 ,  겨미겨미 ,  봄눈 </li></ul><ul><li>불참  :  써니 ,  엽님 </li></ul><ul><li>참관  :  ...
History <ul><li>07. 12. 11 _ 1 차 모임 ( 사전모임 ) 07. 12. 20 _ 2 차 모임 (1 차 스터디 ) 08. 01. 10 _ 3 차 모임 (2 차 스터디 ) 08. 01. 24 _ 4 ...
The End. Present By clearBoth
Upcoming SlideShare
Loading in...5
×

Clearboth Study 14th

533

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
533
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Clearboth Study 14th

    1. 1. 14 th Study 웹 표준 교과서 제 6 장 크로스 브라우저 레이아웃 - 브라우저를 차별하지 않는 레이아웃 기법 ( 5 ~ 16 장 두둥 !!) 2008/07/30. Toz 강남점 . 박아름 ( 호브레드 )
    2. 2. <ul><li>여백조절 </li></ul><ul><ul><li>Body 요소의 여백 조절 - Body { margin : 0; padding : 0 } </li></ul></ul><ul><li>중앙정렬 </li></ul><ul><ul><li>블록 요소 : 좌우 마진 값에 ‘ auto’ 를 지정 { margin : 0 auto; } </li></ul></ul><ul><ul><li>인라인 요소 : 부모의 블록 요소에 ‘ text-align : center’ 지정 . </li></ul></ul><ul><ul><li>IE6 ‘ 호환방식’ : body 요소에 ‘ text-align : center’ 지정 후 , 자식 블록 요소에 ‘ text-align : center’ 지정 . </li></ul></ul><ul><li>레이아웃 기법 (1)- 문서본체 </li></ul><ul><li>레이아웃 기법 (2)- 네비게이션 </li></ul><ul><li>네비게이션 </li></ul><ul><ul><li>nav.html </li></ul></ul><ul><li>주방장님께서 알려주신 ‘ CSS Tab Designer 2’ </li></ul><ul><ul><li>CSS Tab Designer </li></ul></ul>
    3. 3. <ul><li>기본디자인 </li></ul><ul><ul><li>밑 선을 점선으로 : text-decoration 을 ‘ none’ 시킨 후 ‘ border-bottom:1px dotted’ 로 표현 </li></ul></ul><ul><ul><li>(※ IE6 에서는 a 태그의 line-height 이 ’ 21px’ 이상일 때 테스트 가능하였음 .) </li></ul></ul><ul><ul><li>가상클래스와의 조합 (:link, :visited, :hover, :active) </li></ul></ul><ul><ul><li>배경지정을 하여 눈에 잘 띄게 할 수 있다 . </li></ul></ul><ul><li>외부링크를 나타내는 아이콘 이미지표현 </li></ul><ul><ul><li>a 요소에 class 를 준 다음 아이콘 ( ) 을 배경으로 지정 . </li></ul></ul><ul><ul><li>(ex) .external { padding-right : 20px; background : url(/images/external.gif) no-repeat center right; } ) </li></ul></ul><ul><li>E-mail 주소를 나타내는 아이콘 표시 ( ) </li></ul><ul><ul><li>아이콘 이미지 표현과 같음 </li></ul></ul><ul><li>레이아웃 기법 (3)- 링크 </li></ul>
    4. 4. <ul><li>레이아웃 기법 (4)- 텍스트 </li></ul><ul><li>강조 : em 요소 , strong 요소 </li></ul><ul><li>생략어와 두문자어 </li></ul><ul><ul><li>생략어 : abbr 요소 ( 한 문자씩 발음하는 단어 ex) <abbr title=“Uniform Resource Identifier”>URI</abbr>) </li></ul></ul><ul><ul><li>두문자어 : acronym 요소 </li></ul></ul><ul><ul><li>( 한 개의 단어로 발음하는 단어 ex) <acronym title=“Multipurpose internet Mail Extension”>MIME</acronym>) </li></ul></ul><ul><li>소스코드 (code 요소 ) </li></ul><ul><ul><li>텍스트를 프로그램이나 소스코드로 정의할 때 . </li></ul></ul><ul><ul><li>(pre 요소에는 선이나 배경을 지정하고 code 요소에는 font-family 속성을 지정 ) </li></ul></ul><ul><li>드롭 캡 표현 </li></ul><ul><ul><li>:first-letter 가상 요소를 이용 </li></ul></ul><ul><ul><li>(:first-letter 요소는 마진 , 패딩 , 보더 속성 등을 지정 못함 ※ 참고 ) </li></ul></ul><ul><li>대문자와 소문자 변환 </li></ul><ul><ul><li>text-transform 속성 이용 ex) { text-transform : uppercase } </li></ul></ul><ul><li>소문자의 스몰 캐피털화 </li></ul><ul><ul><li>font-variant 속성 이용 ex) { font-variant : small-caps } </li></ul></ul>
    5. 5. <ul><li>레이아웃 기법 (5)- 제목 글 </li></ul><ul><li>제목 글의 시선 집중효과 </li></ul><ul><ul><li>※ 웹 표준 교과서 참고 : P.421 </li></ul></ul><ul><li>제목 글과 이미지 조합 </li></ul><ul><ul><li>제목 글에 배경이미지 첨부 </li></ul></ul><ul><li>제목 글에 자동으로 번호 부여 </li></ul><ul><ul><li>CSS 의 counter 속성과 content 속성을 이용하여 제목 글에 자동으로 번호를 매길 수 있다 . </li></ul></ul><ul><ul><li>( 현재 오페라에만 적용되므로 PASS!!) </li></ul></ul><ul><li>레이아웃 기법 (6)- 인용문 </li></ul><ul><li>블록레벨의 인용문 (blockquote 요소 ) </li></ul><ul><ul><li>마진이나 배경 , 선 지정 </li></ul></ul><ul><ul><li>이미지 조합 ( 배경이미지 ) ※ 웹 표준 교과서 참고 : P.430 </li></ul></ul><ul><li>인라인 인용문 (q 요소 ) </li></ul><ul><ul><li>일부 브라우져 에서는 q 요소의 처음과 마지막에 자동으로 인용부호를 표현하지만 Win IE 와 Mac IE 는 지원하지 않으므로 background 속성 이용 . </li></ul></ul><ul><li>인용처 / 참조처 (cite 요소 ) </li></ul><ul><ul><li>미리 준비 한 참고문헌 목록에 링크하는 방법도 자주 이용 됨 . </li></ul></ul><ul><ul><li>ex)<cite><a href=“#clearboth”> 클리어보스 </a></cite> </li></ul></ul>
    6. 6. <ul><li>레이아웃 기법 (7)- 목록 </li></ul><ul><li>ul 요소 </li></ul><ul><ul><li>순번과 관계없이 리스트를 표현 . </li></ul></ul><ul><ul><li>선을 지정한 수직요소 , 불릿을 이미지로 대체한 형태 등 . </li></ul></ul><ul><li>ol 요소 </li></ul><ul><ul><li>순번을 표현하는 것에 의미 . </li></ul></ul><ul><ul><li>list-style-type 속성값 </li></ul></ul><ul><ul><ul><li>demical (1,2,3…) </li></ul></ul></ul><ul><ul><ul><li>lower-alpha (a,b,c…) </li></ul></ul></ul><ul><ul><ul><li>lower-roman (i,ii,iii…) </li></ul></ul></ul><ul><ul><ul><li>upper-alpha (A,B,C…) </li></ul></ul></ul><ul><ul><ul><li>upper-roman (I,II,III…) </li></ul></ul></ul><ul><ul><li>이미지로 대체할 경우 이미지가 불러들여지지 않은 경우를 고려해 li 요소에는 list-style-type 속성에 ‘ demical’ 을 지정 . </li></ul></ul><ul><li>dl 요소 </li></ul><ul><ul><li>링크목록 (dt 요소에 ‘링크명’ , dd 요소에 ‘ URI’ 를 정의 ) </li></ul></ul><ul><ul><li>카테고리 목록 (dt 요소에 ‘카테고리 명’ , dd 요소에 ‘각 항목’정의 ) </li></ul></ul>
    7. 7. <ul><li>레이아웃 기법 (8)- 테이블 </li></ul><ul><li>선을 이용하여 격자 선을 표현 </li></ul><ul><ul><li>border-collapse 속성에 ‘ collapse’ 지정 – 결합 선 모델 적용 </li></ul></ul><ul><ul><li>table, th, td 에 border 속성 지정 </li></ul></ul><ul><ul><li>border-spacing 속성에 ‘ 0’ 이라고 지정 </li></ul></ul><ul><ul><li>empty-dells 속성에 ‘ show’ 라고 지정하면 빈셀도 표현 (IE 적용 안됨 ) </li></ul></ul><ul><li>디자인 대비 조절 </li></ul><ul><ul><li>th 요소와 td 요소에 다른 배경색 지정 </li></ul></ul><ul><li>캡션 디자인 </li></ul><ul><ul><li>Win IE 와 Mac IE 에서는 이미지 표현이 틀어지는 경우가 있으므로 스타핵을 이용하여 위치 조정 필요 </li></ul></ul><ul><li>레이아웃 기법 (9)- 폼 </li></ul><ul><li>입력 양식은 어떤 요소에 ? </li></ul><ul><ul><li>책에서는 p 와 table 보다는 dl 요소로 구성했음 . </li></ul></ul><ul><li>입력 양식의 다양한 디자인 방법 </li></ul><ul><ul><li>인풋 타입 별 클래스 지정하여 사용 . </li></ul></ul><ul><li>fieldset 요소와 legend 요소 디자인 </li></ul><ul><ul><li>Win IE 에서는 legend 요소에 핵 조절 필요 . </li></ul></ul>
    8. 8. <ul><li>레이아웃 기법 (10)- 이미지 대체 기법 </li></ul><ul><li>display 속성 이용 </li></ul><ul><ul><li><h1><span>Title</span></h1> / H1 span { display : none; background : url (ooo.gif) no-repeat top left; } </li></ul></ul><ul><li>text-indent 속성 이용 </li></ul><ul><ul><li><h1>Title</h1> / H1 { text-indent : -9999px ; background : url (ooo.gif) no-repeat top left; } </li></ul></ul><ul><li>링크설정 </li></ul><ul><ul><li>a 요소에 display 를 ‘ block’ 를 지정 . (+ { text-decoration : none }) </li></ul></ul><ul><ul><li>a:hover 로 롤오버 효과를 줄 수도 있다 . </li></ul></ul><ul><li>레이아웃 기법 (11)- 다단 레이아웃 </li></ul><ul><li>※ 웹 표준 교과서 참고 : P.459 ~P.478 </li></ul><ul><li>※ 참고 웹 사이트 </li></ul><ul><ul><li>http://www.cssdrive.com/ </li></ul></ul><ul><ul><li>http://blog.html.it/layoutgala/ </li></ul></ul><ul><ul><li>http://cssimport.com/ </li></ul></ul>
    9. 9. <ul><li>레이아웃 기법 (12)- 인쇄용 스타일 </li></ul><ul><li>인쇄용 스타일 준비 </li></ul><ul><ul><li>외부스타일 안에 부분적으로 적용 (@midia 규칙에 ‘ print’ 라는 미디어 형식 지정 ) </li></ul></ul><ul><ul><li>별도의 외부스타일시트 이용 </li></ul></ul><ul><ul><ul><li>link 요소로 인쇄용 스타일 참조 - <link rel=“stylesheet” type=“text/css” midia=“print” href=“style.css” /> </li></ul></ul></ul><ul><ul><ul><li>@import 규칙으로 인쇄용 스타일 참조 -<style type=“text/css”> @import url(“style.css”) print; </style> </li></ul></ul></ul><ul><li>인쇄에 불필요한 내용 숨기기 </li></ul><ul><ul><li>메인 비주얼이나 사이드바 , 네비게이션 , 검색필드 , 광고 등에는 display:none 지정 </li></ul></ul><ul><li>고정 폭이나 플로트 해제 </li></ul><ul><ul><li>width 값이 적용된 고정 폭은 ‘ auto’ 라고 지정하여 고정폭을 해제 한다 . </li></ul></ul><ul><ul><li>float 속성에는 ‘ none’ 지정 . </li></ul></ul><ul><li>body 요소에 전체 스타일 지정 </li></ul><ul><ul><li>font-size 속성에 ‘ small’ 지정해도 되지만 12pt 라고 절대값으로 지정해도 무관 . </li></ul></ul><ul><li>흑백인쇄를 전제하는 경우 </li></ul><ul><ul><li>문자색에는 흑백의 값 (black, gray, silver, white 등의 키워드나 r, g, b 값 ) 과 배경은 display : none 을 지정 . </li></ul></ul><ul><ul><li>pre 태그 ex) { background : none; color : black; border : 1px solid black } </li></ul></ul><ul><ul><li>em 태그 ex) { color : black; font-style : none; font-weight : bold } </li></ul></ul>
    10. 10. <ul><li>@page 규칙과 페이지 미디어 대상 속성 </li></ul><ul><ul><li>@page 규칙과 함께 이용되는 속성 (size, mark, page 속성 ) 은 opera 등 일부 브라우저만 지원 . </li></ul></ul><ul><ul><li>페이지를 나눌 때의 상하의 최소 행수 ( </li></ul></ul><ul><ul><ul><li>window 속성 – 페이지를 나눌 때 페이지 상부에 최소한 남기고 싶은 행수 지정 . </li></ul></ul></ul><ul><ul><ul><li>ex) p { window : 3 } </li></ul></ul></ul><ul><ul><ul><li>orphans 속성 – 페이지 하부에 최소한 남기고 싶은 행수 지정 . ex) p { orphans : 3 } </li></ul></ul></ul>
    11. 11. 운영회의 <ul><li>참석 : 이군 , 비티 , 혜윰 , 호브레드 , 유자 , 겨미겨미 , 봄눈 </li></ul><ul><li>불참 : 써니 , 엽님 </li></ul><ul><li>참관 : 차영신 </li></ul><ul><li>다음모임 : 8 월 14 일 ( 목 ) </li></ul><ul><li>회비 납부 및 운영비 보고 : 7 명 (70,000) </li></ul><ul><li>3 시즌 스터디 주제 결정 </li></ul><ul><ul><li>영문문서 번역 </li></ul></ul><ul><li>3 시즌 회원 추가 1 명 </li></ul><ul><li>기타 </li></ul><ul><ul><li>지난 회식 모임 비용 부담 </li></ul></ul><ul><ul><li>참석여부 당일 변경시 벌금 부여 </li></ul></ul>
    12. 12. History <ul><li>07. 12. 11 _ 1 차 모임 ( 사전모임 ) 07. 12. 20 _ 2 차 모임 (1 차 스터디 ) 08. 01. 10 _ 3 차 모임 (2 차 스터디 ) 08. 01. 24 _ 4 차 모임 (3 차 스터디 ) 08. 02. 13 _ 5 차 모임 (4 차 스터디 ) 08. 02. 28 _ 6 차 모임 (5 차 스터디 ) 08. 03. 12 _ 7 차 모임 (6 차 스터디 / CDK 홍윤표님 참관 ) 08. 04. 03 _ 8 차 모임 (7 차 스터디 / 2 시즌 시작 ) 08. 04. 17 _ 9 차 모임 (8 차 스터디 / 겨미겨미 , 써니님 가입 / 주방장님 송별회 ) 08. 05. 10 _ 10 차 모임 (9 차 스터디 / 워크샵 ) 08. 05. 22 _ 11 차 모임 (10 차 스터디 / 성민장군 , 엽님 참관 ) 08. 06. 05 _ 12 차 모임 (11 차 스터디 / 아트강님 탈퇴 ) 08. 06. 19 _ 13 차 모임 (12 차 스터디 / 엽님 가입 / 웹표준경진대회 수상 ) 08. 07. 04 _ 14 차 모임 ( 회식 / CDK 인터뷰 ) 08. 07. 05 _ 15 차 모임 (1 차 연합 ( 신림 ) 스터디 / 나나 , 별군 , 송창희 , 바람 , 모모 , 유주영님 참관 ) 08. 07. 17 _ 16 차 모임 (13 차 스터디 ) 08. 07. 30 _ 17 차 모임 (14 차 스터디 / 정글 웹표준 강사 차영신님 참관 ) </li></ul>
    13. 13. The End. Present By clearBoth
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×