📖단락 <p> 태그
html에서 단락을 나타내는 태그는 p 태그이다.
paragraph의 줄임말이다.
이 태그를 사용하게 된다면, 단락을 만들 수 있고 위의 내용과 아래의 내용 사이에 한 줄의 간격이 생기게 된다.
attribute를 통하여 css와 같이 디자인을 설정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title> I'm mm0ck3r </title>
<meta charset="UTF-8">
</head>
<body>
<p> I am MM0CK3R </p>
<p> I am mm0ck3r </p>
</body>
</html>
이렇게 첫번째 p태그와 아래의 p태그와 한 줄 사이의 간격이 있는 것을 볼 수 있다.
첫번째 p태그도 위와 한 줄의 공백이 있는 것으로 보아, 위로 한 줄의 공백을 만들어준다고 생각할 수 있겠다.
📖줄바꿈 <br> 태그
p태그와 비슷하다. 하지만 br태그는 말 그대로 줄을 바꾸어주는 역할만 한다.
br태그는 줄바꾸기만 하기 때문에 p태그처럼 css 디자인을 적용하지 못한다.
📖이미지 <img> 태그
이미지 태그는 말 그대로 이미지를 html에 넣을 수 있는 태그이다.
<html>
<body>
<img src="img.jpg" height="300" alt="산 이미지" title="산 이미지">
</body>
</html>이 코드에서 src 속성은 이미지의 위치와 파일 이름등에 대한 정보를 줘야한다.
height의 경우 높이 (픽셀)을 지정하는 속성이다. alt속성은 이미지파일이 없을 경우 표시되는 텍스트이다.
title 태그는 이미지 위에 커서를 올려놓았을 때 보여지는 속성이다.
📖표 <tr>, <td>, <th> 태그
표를 만드는건 복잡할 수는 있어도 어렵지 않다.
<html>
<head><meta charset="utf-8"></head>
<body>
<table border="2">
<thead>
<tr>
<th>이름</th>
<th>성별</th>
<th>주소</th>
<th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td>
<td>남</td>
<td rowspan="2">청주</td>
<td>1000</td>
</tr>
<tr>
<td>최유빈</td>
<td>여</td>
<td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">합계</td>
<td>1500</td>
</tr>
</tfoot>
</table>
</body>
</html>이런 코드를 만들어보자.
이런 화면이 보인다. 먼저 태그를 간단하게 알아보자.
테이블에 대한 영역은 <table>태그로 지정해줘야 한다.
<thead> 부분은 표의 상단이, <tbody>는 표의 메인이 들어가게 된다.
<tr> 태그로 행을 먼저 만들어 줄 수 있다.
위의 코드에서도 첫번째 줄은 행으로 만들었다. 그 안에서 <th> 태그를 이용해 각 열의 제목을 작성하였다.
다음 줄 부터 셀은 <tr> 태그로 만들었다.
또 rowspan, colspan과 같은 속성들로 표를 합춰주었다.
📖입력양식 <form> 태그
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name="id"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<p>주소 : <input type="text" name="address"></p>
<input type="submit">
</form>
</body>
</html>
위의 코딩을 진행하게 된다면 저런 페이지가 보이게 된다. 제출버튼을 눌렀을 때, http://localhost/login.php로 데이터가 전송되는 그런 페이지다. 각각 p 태그로 항목에대한 제목(설명?)을 적어주고 우측에 input태그를 이용하여 넘길 데이터를 정리한다.
저 상태에서 데이터를 넘기게 된다면, localhost/login.php?id=xxxx&pwd=yyyy&address=aaaaa 형태로 데이터가 넘어간다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/order.php">
<p>
<h1>색상(단일선택)</h1>
붉은색 : <input type="radio" name="color" value="red">
검은색 : <input type="radio" name="color" value="black" checked>
파란색 : <input type="radio" name="color" value="blue">
</p>
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100" checked>
105 : <input type="checkbox" name="size" value="105" checked>
</p>
<input type="submit">
</form>
</body>
</html>이번엔 이런 코드가 있다고 해보자. 기본적으로 데이터를 localhost/order.php에 넘겨주는 형식이다.
그럼 그 데이터를 어떻게 만들어야 할까. 페이지를 확인해보자.
기본적으로 검은색과, 100 105 사이즈에 체킹이 되어있는것을 확인할 수 있다.
그 이유는 input 태그의 속성에 checked가 있기 때문이다.
그럼 이제 저 데이터를 제출해보자.
url을 확인해보자. http://localhost/order.php?color=black&size=100&size=105 로 데이터가 전송된다.
물론 저 서버에는 order.php가 없기에 정상적으로 작동할 리는 없다. 우리가 확인해야 할 것은
체크리스트에 체크된 값이 어떻게 데이터로 전송되는지 이다.
GET 메소드로 전송이 되는구나 ㅏㅏㅏㅏ 라고 생각하면 될 것 같다.
이런 input 태그에는 또다른 속성들도 많다. 그중에 하나가 hidden도 있다.
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="mm0ck3r">
<input type="submit">
</form>
</body>
</html>이렇게 코드를 작성해보자.
작성한 hidden 속성의 input태그는 보이지 않는다.
그렇지만 값은 전송이 된다.왜 이러한 속성을 사용하는 걸까. 바로 사용자가 모르게 값을 넘기기 위해 사용한다.
TCP School의 설명이다. 결론은 보안 토큰 등 사용자가 알 필요가 없는 값을 결과로 넘길 때 사용하는 것이다.
form 태그에는 다양한 메소드를 적용시킬 수 있다.
| GET Method | Form Data를 HTTP Get Method로 전송. |
| POST Method | Form Data를 HTTP POST Method로 전송. |
이건 사실 내가 이전에 정리를 하였기 때문에 넘어가도록 하겠다.
📖정보 <meta> 태그
meta정보란, 정보에 대한 정보이다. 책을 예로 들자면, 책의 저자, 출간 년도 등 이러한 정보들을 메타정보라고 한다.
즉, 어떤 데이터를 설명하는 데이터이다.
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "description" content="mm0ck3r의 메타태그 연습">
<meta name = "keywords" content = "코딩, coding, 생활코딩, 프로그래밍, html, js ...">
</head>
<body>
</body>
</html>
이렇게 페이지에 대한 정보를 남길 수도 있다.
📖의미론적 시맨틱 태그
시맨틱 태그는 사실 HTML에 직접적으로 영향을 주지 않는다.
그런데 시맨틱 태그를 왜 사용하냐? 라고 한다면, 바로 HTML의 골격을 갖추어주기 위해 사용한다.
간단한 예시로, body 태그 내에서 페이지의 상단을 <header></header>, 메인을 <main></main>, 하단을 <footer></footer>
로 골격을 잡아줄 수 있다. 그래서 시맨틱 태그는 각각 태그가 무슨 용도로 쓰이는지 아는것이 중요하다고 생각된다.
| article | 본문 |
| aside | 광고와 같이 페이지의 내용과는 관계가 적은 내용들 |
| details | 기본적으로 표시되지 화면에 표시되지 않는 정보들을 정의 |
| figure | 삽화나 다이어그램과 같은 부가적인 요소를 정의 |
| footer | 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의 |
| header | 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의 |
| main | 문서에서 가장 중심이 되는 컨텐츠를 정의 |
| mark | 참조나 하이라이트 표시를 필요로 하는 문자를 정의 |
| nav | 문서의 네비게이션 항목을 정의 |
| section | 문서의 구획들을 정의 (참고) |
| time | 시간을 정의 |
HTML을 만들 때는 이런 태그들을 유념하여 기본적인 형태, 골격을 갖추어야 한다고 생각한다.
📖검색엔진 최적화
먼저, 구글에서 검색엔진 최적화 가이드를 공개하였다.
위 자료를 참고하여 학습을 진행해보자.
먼저 검색엔진 최적화란 무엇을 의미하는 걸까.
말 그대로 검색을 하였을 특정 사이트가 검색 결과에 노출되는 것을 의미한다.
1. 명확하고 독창적인 타이틀 사용하기
2. "description" 메타 태그 활용하기
3. 페이지의 URL 구조 개선하기
4. 사이트 내에서 이동하기 쉽게 만들기
5. 우수한 품질의 콘텐츠와 서비스를 제공하기
6. 보다 나은 앵커 텍스트 작성
등등이 있다. 그냥 예시를 들어보자.
mm0ck3r을 중요한 정보라고 해보자. 그럼 mm0ck3r이 구글 검색에 노출되어야 할 것이다.
이때 <title>이나 <meta>안에 해당 정보를 넣어놓으면 검색이 수월하겠지만,
막 <li> 안에 넣어놓으면 당연히 검색이 잘 되지 않을 것이다. 이러한 점을 알자 이런 느낌인 것 같다.
'스터디 그룹 > ProjectH4C' 카테고리의 다른 글
| ProjectH4C 2개월 1주차 과제 (UNIT16 ~ UNIT33) (0) | 2021.02.20 |
|---|---|
| ProjectH4C 2개월 1주차 과제 ( ~ UNIT15) (0) | 2021.02.16 |
| ProjectH4C 1개월 3,4주 과제 생활코딩 - HTML (1) (0) | 2021.02.09 |
| ProjectH4C 1개월 3,4주 과제 (코드업 66~100) (0) | 2021.02.07 |
| ProjectH4C 1개월 3,4주 과제 (코드업 41~65) (0) | 2021.02.07 |