생활코딩 WEB2

2022-01-09
CSS 등장 이전의 상황 / CSS의 등장 / 혁명적 변화 / CSS 속성을 스스로 알아내는 방법 / CSS 선택자를 스스로 알아내는 방법

CSS의 시작

HTML에 디자인 태그를 추가하지만 한계를 깨닫고,

디자인에 최적화 된 완전히 새로운 언어를 만들은 것이 CSS 이다.

박스모델

우리가 원하고자 하는 레이아웃의 화면분할을 위해서 박스모델을 사용한다.

https://opentutorials.org/module/4064/24713

Margin은 다른 Box Model과의 거리간격

Border은 Box Model의 경계선

Padding은 Context와 Border 와의 거리간격

Context는 Box Model의 내부

페이지 오른쪽 클릭을 했을 때 나오는 '검사'를 클릭하면 Box Model을 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
    <title>미래의 가방 후보군</title>
    <meta charset="UTF-9">
    <style>
        /*
        block level element 화면 전체를 쓰는 요소
        */
        h2 {
            border: 5px solid blue;
            display: inline;
            padding: 10px;
        }
        h1 {
            text-align: center;
            font-size: 40px;
            border: 5px solid red; 
            padding: 20px;
            margin: 0;
            width: 500px;
            /*
            border-width: 5px;
            border-color: red;
            border-style: solid;
            display: inline;
            display: none;
            */
        }
        /*
        inline element 부분을 쓰는 요소
        a {
            border-width: 5px;
            border-color: red;
            border-style: solid;
            display: block;
        }
        */
    </style>
</head>
<body>
    <h1>미래의 가방 후보군</h1>
    <br style="margin-top: 50px;">
    <a href="https://www.styleshare.kr/goods/987303"><h2>1. DANKER (댄커) (U0323CBP92) 🔗</h2></a>
    <p><img src="https://usercontents-d.styleshare.io/images/36dfab25-4615-4d32-af1e-94187297a250/1440x1440" width="250" height="250"></p>
    <p style="margin-top: 50px;">
    <strong>브랜드</strong> : DANKER (댄커)<br>
    <strong>가격</strong> : 80,460<br>
    <strong>비고</strong> : 노트북수납칸이 있음<br>
    </p>
</body>
</html>

'🔗 HTML & CSS' 카테고리의 다른 글

생활코딩 WEB2 - CSS (3) (0)	2022.01.11
생활코딩 WEB2 - CSS (2) (0)	2022.01.10
생활코딩 WEB1 - HTML & Internet (3) (1)	2022.01.05
생활코딩 WEB1 - HTML & Internet (2) (0)	2022.01.04
생활코딩 WEB1 - HTML & Internet (1) (0)	2022.01.04