HTML , CSS

[HTML, CSS] 웹 레이아웃의 기초 div를 이용한 박스 디자인

Lemmyyy 2024. 6. 19. 17:10

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="../css/main.css" rel="stylesheet">
</head>
<body>

    <img src="./img/motorhead.jpg" class="profile">
    <h3 class="title">Motorhead</h3>
    <p id="position">Front-end Developer</p>

    <div class="box">
        <p>안녕하세요 개발자입니다.</p>
    </div>
    <!-- div 박스는 기본적으로 display: block; 속성이 있음 -->
    <!-- display: block; 속성은 가로 행을 전부 차지하는 속성
    <div>,<p>,<h> 모두 가지고 있는 속성 -->

</body>
</html>

 

 

CSS

.profile {
width: 200px;
display: block;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
}

.title {
    text-align: center;
    font-size: 16px;
}

#position{
    text-align: center;
}

.box {
    width: 150px;
    background-color: cadetblue;
    margin: 30px;
    padding: 40px;
    border-radius: 15px;
    margin-left: auto;
    margin-right: auto;
    font-size: 10px;
    color: white;
}

 

margin은 바깥 여백,

padding은 안쪽 여백,

border는 테두리 (차례로 두께, 선의 종류, 색상)

border-radius는 테두리 둥글게 처리

 

가운데 정렬은 display: block; margin-left: auto; margin-right: auto; 주면 됨

display: block; 속성은 가로로 행을 전부 차지하게 하는 속성임

(div, p, h 태그는 모두 기본적으로 가지고 있는 속성이기에 생략하고 margin만 설정해주면 된다 !!!)

 

margin: 5px 6px 7px 8px; 이렇게 주면 순서대로 상 5px, 우 6px, 하 7px, 좌 8px