4. div 태그

<div> : 네모 박스

But! 쌩 div 태그는 그냥 '1차원 선'

위의 사진에서 파란색 BOX는 div 태그를 활용

 

HTML 

<div class ='box'>
     프론트엔드 개발자 김XX 
</div>

 

CSS

.box {
    display: block; /* display : block -> 한 행을 전부 차지해 주세요(해당 태그를 모두 박스로써 다뤄주세요) div는 박스이기 때문에 display :block 이 내장되어 있어서 지워도 무방하다. */
    margin-left : auto; /* 오른쪽 정렬 */ 
    margin-right : auto; /* 왼쪽 정렬 */
    width : 400px; 
    background-color: blue;
    padding : 30px;
    border : 1px solid black; 
    text-align: center;
    color : white; 
    border-radius: 10px; /* 테두리 둥글게 */
}

 

 

div 태그는 CSS 스타일링이 매우 중요하다. 

 

 

 

1. div 박스 가운데 정렬 (이미지 가운데 정렬과 동일) 

display:block;
margin-left:auto;
margin-right:auto; 

• display : block - div 태그를 block 형태로써 다뤄라. (한 행을 모두 차지하라) 
• ★ div 태그는 box 이기 때문에 기본적으로 display : block 내장
• margin-left : auto - 오른쪽 정렬
• margin-right : auto - 왼쪽 정렬 

2. border : 경계선(테두리)

border : 1px solid black;
border-bottom : 4px solid white; 
border-radius : 5px;

• border : 1px solid black ☞ 테두리 1px 으로 검은색으로 만들어라 
• border-bottom : 4px solid white ☞ 테두리 아래부분을 4px 하얀색으로 만들어라 
• border-radius : 테두리의 각진 부분을 둥글게 만들어라 

3. margin(외부 여백) : div Box를 페이지 상에서 얼마나 상하좌우 기준 여백을 가질 것인지? 

 

4. padding(내부 여백) : div 태그 내에 얼마나 여백을 두고 글자를 위치하게 할 것 인지?