728x90
이번주차에는 HTML로 우리집 강아지(하루), 내가 가장 좋아하는 것, 여행가고싶은 곳 이라는 주제로 코드를 짜보았습니다. 이를 깃허브에 업로드하여 받은 주소를 과제 제출하였습니다.
코드는 다음과 같습니다. (지난주차와 마찬가지로 신상정보는 지웠습니다.)
<!DOCTYPE html>
<html lang="kr">
<head>
<title>My Life </title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<style>
li {
display: inline
}
a:link {
color: rgb(39, 142, 35);
}
a:hover {
color: pink;
}
a:visited {
color: purple;
}
div>h2:first-letter {
color: rgb(164, 84, 189);
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Events | </a></li>
<li><a href="#">About Me | </a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<h1 class="name"> 🐻이름🐻 </h1>
<h2 class="caption">Univ for everybody🍬🌺</h2>
<h2 class="caption">Welcome To My World💓🍧 </h2>
<div class="uni-image">
<image src="dog2.png" alt="강아지이모지🍭💖" class="img-fluid">
<image src="dog.jpg" alt="강아지🍭💖" class="img-fluid">
</div>
<div class="text">
<h2> Welcome To My life-DOG🌸💘</h2>
<span class="caption">Hello there!</span>
<p>
안녕하세요 저는 0000대학교 000공학과 000입니다. 저는 강아지 한마리를 키우고 있습니다.
이름은 하루이고 말티즈입니다. 하루는 고기간식과 개껌을 좋아하고 장난감을 싫어합니다. 강아지인데 왜 장난감을 싫어하지? 라고 의문점이 들어
하루의 얼굴을 살펴보니 입이 굉장히 작았습니다. 보통 말티즈들은 2.5kg정도 무게가 나가는데 하루는 2kg이 조금 넘는
소형견입니다. 그래서 입에 장난감이 들어가지 않습니다. 하루가 좋아하는건 햇빛이 잘 드는 장소에서 누워 자는 것입니다.
저는 어두운걸 좋아해서 집에서도 암막커튼을 치고 있는데 하루는 저와 달리 오전에 사진과 같이 집에서 가장
따뜻한 곳을 찾아 누워있습니다. 하루가 할 수 있는 개인기는 앉아, 일어서, 코!, 엎드려, 돌아, 빵! 이 있습니다.
강아지는 보통 사람보타 체온이 높고, 털이 복슥복슥해서 추운 겨울에 안고자면 굉장히 뜨뜻합니다. 물런 하루는 제가 껴안는걸 싫어합니다.
올해로 5살이 되는데 저와 함께 오래오래 살았으면 좋겠습니다.
My Dog is Very CUTE!</p>
</div>
<div>
<h2>My Favorites🍧🍬</h2>
<img src="sky.jpg" alt="sky" class="img-fluid">
<img src="sky2.jpg" alt="sky" class="img-fluid">
<p>제가 가장 좋아하는 것은 맑은 하늘 속 구름 보기 입니다. 고등학교 3학년 때
입시에 지쳐 힘들 때 마다 아파트 놀이터 그네에 앉아 오랫동안 하늘을 본 적이 있습니다.
해가 지면서 생기는 노을 속 구름은 정말 아름다웠습니다. 걱정이나 고민이 있을 때
하늘을 바라보며 저 넓은 곳으로 날아가고 싶다는 상상을 하면 어느덧 걱정과 고민을 훌훌 털어버릴 수
있었습니다. 제가 하늘을 바라볼 때 마다 들으면서 위로를 받았던 노래가 있는데, panic! at the disco 의
king of cloud 입니다. 아래는 노래 가사입니다.
Heaven knows that I'm born too late
For these ghosts that I chase
With these dreams, I inflate, painted skies in my brain
Every day, I'm Carl Sagan in space
To escape this old world, this old world
Some days I lie wide awake 'til the sun hits my face
And I fade, elevate from the Earth
Far away to a place where I'm free from the weight
This whole world, this whole world
I don't trust anything
Or anyone, below the sun
I don't feel anything
At all
I'm king of the clouds, of the clouds
I get lifted, I get lifted
King of the clouds, of the clouds
I get lifted, I get lifted
Some only live to die, I'm alive to fly higher
Than angels in outfields inside of my mind
I'm ascendin' these ladders, I'm climbin', say goodbye
This old world, this old world
And when I fall to rise with stardust in my eyes
In the backbone of night, I'm combustible
Dust in the fire when I can't sleep, awake, I'm too tired
This whole world, this whole world
I don't trust anything
Or anyone, below the sun
I don't feel anything
At all
I'm king of the clouds, of the clouds
I get lifted, I get lifted
King of the clouds, of the clouds
I get lifted, I get lifted
Imagination, take me somewhere I don't know
I'm lost but I better find it alone
King of the clouds, of the clouds
I get lifted, I get lifted
I keep searching
Oh, I keep searching
I keep searching</p>
</div>
<div class="paint">
<h2>TRAVEL </h2>
<img src="bin.jpg" alt="working" class="img-fluid">
<p>제가 제일 좋아하는 영화 "비포 선라이즈"의 배경이 되기도 하였던 오스트레일리아 비엔나는 2년 연속
세계에서 가장 살기 좋은 도시에 선정되었습니다. 비포선라이즈를 보신 분은 아시겠지만 저는 영화에서 처럼 기차에서 만난 모르는
사람과 하루를 보낸다는 것에 로망을 가지고 있습니다. 저는 새로운 사람을 만나는 것을 좋아합니다. 기회가 된다면
오스트레일리아 빈에서 1년 혹은 그 이상을 살면서 다양한 사람을 만나보고 싶습니다.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti odio laboriosam in recusandae
expedita ducimusvoluptatum provident doloremquedoloribus, deserunt, ad maxime voluptas voluptatem
ex qui quam saepe debitis dolorum!</p>
</div>
</body>
</html>
CSS
body {
line-height: 1.7;
color: rgba(0, 0, 0, 0.5);
font-weight: 400;
font-size: 1rem;
}
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
color: #000; }
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: 0.5rem; }
a {
text-decoration: none;
}
.menu {
border-bottom: 1px solid grey;
}
ul {
font-family: Georgia, 'Times New Roman', Times, serif;
margin-bottom: 0;
padding-inline-start: 0px; }
.name {
text-align: center;
font-family: Impact, sans-serif;
font-style: italic;
font-size: 100px;
color: rgb(252, 177, 39);
}
.text {
padding: 5px;
border: 3px rgb(187, 114, 114);
border-style: dotted;
background-color: papayawhip;
}
.img-fluid {
width: 40%;
height: auto; }
.paint {
background-color: rgb(177, 230, 255);
font-style: italic;
text-align: right;
}
.caption {
text-transform: uppercase;
font-weight: 800;
letter-spacing: .2em;
font-size: 12px;
padding: 7px 10px;
color: rgb(235, 66, 66);
display: inline-block; }
728x90
'프로그래밍 > 웹 프로그래밍' 카테고리의 다른 글
| [학교/웹프로그래밍프로젝트/20.06.22] 웹 프로그래밍 프로젝트 기획 (2) (1) | 2020.06.28 |
|---|---|
| [학교/웹프로그래밍프로젝트/20.06.01] 웹 프로그래밍 프로젝트 기획 (1) (0) | 2020.06.28 |
| [학교/HTML+CSS/20.05.23] HTML 10주차 (0) | 2020.06.28 |
| [학교/HTML+CSS/20.05.11] HTML 8주차 (0) | 2020.06.28 |