프론트엔드 오프라인 1일차!
오랜만에 HTML 복습하기
HTML5 - 시멘틱 태그 : CSS를 입히지 않은 상태에서도 내용이 잘 읽혀야 함
- 상품화를 하기 위해 SEO가 중요함
FORM 태그
체크박스 : 여러개
radio : 하나만 체킹 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TITLE TEST</title>
<style></style>
</head>
<body>
<p>
1. HTML 제목은 <h1> ~ <h6> 태그로 정의됩니다. <br />
<h1>은 가장 중요한 제목을, <h6>은 가장 중요하지 않은 제목을
정의합니다.
</p>
<div style="border: 1px solid black; padding: 1rem">
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
</div>
<hr />
<p>2. 단락은 <p>태그로 정의됩니다 .</p>
<div style="border: 1px solid black; padding: 1rem">
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
</div>
<hr />
<p>3. 링크는 <a>태그로 정의됩니다 .</p>
<!-- 부등호 꺾은 모양 특수기호 <a> -->
<div style="border: 1px solid black; padding: 1rem">
<a target="_blank" href="https://www.tistory.com/"
>This is safehomes link</a
>
</div>
<hr />
<p>
4. 이미지는 <img>태그로 정의됩니다 . 소스파일(src), 대체텍스트(alt),
너비 및 높이가 속성으로 제공됩니다 :
</p>
<!-- 부등호 꺾은 모양 특수기호 <a> -->
<div style="border: 1px solid black; padding: 1rem">
<img src="./note.jpg" width="200px" height="200px" alt="my note" />
</div>
<div>
<ul>
<h1>장바구니 목록</h1>
<li>사과</li>
<li>바나나</li>
<li>딸기</li>
</ul>
<table>
<tr>
<th>과일 수량</th>
</tr>
<tr>
<td>사과 10</td>
</tr>
<tr>
<td>바나나 5</td>
</tr>
<tr>
<td>딸기 3</td>
</tr>
</table>
</div>
<form>
<p>
<label for="name"> 이름 : </label>
<input type="text" name="name" id="name" required />
<br />
</p>
<p>
<label for="email"> 이메일 : </label>
<input type="text" name="name" id="email" required /> <br />
</p>
<p>
<label for="password"> 패스워드 : </label>
<input type="text" name="name" id="password" required /> <br />
</p>
<input type="submit" value="가입하기" />
</form>
</body>
</html>
홈페이지 모양 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>웹사이트</title>
<style>
nav ul li {
display: inline-block;
}
</style>
</head>
<body>
<div style="background-color: black; padding: 1rem">
<h1 style="color: white; text-align: center">웹 사이트 제목</h1>
<div style="background-color: gray; padding: 10px">
<nav>
<ul style="padding: 0px">
<li>
<a href="home" style="color: wheat; text-decoration: none">
HOME</a
>
</li>
<li>
<a href="home" style="color: wheat; text-decoration: none">
소개</a
>
</li>
<li>
<a href="home" style="color: wheat; text-decoration: none">
서비스</a
>
</li>
<li>
<a href="home" style="color: wheat; text-decoration: none">
문의</a
>
</li>
<li></li>
</ul>
</nav>
</div>
<main style="background-color: aliceblue; color: black; padding: 10px">
<h1>웹 사이트 내용</h1>
<p>이 곳에 웹 사이트 내용을 추가하기</p>
</main>
<footer style="background-color: black; padding: 10px">
<p style="color: white; text-align: center">
본 게시물의 저작권은 누구에게 있습니다
</p>
</footer>
</div>
</body>
</html>오늘은 간단하게 html 퍼블리싱 실습을 한다.
하는 과정을 남겨두고 최종 완성을 할 예정!
✍️TIL 후기
다시 HTML을 하니 재미있기도하고, 작년에 처음으로 배우며 못 이해했던 부분들이이제는 익숙하고 자연스럽게 느껴지는 순간이었다. ex. div를 만들고 border 쓰자마자 1px solid black; 이 그냥 쭉 써진 것.
———————————————————————————————————————————————————————
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
'[부트캠프] IT 코딩 부트캠프 후기 > [웅진씽크빅X유데미] 스나이퍼 팩토리 🤹' 카테고리의 다른 글
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : React 기초 & 간단한 실습 (0) | 2023.06.23 |
|---|---|
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : JS 기초 (0) | 2023.06.16 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : 아이디어 스케치 (0) | 2023.06.11 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 : Git & GitHub (0) | 2023.06.09 |
| [유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 - 프론트엔드 DAY3 : UML과 플로우 차트 (0) | 2023.06.09 |
