너비, 최대 너비 및 여백 사용 : auto; 사용

컴프

· 8년 전 · 조회 2377 2377

CSS 레이아웃 - 너비와 최대 너비

너비, 최대 너비 및 여백 사용 : 자동;

max-width and margin: auto;

앞 장에서 언급했듯이. 블록 레벨 요소는 항상 사용할 수있는 전체 너비를 사용합니다 (가능한 한 왼쪽과 오른쪽으로 뻗어 있음).

width블록 수준 요소를 설정하면 해당 요소의 가장자리까지 확장되지 않습니다. 그런 다음 여백을 auto로 설정하여 요소를 해당 컨테이너 내에 가로로 가운데 놓을 수 있습니다. 요소는 지정된 너비를 차지하며 나머지 공간은 두 여백 사이에서 균등하게 분할됩니다.

이 <div> 요소의 폭은 500px이고 여백은 auto로 설정됩니다.

참고 :<div> 브라우저 창이 요소의 너비보다 작은 경우 위와 같은 문제 가 발생합니다. 그런 다음 브라우저는 페이지에 가로 스크롤 막대를 추가합니다.

사용 max-width하는 대신,이 상황에서, 작은 창 브라우저의 취급이 향상됩니다. 소형 장치에서 사이트를 사용할 수있게 만들 때 중요합니다.

이 <div> 요소의 최대 너비는 500 픽셀이며 여백은 자동으로 설정됩니다.

도움말 : 브라우저 창 크기를 500 픽셀 미만으로 조정하여 두 div의 차이점을 확인하십시오.

다음은 위의 두 div의 예입니다.

div.ex1 {

width: 500px;

margin: auto;

border: 3px solid #73AD21;

}

div.ex2 {

max-width: 500px;

margin: auto;

border: 3px solid #73AD21;

}

<!DOCTYPE html>

<html>

<head>

<style>

div.ex1 {

width:500px;

margin: auto;

border: 3px solid #73AD21;

}

div.ex2 {

max-width:500px;

margin: auto;

border: 3px solid #73AD21;

}

</style>

</head>

<body>

<div class="ex1">This div element has width: 500px;</div>

<br>

<div class="ex2">This div element has max-width: 500px;</div>

<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between

the two divs!</p>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
77	HTML	Ajax의 표기와 발음에 관한 의견! [4]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5146
76	HTML	움직이는 gif도 썸네일을 만들수 있는 함수 [6]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6769
75	HTML	Ajax에서 [즐겨찾기]와 [뒤로가기]를 다루는 방법! [2]	ⓦangcho 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6775
74	기타	CSS 사전입니다.(zip 압축파일) [13]	Photofly 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5930
73	HTML	간단한 디렉토리 인덱싱 시스템(규칙에 맞는것만 보여줌) [1]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3711
72	HTML	롤오버 이미지를 사용할 수 있는 심플한 드롭다운 메뉴	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	6296
71	HTML	위에서 하나씩 떨어지는 메뉴 스크립트	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3194
70	HTML	사용자 브라우저에서 자바지원 여부에 따라 리다이렉트 시키기 [1]	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3505
69	HTML	사용자 브라우저의 자바 버전 알려주기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2426
68	HTML	윈,맥용 사이트를 운영할때 각각 다른 다운로드 사이트로 이동시키기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2727
67	HTML	사용자 웹브라우저의 이름 알려주기	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	2633
66	HTML	사용자 웹브라우저 정보 보여주기 해상도, 자바설치여부 등등	Elbis 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3145
65	HTML	ctrl +j 와 ctrl + alt + shift + t 의 사용법(잔팁) [5]	사랑과우정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4739
64	HTML	curl 함수를 이용한 HTTP_REFERER 변경 [8]	관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	13644
63	HTML	if [23]	izen 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3499
62	HTML	iinclude와 조건문 [7]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3905
61	HTML	국내 지도 선택(시, 도 별로 선택하기) [5]	수다쟁이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4350
60	HTML	페이지 이동중입니다 잠시만 기달려주세여	개발자관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3598
59	HTML	php실명인증 한번만하면 쭈우욱^^ [1]	개발자관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3789
58	HTML	http://홈주소/?mode=xxx 하는방법 :) [1]	개발자관리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4102
57	HTML	포토샵 환경 설정 초기화 하기(1원짜리 팁) [2]	가을 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5648
56	HTML	[자바스크립트강좌] HTML로 글자 변환	스마일미디어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4132
55	HTML	데이터베이스의 생성, 선택, 보기	스마일미디어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4028
54	HTML	포토샵 CS 브러쉬 툴 강좌 [4]	스마일미디어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3689
53	HTML	IE 패치 스크립트(상호 작용하는 ActiveX 컨트롤이 사용자 입력에 즉시 응답하도록 웹 페이지를 수정하는 방법) [2]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3804
52	HTML	네이버 openapi 사용하여 쇼핑검색 만들기 [2]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5633
51	HTML	네이버 openapi 사용하여 실시간 인기검색어 보여주기 [4]	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5642
50	HTML	특정 IP 차단하기... [1]	왕초보 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	4107
49	HTML	window.showModalDialog 항상 위에 뜨는 창 열기	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	5702
48	HTML	전화 번호 숫자만 빼오기 [5]	rolo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	19년 전	3752