혼공 | Notion

배운걸 토대로 혼자 작은 페이지를 만들어보고 있다.

아래는 5/8에 만든 것

<!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>pinsnote</title>
</head>
<body>
    <h1 style="text-align: center;"> <a href="pinsnote.html">pinsnote</a></h1>
    <a href="<https://www.notion.so/HTML-CSS-Javascript-6e29bb47d8c947f5abf53d800918a73f>">
        <img style="display: block;margin: 0 auto;" width="50%" src="main.jpg" alt=""/>
    </a>
    
    <h2 style="text-align: center;">Hello World!</h2>
    <div style="text-align: center;">무언가에 몰두하는 삶이 얼마나 아름다운지 안다. <br>
        나 혼자 만들어보는 실습페이지 <br>
		</div>
    
</body>
</html>

이건 5월 10일에 CSS를 배우고 작성한 것

코드가 훨씬 간결해졌다.

만약 여기서 내용이 더 추가 되고 style 속성이 많아지면

파일을 새로 만들어서 링크 걸수도 있겠지?

<!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>pinsnote</title>
    <style>
        h1 {
            text-align: center;
            font-family: 'Courier New', Courier, monospace;
        }
        img {
            display: block;
            margin: 0 auto;
            width: 50%;
        }
        h2,div{
            text-align: center;
        }
    </style>
</head>
<body>
    <h1><a href="pinsnote.html">pinsnote</a></h1>
    <a href="<https://www.notion.so/HTML-CSS-Javascript-6e29bb47d8c947f5abf53d800918a73f>">
        <img src="main.jpg" alt=""/>
    </a>
    
    <h2>Hello World!</h2>
    <div>
        나 혼자 만들어보는 실습페이지 <br>
    </div>
    
</body>
</html>

위, 아래의 결과 화면은 동일하다.

사진을 클릭하면 내 노션이 나온다.