CSS 실천(4) 「박스의 가로폭과 높이의 지정」
1. 소개
이 기사에서는 CSS
상자의 가로 폭과 높이 지정
에 대해 설명한다.
・width:가로폭
・height:높이
2. 상자의 가로 폭과 높이 지정
콘텐츠, 패딩, 테두리 영역은 변경 가능하지만 마진 영역은 포함되지 않습니다.
3. 가로폭과 높이 변경
h1의 가로폭과 높이 변경
【샘플】
HTML내는 이하와 같이 기술한다.
index.html
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>初めてのCSS</title>
<link rel="stylesheet" href="css/style.css" />
<style>
h1,p{
background-color: #6495ed;
}
</style>
</head>
<body>
<h1>ボックスモデル</h1>
<p>ボックスモデルの練習です。文章に意味はありません。</p>
</body>
styles.css
h1 {
width: 400px;
height: 240px;
}
【표시예】
지정된 상자를 가운데로 정렬
좌우의 마진을 자동으로 한다.
styles.css
h1 {
width: 400px;
height: 240px;
margin-right: auto;
margin-left: auto;
}
【표시예】
콘텐츠를 중앙에 배치하려는 경우
styles.css
h1 {
width: 400px;
height: 240px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
【표시예】
4. 마진과 패딩의 차이
1. 여백이 생기는 위치가 다르다
2. 마진은 부의 값을 사용할 수 있다
3. 마진은 값에 auto를 사용할 수 있다
이하에 해설을 기재한다.
1. 여백이 생기는 위치가 다르다
마진 영역은 테두리 영역의 내부이므로 여백은 불가능합니다.
역의 의미에서는, 보더 영역이나 패딩 영역은 각각 내측에 영역이 존재하기 때문에 여백을 설정할 수 있다.
2. 마진은 부(-)의 값을 사용할 수 있다
【샘플】
index.html
<body>
<h1>1</h1>
<p>2</p>
</body>
styles.css
h1 {
background-color: #ccc;
}
p {
background-color: skyblue;
margin-top: -60px;
}
【표시예】
패딩에는 부의 값은 사용할 수 없다.
3. 마진은 값에 auto를 사용할 수 있다
HTML 파일의 경우 상기 기재된 것
styles.css
h1 {
background-color: #ccc;
}
p {
background-color: skyblue;
margin-top: -60px;
margin-left: auto;
margin-right: auto;
}
【표시예】
패딩에는 auto를 사용할 수 없습니다.
5. 끝에
다음 항목: CSS 실천(5) 「3개의 셀렉터를 사용할 수 있게 된다」 다음.
Reference
이 문제에 관하여(CSS 실천(4) 「박스의 가로폭과 높이의 지정」), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Stack_up_Rising/items/08da8c5902d3d44f8da6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
