본문 바로가기
Web/Total_Web

bootstrap 기초1 기본

by 다니엘의 개발 이야기 2022. 9. 6.
320x100

일단 강의 1개로는 bootstrap이랑 css가 도대체 뭐가 다른건지 모르겠다.

 

 

# html 영역

 

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <div class="container">
        <div class="btn">Click!</div>
        <div class="btn">Hello world</div>
    </div>
</body>
</html>

# css 영역

.container {
    width: 300px;
    /* 화면 가운데 정렬 / 정가운데는 아님 */
    margin: auto;
    background-color: orange;
}

.btn {
    display: inline-block;
    padding: 10px;
    background-color: royalblue;
    /* 글씨 색상 */
    color: white;
    /* 박스 라운드 */
    border-radius: 6px;
    /* 버튼 기본요소 같다. */
    cursor: pointer;
}
300x250

'Web > Total_Web' 카테고리의 다른 글

Web에 유용한 사이트 모음  (0) 2022.11.14
git hub 반응형 랜딩페이지 코드 따라한 것  (0) 2022.09.21