제대로 된 HTML 강의를 듣고 나서 정리, 복습 겸 작성하는 포스트.
- HTML이란 웹 페이지를 만들기 위한 기술.
- 웹 페이지의 구조를 설명하는 문서.
- 프론트에서 사용하고, 다른 언어로는 React, Vue 등이 존재 한다.
HTML -> tag + 속성
특징 1. 무조건 바디 안에 내용을 작성.
<body>
이 안에다가 내용을 작성.
요소 하나씩 완성 시키며 속성을 추가한다.
ex)p(단락), hr(선), span(구절), h1(제목), mark(형광펜)....
<body/>특징 2. 경로가 중요하다.
- 상대경로
- 절대경로
<body>
절대경로 :
<a href="http://127.0.0.1:5500/child1/child2/2.html">2번으로 이동</a>
상대경로 :
<a href="/child1/child2/2.html">2번으로 이동</a>
<a href="../child2/2.html">2번으로 이동</a>
cf) ..은 이전 폴더, 즉 상위 폴더로 되돌아 간다는 뜻이다.
<body/>특징 3. Form
action(전달해 줄 서버의 주소 지정)
method(get, post)
나머지 : name이 있어야 함!
<body>
<form action="/login" method="get">
<input type="text" name="userId"><input/>
<input type="text" name="password"><input/>
<p>
<button>로그인</button>
<button>회원가입</button>
</p>
<form/>
<body/>예를 들어, 위와 같은 코드가 있다고 했을 때,
위의 웹 화면이 나타나게 된다.
1번째 칸을 id, 2번째 칸을 비밀번호라 하자.
myid/123123을 입력했다.
id input의 이름을 userId로 줬기 때문에 /login 서버의 주소로 input 이름과 패스워드로 전달한 값이 표현된 주소이다.
위의 로그인 창에서 로그인과 회원가입을 눌렀을 때 각각 다른 반응을 주도록 만들어 보자.
예를 들어, 로그인을 눌렀을 때는 어떤 문구가 담긴 알림창을, 회원가입을 눌렀을 때는 다른 페이지로 연결하는 것과 같은.
<button type="button" onclick="alert('꽝!');">로그인</button>
미션 1 완료. JS와 연계하여 기능을 수행하도록 했다.
<a href="http://127.0.0.1:5500/0325복습.html"></a>
<button type="button">회원가입</button>
두 코드를 합치기
<a href="http://127.0.0.1:5500/0325복습.html">
<button type="button">회원가입</button></a>
미션 2. a태그로 모두 감싸버리기!
위 이미지는 테이블에 대한 정보로 미리 만들어 놓은 페이지이다.
HTML TABLE
위의 이미지 처럼,
th은 제목
tr은 행
td는 열을 뜻한다.
글을 마치며...
다양한 HTML의 속성은 하나씩 정리하지 않을 것이지만, 그때 그때 필요한 것을 찾고 완성시켜 나가는 식으로 공부해 나가는 것이 더 효율적이고 실용적임을 깨닫게 되는 공부 시간이었다.
파랑입니다.