Niquelao » 웹로그 아카이브 » 3단 레이아웃과 마크업… "딱 맞는"

» 웹로그 아카이브 » 3단 레이아웃과 마크업… “적정선” Niquelao - CSS 3단 레이아웃과 마크업… “적정선” 2006년 6월 4일 Rumoroso 작성 웹 문서의 콘텐츠를 구조화하려 할 때, 시각적 디자인, 특히 레이아웃이 어떨지 염두에 두는 것을 가능한 모든 방법으로 피해야 한다. 이는 정보 흐름의 관점에서 올바르게 구조화된 콘텐츠를 얻고, 시맨틱 마크업과 최적의 코드를 얻고자 한다면 필수적이다. 이 목표를 달성하기 위해서는 W3C 표준 사용을 확고한 전제로 삼아야 하며, 표현을 위한 스타일시트에 봉사하는 것을 목적으로 하는 추가 마크업을 피해야 한다. 사례 개발 .- 문서의 콘텐츠는 세 가지 영역 또는 기능적 그룹 으로 구조화된다: 특정 콘텐츠, 주 내비게이션 메뉴, 그리고 사이트 전반에 걸친 영역(현재 문서와 관련된 것, 예를 들어 섹션 뉴스일 수도 있고, 웹사이트나 포털과 관련된 것, 예를 들어 포털 주제와 관련된 관심 링크나 배너 모음일 수도 있다). 코드 내 콘텐츠 구성은 현재 페이지에 대한 구체성과 관련성 수준에 따라 정해야 한다. 따라서 문서에 특정된 정보 그룹이 코드에서 먼저 나타나야 하며, 그 다음에 전반적 영역이 앞의 정보와 구체적으로 관련되고 콘텐츠에 따라 변한다면 그것이 이어져야 한다. 그 다음에 주 내비게이션 메뉴가 온다. 전반적 정보가 사이트 전체에 공통되고 각 섹션에서 특정한 성격을 갖지 않는 경우에는 메뉴 뒤에 이어서 마지막에 배치한다. 모든 경우에 문서 내에서 세 그룹 각각 사이를 이동하여 다음이나 이전으로 갈 수 있게 하는 링크를 만들어야 한다. 가능한 한 깨끗하고 최적의 코드를 얻기 위해, 코드 구성은 다음과 같다:

