2023.03.30
제주네컷 만들기 (VS코드)
- html과 css에 대해 알아보고,
< 뼈대 잡기 - 메인영역 만들기 - 사진 영역에 이미지와 설명(description) 넣기 - 동영상 넣기- 아래영역 (footer) 만들기 - Live server를 통해 결과물 실시간으로 확인하기 - 배포하기 & 기록하기 - 소감 >
- vs코드에 폴더를 생성하여 그 안에 'index.html' 파일을 생성한다.
- 넣을 이미지 3개와 영상 1개를 준비하여 폴더 안에 넣어둔다.① 뼈대 잡기
- 상세한 코드를 짜기 전에 대략적인 윤곽을 잡아주는 과정으로 인생네컷 틀을 만들고, 선택자(class, id,,)를 통해 디자인한다.
② 메인영역 만들기
- 메인 부분을 담당할 영역을 'body' 영역에 'div' 태그를 사용하여 만들기 (= 영역 구분하기)
꾸며주고 싶은 태그를 선택자 속성(class, id,,)을 이용하여 'style' 영역에서 꾸며주기.
<style>
body {
font-family: "LeeSeoyun";
margin: 0;
display: flex;
justify-content: center;
background-image: url("./background.png");
}
.container {
width: 390px;
background-color: #ff9d73;
height: 100%;
}</head>
<body>
<div class="container">
<div class="photos">
<div id="image1" class="photo-frame"
onmouseover="showText(1)"
onmouseout="hideText(1)"
onclick="alertText(1)"
>③ 이미지 넣기 (+ 마우스 오버 기능)
- 서로 다른 이미지를 넣을 거기 때문에 저마다의 요소를 지닌 사진들을 'id' 속성을 통해 만들고,
인생네컷 틀에 들어갈 사진들의 프레임은 동일하므로 공통된 요소들을 다루는 'class' 속성을 통해 만든다.
각 요소들을 꾸미고 싶을 때는 'style' 영역에서 'id'는 #을 이용하여, 'class'는 .을 이용하여 꾸며준다.
<style>
#image1 {
background-image: url(./image1.jpeg);
}
#image2 {
background-image: url(./image2.jpeg)
}
#image3 {
background-image: url(./image3.jpeg);
}
#image4 {
background-image: url(./image4.png);
}
.photo_description {
color: white;
width: fit-content;
padding: 0 20px;
margin-bottom: 10px;
border-radius: 10px;
position: absolute;
bottom: 0;
transform: translate(-50%);
left: 50%;
opacity: 0;
<body>
<div class="container">
<div class="photos">
<div id="image1" class="photo-frame"
onmouseover="showText(1)"
onmouseout="hideText(1)"
onclick="alertText(1)"
>
<span id="desc1" class="photo_description">
휴식을 위한 여행에서
</span>
</div>
<div id="image2" class="photo-frame"
onmouseover="showText(2)"
onmouseout="hideText(2)"
onclick="alertText(2)"
>
<span id="desc2" class="photo_description">
마주친 저녁 노을이
</span>
</div>
<div id="image3" class="photo-frame"
onmouseover="showText(3)"
onmouseout="hideText(3)"
onclick="alertText(3)"
>
<span id="desc3" class="photo_description">
나를 위로한다.
</span>
</div>④ 동영상 넣기
- 마지막 네번째에는 동영상을 넣을 건데, 준비한 링크를 연결하거나 폴더에 준비해둔 영상을 사용한다.
마찬가지로 꾸미고 싶은 부분은 선택자로 선택하여 'style' 부분에서 꾸며준다.
<style>
.video {
position: absolute;
width: 100%;
height: 100%;
}
.showText {
opacity: 1;
}
.hideText {
opacity: 0;
transition: opacity 0.3s linear;
}
<body>
<div class="photo-frame">
<video width="350" height="200" controls
src="IMG_8300.mov"type="video/mp4"
class="video">
</video>⑤ 아래영역(footer) 만들기
- 인생네컷 하단에 보여질 부분으로 문단을 의미하는 'p' 태그를 사용하여 타이틀과 날짜를 만든다.
<body>
<div class="footer">
<p class="f-title">Sunset in JEJU</p>
<p class="f-date">2021.08.14</p>
</div>➅ 배포하기 & 기록하기
-
깃허브에 코드 배포하기
https://github.com/developerpyk/Sunset-in-JEJU -
벨로그에 결과물 기록하기
https://velog.io/@developerpyk/Sunset-in-JEJU
https://velog.io/@developerpyk/Behind-the-Sunset-in-JEJU
⑦ 소감
🔡➡️💻➡️🤓👍
공부를 시작하는 단계이기에 강의를 보고 따라한 거라 완벽하게 내가 사용한 코드들을 이해한 것은 아니다.
코드들을 작성하며 궁금한 것은 찾아보고, 이해하느라 하나의 결과물을 만드는 데에 꼬박 반나절이 걸렸다.
이번 결과물을 만들면서 나는 코드 틀을 이해할 수 있었고, 이미지와 동영상을 넣는 방법에 대해 이해할 수 있었다.
강의에서 주는 이미지와 동영상을 사용하지 않고, 나만의 결과물을 만들고 싶어 의미있는 사진들을 모아 나만의 인생네컷을 만들기로 했다. 강의에서는 마지막 틀에 동영상 링크를 연결하여 동영상을 넣었지만, 나는 내가 가지고 있는 영상을 넣었다.
처음에는 영상이 틀에 맞지 않았고, 좌우에 여백이 생겨서 width와 height를 사용하여 'body'와 'style'에서 크기를 조절했다. footer 영역에는 '제주의 노을'과 '날짜'를 'f-title'와 'f-date'를 사용하여 'body'에 적었다.
내가 찍기도 하고 흔히 볼 수 있는 인생네컷이 이런 식으로 만들어진다고 생각하니 신기하기도 했고, 이렇게 만들었다는 게 굉장히 뿌듯하고 재밌었다.
벨로그와 깃허브에 나의 결과물들을 기록하며 오늘의 나보다 성장하는 것이 올해 나의 목표이다.
