오늘은 모바일용 크리스마스 카드 페이지를 만든 과정을 소개하고자 한다. HTML/CSS 만을 이용하여 제작했다. 향후 더욱 복잡한 디자인 시안을 받으면 디자인 시안에는 없는 기능을 javascript로 추가하여 포스팅해보겠다.
오늘 포스팅할 크리스마스 카드 시안은 아래와 같다.
데스크톱 화면이 없어 반응형으로는 만들지 않았다. 크롬 개발자도구를 이용해서 iPhone SE(375px x 667px) 사이즈를 기준으로 제작하였다. 위 화면을 진행하기 위한 폴더구조는 아래와 같다.
많이 초라하다.. ㅎㅎ 간단한 웹페이지니까. ㅠ practice1이라는 폴더에는 미디어 파일을 저장하기 위한 assets라는 하위폴더와, 그 안에는 css bootstrap 사용을 위한 .css 파일이 담겨져있는 bootstrap 파일과 이미지 파일이 들어있는 image 폴더가 위치해있다. root에는 디자인 시안과 index.html(크리스마스 카드 페이지), style.css(크리스마스 카드 css 스타일 파일)이 포함되어있다. cmd의 tree 명령어를 사용했는데 폴더만 보여주고 파일은 보여주지 않았다.
0. HTML head
이번 연습에서는 반응형 웹페이지는 아니지만, CSS 부트스트랩과 Akshar라는 폰트를 사용했다. 그에 따른 HTML head는 아래와 같다.
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
<link rel = "stylesheet" href = "./style.css">
<link rel = "stylesheet" href = "./assets/bootstrap/bootstrap-grid.min.css">
<link href="https://fonts.googleapis.com/css2?family=Akshar:wght@300;500;700&display=swap" rel="stylesheet">
<title>Christmas Card</title>
</head>
1. 페이지 구성
디자인은 한 페이지의 간단한 구성이지만, html을 작성할 때는 semantic tag를 최대한 사용하려고 노력하였다. 그래서 위 페이지 구성을 sematic tag를 통해 총 세 개로 구성하였다.
1. header
2. main
3. footer
그림으로 설명하면 아래와 같을 것이다.
선물 사진이 배경으로 찍혀있는 부분까지를 header, 크리스마스 선물을 소개하는 내용이 담겨있는 섹션을 main, 그리고 SNS 링크와 저작권 표기 관련 부분까지를 footer로 설정하였다.
디자인 시안에는 그리드 레이아웃이 없었지만 CSS 부트스트랩을 이용하여 그리드를 사용하였다. 사실 반응형 페이지가 아니었기 때문에 굳이 사용하지 않아도 될 것 같았지만 꼭 사용해보고 싶었다.
우선 header와 main, footer 각 섹션들에 대한 HTML 태그를 소개하겠다. css파일은 코드가 길어 여기에 첨부하지 않고 포스팅 맨 아래에 github 주소를 추가하도록 하겠다..
<header>
<div class="container">
<div class="row justify-content-center">
<div class="col-6 col-lg-8">
<p class = "header-logo">Place your logo here</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-10 col-lg-12">
<h1 class = "header-title">happy holidays!</h1>
</div>
</div>
</div>
</header> <main>
<div class="container">
<div class="row">
<div class="col-12">
<strong class = "main-title">
Enjoy the holidays with your family and friends</br> with these festive recipes and gift ideas!
</strong>
</div>
</div>
<div class="row">
<div class="col-6 xmas-card">
<div class="pie-image"></div>
<dl class = "card-desc">
<dt class = "desc-title">
sweet berry pie
</dt>
<dd class = "desc">
the sweetest and easiest berry pie perfect for the Holidays!
</dd>
</dl>
</div>
<div class="col-6 xmas-card">
<div class="gifts-image"></div>
<dl class = "card-desc">
<dt class = "desc-title">
10 meaningful gifts
</dt>
<dd class = "desc">
worry no more with these gifts that your family will love!
</dd>
</dl>
</div>
</div>
<div class="row">
<div class="col-6">
<a href = "#" class = "read-more-button">
read more
</a>
</div>
<div class="col-6">
<a href = "#" class = "read-more-button">
read more
</a>
</div>
</div>
</div>
</main> <footer>
<div class="container">
<div class="row">
<div class="col-12">
<strong class = "footer-title">
follow us on social media
</strong>
</div>
<div class="col-12 img-box">
<a href = "#">
<img src = "./assets/image/facebook.png"/>
</a>
<a href = "#">
<img src = "./assets/image/twitter.png"/>
</a>
<a href = "#">
<img src = "./assets/image/pinterest.png"/>
</a>
<a href = "#">
<img src = "./assets/image/ig.png"/>
</a>
</div>
</div>
<div class="row">
<div class="col-12">
<p class = "copyright-desc">
Copyright 2019 Yoursite. All right reserved.</br>
You subscribed to our newsletter via our website, example.com
</p>
<a href = "#" class = "footer-unsubscribe">
Unsubscribe from this list.
</a>
</div>
</div>
</div>
</footer>
위에서부터 차례대로, header, main, footer이다. 카드 화면에 보이는 요소들의 스타일링이 필요할 때 별도의 클래스들을 붙여 주었는데, 이 때 각 상황에 적절하게 네이밍을 해주려 노력했다. 예를 들어 header의 제목으로 포함된 태그 <h1>의 클래스는 header-title, 그리고 main의 제목으로 스타일링 하기 위해 main-title로 네이밍해주었다.
그리고 footer에 들어가는 SNS 링크 접속을 위한 이미지를 제외한, 카드 화면의 모든 이미지는 <img> 태그를 사용하지 않고 클래스를 사용하여 background-image로 삽입하였다. 굳이 그렇게 한 이유는, header의 배경화면이나 main의 카드 화면(sweet berry pie / 10 meaningful gifts)은 크리스마스가 아니더라도 다른 기념일 때 같은 포맷으로 화면을 작성할 때, HTML 태그를 건드리지 않고 유동적으로 이미지를 바꿀 수 있을 여지를 주기 위함이다.
물론 pie-image나 gift-image와 같이 명시적으로 작성하였지만, card-image1, card-image2와 같은 형식으로 변경해주고 향후 백엔드 단계에서ㅡ백엔드에 대해서는 잘 모르지만ㅡ 웹 페이지 디렉토리에서 이미지 파일만 바꿔주는 로직을 구성할 수 있다면 HTML 파일을 건드리지 않고도 유지보수를 할 수 있을 것 같다는 생각이 들었다. 그런 취지에서 <img> 태그를 사용하지 않고 일부러 <div>을 넣어 background-image를 삽입하였다.
그리고 read more 버튼의 경우, 가운데 정렬이 되도록 위치시키는 것에 조금 어려움을 겪었다. 디자인 시안에서 각 요소 사이에 매겨진 정확한 마진 값이 없어서 그랬기도 했고, xmas-card가 있는 두 번째 .row에 포함된 각 xmas card의 너비의 정가운데에 위치시키는 것이 생각하는 것만큼 간단하지 않았다.
나는, main에서 마지막 .row에 flex를 주어 가운데로 정렬하도록 한뒤, .row 하위에 있는 .col-6들에게도 flex를 주어 가운데로 정렬하였다. 지금 생각해보면, read-more-button을 별도의 행을 생성하지 않고, xmas-card가 있는 두 번째 row에 포함시켜 한꺼번에 flex로 정렬했다면 좀 더 쉽게 정렬할 수 있었을 거라 생각한다.
2. 결과물
그 결과 위 HTML과 CSS코드(아래 github 주소 참고)로 완성된 실제 .html 파일은 이러하다.
실제 원본화면과 비교해 약간 삐꾸가 난 부분이 있다.. 일단 각 요소들 사이의 마진값이나 요소 내 패딩 값을 정확히 알지 못하고 눈대중으로 파악했기 때문이다.. 포토샵 사용방법도 따로 공부해야하는 판이다.. ㅠ
아래는 위 프로젝트의 전체 코드가 담긴 github 주소이다.
GitHub - wisberry2022/HCJpractice: HTMl/CSS/Javascript 연습
HTMl/CSS/Javascript 연습. Contribute to wisberry2022/HCJpractice development by creating an account on GitHub.
github.com
3. 첫 연습 진행 후 느낀 점
간단한 화면 구성하는 것조차 내가 생각한 것만큼 그렇게 쉽게 만들 수 있는건 아니구나.. 라는 걸 느꼈다. 앞으로 더욱 많은 연습을 통해 HTML과 CSS의 기본사항들을 손에 익혀놓아야 함을 뼈저리게 느꼈다. 앞으로도 화이팅..!
P. S 조잡한 글 읽어주셔서 감사합니다! 혹시나 틀린 정보가 있다면 과감한 지적(하지만 욕은 삼가해주시면 감사하겠습니다 ㅎㅎ) 부탁드립니다.
'웹 프로그래밍 > HTML\CSS\Javascript 연습' 카테고리의 다른 글
| <22.04.27> HTML/CSS/Javascript 활용하기 ㅡ Upcoming Active Announce 화면 구성하기 (0) | 2022.04.27 |
|---|---|
| <22.04.25> HTML/CSS/Javascript 활용하기 ㅡ School News 화면 반응형으로 구성하기 (0) | 2022.04.25 |
| <22.04.19> HTML\CSS\Javascript 활용 하기 ㅡ 디자인 시안 구하기 (0) | 2022.04.19 |