1. 강의 1일 차
웹 개발 왕초보 강의듣기 1일 차가 되었다.
기본 적인 프로그램들을 설치하고 강의를 본격 듣기 시작했다.
하루 8강까지만 들을 수 있는데, 튜토리얼까지도 강의로 카운팅이 되어버려서
일 주차를 하루에 들을 수 없고, 강의가 중간에 끊겨버려서.. 똥 덜 닦은 기분이다.
오늘은 파이참을 이용해서 웹 화면에 로그인 <input> 기능과 <button> 만들기 미션을 수행해 본 것으로 만족해야겠다.
기본 스파르타팀에서 부여해준 기본 HTML을 가지고서 생각해보고 만드는 것이었는데
처음에는 로그인화면을 똑같이 만들어 보는 것이었다.
아래와 똑같이 만드는 미션이었다.
2. 따라해보기
기본으로 부여된 코드를 보고 만들어 보려고 첫번 째 시도를 했다.
어..? 아이디 페스워드가 나란히 있네.. ?
1차 시도 실패 ㅎㅎ;;
[사용 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<hr>
ID: <input type="text"> PW: <input type="text"/>
<hr>
</body>
</html>
아! 그렇다면 <div>가 구역을 나눈 태그라고 했는데 .. 이걸 사용해볼까!?
아니.. 위 아래로 구역이 나뉘긴 하는데
너무 딱 붙어있잖아!?
버튼 넣는건 그냥 복붙이라서 쉬웠다.
정답을 확인해 보자!!
[사용코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<hr>
<div>ID: <input type="text"> </div><div>PW: <input type="text"> </div>
<hr>
</body>
</html>
정답은….!!!!
문단 <p>를 이용하는 것이었다.. ㅋㅋㅋ
문단이라고 빤히 적혀있는데 못보고… 주륵..
더 꼼꼼히 보도록 해야겠다.
첫 술에 배부르랴.
[정답코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>
웹 개발 왕초보 강의듣기 1일 차가 되었다.
기본 적인 프로그램들을 설치하고 강의를 본격 듣기 시작했다.
하루 8강까지만 들을 수 있는데, 튜토리얼까지도 강의로 카운팅이 되어버려서
일 주차를 하루에 들을 수 없고, 강의가 중간에 끊겨버려서.. 똥 덜 닦은 기분이다.
오늘은 파이참을 이용해서 웹 화면에 로그인 <input> 기능과 <button> 만들기 미션을 수행해 본 것으로 만족해야겠다.
기본 스파르타팀에서 부여해준 기본 HTML을 가지고서 생각해보고 만드는 것이었는데
처음에는 로그인화면을 똑같이 만들어 보는 것이었다.
아래와 똑같이 만드는 미션이었다.
기본으로 부여된 코드를 보고 만들어 보려고 첫번 째 시도를 했다.
어..? 아이디 페스워드가 나란히 있네.. ?
1차 시도 실패 ㅎㅎ;;
[사용 코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<hr>
ID: <input type="text"> PW: <input type="text"/>
<hr>
</body>
</html>
아! 그렇다면 <div>가 구역을 나눈 태그라고 했는데 .. 이걸 사용해볼까!?
아니.. 위 아래로 구역이 나뉘긴 하는데
너무 딱 붙어있잖아!?
버튼 넣는건 그냥 복붙이라서 쉬웠다.
정답을 확인해 보자!!
[사용코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<hr>
<div>ID: <input type="text"> </div><div>PW: <input type="text"> </div>
<hr>
</body>
</html>
정답은….!!!!
문단 <p>를 이용하는 것이었다.. ㅋㅋㅋ
문단이라고 빤히 적혀있는데 못보고… 주륵..
더 꼼꼼히 보도록 해야겠다.
첫 술에 배부르랴.
[정답코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>
'건강 정보' 카테고리의 다른 글
| 생리통의 증상별 약고르기 (0) | 2022.10.26 |
|---|---|
| 목감기 빨리 낫는 방법과 목에 좋은 음식 (0) | 2022.10.25 |
| 편도결석은 왜 생기는 걸까?(feat.입냄새 범인) (0) | 2022.10.23 |
| 커피효능과 부작용 건강하게 마시는 방법까지 (0) | 2022.10.22 |
| 마요라 코피코 슈가프리 커피맛 무설탕 사탕 (0) | 2022.10.22 |
