CSS box관련 - margin, border, padding, content :: ◈학습중◈ㅤㅤㅤㅤㅤㅤㅤ틀린 부분ㅤㅤㅤㅤㅤㅤ지적 바랍니다.

CSS box관련 - margin, border, padding, content

2023. 4. 2. 14:11

<!DOCTYPE html>

<head>

div.div {background-color:rgb(218, 215, 250); border:solid}

[title="margin"] {background-color:yellow; border:solid #1eff00}

/*박스 모델*/

/* margin - 요소의 외부 여백*/

/* border - 요소의 테두리(경계선)*/

/* padding - 요소의 내부 여백*/

/* content - 요소의 내용 */

/*---------------------------------------------------------------------------------------------*/

/*●●●●●●●●●●●●●●●●●●●● margin (요소의 외부 여백) ●●●●●●●●●●●●●●●●●●●●*/

.margin0 {margin:auto} /*margin을 자동으로 정 중앙에 위치*/

.margin1 {margin:1px} /*margin 4개 방향 모두 1px 로 설정*/

.margin2 {margin:30px} /*margin 4개 방향 모두 30px 로 설정*/

.margin3 {margin:1px 50px 100px 150px} /*시계방향으로 위1px, 오른쪽50px, 아래100px, 왼쪽150px 설정*/

.margin4 {margin:10px 100px 30px} /*위10px, 오른쪽100px, 아래30px 설정 (생략된 왼쪽은 마주보는 오른쪽과 같은 100px를 가진다.)*/

.margin5 {margin:50px 50px} /*위50px, 오른쪽50px 설정 (생략된 왼쪽, 아래는 마주보는 오른쪽, 위쪽과 같은 50px를 가진다.)*/

.margin6 {margin-top:100px} /*위쪽에만 100px 설정*/

.margin7 {margin-right:100px} /*오른쪽에만 100px 설정*/

.margin8 {margin-bottom:100px} /*아래쪽에만 100px 설정*/

.margin9 {margin-left:100px} /*왼쪽에만 100px 설정*/

/*마진 겹침 현상*/

/*예제와 같이 2개의 요소가 있을시 큰쪽의 마진이 적용이 되고 적은 마진은 생략된다.*/

/*즉 margin4의 첫번째 요소 아래 마진이 30px, 두번째 요소 위 마진이 10px가 합쳐져서 40px가 되지않고 큰쪽의 30px로 적용된다.*/

/*●●●●●●●●●●●●●●●●●●●● border (요소의 테두리(경계선)) ●●●●●●●●●●●●●●●●●●●●*/

.border-test1 {border-width:10px; border-style:solid; border-color:blue} /*굵기-10px, 스타일-solid, 파란색으로 설정*/

.border-test2 {border:10px solid blue} /*뛰우기로 한번에 설정이 가능하다*/

/*아래 예제처럼 위, 오른쪽, 아래, 왼쪽 개별 설정이 가능하다 규칙은 시계방향 margin 규칙과 같다*/

.border-test3 {border-width:5px 10px 15px 20px; border-style:groove ridge; border-color:blue red green yellow}

.border > p {background-color:aquamarine; border-width:5px;}

/*속성값*/

.border0 {border:none} /*테두리를 그리지 않는다*/

.border1 {border:hidden} /*테두리를 화면에서 숨긴다*/

.border2 {border:solid} /*테두리를 실선으로 그린다*/

.border3 {border:double} /*테두리를 이중실선으로 그린다*/

.border4 {border:dotted} /*태두리를 점선으로 그린다*/

.border5 {border:dashed} /*테두리를 긴 점선으로 그린다*/

.border6 {border:groove} /*테두리를 파인 것처럼 그린다*/

.border7 {border:ridge} /*테두리를 튀어나온 것처럼 그린다*/

.border8 {border:inset} /*요소 전체를 파인것 처럼 그린다*/

.border9 {border:outset} /*요소 전체를 튀어나온 것처럼 그린다*/

/*●●●●●●●●●●●●●●●●●●●● padding (요소의 내부 여백) ●●●●●●●●●●●●●●●●●●●●*/

.padding > p {border:5px solid green}

.padding1 {padding:10px} /*padding 4개 방향 모두 10px 로 설정*/

.padding2 {padding:10px 20px 30px 40px} /*시계방향으로 위10px, 오른쪽20px, 아래30px, 왼쪽40px 설정*/

.padding3 {padding:40px 20px 10px} /*위40px, 오른쪽20px, 아래10px 설정 (생략된 왼쪽은 마주보는 오른쪽과 같은 20px를 가진다.)*/

.padding4 {padding:50px 50px} /*위50px, 오른쪽50px 설정 (생략된 왼쪽, 아래는 마주보는 오른쪽, 위쪽과 같은 50px를 가진다.)*/

.padding5 {padding-top:100px} /*위쪽에만 100px 설정*/

.padding6 {padding-right:100px} /*오른쪽에만 100px 설정*/

.padding7 {padding-bottom:100px} /*아래쪽에만 100px 설정*/

.padding8 {padding-left:100px} /*왼쪽에만 100px 설정*/

/*●●●●●●●●●●●●●●●●●●●● content (요소의 내용) ●●●●●●●●●●●●●●●●●●●●*/

/*텍스트 관련 스타일 속성으로 content 영역을 제어 할 수 있다.*/

.content {width:250px; height:100px; background-color: #1eff00;} /*content영역을 가로2500px, 세로100px, 배경을 초록으로 설정*/

/*속성 box-sizing - width, height 적용할 기준*/

/*속성값*/

/*content-box - width, height 설정 기준을 content로 정한다. (기본설정)*/

/*border-box - width, height 설정 기준을 border로 정한다.*/

.content1 {margin:50px; border:25px solid pink; padding:25px; width:300px; height:300px}

/*요소의 면적은 margin을 제외한 border 50px + padding 50px + width, height 300px를 합쳐 400px가 된다*/

.content2 {margin:50px; border:25px solid pink; padding:25px; width:300px; height:300px; box-sizing:border-box}

/*요소의 면적을 border-box로 설정하면서 border 50px, padding 50px 률 유지하면서 content영역의 가로, 세로가 200px로 설정된다.*/

/*●●●●●●●●●●●●●●●●●●●● box 모델의 성격과 display 속성 ●●●●●●●●●●●●●●●●●●●●*/

/* 블록 성격 - hn, p, div 등의 태그와 같이 사용했을 때 요소의 너비와 상관없이 항상 가로 한 줄을 다 차지하는 태그 (무조건 줄 바꿈 되는 태그)*/

/* 인라인 성격 - a, span, strong 등의 태그와 같이 사용했을 때 요소의 너비를 콘텐츠 크기만큼만 차지하는 태그 (줄 바꿈 안되는 태그)*/

/*인라인 블록 성격 - 인라인처럼 요소의 너비가 콘텐츠의 크기만큼만 차지하지만, 그 외의 성격은 블록 성격을 가지는 태그 (img, audio, video등의 태그)*/

/*블록 성격이 포함되어있는 box들은 width, height, margin, border, padding 포두 적용이 가능하다.*/

/*인라인 성격은 width, height 속성은 적용되지 않고 margin은 가로 방향으로만 적용 된다.*/

.box1 {width:100px; height:100px; margin:10px; border:10px solid green; padding:10px} /*인라인 블록설정*/

.box2 {width:100px; height:100px; margin:10px; border:10px solid green; padding:10px} /*블록 설정*/

.box3 {width:100px; height:100px; margin:10px; border:10px solid green; padding:10px} /*인라인 설정*/

/*3개의 설정을 모두 같게 하였지만 인라인 성격 box는 width, height 적용이 안되고 margin은 가로 방향만 적용되었다.*/

/*html 태그가 기본적으로 가지고 있는 박스 모델의 성격은 display 속성을 통해서 변경할 수 있다 */

/*속성값*/

/*block - box의 성격을 블록 성격으로 변경*/

/*inline - box의 성격을 인라인 성격으로 변경*/

/*inline-block - box의 성격을 인라인블록 성격으로 변경*/

.box4 {width:100px; height:100px; margin:10px; border:10px solid green; padding:10px; display:inline-block} /*인라인 성격을 인라인블록 성격으로 변경*/

</style>

</head>

<body>

<p class="margin" title="margin">margin 기본</p>

</div> <br>

<p class="margin0" title="margin">margin0 auto</p>

</div> <br>

<p class="margin1" title="margin">margin1 1px</p>

</div> <br>

<p class="margin2" title="margin">margin2 30px</p>

</div> <br>

<p class="margin3" title="margin">margin3 시계방향으로 위1px, 오른쪽50px, 아래100px, 왼쪽150px 설정</p>

</div> <br>

<p class="margin4" title="margin">margin4 위10px, 오른쪽100px, 아래30px 설정 (생략된 왼쪽은 마주보는 오른쪽과 같은 100px를 가진다.)</p>

</div> <br>

<p class="margin5" title="margin">margin5 위50px, 오른쪽50px 설정 (생략된 왼쪽, 아래는 마주보는 오른쪽, 위쪽과 같은 50px를 가진다.)</p>

</div> <br>

<p class="margin6" title="margin">margin6 위쪽에만 100px 설정</p>

</div> <br>

<p class="margin7" title="margin">margin7 오른쪽에만 100px 설정</p>

</div> <br>

<p class="margin8" title="margin">margin8 아래쪽에만 100px 설정</p>

</div> <br>

<p class="margin9" title="margin">margin9 왼쪽에만 100px 설정</p>

</div> <br>

</div> <br>

-------------------------------------------------- <br> <br>

<p class="border-test1">파란색 부분이 border 영역 (굵기-10px, 스타일-solid, 파란색으로 설정)</p>

<p class="border-test3">위, 오른쪽, 아래, 왼쪽 개별 설정이 가능하다 규칙은 시계방향 margin 규칙과 같다</p>

</div> <br>

<p class="border1">스타일 hidden</p>

<p class="border2">스타일 solid</p>

<p class="border3">스타일 double</p>

<p class="border4">스타일 dotted</p>

<p class="border5">스타일 dashed</p>

<p class="border6">스타일 groove</p>

<p class="border7">스타일 ridge</p>

<p class="border8">스타일 inset</p>

<p class="border9">스타일 outset</p>

</div>

</div> <br>

-------------------------------------------------- <br> <br>

<p class="padding1">padding 10px</p>

<p class="padding2">padding 위쪽 10px, 오른쪽 20px, 아래쪽 30px, 왼쪽 40px 적용 </p>

<p class="padding3">padding 위쪽 40px, 오른쪽 20px, 아래쪽 10px, 왼쪽이 생략 되었으므로 마주보는 오른쪽과 같은 20px 적용</p>

<p class="padding4">padding 위쪽 50px, 오른쪽 50px, 아래쪽과 왼쪽이 생략되었으므로 마주보는 50px 적용 </p>

<p class="padding5">padding5 위쪽에만 100px 설정</p>

<p class="padding6">padding6 오른쪽에만 100px 설정</p>

<p class="padding7">padding7 아래쪽에만 100px 설정</p>

<p class="padding8">padding8 왼쪽에만 100px 설정</p>

</div>

</div> <br>

-------------------------------------------------- <br> <br>

<p class="content">width - 250px, height - 100px, 배경을 초록색으로 설정</p>

</div> <br>

<p class="content1">margin - 50px, border - 25px, padding - 25px 으로 설정하고 넓이, 높이를 300으로 설정</p>

<p class="content2">위 예제자료와 같은 설정으로 가로 세로를 border-box로 제한 한 모습</p>

</div> <br>

-------------------------------------------------- <br> <br>

<img class="box1" src="https://blog.kakaocdn.net/dna/MtY93/btr16kQgTjB/AAAAAAAAAAAAAAAAAAAAAH-0UdTE8j0gRN-RHXOy9aVrolWiFzkTQPFh9N-1dUM4/TEST.jpg?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1756652399&allow_ip=&allow_referer=&signature=KSqtuf1iLjYNeDGRhWJ9caeeTcA%3D&attach=1&knm=img.jpg" title="인라인 블록">인라인 블록 성격

</div> <br>

</div> <br>

<span class="box3">인라인 성격 - width, height 적용이 안되고 margin은 가로 방향만 적용되었다.</span>

</div> <br>

<span class="box4">box3과 같은 설정으로 인라인블록 성격으로 변경한 모습</span>

</div> <br>

</body>

</html>

CSS 03

margin 기본

margin0 auto

margin1 1px

margin2 30px

margin3 시계방향으로 위1px, 오른쪽50px, 아래100px, 왼쪽150px 설정

margin4 위10px, 오른쪽100px, 아래30px 설정 (생략된 왼쪽은 마주보는 오른쪽과 같은 100px를 가진다.)

margin5 위50px, 오른쪽50px 설정 (생략된 왼쪽, 아래는 마주보는 오른쪽, 위쪽과 같은 50px를 가진다.)

margin6 위쪽에만 100px 설정

margin7 오른쪽에만 100px 설정

margin8 아래쪽에만 100px 설정

margin9 왼쪽에만 100px 설정

auto

--------------------------------------------------

파란색 부분이 border 영역 (굵기-10px, 스타일-solid, 파란색으로 설정)

속성값을 뛰우기로 한번에 설정이 가능하다

위, 오른쪽, 아래, 왼쪽 개별 설정이 가능하다 규칙은 시계방향 margin 규칙과 같다

스타일 none

스타일 hidden

스타일 solid

스타일 double

스타일 dotted

스타일 dashed

스타일 groove

스타일 ridge

스타일 inset

스타일 outset

--------------------------------------------------

기본

padding 10px

padding 위쪽 10px, 오른쪽 20px, 아래쪽 30px, 왼쪽 40px 적용

padding 위쪽 40px, 오른쪽 20px, 아래쪽 10px, 왼쪽이 생략 되었으므로 마주보는 오른쪽과 같은 20px 적용

padding 위쪽 50px, 오른쪽 50px, 아래쪽과 왼쪽이 생략되었으므로 마주보는 50px 적용

padding5 위쪽에만 100px 설정

padding6 오른쪽에만 100px 설정

padding7 아래쪽에만 100px 설정

padding8 왼쪽에만 100px 설정

--------------------------------------------------

width - 250px, height - 100px, 배경을 초록색으로 설정

margin - 50px, border - 25px, padding - 25px 으로 설정하고 넓이, 높이를 300으로 설정

위 예제자료와 같은 설정으로 가로 세로를 border-box로 제한 한 모습

--------------------------------------------------

인라인 블록 성격

블록 성격

인라인 성격 - width, height 적용이 안되고 margin은 가로 방향만 적용되었다.

box3과 같은 설정으로 인라인블록 성격으로 변경한 모습

'CSS' 카테고리의 다른 글

CSS - float, clear (0)	2023.04.04
CSS position - relative, absolute, fixed, sticky, z-index (0)	2023.04.04
CSS 텍스트 스타일 (0)	2023.04.01
CSS 선택자 이용방법 (0)	2023.03.20
CSS 문법 형식 (0)	2023.03.20

◈학습중◈ㅤㅤㅤㅤㅤㅤㅤ틀린 부분ㅤㅤㅤㅤㅤㅤ지적 바랍니다.

CSS box관련 - margin, border, padding, content

'CSS' 카테고리의 다른 글

+ Recent posts

티스토리툴바