[HTML5] - 3 - 게시글 카드 만드는 법
728x90
반응형
728x90
#주의#
이 글은 강의 글이 아니다.
틀린 부분, 깔끔하지 못한 부분 있을 수 있다.
지적해 주시면 저도 공부가 되고, 앞으로 이 글을 보실 분들에게도 도움이 될 거라 생각한다.
여기까지 따라왔다면 잘 하고 있는 것이다.
사실 시도하는게 어려울 뿐, 따라오는건 어렵지 않다고 생각한다.
이제는 이 검은 바탕에 게시글을 작성해보려 한다.
혹시나 놓친 분이나 새로 오신 분을 위해 전부 작성하겠다.
아래는 이전의 작성된 코드이다.
아래는 추가로 작성한 전체적인 코드이다.
<!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>이리의 맥 이야기</title>
<style>
.card {
background-color: white;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body style="background-color: black;">
<div class="hero">
<h1 style="color: white; text-align: center;">이리의 맥 이야기</h1>
<h2 style="color: white; text-align: center;">컴온!!!!</h2>
</div>
<div class="card">
<h3>환영합니다.</h3>
<p>완성하시면 이런 모습입니다.</p>
</div>
<div class="card">
<h3>할 수 있습니다.</h3>
<p>포기하지 마세요.</p>
</div>
</body>
</html>전과 비교 했을 때, <style> 부분이 추가 되었다.
<style> 에 카드를 하나 만들었다.
카드 형식으로 게시글을 출력하는 것이다.
카드의 크기와 모양 등은 마음대로 바꿀 수 있다.
구글링 해보면 예쁘게 짜놓은 카드도 얻을 수 있다.
그리고 <body>부분을 보면 이전과 다르게 <div class>로 나눠주었다.
쉽게 생각하면 1학년이 있으면 그것을 1반 2반 3반 이런 식으로 나눠준 것이다.
여기까지 따라왔다면 대단하다.
앞으로도 정진하기 바란다.
반응형
728x90
반응형
'개발 이야기 > [HTML5]' 카테고리의 다른 글
| [HTML5] - 6 - 약식 페이지네이션(두번째 페이지 만드는 법) (0) | 2023.05.02 |
|---|---|
| [HTML5] - 5 - 게시글에 사진 넣는 법 (0) | 2023.05.02 |
| [HTML5] - 4 - 버튼 만드는 법 (0) | 2023.05.02 |
| [HTML5] - 2 - 웹페이지의 head와 body (0) | 2023.05.02 |
| [HTML5] - 1 - Visual Studio를 사용하여 개발환경 만들기 (1) | 2023.05.02 |
댓글