<!DOCTYPE html>
<html>
<head>
<title>042822</title>
</head>
<body>
<h1 style="color:red; border-style:solid; border-width:thick; border-color:green; text-align:center;">크리스피 크림 도넛</h1>
<h1 style="background-image: url('logo.jpg')">
<ul>
<p style="text-align:center; border: 1px solid black; box-shadow: 10px 10px yellow, 20px 20px #CEF279, 30px 30px green;">주요 도넛 메뉴</p>
<p style="border-style: dotted; color:black;">*메뉴명을 누르면 상세 페이지로 이동합니다</p>
<a href="original.html" target="blank", style="background-color: olive; color: silver;
border-style: double; border-color: white; border-radius: 60%; text-align: center;">오리지널 글레이즈드</a>
<p>
<a href="original.jpg" target="_blank">
<img src="original.jpg" width="100" height="100">
</p>
<a href="sugar.html" target="blank", style="background-color: silver; color: olive;
border-style: dashed; border-color: white; border-radius: 60%; text-align: center;">슈거 코티드</a>
</body>
</html>MenuPage.html
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css.css">
</head>
<h1>오리지널 글레이즈드</h1>
<img border="0" src="original.jpg" alt="오리지널 글레이즈드">
<table border="1">
<caption>
영양소 정보
</caption>
<tr>
<th>1회 제공량 g</th>
<th>열량 kcal</th>
<th>나트륨 mg(%)</th>
<th>당류 g(%)</th>
<th>포화지방 g(%)</th>
<th>단백질 g(%)</th>
</tr>
<tr>
<td>47</td>
<td>201</td>
<td>120(6)</td>
<td>9(9)</td>
<td>3.6(24)</td>
<td>3(5)</td>
</tr>
</table>
<a href="original_detail.html" target"_self"> 누르면 상세 페이지로 이동합니다</a>
</html>original.html
<!DOCTYPE html>
<html>
<head>
<style>
dt{text-align: center; color:green; font-size: 50pt; text-shadow: 5px 5px 5px green;}
dd.a{text-align: left; color: gray; font-size: 25pt; background-color: beige;}
dd.b{text-align: right; color: red; font-size: 3em; background-color: white; border: solid red;}
body{font-family:"Lucida Console", Times, Monospace;}
</style>
</head>
<body>
<dl>
<dt>오리지널 글레이즈드 ORIGINAL GLAZED</dt>
<dd>크리스피크림의 가장 대표적인 도넛으로 1937년대부터 한결 같은 조리법으로 만들어 지는 오리지널 글레이즈드</dd>
<dd>가격 1,300원</dd>
</dl>
</body>
</html>original_detal.html
<!DOCTYPE html>
<style>
table {background-color: pink; color: blue; border-style: inset; border-color: silver;}
</style>
</html>css.css
🐑 Daily 회고
1. 오늘 하루 종일 집중 엄청 못했다
2. css 파트 거의 날려먹었다
3. 그래도 어쨌든 뭔가 output을 내긴..... 냈다
총평 ⭐⭐
아침부터 과사 3개에 릴레이로 전화 돌리고 나서 떨어진 기력과 이것저것 시켜놓은 택배들의 도착이 오늘의 패인이다. 집에서 혼자 해보려니 유혹이 너무 많다. 안 그래도 흥미 없던 html과 css 때문이라고 하기엔.......... 😭 진지하게 캠스터디를 고민해본다.
그래도 어쨌든 뭔가 했다는 점에서 별 두개 드려요....
물론 뭔가 열심히 해보려고는 했는데........ 할수록 괴상해지고..................... 하나 시도해본 css는 왜 저러고 있는지 모르겠고....... 테이블은 왜 그대로인가요...... 코드도 뒤죽박죽이고......... 뭘한 건지 싶고................... 와중에 가격은 또 틀리게 적어놨고............. 그렇지만......
보노보노 ppt 보고 비웃었던 거 반성한다. 그 사람이 그러고 싶어서 그랬던 건 아닐 것 같다. 잘해보려고 그랬겠지...... 근데 결과가 항상 마음처럼 나오는 건 아니잖아. 이해해요... 저도 생각은 공식 홈페이지처럼 만들어보고 싶었어요..... 근데 공식 홈페이지는 왜..... 아니 저기는 왜 또 아메리카노 설명에 <br/>태그를 달고 있는지도 모르겠고...... 뭘까 진짜
✔️ To Do List (주말)
1. css 개념 보충 - 오늘 푼 css selector checkpoint도 많이 틀렸다. 한번 더 꼼꼼하게 읽고 이해해보자
2. css 제대로 적용해서 실습 한번 더 해보기
3. (1, 2 다 하고 시간이 나면) html, css 관련 개념/태그 블로그에 정리해보기
'diary > codestates (be39)' 카테고리의 다른 글
| [CSS] CSS Selectors (0) | 2022.05.01 |
|---|---|
| [HTML] 기초 중의 기초 중의 기초 (0) | 2022.05.01 |
| 04/29/22 [pair programming] Oven으로 와이어프레임, HTML과 CSS로 목업 만들어보기 (0) | 2022.04.30 |
| 04/28/22 [HTML/CSS] flexbox로 레이아웃 만들어보기 (0) | 2022.04.28 |
| 04/26/22 컴퓨터랑 친해지기 (0) | 2022.04.27 |
