CSS 기초 - <div> 이용하여 네모 상자 만들기

📌 네모상자 만들기

1. html 파일에서 <div>태그 사용

<div class="box">네모박스</div>

 

2. css 파일에서 네모상자 속성 정하기

• backgound-color = background
• margin (상하좌우 여백)
• padding (안쪽 여백)
• border (테두리) (두께 / solid, dotted / 색깔)
• border-radius (테두리 둥글)
• width, hight 등등

.box {
    width: 100px;
    hight: 100px;
    background-color: cadetblue;
    margin: 30px;
    padding: 5px;
    border: 4px solid black;
    border-radius: 15px;
}

 

 

• 가운데 정렬은 이미지 가운데 정렬과 동일

.box {
    width: 100px;
    hight: 100px;
    background-color: cadetblue;
    margin: 30px;
    padding: 5px;
    border: 4px solid black;
    border-radius: 15px;
    
    **display: block; 
    margin-left: auto; 
    margin-right: auto**
}

• <div>박스는 display:block이 기본 설정이므로 생략가능

 

🔎 display : block

• 가로 행을 전부 차지해주라
• <div>, <p>, <h> 는 기본으로 있음

 

🔎 상속 지원

• <div> </div>안의 글자는 대충 적지 말고 태그를 이용해서 적기!
• <div><p> → 부모 태그인 <div>에 적용된 .box클래스에 <p>에 대한거 추가해도 자동으로 상속됨. → <p>에 직접 안 써도 됨.
• inherit 지원 → font-size, color, font-family 등등 지원

.box {
    width: 300px;
    hight: 50px;
    background-color: lightblue;
    margin: 30px;
    padding: 5px;
    border: 4px solid black;
    border-radius: 15px;
    
    display: block; 
    margin-left: auto; 
    margin-right: auto;

    **font-size: 15px;
    color: darkolivegreen;
    text-align: center**
}