아직까지는 기본 프론트엔드 학습이기도 하고, html 공부는 한번 해본지라 쉽게 할 수 있었다.
<!DOCTYPE html>
<html lang="ko">
<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>자기소개 페이지</title>
<style>
body {
width: 1200px;
margin: 40px auto;
}
</style>
</head>
<body>
<h2>유주성의 자기소개</h2>
<img src="img/IMG_20220801_174713_187.jpg" height="200px" style="border-radius: 50%;">
<div>
<span>[나이: 25살]</span>
<span>[학교: 한국외국어대학교 글로벌캠퍼스]</span>
<span>[전공: 융합인재학부(아랍어통번역,중동이슬람전략,ict&ai)]</span>
</div>
<ol>
<h4>나의 목표</h4>
<li>대학교 졸업 전까지 프론트엔드 개발자 역량 갖추기</li>
<li>건강한 신체 유지하기</li>
</ol>
<ol>
<h4>목표를 위한 다짐</h4>
<li>프론트엔드 부트캠프 일정에 맞추어 최선을 다히기</li>
<li>2024년에 무조건 한 번 이상 해커톤 참여해보기</li>
<li>일주일에 3번 이상 헬스장 가기</li>
</ol>
</body>
</html>
오늘 제출 과제를 보면 오늘 배운 것을 다 알아볼 수 있다. html만 사용하기는 너무 딱딱하게 느껴져서 조금 아는 css를 추가햐여 보았다.
<input id="id-input" class="input focus" type="text" placeholder="ID"></input>
<input id="password-input" class="input focus" type="password" placeholder="password"></input>
<button id="login-button">Login</button>
<input id="keep-checkbox" type="checkbox">Keep Login</input>
<link rel="stylesheet" href="style.css">
또 id와 class를 이용해 입력 태그의 스타일 지정을 편리하게 하는 법도 배웠다. 처음에는 샌드박스페이지가 잘 안되서 오류를 찾아보고 해결하려 했는데 어떻게 하다보니 되었다.
오늘의 공부 요약
- h2 태그를 이용해 h1보다는 작은 제목을 만들수 있다.
- span 태그를 이용해 컨텐츠 부분의 공간만을 사용할 수 있다.
- div 태그를 이용해 한줄을 차지하는 공간을 만들 수 있다.
- input 태그안의 type에 원하는 타입을 설정해 입력 박스를 만들 수 있다.(text, password, checkbox 등이 있다.)
- button 태그를 이용해 버튼을 만들 수 있다.
- id 는 단일 개체 속성에 사용되고, class는 다중 개체 속성에 사용된다.
- img 태그와 속성 src를 이용해 이미지를 첨부 할 수 있다.
- a 태그와 속성 href를 이용해 하이퍼링크를 첨부 할 수 있다.
