1. 생활코딩 HTML 강의 복습하기
생활코딩 web1 - HTML에서 배웠던 html 태그를 활용해 다시 한번 복습하면서 새롭게 웹사이트를 꾸며보았다.
흥미를 떨어뜨리지 않기 위해 자주 접할 수 있는 웹사이트와 비슷하게 만들어 보고 싶었다.
2. 래퍼런스 찾기
복습하면서 배운걸 써먹을 수 있는 자료를 찾다가 스타벅스 음료 페이지가 적용하기 딱 적절한 것 같아 선택!!
3. 스타벅스 디자인 적용해 보기
리스트 태그 <li>
- 전체상품 보기> 콜드브루커피, 프라푸치노, 블렌디드 (9가지 음료)
- 콜드브루커피 > 콜드브루커피 ( 3가지 음료)
- 프라푸치노 > 프라푸치노 ( 3가지 음료)
- 블렌디드 > 블렌디드 (3가지 음료)
이미지 태그 <img> / 텍스트 굵게 <stong> / 줄 바꿈 <br>
욕심내서 총 9가지 음료 을 했다. ( 줄인 것 ) 조금 노가다로 힘들게 했지만.. ( 저도 알고 싶지 않았어요 )
나중에 1열에 3개씩 정렬로 만들어 볼 계획으로다가 !!
링크 태그 <a>
음료메뉴구분에 적용하고 음료 주문하러 가기에 적용시켜 주변매장 찾기 페이지로 연결했다.
4. 소스
<!doctype html>
<html>
<head>
<title> 스타벅스 음료 메뉴 </title>
<meta charset="utf-8">
</head>
<body>
<img src="./img/스타벅스로고.svg" width="80px">
<h1>스타벅스</h1>
<h2>음료</h2>
<ul>
<li><a href="1_전체상품보기.html">전체 상품보기</a></li>
<li><a href="2_콜드브루커피.html">콜드 브루 커피</a></li>
<li><a href="3_프라푸치노.html">프라푸치노</a></li>
<li><a href="4_블렌디드.html">블렌디드</a></li>
</ul>
<h3>콜드 브루 커피</h3>
<u>디카페인 에스프레소 샷 추가 가능 (일부 음료 제외)</u>
<p style = "margin-top : 45px;">
<img src="./img/나이트로 바닐라 크림.jpeg"width="300px"><br><br>
<strong>나이트로 바닐라 크림</strong><br>
Nitro Vanilla Cream<br>
<a href="https://www.starbucks.co.kr/store/store_map.do?disp=quick">주문하러가기</a> <br>
</p>
<p style = "margin-top : 45px;">
<img src="./img/바닐라 크림 콜드 브루.jpeg"width="300px"><br><br>
<strong>바닐라 크림 콜드 브루</strong><br>
Vanilla Cream Cold Brew<br>
<a href="https://www.starbucks.co.kr/store/store_map.do?disp=quick">주문하러가기</a> <br>
</p>
<p style = "margin-top : 45px;">
<img src="./img/여수 윤슬 헤이즐넛 콜드브루.jpeg"width="300px"><br><br>
<strong>여수 윤슬 헤이즐넛 콜드브루</strong><br>
Yeosu Shining Hazelnut Cold Brew<br>
<a href="https://www.starbucks.co.kr/store/store_map.do?disp=quick">주문하러가기</a> <br>
</p>
<h3>프라푸치노</h3>
<u>디카페인 에스프레소 샷 추가 가능 (일부 음료 제외)</u>
<p style = "margin-top : 45px;">
<img src="./img/자바 칩 프라푸치노.jpeg"width="300px"><br><br>
<strong>자바 칩 프라푸치노</strong><br>
Java Chip Frappuccino<br>
<a href="https://www.starbucks.co.kr/store/store_map.do?disp=quick">주문하러가기</a> <br>
</p>
<p style = "margin-top : 45px;">
<img src="./img/제주 유기농 말차로 만든 크림 프라푸치노.jpeg"width="300px"><br><br>
<strong>제주 유기농 말차로 만든 크림 프라푸치노</strong><br>
Malcha Cream Frappuccino from Jeju Organic Farm<br>
<a href="https://www.starbucks.co.kr/store/store_map.do?disp=quick">주문하러가기</a> <br>
</p>
<p style = "margin-top : 45px;">
<img src="./img/피스타치오 아보카도 초콜릿 프라푸치노.jpeg"width="300px"><br><br>
<strong>피스타치오 아보카도 초콜릿 프라푸치노</strong><br>
Pistachio Avocado Chocolate Cream Frappuccino<br>
<a href="https://www.starbucks.co.kr/store/store_map.do?disp=quick">주문하러가기</a> <br>
</p>
<h3>블렌디드</h3>
<u>디카페인 에스프레소 샷 추가 가능 (일부 음료 제외)</u>
<p style = "margin-top : 45px;">
<img src="./img/망고 패션 티 블렌디드.jpeg"width="300px"><br><br>
<strong>망고 패션 티 블렌디드</strong><br>
Mango Passion Tea Blended<br>
<a href="https://www.starbucks.co.kr/store/store_map.do?disp=quick">주문하러가기</a> <br>
</p>
<p style = "margin-top : 45px;">
<img src="./img/딸기 딜라이트 요거트 블렌디드.jpeg"width="300px"><br><br>
<strong>딸기 딜라이트 요거트 블렌디드</strong><br>
Strawberry Delight Yogurt Blended<br>
<a href="https://www.starbucks.co.kr/store/store_map.do?disp=quick">주문하러가기</a> <br>
</p>
<p style = "margin-top : 45px;">
<img src="./img/여수 바다 유자 블렌디드.jpeg"width="300px"><br><br>
<strong>여수 바다 유자 블렌디드</strong><br>
Yeosu Sea Yuja Blended<br>
<a href="https://www.starbucks.co.kr/store/store_map.do?disp=quick">주문하러가기</a> <br>
</p>
</body>
</html>
그 외 코드 > 깃허브
02_html_remind 폴더에 최종소스 있음
https://github.com/wildtokkii/my-first-web.git
GitHub - wildtokkii/my-first-web
Contribute to wildtokkii/my-first-web development by creating an account on GitHub.
github.com
5. 마무리
확실히 다른 디자인으로 변경하니깐 흥미가 생겼다. 다음은 생활코딩 css으로 돌아오겠다.
>> 생활코딩 HTML 공부기록 1편 보러 가기 <<
'📚 스터디 > HTML' 카테고리의 다른 글
| 생활코딩 HTML 공부기록 1편 (0) | 2024.02.27 |
|---|
