👀 들어가기전에...
일요일에 내가 속해있는 원데이클래스 모임에서
html 관련한 클래스가 있었다.
여러 이미지들을 사용하여 간단한 화면을 만들어 보는 수업이었는데
오랜만에 vscode를 이용하여
내가 좋아하는 고양이를 주제로 페이지를 만들었더니
눈앞에 보이는 바뀌는 모습이 정말 마음에 들었다.
👊 Start
간단한 html 페이지 만들기
https://elbibjeong.github.io/20220619/
🔼완성본
✅ if문과 부등호 이용한 간단한 출력문제
▪index.html
<!DOCTYPE html>
<html lang="ko">
<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>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css">
<link href="reset.css" rel="stylesheet" type="text/css" />
<style>
body{
font-family: 나눔스퀘어, 'NanumSquare', sans-serif;
}
.whole_box{
max-width: 480px;
/*가운데 정렬*/
margin: 0 auto;
}
.whole_box .main_img{
width: 100%;
}
.whole_box .text{
padding : 0 20px;
line-height: 1.5;
}
.whole_box .text_title{
font-size: 32px;
font-weight: bold;
text-align: center; /* 텍스트 정렬*/
margin: 25px 0 25px 0;
}
.whole_box .click{
/*리셋*/
border : none;
text-decoration: none;
border-radius: 8px;
color: #1b64da;
background-color: rgba(69,147,252,.12);
margin: 30px auto 60px;
font-weight: 600;
line-height: 20px;
font-size: 15px;
padding: 5px 13px;
}
.whole_box .button_box{
text-align: center;
}
</style>
</head>
<body>
<div class="whole_box">
<img class="main_img" src="https://pds.joongang.co.kr/news/component/htmlphoto_
mmdata/202202/10/6fbb8c59-3f9e-491a-b6d8-155c578f6c95.jpg"/>
<h1 class="text_title">고양이(CAT)란 무엇인가?</h1>
<div class="text">
고양잇과의 하나. 원래 아프리카의 리비아살쾡이를 길들인 것으로, 턱과 송곳니가 특히 발달해서 육식을 주로 한다.
발톱은 자유롭게 감추거나 드러낼 수 있으며, 눈은 어두운 곳에서도 잘 볼 수 있다.
애완동물로도 육종하여 여러 품종이 있다.
</div>
<div class="button_box">
<a href="./feed.html">
<button class="click">자세히보기</button>
</a>
</div>
</div>
</body>
</html>▪reset.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}▪ feed.html
<!DOCTYPE html>
<html lang="ko">
<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>
<meta property="og:url" content="공유시 이동 url">
<meta property="og:title" content="goyang">
<meta property="og:type" content="website">
<meta property="og:image" content="공유시 보여질 이미지 경로">
<meta property="og:description" content="고양이를 좋아합니다.">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css">
<link href="reset.css" rel="stylesheet" type="text/css" />
<style>
body{
font-family: 나눔스퀘어, 'NanumSquare', sans-serif;
}
.whole_box{
max-width:600px;
margin : 0 auto;
}
.whole_box .list_box{
display: grid;
grid-column-gap: 10px;
grid-row-gap: 10px;
padding: 0 24px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 180px 180px;
}
.whole_box .list_box img {
width : 100%;
height : 100%;
object-fit : cover;
}
.whole_box .list_box li {
border-radius:6px;
overflow: hidden;
}
.whole_box .main_img img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius : 75px;
}
.whole_box .main_img {
display: flex;
align-items: center;
padding : 30px 24px;
}
.whole_box .main_img .text_box {
padding-left : 20px;
}
.whole_box .main_img h2{
font-size:24px;
font-weight:bold;
margin-bottom:7px;
}
</style>
</head>
<body>
<div class="whole_box">
<div class = main_img>
<img src="http://webimage.10x10.co.kr/image/tenten600/450/T004507091-3.jpg">
<div class="text_box">
<h2>고양이</h2>
<span>야옹하고 웁니다</span>
</div>
</div>
<ul class="list_box">
<li>
<img src="https://image.edaily.co.kr/images/Photo/files/NP/S/2019/04/PS19042900252.jpg" />
</li>
<li>
<img src="https://myluvpet.com/wp-content/uploads/2021/10/image.png" />
</li>
<li>
<img src="https://img.etoday.co.kr/pto_db/2018/01/20180118112232_1176966_600_447.jpg" />
</li>
<li>
<img src="http://www.palnews.co.kr/news/photo/201801/92969_25283_5321.jpg" />
</li>
<li>
<img src="http://thescienceplus.com/news/data/20210727/p1065600688443018_968_thum.jpg" />
</li>
<li>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOAC3W_1i4c9EOmWjSpvXqAlZGhFwqNQFuTg&usqp=CAU" />
</li>
</ul>
</div>
</body>
</html>
흩어지지 않고 쌓아가는 시간🤝