CSS Layout_CSS/HTML 시작하기

CSS 레이아웃과 기존 테이블 레이아웃의 가장 큰 차이점은 원래 위치 지정에서는 테이블을 사용하고 테이블 간격이나 무색 투명 GIF 이미지를 사용하여 텍스트 레이아웃 섹션의 간격을 제어하지만 이제는 레이어(div)를 사용하여 위치를 지정한다는 것입니다. 레이어의 여백, 안쪽 여백, 테두리 및 기타 속성을 통해 섹션의 간격을 제어합니다.

1. DIV 정의
일반적인 정의 div 예 분석:

#sample{ MARGIN: 10px 10px 10px 10px;
PADDING-LEFT: 20px; 위쪽: 20px;
PADDING-오른쪽: 10px;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid; -LEFT: #CCC 2px solid;
BORDER-TOP: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE 오른쪽 하단: #666; 🎜>TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60% } 설명은 다음과 같습니다.

레이어 이름은 샘플이며 다음을 사용하여 호출할 수 있습니다.
페이지에 이 스타일이 있습니다.
MARGIN은 레이어 테두리 바깥에 남겨진 여백을 말하며 페이지 여백이나 다른 레이어와의 간격을 만드는 데 사용됩니다. "10px 10px 10px 10px"는 각각 "위, 오른쪽, 아래, 왼쪽"(시계 방향)의 4개 여백을 나타냅니다. 모두 동일할 경우 "MARGIN: 10px;"로 축약할 수 있습니다. 여백이 0이면 "MARGIN: 0px;"라고 씁니다. 참고: 값이 0인 경우 뒤에 백분율 기호가 와야 하는 RGB 색상 값 0%를 제외하고 다른 경우에는 "px" 단위를 따를 필요가 없습니다. MARGIN은 투명 요소이므로 색상을 정의할 수 없습니다.
PADDING은 레이어의 테두리와 레이어의 내용 사이의 공간을 의미합니다. "PADDING-LEFT"는 왼쪽 테두리부터 콘텐츠까지의 거리 등을 나타냅니다. 모두 동일할 경우 "PADDING:0px"로 축약할 수 있습니다. PADDING은 투명 요소이므로 색상을 정의할 수 없습니다.
BORDER는 레이어의 테두리를 나타냅니다. "BORDER-RIGHT: #CCC 2px solid"는 레이어의 오른쪽 테두리 색상을 "#CCC"로, 너비를 "2px"로, 스타일을 "solid"로 정의합니다. " 직선. 점선 스타일을 원할 경우 "dotted"를 사용할 수 있습니다.
BACKGROUND는 레이어를 정의하는 배경입니다. 두 가지 수준으로 정의됩니다. 먼저 이미지 배경을 정의하고 "url(../images/bg_logo.gif)"을 사용하여 배경 이미지 경로를 지정합니다. 두 번째로 배경색 "#FEFEFE"를 정의합니다. "on-repeat"는 배경 이미지를 반복할 필요가 없다는 뜻으로, 가로로 반복하려면 "repeat-x", 세로로 반복하려면 "repeat-y"를 사용하고, 덮을 때까지 반복하면 됩니다. 전체 배경을 보려면 "반복"을 사용하세요. 다음 "오른쪽 하단;"은 배경 이미지가 오른쪽 하단에서 시작됨을 의미합니다. 배경 이미지가 없으면 배경색만 정의할 수 있습니다. BACKGROUND: #FEFEFE

COLOR는 이전 섹션에서 소개한 글꼴 색상을 정의하는 데 사용됩니다.
TEXT-ALIGN은 레이어의 콘텐츠 배열을 정의하는 데 사용되며 중앙은 중앙, 왼쪽은 왼쪽, 오른쪽은 오른쪽입니다.
LINE-HEIGHT는 선 높이를 정의합니다. 이는 높이가 표준 높이의 150%임을 의미합니다. LINE-HEIGHT:1.5 또는 LINE-HEIGHT:1.5em과 같이 쓸 수도 있습니다. 이는 같은 의미입니다. .
WIDTH는 정의된 레이어의 너비로, 500px와 같은 고정 값이거나 여기서 "60%"와 같은 백분율일 수 있습니다. 이 너비는 콘텐츠의 너비만을 의미하며 여백, 테두리 및 패딩은 포함되지 않습니다. 하지만 일부 브라우저에서는 이렇게 정의되어 있지 않으므로 좀 더 시도해 보아야 합니다.
이 레이어의 실제 성능은 다음과 같습니다.

