-
21.09.07. 1-4강 (첫 시작, 페이지 만들기)일기 2021. 9. 7. 17:12
네이버뉴스 우클릭 -> 검사
*알 수 있는 클루1. 내가 보고 있는 웹페이지만 내 마음대로 바꿀 수 있었다.
2. 내가 보고 있는 웹페이지는 사실 인터넷과 관련이 없다.
3. 새로고침을 하면 원상복구된다. (서버로부터 새로운 정보를 받아오니까)
*브라우저의 역할1. 서버에 데이터 요청
2. 결과물을 받아서 그대로 그려준다.
- HTML : 뼈대
- CSS : 꾸미기
- JS : 움직이는 것단축키
- Ctrl + Alt + L = 줄 정렬
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<ul>
<li> ID: <input type="text" /> </li>
<li> PW: <input type="text" /> </li>
<li> <button> 로그인하기</button> </li>
</ul>
</body>
</html>로그인 페이지 만드는데 나름 잘 한것 같은데 줄간격이 너무 가까운 것 같았다.
내가 삽입한 <li></li>는 글머리 기호점. bullet point 이고,
'문단'을 의미하는 <p></p>태그를 이용했더니 딱 보기 좋게 되었다.
[수정]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<ul>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<p><button> 로그인하기</button></p>
</ul>
</body>
</html>[정답]
<!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><ul></ul> 태그가 없어도 거의 동일한데 사실 무슨 역할인지 잘 모르겠다.
'일기' 카테고리의 다른 글
21.09.09. 2-1강 (Javascript 복습, count) (0) 2021.09.09 21.09.08. 1-12~15강 (Javascript) (0) 2021.09.08 21.09.07~08. 1-8~11강 (부트스트랩, w3schools, mdn) (0) 2021.09.07 21.09.07. 1-7강 (폰트, 주석, CSS 나누기) (0) 2021.09.07 21.09.07. 1-5~6강 (class="명찰", 배경화면 3총사, 여백, 중첩) (0) 2021.09.07