CSS 레이아웃 을 배우 고 있 습 니까?아직 순수 CSS 레이아웃 을 완전히 파악 하지 못 하 는 거 아니 야?보통 두 가지 상황 이 당신 의 학습 을 방해 합 니 다.첫 번 째 는 CSS 처리 페이지 의 원 리 를 이해 하지 못 했 을 수도 있 습 니 다.페이지 의 전체적인 표현 효 과 를 고려 하기 전에 내용 의 의미 와 구 조 를 고려 한 다음 에 의미,구조 에 대해 CSS 를 추가 해 야 한다.이 글 은 너 에 게 HTML 을 어떻게 구조 화해 야 하 는 지 를 알려 줄 것 이다.또 다른 이 유 는 매우 익숙 한 표현 층 속성(예 를 들 어 cellpadding,hspace,align="left"등)에 대해 속수무책 으로 대응 하 는 어떤 CSS 문 구 를 바 꿔 야 할 지 모 르 기 때문이다.첫 번 째 문 제 를 해결 하고 HTML 을 어떻게 구조 화 하 는 지 알 게 되 었 을 때 나 는 목록 을 하나 더 제시 하여 원래 의 표현 속성 을 어떤 CSS 로 대체 하 는 지 상세 하 게 보 여 주 었 다.구조 화 된 HTML 은 우리 가 웹 페이지 제작 을 처음 배 울 때 항상 어떻게 디자인 하 는 지 를 고려 하고 그림,글씨체,색깔,그리고 레이아웃 방안 을 고려한다.그리고 우 리 는 포 토 샵 이나 Fireworks 로 그림 을 그리고 작은 그림 으로 잘 랐 다.마지막 으로 HTML 편집 을 통 해 모든 디자인 을 페이지 에 복원 합 니 다.HTML 페이지 가 CSS 레이아웃(CSS-friendly)을 사용 하 기 를 원한 다 면'외관'을 고려 하지 않 고 페이지 내용 의 의미 와 구 조 를 먼저 생각해 야 합 니 다.외관 이 중요 한 것 은 아니다.구조 가 좋 은 HTML 페이지 는 모든 외관 으로 표현 할 수 있 습 니 다.CSS Zen Garden 은 전형 적 인 예 이다.CSS Zen Garden 은 우리 가 마침내 CSS 의 강력 한 힘 을 인식 하도록 도와 준다.HTML 은 컴퓨터 화면 에서 만 읽 는 것 이 아니다.포 토 샵 으로 정성 들 여 디자인 한 화면 은 PDA,이동 전화,스크린 리더 에 표시 되 지 않 을 수도 있 습 니 다.그러나 구조 가 좋 은 HTML 페이지 는 CSS 의 서로 다른 정 의 를 통 해 모든 네트워크 장치 에 표시 할 수 있다.먼저'구조'가 무엇 인지 생각 하기 시 작 했 고 일부 작가 들 은'의미'라 고도 부른다.이 용 어 는 콘 텐 츠 블록 과 모든 콘 텐 츠 서비스의 목적 을 분석 한 다음 에 이런 내용 의 목적 에 따라 해당 하 는 HTML 구 조 를 구축 해 야 한 다 는 뜻 이다.만약 당신 이 앉 아서 페이지 구 조 를 자세히 분석 하고 기획 한다 면,당신 은 이러한 몇 개의 표지 와 사이트 이름 을 얻 을 수 있 습 니 다. 홈 페이지 내용 사이트 탐색(메 인 메뉴) 하위 메뉴 검색 상자 기능 구역(예 를 들 어 카 트,계산대) 꼬 릿 말(저작권 및 관련 법률 성명) 우 리 는 보통 DIV 요 소 를 사용 하여 이러한 구 조 를 정의 합 니 다.이와 같 습 니 다.
이것 은 포석 이 아니 라 구조 다.이것 은 내용 블록 에 대한 의미 설명 이다.당신 의 구 조 를 이해 하면 대응 하 는 ID 를 DIV 에 추가 할 수 있 습 니 다.DIV 용기 에는 어떤 콘 텐 츠 블록 도 포함 할 수 있 고 다른 DIV 도 포함 할 수 있 습 니 다.내용 블록 은 임의의 HTML 요소 인 제목,단락,그림,표,목록 등 을 포함 할 수 있다.위 에서 말 한 바 와 같이 HTML 을 어떻게 구조 화 하 는 지 이미 알 고 있 습 니 다.이 제 는 레이아웃 과 스타일 정 의 를 할 수 있 습 니 다.모든 콘 텐 츠 블록 은 페이지 의 어느 곳 에 나 놓 을 수 있 습 니 다.이 블록 의 색상,글꼴,테두리,배경 과 정렬 속성 등 을 지정 할 수 있 습 니 다.선택 기 를 사용 하 는 것 은 아름 다운 일 입 니 다.id 의 이름 은 특정한 콘 텐 츠 블록 을 제어 하 는 수단 입 니 다.이 콘 텐 츠 블록 에 DIV 를 씌 우 고 유일한 id 를 추가 하면 CSS 선택 기 를 사용 하여 모든 페이지 요소 의 외관 표현 을 정확하게 정의 할 수 있 습 니 다.제목,목록,그림,체인 연결 또는 단락 등 을 포함 합 니 다.예 를 들 어\#header 에 CSS 규칙 을 쓰 면\#content 의 그림 규칙 과 완전히 다 를 수 있 습 니 다.또 다른 예 는 서로 다른 규칙 을 통 해 서로 다른 콘 텐 츠 블록 안의 링크 스타일 을 정의 할 수 있다 는 것 이다.이렇게:\#globalnav a:링크 혹은 #subnav a:link 또는#content a:link。서로 다른 콘 텐 츠 블록 에서 같은 요소 의 스타일 이 다르다 고 정의 할 수 있 습 니 다.#content p 와#footer p 는 각각\#content 와\#footer 의 p 스타일 을 정의 합 니 다.구조 적 으로 볼 때 당신 의 페이지 는 그림,링크,목록,단락 등 으로 구성 되 어 있 습 니 다.이런 요소 자체 가 어떤 네트워크 장치(PDA 또는 핸드폰 또는 인터넷 텔레비전)에 표시 되 는 지 에 영향 을 주지 않 고 그 어떠한 표현 외관 으로 도 정의 할 수 있 습 니 다.자세 한 구조 화 된 HTML 페이지 는 매우 간단 하고 모든 요 소 는 구조 적 목적 에 사용 된다.한 단락 을 들 여 쓰 려 면 Blockquote 탭 을 사용 하지 않 아 도 됩 니 다.p 탭 을 사용 하고 p 에 CSS margin 규칙 을 추가 하면 들 여 쓰기 목적 을 실현 할 수 있 습 니 다.p 는 구조 화 된 태그 이 고 margin 은 표현 속성 이 며 전 자 는 HTML 에 속 하고 후 자 는 CSS 에 속한다.(이것 이 바로 표현의 상 분리 이다.)좋 은 구조의 HTML 페이지 에는 속성 을 나타 내 는 태그 가 거의 없다.코드 가 아주 깔끔 하고 깔끔 합 니 다.예 를 들 어,원래 의 코드을 쓸 수 있 습 니 다.모든 제어 표현 은 CSS 에 쓸 수 있 습 니 다.구조 화 된 HTML 에서 table 은 표 입 니 다.다른 것 이 아 닙 니 다.(예 를 들 어 레이아웃 과 포 지 셔 닝 에 사 용 됩 니 다)구조 화 를 직접 실천 해 보 세 요.위 에서 말 한 것 은 가장 기본 적 인 구조 일 뿐 실제 응용 에서 필요 에 따라 내용 블록 을 조정 할 수 있 습 니 다.DIV 가 포 함 된 경우 가 종종 있 습 니 다."container"층 에 다른 층 이 있 는 것 을 볼 수 있 습 니 다.구 조 는 다음 과 같 습 니 다. 포 함 된 div 요 소 는 더 많은 CSS 규칙 을 정의 하여 표현 을 제어 할 수 있 습 니 다.예 를 들 어\#navcontainer 에 게 목록 을 오른쪽 에 두 고\#globalnav 에 게 규칙 을 주어 목록 을 왼쪽 에 두 고\#subnav 의 list 에 다른 표현 을 할 수 있 습 니 다.CSS 로 전통 적 인 방법 을 바 꾸 면 다음 목록 은 CSS 로 전통 적 인 방법 을 바 꾸 는 데 도움 이 될 것 입 니 다.HTML 속성 과 이에 대응 하 는 CSS 방법 HTML 속성 입 니 다. CSS 방법 설명 하 다. align="left" align="right" float: left; float: right; CSS 를 사용 하면 움 직 일 수 있 습 니 다. 모든 요소:그림,단락,div,제목,표,목록 등 float 속성 을 사용 할 때 이 유동 요소 에 폭 을 정의 해 야 합 니 다.marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; CSS 사용, margin 은 모든 요소 에 설정 할 수 있 습 니 다. body 요소 뿐만 아니 라 더 중요 한 것 은 요소 의 top 을 각각 지정 할 수 있 습 니 다. right, bottom 과 left 의 margin 값 입 니 다.vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff; a:visited: #339; a:hover: #999; a:active: #00f; HTML 에서 링크 의 색상 은 body 의 속성 값 으로 정 의 됩 니 다.전체 페이지 의 링크 스타일 이 같 습 니 다.CSS 선택 기 를 사용 하면 페이지 의 다른 부분의 링크 스타일 이 다 를 수 있 습 니 다.bgcolor="#FFFFFF" background-color: #fff; CSS 에서 모든 요 소 는 body 와 table 요소 에 만 국한 되 지 않 고 배경 색 을 정의 할 수 있 습 니 다.bordercolor="#FFFFFF" border-color: #fff; 모든 요 소 는 테두리(boeder)를 설정 할 수 있 습 니 다.top 을 각각 정의 할 수 있 습 니 다. right, bottom 과 left border="3"cellspacing="3" border-width: 3px; CSS 를 사용 하면 table 의 테 두 리 를 통일 스타일 로 정의 할 수도 있 고 top 을 각각 정의 할 수도 있 습 니 다. right, bottom and left 테두리 의 색상,사이즈,스타일. 사용 할 수 있 습 니 다. table, td or th 이 선택 기 들. 테두리 없 는 효 과 를 설정 하려 면 CSS 정 의 를 사용 할 수 있 습 니 다. border-collapse: collapse; clear: left; clear: right; clear: both; 많은 2 열 이나 3 열 레이아웃 을 사용 합 니 다. float 속성 으로 포 지 셔 닝 합 니 다.부동 층 에서 배경 색 이나 배경 그림 을 정의 하면 clear 속성 을 사용 할 수 있 습 니 다.cellpadding="3"vspace="3"hspace="3" padding: 3px; CSS 를 사용 하면 모든 요소 가 padding 속성 을 설정 할 수 있 습 니 다.마찬가지 로 padding 은 각각 top 을 설정 할 수 있 습 니 다. right, bottom and left。padding 은 투명 합 니 다.align="center" text-align: center; margin-right: auto; margin-left: auto; Text-align 텍스트 에 만 적 용 됩 니 다. div,p 와 같은 블록 급 원 독 은 margin-right 를 통과 할 수 있 습 니 다: auto; margin-left 와: auto;수준 이 중간 에 있 는 아 쉬 운 기술 과 작업 환경 은 브 라 우 저가 CSS 에 대한 지원 이 완선 되 지 않 기 때문에 우 리 는 가끔 기술(hacks)을 사용 하거나 환경(Workarounds)을 구축 하여 CSS 가 전통 적 인 방법 과 같은 효 과 를 실현 하도록 해 야 한다.예 를 들 어 블록 급 요 소 는 수평 가운데 에 있 는 기술,박스 모델 bug 의 기술 등 을 사용 해 야 합 니 다.이 모든 기술 은 Molly 에 있 습 니 다. Holzschlag 의 글'Integrated' Web Design: Strategies for Long-Term CSS Hack Management>에 상세 한 설명 이 있다.또 다른 CSS 기술 에 관 한 자원 사 이 트 는 Big 입 니 다. 존 과 홀 리 Bergevin 의"Position" is Everything”。 부동 행위 이해 Eric Meyer 의'Containing' Floats>는 float 속성 레이아웃 을 어떻게 사용 하 는 지 파악 하 는 데 도움 을 줄 것 입 니 다.float 요 소 는 때때로 지우 기(clear)가 필요 합 니 다. To Clear Floats Without Structural 마크 업'이 도움 이 될 것 으로 보인다.기 존 CSS 에 더 많은 도움 을 줍 니 다. Discussion 목록 은 좋 은 자원 입 니 다.WiKiA 토론 팀 의 정 보 를 수 집 했 습 니 다.그 중에서 CSS 레이아웃 정리(css-discuss.incutio.com/?page=CssLayouts),CSS 를 포함 합 니 다. 기교 총화 (css-discuss.incutio.com/?page=CssHack) 그리고 더