여기는 데모 콘텐츠입니다. 여기에 데모 콘텐츠가 있습니다. 여기에 데모 콘텐츠가 있습니다. 여기에 데모 콘텐츠가 있습니다. 여기에 데모 콘텐츠가 있습니다. 데모 콘텐츠, 데모 콘텐츠, 데모 콘텐츠,

데모 콘텐츠, 데모 콘텐츠,

데모 콘텐츠, 데모 콘텐츠 content,

여기 데모 콘텐츠가 있습니다..
테두리가 2px 회색이고 오른쪽 하단에 배경 이미지가 반복되지 않고 콘텐츠가 왼쪽 테두리에서 20px 떨어진 것을 볼 수 있습니다. 내용이 중앙에 맞춰져 있습니다. 호호, 보기에는 좋지 않지만 가장 기본이군요. 마스터하시면 CSS 레이아웃 기술의 절반을 배운 것입니다. 그게 전부입니다. 전혀 어렵지 않습니다! (나머지 반은 무엇인가요? 나머지 반은 레이어 간 위치 지정입니다. 나중에 차근차근 설명하겠습니다.)


2. CSS2 박스 모델

1996년 CSS1 이후 W3C 조직은 출시 이후 웹 페이지의 모든 개체를 상자에 배치할 것을 권장했습니다. 디자이너는 정의를 만들어 이 상자의 속성을 제어할 수 있습니다. 이러한 개체에는 단락, 목록, 제목, 그림 및 레이어가 포함됩니다. . 박스 모델은 주로 내용, 패딩, 테두리 및 여백의 네 가지 영역을 정의합니다. 위에서 설명한 샘플 레이어는 일반적인 상자입니다. 초보자의 경우 margin, background-color, background-image, padding, content, border 간의 수준과 관계, 상호 영향에 대해 혼란스러워하는 경우가 많습니다. 다음은 박스 모델의 3D 개략도입니다. 이해하고 기억하기가 더 쉽기를 바랍니다.

3. 모든 보조 이미지는 백그라운드 처리를 사용해야 합니다. XHTML+CSS 레이아웃을 사용하는 것은 처음에는 익숙하지 않은 기술이라고 해야 할 것입니다. 즉, 모든 보조 이미지가 배경과 함께 구현된다는 것입니다. 다음과 같습니다:

BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat 오른쪽 하단

을 사용하여 콘텐츠에 직접 삽입할 수는 있지만 이는 허용되지 않습니다. .여기서 '보조 사진'이란 페이지에 표현되는 내용은 아니지만 장식, 간격, 알림용으로만 사용되는 사진을 말합니다. 예를 들어, 사진 앨범의 사진, 사진 뉴스의 사진, 위의 3D 박스 모델 사진은 모두 콘텐츠의 일부이며 요소를 사용하여 페이지에 직접 삽입할 수 있으며 나머지는 로고, 제목과 유사합니다. 그림 및 목록 접두사 그림은 모두 배경 모드 또는 기타 CSS 방법을 사용하여 표시되어야 합니다.

이에는 두 가지 이유가 있습니다.

성능과 구조를 완전히 분리하고 CSS를 사용하여 모든 모양과 성능을 제어하여 수정이 용이하도록 합니다.
페이지를 더욱 사용하기 쉽고 친숙하게 만드세요. 예를 들어, 시각 장애인이 스크린 리더를 사용하는 경우 배경 기술을 사용하여 구현된 사진은 소리내어 읽혀지지 않습니다.​