헤더와 푸터는 가장 흔한 상황 중 하나이므로 추가했다. 예시를 보여주기 위해 일반적인 블록 컨테이너( div )를 사용한다. 만약 이것들이 단일 블록(예를 들어 목록)을 포함한다면 필요하지 않을 것이다. 식별자를 그것에 직접 적용할 수 있기 때문이다. 깨끗하고 최적의 코드 를 얻고자 하는 의도로, 이것들 중 하나 이상을 묶는 컨테이너는 사용하지 않는다. 적용된 마크업과 그 구성은 예시들 사이에서 그대로 유지되었다. 일반적으로 적용된 스타일은 공통 css에 포함했다. 각각에 특정한 스타일 모음은 검토를 쉽게 하기 위해 문서의 헤더 안에 포함했다. 모든 경우에 주요 콘텐츠 블록은 유동적인 동작을 유지했다. “contenido1”이라는 블록의 첫 번째 자손들에게 마진을 적용하기 위해 전체 선택자를 사용했다. 모든 브라우저가 ” :first-child ” 의사 요소를 올바르게 인식하는 것은 아니므로, 블록의 모든 자손에게 속성을 적용한 다음 부모가 그 블록의 자손인 모든 자손에게서 속성을 무효화하는 방식을 택했다. 다른 방법들도 사용할 수 있다. 예를 들어 앞서 언급한 의사 요소를 Internet Explorer(IE)용 조건부 주석과 함께 사용하는 방법이 있다. 또 다른 방법은 “contenido1 ” 안에 블록을 만들고 그 위에 필요한 스타일을 적용하는 것이었을 것이다. 이 방법은 더 깨끗한 마크업을 얻고 레이아웃에 봉사하는 것을 목적으로 하는 요소가 없는 코드를 얻기 위해 피했다. 실제로 자손들에게 변경될 수 있는 속성은 측면 마진이며, 이는 쉽게 제어할 수 있는 속성이므로 제안된 해결책이 이 경우에 가장 최적이라고 여겨진다. 스타일을 적용할 때 예상치 못한 효과가 나타날 가능성을 고려하여 어떤 속성과 특성이 선언되었는지 염두에 두는 것이 중요하다. 예를 들어 IE에서는 목록을 플로팅되고 상대 위치로 배치된 요소 안에 포함할 때 배경에 적용된 스타일이나 테두리에 적용된 색상이 표시되지 않는다(이것은 목록을 상대 위치로 배치하여 해결할 수 있다). 아이디어는 사이트의 필요에 따라 정해진 순서로 3단 레이아웃을 얻는 것이다. 다양한 레이아웃은 블록의 순서와 그 유동적 특성에 따라 정리되어 표시된다. 블록의 유동성은 너비를 백분율로 정의하여 얻고(모든 예시에서 컨테이너 전체의 20%), 고정성은 절대 단위로 얻는다(모든 예시에서 150px). 마찬가지로 절대 단위 대신 상대 단위(em)를 사용할 수도 있다. 모든 것은 각 경우의 특별한 필요에 달려 있다: 레이아웃 순서 1 2 3 유동 디자인 예시: 유동 유동 유동 하이브리드 디자인 예시: 유동 고정 유동 하이브리드 디자인 예시: 유동 유동 고정 하이브리드 디자인 예시: 유동 고정 고정 레이아웃 순서 1 3 2 유동 디자인 예시: 유동 유동 유동 하이브리드 디자인 예시: 유동 유동 고정 하이브리드 디자인 예시: 유동 고정 유동 하이브리드 디자인 예시: 유동 고정 고정 레이아웃 순서 2 1 3 유동 디자인 예시: 유동 유동 유동 하이브리드 디자인 예시: 고정 유동 유동 하이브리드 디자인 예시: 유동 유동 고정 하이브리드 디자인 예시: 고정 유동 고정 레이아웃 순서 2 3 1 유동 디자인 예시: 유동 유동 유동 하이브리드 디자인 예시: 고정 유동 유동 하이브리드 디자인 예시: 유동 고정 유동 하이브리드 디자인 예시: 고정 고정 유동 레이아웃 순서 3 1 2 유동 디자인 예시: 유동 유동 유동 하이브리드 디자인 예시: 유동 유동 고정 하이브리드 디자인 예시: 고정 유동 유동 하이브리드 디자인 예시: 고정 유동 고정 레이아웃 순서 3 2 1 유동 디자인 예시: 유동 유동 유동 하이브리드 디자인 예시: 유동 고정 유동 하이브리드 디자인 예시: 고정 유동 유동 하이브리드 디자인 예시: 고정 고정 유동 일부 경우와 일부 브라우저(예: Internet Explorer)에서는 창 크기를 조정할 때 비정상적인 동작이 나타날 수 있다. 기본적으로 잘못된 동작은 컨테이너에 너비가 얼마여야 하는지 지정하더라도 크기를 조정할 때 텍스트가 영향을 주어 컨테이너의 가장자리를 약간 밀어내기 때문에 발생한다. 블록 집합이 컨테이너의 100%를 차지해야 하는 경우, 상대적 크기를 가진 블록 중 하나가 앞서 언급한 효과로 인해 차지해야 하는 것보다 조금 더 많이 차지하여 나머지를 밀어낼 수 있고, 나머지는 플로팅되어 있어 들어가지 못하고 아래로 떨어진다. 해결책으로 그중 하나에 이상적인 것보다 약간 작은 크기를 선언할 수 있다(예: 20% 대신 19.9%). 카테고리: CSS —> 댓글 1개 Norwin Galeano 2006년 8월 28일 아주 좋습니다. 이 글은 페이지를 마크업하기 시작하는 사람들에게 매우 유용할 것입니다

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.