728x90
실습 1, 카페 음료 문서 작성
- 카페 이름은 <h1>
- 메뉴 이름은 <h2>
- 카페 전체 음료 리스트는 <ul> 태그, 음료 최소 3개
- <ul>의 자식 요소 <ol> 요소를 넣고 가격을 표시
- <ul> 태그 아래에 수평 줄을 추가하고 그 아래에 각각 음료에 대한 설명은 <p> 태그를 사용하여 표시
- 문자 꾸미기 태그도 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tag</title>
</head>
<body>
<h1>맛있는 카페</h1>
<ul type="circle">
<li>
<h2>아메리카노</h2>
<ol >
<li>R: 3000</li>
<li >L: 3500</li>
</ol>
</li>
<li>
<h2>아인슈페너</h2>
<ol>
<li>R: 4000</li>
<li >L: 4500</li>
</ol>
<li>
<h2>아이스티</h2>
<ol >
<li>R: 3000</li>
<li >L: 3500</li>
</ol>
</li>
<li>
<h2>딸기라뗴</h2>
<ol >
<li>R: 3500</li>
<li >L: 4000</li>
</ol>
</li>
</ul>
<hr />
<h2>음료 설명</h2>
<p><strong>물+에스프레소</strong> 맛있음</p>
<p>물+에스프레소+크림</b> 맛있음</p>
<p><strong>립톤</strong> 맛있음</p>
<p><b>딸기</b> 맛있음</p>
</body>
</html>
실습하면서 h1 태그의 경우에는 줄바꿈 태그인 br을 안써줘도 된다는 것을 알 수 있었다.
제목태그여서 띄어쓰기를 안해도 되는 거였다.
또한 sementic 태그를 사용해봤는데
아직은<strong> 과 <b>의 차이를 잘이해를 못했다
728x90
'프론트앤드 > HTML' 카테고리의 다른 글
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-06 | HTML table (0) | 2023.03.03 |
|---|---|
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-05 | HTML 실습2 (0) | 2023.03.03 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-04 | HTML Form 태그 (0) | 2023.03.03 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-02 | HTML tag의 종류 (0) | 2023.03.03 |
| [포스코x코딩온] 웹개발자 입문 과정 1주차 회고-01 | HTML 기초 학습 (0) | 2023.03.02 |