-Summary-
HTML 배경 지식, <p>, <br>, <img>, <table>, <form>, <input>, 선택 태그
02-04 (생활코딩 HTML 기술소개 ~ 기본 문법)
HTML은 HyperText Markup Language의 약자로 하이퍼텍스트(링크 등)을 가장 중요한 특징으로 하고 마크업이라는 형식을 가진 컴퓨터 프로그래밍 언어다.
여기서 언어란 약속이다. 사람들이 소통할 때 쓰는 한글, 영어 등 미리 약속 된 표현으로 소통을 하는데, 이를 언어라 하는 것이다. 프로그래밍 언어란 사람과 컴퓨터 간의 약속 된 표현이다. 여기서 HTML은 사람과 웹페이지 간의 약속이라 할 수 있다.
위 사진은 naver 웹사이트에서 오른쪽 버튼을 누르고, 페이지소스를 클릭해서 나온 사진이다. 위의 코드들이 HTML이다.
html 코드 작성 방법은 간단하다. 메모장으로 작성해도 되고 notepad, vscode 등등으로 작성 가능한데, 확장자가 .html이여야한다.
Hello World!별 다른 함수, 문법 없이 Hello World!만 입력했다.
확장자를 .html로 해서 저장하고 실행하면 웹브라우저가 켜지는데, 화면을 보면 입력 한 문장이 그대로 적혀있다.
Hello
World!신기한 것은 위처럼 Hello를 적고 줄을 2번 바꿔서 World!를 써줬는데 결과 화면은 Hello World!와 같다.
이는 html의 규칙이기 때문에 줄을 바꿔주고 싶다면 따로 태그를 사용해야 된다.
-태그(tag)-
html 코드에 아무 문자를 써 넣으면 위 처럼 문자 그대로 브라우저에서 표시되는데, 태그라는 것을 써준다면 문자를 꾸미는 등등 해서 표시할 수도 있다.
<태그명>......</태그명>
태그 사용은 위처럼 < >안에 태그 이름을 적고 </ >으로 태그 이름을 한번 더 적어줘야하는데, < >부터 </ >까지 안의 문자 등에 태그를 적용시켜주는 것 같다. 주의할 점은 태그를 사용할 때는 반드시 닫는 태그(</ >)도 써줘야한다.
-<strong>
strong은 < > </ >안의 문자를 굵게 만들어주는 역할을 한다.
<strong>Hello</strong> World!
Hello 사이에 <strong> </strong>을 넣어주고 브라우저로 열어보니 Hello 부분이 진하게 표시된 것을 볼 수 있다.
-<h1>, <h2>...
heading 1,2....의 약자로 제목 기능을 해주는 태그다.
<h1>HTML</h1>
<strong>Hello</strong> World!
위처럼 h1 태그로 'HTML'을 감싸주고 실행하면 마치 신문의 해드라인처럼 크기가 커지고, 굵어진 것을 볼 수 있다.
h1을 h2로 수정하고 실행해 보니 크기가 좀 작아진 걸 볼 수 있다.
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<h7>h7</h7>
<h8>h8</h8>
<strong>Hello</strong> World!
호기심이 생겨서 h8까지 태그를 써보니 h6까지 밖에 없는 걸 알 수 있고, 또한 숫자가 커질 수록 글자 크기가 작아지는 것을 볼 수 있다.
02-05 (하이퍼텍스트와 속성 ~ 웹사이트 만들기)
-<a>
a 태그는 텍스트에 링크를 걸어주는 태그다.
위처럼 < > </ > 형식으로 쓰면 아무 변화가 없는 것을 볼 수 있는데, 이유는 파이썬에서 배웠던 인자처럼 <a> 태그도 받아야할 인자가 있는데 이를 주지 않으면 태그가 적용되지 않는 것이다. a 태그는 링크를 걸어주는 태그기 때문에 링크가 속성(인자)로 주어져야한다.
<a href="(링크)">(텍스트)</a>
위처럼 사용하면 된다.
<h1>HTML Coding</h1>
<a href="https://www.naver.com">네이버로 이동</a>
앞서 배운 h1 태그로 HTML Coding이라는 제목을 만들고 a 태그의 href 속성에 "https://www.naver.com" 네이버 주소를 주었다. 브라우저로 열어보면 a태그로 감싼 텍스트 "네이버로 이동"은 링크가 걸린 것처럼 보여지고 클릭한다면 현재 창에서 네이버 주소로 접속한다.
위 텍스트를 클릭하면 현재 창에서 네이버로 이동하는데 target 속성을 준다면 새 탭에서 이동하도록 할 수 있다.
taget="_blank" 속성을 추가해주면 된다.
<h1>HTML Coding</h1>
<a href="https://www.naver.com" target="_blank">네이버로 이동</a>
마우스를 올려놨을 때 보이는 툴팁도 속성을 줘서 원하는 텍스트로 나오도록 할 수 있다.
툴팁은 title속성을 주면 된다.
<h1>HTML Coding</h1>
<a href="https://www.naver.com" target="_blank" title="네이버">네이버로 이동</a>툴팁 캡처가 안되서 실습 캡처는 못했다. 브라우저로 열어보고 네이버로 이동 텍스트에 마우스를 올려둔다면 툴팁으로 "네이버"가 뜬다.
정리하면 a태그는 링크를 걸어주는 태그고, 속성으로는 href(링크), target="_blank"(새 탭에서 열기), title(툴팁 내용)이 있다.
태그의 속성의 순서는 상관이 없다. 파이썬 같은 경우 인자 순서가 중요했지만(물론 키워드로 준다면 상관은 없었다.), html은 속성의 순서를 바꿔써도 제대로 작동한다.
-<li>
li 태그는 list의 약자로
- 1
- 2
- 3
위 1,2,3처럼 텍스트를 목록화 해서 나타내주는 태그다.
<li>1</li>
<li>2</li>
<li>3</li>
<li>a</li>
<li>b</li>
<li>c</li>
위처럼 1,2,3,a,b,c를 li 태그로 감싸서 작성해 본다면 위 사진처럼 앞에 동그라미 표시가 생겨서 마치 목록처럼 나타내주는 것을 볼 수 있다.
-<ul>
목록을 만들 때, 각각 다른 성격의 목록을 구분해줄 필요가 있을 수 있다. 예를 들어 위 실습처럼 1,2,3과 a,b,c 숫자와 알파벳이 하나의 목록으로 출력되는데, 줄바꿈을 해줘도 html을 인식을 못하기 때문에 태그를 통해 구분을 해줘야한다.
이때 이를 구분해주는 태그가 ul 태그다.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
li로 감싸준 1,2,3,a,b,c를 ul로 각각 숫자 부분과 알파벳 부분을 감싸준다면 위처럼 딱 구분되어 보이게 된다. 위 코드를 보면 li처럼 하나하나 ul로 감싸주지 않고 1,2,3 전체를 감싸줬는데, 이러면 1,2,3은 ul 태그에 속하게 되기 때문에 그룹핑 되어 위처럼 구분되어 출력된 것이다.
-<ol>
ol 태그는 ul 태그와 비슷하게 list들을 그룹핑 해주지만 ul과 달리 목록들에 번호를 매겨준다. ordered list 즉, 정돈된(?) 리스트다. ul은 unordered list, 즉 정돈되지 않은 목록(?)이라 번호가 아닌 동그라미가 붙는다.
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
ul에서 실습했던 코드의 1,2,3 부분은 ul 대신 ol로 바꿔주면 ol 및의 li들은 사진처럼 그룹핑 + 번호도 매겨지는 것을 볼 수 있다. 반면 ul로 감싸준 li들은 동그라미로 표기돼 있다.
참고로 위 코드들을 보면 <ul>, <ol> 안에 속해있는 태그들은 모두 들여쓰기를 해준 것을 알 수 있는데, html은 파이썬처럼 들여쓰기가 필수가 아니라서 해주지 않아도 정상 작동한다. 다만 어느 부분이 ul, ol에 속해있는지 확인하기 어려운 면이 있으므로 들여쓰기를 해주는 편이 가독성이 좋다.
-문서의 구조
지금까지 아무 형식 없이 텍스트와 태그만 적었는데, html에는 약속 된 문서 구조가 있다.
<html>
<head>
<title>(문서 제목)</title>
<meta charset="utf-8">
(기타 부과적인 정보)
</head>
<body>
(내용)
</body>
</html>
위가 html의 기본적인 구조다. 먼저 html 태그로 전체를 감싸는데, 그 안은 head 태그와 body 태그로 나눠진다. 위 head 태그 안의 코드를 보면 title과 meta 태그가 있는데, title 태그는 문서의 제목을 나타내는 태그다.
위처럼 브라우저의 탭창을 보면 1.html이란 제목(문서이름이다)이 나와있는데, title 태그안에 원하는 텍스트를 넣으면 그 텍스트로 문서 제목이 바뀐다. title 아래 charset 속성으로 "utf-8"이 주어진 meta 태그는 인코딩 관련으로 한글이 깨짐 없이 잘 보여지도록 해준다. head 태그안에는 title, meta 등 부과적인 정보 등을 써주는 영역이다.
body 영역은 위에서 실습했던 내용들을 적는 공간이다. 화면에 보여주는 영역이라고 이해했다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Coding</title>
<meta charset="UTF-8">
</head>
<body>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>위는 위에서 실습했던 코드를 html 문서 구조에 맡게 바꾸고, title 태그를 추가한 코드다.
title 태그를 써주니 위 사진처럼 내가 적은 제목으로 탭 제목이 바뀌는 것을 볼 수 있다. 문서 구조를 바꿨지만, 결과는 위 실습 결과와 제목 빼고 똑같은 것을 볼 수 있다. 하지만 이런식으로 영역을 나눠서 써주니, 가독성 면에서는 좋은 것 같다 느껴진다.
<html lang="en">
<head>
<title>HTML Coding</title>
<meta charset="UTF-8">
</head>
<body>
<h1>HTML</h1>
<h2>Tag</h2>
<ul>
<li>h1,2,3,4,5,6,7,8</li>
<li>li</li>
<li>ul</li>
<li>ol</li>
<li>a</li>
</ul>
<h2>문서 구조</h2>
<ol>
<li>html, head, body 태그 작성</li>
<li>head 태그에는 부과적인 정보, title, meta 등을 작성 </li>
<li>body 태그에는 화면에 보여주는(?) 등의 코드를 작성</li>
</ol>
<a href="https://opentutorials.org/course/2039/10934" target="_blank">참고 주소</a>
</body>
</html>위는 지금까지 배웠던 html 태그들을 문서 구조에 맞춰 실습해본 모습이다.
먼저 문서 구조에 맞게 html, head, body 태그를 작성했고 head에는 title과 meta 태그를 써줬다. body에는 h1 태그로 제목인 HTML을 제목으로 나타냈고 소제목인 Tag와 문서 구조는 h2 태그로 감싸줬다. Tag 목록은 번호가 필요 없기 때문에 ul(unordered list)로 감싸서 li(list) 태그로 목록을 작성했다. 문서 구조는 순서가 있기 때문에 ol(ordered list)로 감싸서 li 태그로 목록을 작성했다. 마지막으로 생활 코딩 사이트 주소를 a 태그의 href 속성으로 줘서 링크를 걸었고, target 속성으로 "_blank"를 주어 새탭으로 열리도록 작성했다.
참고로 꿀팁이지만 vscode나 braket 같은 idle에서 html 코드를 작성할 때, 첫줄에 !를 적고 Tab 키를 눌러주면 문서구조가 자동으로 완성된다.
-<!DOCTYPE html>
!치고 Tab을 누르면
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>이런 코드가 자동으로 완성되는데, html, head, body 부분은 배웠지만, 맨 위의 !DOCTYPE html은 아직 배우지 않았다.
이 doctype은 Document type declaration의 약자로 직역하면 문서 형식 공표(선언)다. 이것은 작성한 코드가 어떤 방식의 html코드로 작성했는가를 나타내주는 것인데, html도 버전이 여러개다. 예전에 존재했던 태그가 없어지기도 하고, 새로 생겨나기도 하면서 변해 가는데, 이 형식으로는 xhtml, html 4.0, html 5.0 등등 여러개가 존재한다. 그중 !DOCTYPE html은 html5 형식으로 코드를 작성하겠다는 것이다.
어쨌든 html5 형식으로 코딩을 할 것이기 때문에, html 코드 맨 위에 <!DOCTYPE html>을 적어주면 된다.
-<a>태그 응용-
지금까지 a태그는 웹사이트의 주소 링크 걸어주는 태그로 알고 있었는데, 링크 뿐만 아니라 다른 html 문서로 이동해줄 수 있었다. 예를 들어 네이버 메인 화면(index.html)이 있다 쳣을 때 a태그를 이용하여 네이버 카페창이나 네이버 영화, 메일 등이 구현 된 html 문서로 보낼 수 있다는 것이다.
웹 사이트 링크를 건 것과 똑같이 href 속성에 웹 사이트 링크 대신, html 파일이 존재하는 디렉토리 경로를 적어주면 된다.
-index.html-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<h1>Naver</h1>
<h2>Naver 홈 화면</h2>
<ul>
<li><a href="movie.html">영화</a></li>
<li><a href="music.html">뮤직</a></li>
<li><a href="mail.html">메일</a></li>
<li><a href="index.html">홈으로</a></li>
</ul>
</body>
</html>-movie.html-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>movie.html</title>
</head>
<body>
<h1>Naver</h1>
<h2>Naver 영화</h2>
<ul>
<li><a href="movie.html">영화</a></li>
<li><a href="music.html">뮤직</a></li>
<li><a href="mail.html">메일</a></li>
<li><a href="index.html">홈으로</a></li>
</ul>
</body>
</html>music.html, mail.html은 비슷한 구조이므로 생략하겠다.
위 코드는 a 태그를 사용해서 만들어본 간단한 네이버 웹 사이트다.
index.html을 브라우저로 열면 위처럼 영화, 뮤직, 메일, 홈으로의 메뉴가 있는 Naver 홈 화면이 나온다. 이 목록들을 ul 태그로 묶어 li로 구현했고,
<li><a href="movie.html">영화</a></li>
위처럼 li를 써주고 목록 텍스트를 a 태그로 다시 묶어서, 목록이 링크 역할도 하도록 작성했다. 이 목록 중 하나를 누르면 해당 html로 이동하게 된다.
위 사진은 index.html에서 목록의 영화를 눌러서 index.html -> movie.html로 넘어온 모습이다. 주소창에 html 파일이 바뀐 것을 알 수 있고, Naver 아래에 Naver 홈 화면 텍스트 대신 Naver 영화가 존재하는 것을 볼 수 있다. 뮤직, 메일, 홈으로도 눌러본다면 정상적으로 해당 html로 간다.
이처럼 a 태그로 html 경로를 지정해줬을 때, 해당 링크를 클릭하면 해당 html로 넘어간다는 것을 알 수 있다.
위 사진은 네이버 페이지 소스 보기에서 찾은 html 코드인데, 보면 위에서 실습한 것과 비슷하게, 네이버 홈페이지에서도 a에 href 속성을 줘서 다른 웹페이지로 이동하는 것을 알 수 있다.
02-06 (HTML 변천사와 통계 ~ 표 - table)
#개발도구는 이미 VSCODE를 사용하고 있으니 스킵하겠습니다.
위 사이트는 이전 버전의 html 태그들을 보여주고, 현재의 html과 비교해주는 사이트다.
위는 HTML 1에 존재했던 태그들의 연대기를 나타낸 모습이다. 몇개는 현재(HTML5)에도 쓰이고 있고, 몇개는 obsolete , 즉 아에 쓰이지 않고 있다. html1부터 지금까지 존재하는 태그들은 중요한 태그라고 한다.
위는 HTML 관련 통계를 나타낸 사이트다.
사이트를 보면 위처럼 html 관련 통계들이 나와 있는데, 위는 웹사이트에서 태그를 얼마나 쓰는지에 대한 통계다. 보면 당연하지만 html 문서 구조에 사용되는 html, head, body 등이(이 3개는 무조건 쓰이기 때문이다.)가 상위권에 존재하고 그 뒤에는 div, a 태그들이 존재한다. 위처럼 자주 쓰이는 태그들 중점으로 공부하는게 효율적이라고 한다.
위는 Doctype 통계다. 보다시피 HTML5가 80%이상으로 가장 높다는 것을 알 수 있다.
-주요 태그-
여기서부터는 태그 중점으로 정리한다.
-<p>
p 태그는 paragraph의 약자로 단락을 만들어주는 태그다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
가나다라마바사아자차카타파하
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</body>
</html>
위 코드를 작성하고 실행하면 당연하지만 코드처럼 가나다.. ABCD... 사이에 줄바꿈이 없이 한줄로 쭉 출력된다. 이를 단락을 나눠서 출력하고 싶다면, 해당 텍스트를 <p> </p>로 감싸주면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<p>가나다라마바사아자차카타파하</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</body>
</html>이렇게 각각 <p> </p>로 감싸준다면
위 사진처럼 깔끔하게 단락을 나눠서 보여준다.
보면 p 태그를 사용했을 때는 일정한 간격이 정해져 있어, 그 간격만큼 단락을 나눠주는데, 이를 변경하고 싶을 시에는, 뒤에 배울 br 태그를 사용하거나, css라는 별도의 프로그래밍 언어를 통해 변경할 수 있다.
-<br>
br 태그는 a forced line-break의 약자로 파이썬에서 개행문자인 \n과 같은 역할을한다. 줄을 바꿔주는 것이다.
br 태그는 지금까지 배운 다른 태그들과 다르게 void element라고 해서 닫는 태그를 안써줘도 된다.
예를 들어 a태그는
<a>(텍스트)</a>
이런식으로 a 태그를 사용할 때는 < >와 </ >로 영역을 지정해줬는데 br은 줄을 바꿔주는 태그이므로 닫는 태그를 써줄 필요 없이
(텍스트)<br>
이런식으로 써주면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
Hello World!<br>
Hello Python<br>
Hello HTML<br>
Hello<br>Pwnable
</body>
</html>
위처럼 br을 써주면 마치 파이썬의 \n 처럼 개행을 해주는 것을 볼 수 있다. 지금은 하나씩만 써서 한줄만 바꿔줬지만 br을 여러번 써준다면 원하는 만큼 개행이 가능하다.
앞서 p 태그의 단락 간격을 조절하려면 br을 써야한다 했는데, 지금 배운 이 br을 p 태그 끝부분에 두면 개행을 원하는 만큼 할 수 있다.
다만 br을 쓸 경우 시각적으로 개행을 해주지만 css를 적용할 때나 class, id 등을 줄 때, 단락 영역이 정해져 있지 않아서 번거로움을 겪을 수 있기 때문에, br보다는 p를 쓰고 p의 간격은 이왕이면 css를 통해 변경해주는게 좋다.
-<img>
img 태그는 웹에 이미지를 넣어주는 역할을 한다. 속성으로는 src(이미지 경로), width(이미지의 가로 넓이), height(이미지의 세로 넓이), alt(이미지를 불러오지 못할 경우 표시할 내용), title(툴팁 표시 내용) 등을 가진다.
이 태그 역시 닫는 태그는 써줄 필요 없다.
<img src="(이미지 경로)">
기본적인 형은 위와 같고, 여기서 width, height 등의 속성을 추가해줄 수 있다.
<img src="우주.jpg" width="600" height="300" alt="우주 이미지" title="우주">
이미지 경로를 src를 통해 지정해주고, 가로 길이(width) 600 세로 길이(height) 300을 주고 alt와 title 속성을 각각 채워줬다. title은 툴팁 표시 내용이라 캡처를 못했다. alt 같은 경우 이미지를 불러오지 못할 경우 표시할 내용이므로, 위 사진에는 나타나지 않는게 당연하다.
일부러 src의 경로를 잘못된 경로로 바꾸니, alt로 지정해준 텍스트가 보여지는 것을 볼 수 있다.
참고로 위 사진에서는 width, height를 모두 지정해줬지만, 둘중 하나만 지정해주면 사진 비율에 맞게 바뀐다. 예를 들어 비율이 2 : 3인 사진에 width를 4를 준다면 자동으로 height가 6으로 바뀌는 것이다.
-<table>, <tr>, <td>
위는 간단한 표를 엑셀로 나타내 본 사진이다. 이를 웹페이지에서 구현하려면 기본적으로 3개의 태그가 필요한데, 그게 table, tr, td 태그다. 먼저 td는 table data의 약자로 셀의 값을 나타내주는 태그다. DB 용어로 컬럼에 해당한다. 이 td로만으로 작성한다면,
<td>학번</td><td>이름</td><td>분야</td><td>성별</td>
<td>10101</td><td>A</td><td>시스템 해킹</td><td>남</td>
<td>10102</td><td>B</td><td>웹 해킹</td><td>남</td>
<td>10103</td><td>C</td><td>시스템 해킹</td><td>여</td>
<td>10104</td><td>D</td><td>웹 해킹</td><td>여</td>
이렇게 제대로 결과가 나오지 않는 것을 볼 수 있다. td로만으로 테이블 작성이 안된다.
tr은 table row의 약자로 테이블의 한 행을 뜻한다.
위 엑셀 테이블에서 한 행이란 '10101 A 시스템 해킹 남' 이 부분이다. 마치 ul이나 ol 같이 tr로 한 행의 컬럼들을 감싸주면 그 영역이 한 행으로 구분된다.
<tr>
<td>학번</td><td>이름</td><td>분야</td><td>성별</td>
</tr>
<tr>
<td>10101</td><td>A</td><td>시스템 해킹</td><td>남</td>
</tr>
<tr>
<td>10102</td><td>B</td><td>웹 해킹</td><td>남</td>
</tr>
<tr>
<td>10103</td><td>C</td><td>시스템 해킹</td><td>여</td>
</tr>
<tr>
<td>10104</td><td>D</td><td>웹 해킹</td><td>여</td>
</tr>위처럼 작성해도 제대로 된 결과가 나오지 않는다. 마지막으로 제대로 된 표를 나타내는데 필요한 태그가 바로 table 태그다. 표로 나타내지는 부분 전체를 <table> </table>로 감싸준다면 제대로 표시된다.
<table>
<tr>
<td>학번</td><td>이름</td><td>분야</td><td>성별</td>
</tr>
<tr>
<td>10101</td><td>A</td><td>시스템 해킹</td><td>남</td>
</tr>
<tr>
<td>10102</td><td>B</td><td>웹 해킹</td><td>남</td>
</tr>
<tr>
<td>10103</td><td>C</td><td>시스템 해킹</td><td>여</td>
</tr>
<tr>
<td>10104</td><td>D</td><td>웹 해킹</td><td>여</td>
</tr>
</table>
이제 제대로 된 표처럼 표시된다. 한가지 아쉬운점은 각 컬럼(셀)들이 구분되지 않아 보기 좀 불편한 점이 있는데, 이는 table 태그에 border 속성을 줘서 해결할 수 있다.
<table border="(줄 굵기)"> </table>
위처럼 작성하면 된다.
<table border="1">
<tr>
<td>학번</td><td>이름</td><td>분야</td><td>성별</td>
</tr>
<tr>
<td>10101</td><td>A</td><td>시스템 해킹</td><td>남</td>
</tr>
<tr>
<td>10102</td><td>B</td><td>웹 해킹</td><td>남</td>
</tr>
<tr>
<td>10103</td><td>C</td><td>시스템 해킹</td><td>여</td>
</tr>
<tr>
<td>10104</td><td>D</td><td>웹 해킹</td><td>여</td>
</tr>
</table>
위처럼 border 속성을 주니 영역이 눈에 띄게 구분되는 것을 볼 수 있다. 실습으로는 border에 1 값을 줬지만, 이 값을 크게 주면 크게 줄 수록, 구분 선이 굵어 진다.
-테이블(표) 구조
table은 thead, tbody, tfoot으로 나눠진다.
thead는 위 사진처럼 데이터의 속성 부분에 해당한다. 위 같은 경우 셀 태그인 td로 구현했지만, 데이터가 아닌 속성에 해당하므로, thead 태그로 감싸주면 좀더 구조화 된 코드가 된다. 물론 안써줘도 시각상의 차이는 없지만, 마치 파이썬에서 좋은 코드와 나쁜 코드를 나누는 기준 같은 것 같다.
tbody는 바로 위 사진의 부분이다. 셀 부분(내용)이 tbody에 해당한다. 따라서 tbody 태그로 감싸주는 것이 좋다.
tfoot은 위에서 구현은 안했지만 약간 추가적인 정보를 넣는(?) 느낌인 것 같다.
위 엑셀에 적은 표의 인원 수처럼 추가되는 내용(?) 예를 들어 총합, 인원 수 같은 부분이 이 tfoot에 해당하므로 그런 부분을 tfoot 태그로 감싸주면 된다.
-<th>
위에서 작성한 표의 속성에 해당하는 부분을 td 태그로 구현했는데, 엄밀히 말하면 td는 table data에 해당하는 부분을 구현하는 역할이므로 올바른 태그를 써주는게 좋다(가독성, 구조화, css, js 적용 등등의 이유 때문에..).
th 태그는 table head의 약자로 표에서 속성에 해당하는 부분을 표현하는데 사용한다. 따라서 td로 구현한 속성 부분을 th로 바꿔주면 된다.
<table border="1">
<thead>
<tr>
<th>학번</th><th>이름</th><th>분야</th><th>성별</th>
</tr>
</thead>
<tbody>
<tr>
<td>10101</td><td>A</td><td>시스템 해킹</td><td>남</td>
</tr>
<tr>
<td>10102</td><td>B</td><td>웹 해킹</td><td>남</td>
</tr>
<tr>
<td>10103</td><td>C</td><td>시스템 해킹</td><td>여</td>
</tr>
<tr>
<td>10104</td><td>D</td><td>웹 해킹</td><td>여</td>
</tr>
</tbody>
<tfoot>
<td>인원 수</td><td></td><td></td><td>4명</td>
</tfoot>
</table>테이블 구조, th를 사용해서 표를 구현하는 코드를 좀 더 구조화 시켰다. 또한 tfoot을 사용해 인원 수를 만들어 봤다.
th로 속성을 구현하니, 속성의 글씨가 진하게 바뀐 것 빼고는 변한 것이 없다. tfoot을 추가해 맨 아랫부분에 인원 수 항목이 추가된 것을 볼 수 있다.
-colspan, rowspan
colspan과 rowspan은 테이블의 속성과 셀을 구현해주는 태그 th, td의 속성으로 병합을 시켜준다.
colspan은 열 병합, rowspan은 행 병합이다. 사용은 다른 속성들과 마찬가지로 colspan="(값)" 이런식으로 사용하면 된다.
이 값부분에는 숫자가 들어가는데, 2를 쓰면 2칸 병합, 3을 쓰면 3칸 병합되는 식이다.
<table border="1">
<thead>
<tr>
<th>학번</th><th>이름</th><th>분야</th><th>성별</th>
</tr>
</thead>
<tbody>
<tr>
<td>10101</td><td>A</td><td>시스템 해킹</td><td rowspan="2">남</td>
</tr>
<tr>
<td>10102</td><td>B</td><td>웹 해킹</td>
</tr>
<tr>
<td>10103</td><td>C</td><td>시스템 해킹</td><td rowspan="2">여</td>
</tr>
<tr>
<td>10104</td><td>D</td><td>웹 해킹</td>
</tr>
</tbody>
<tfoot>
<td colspan="3">인원 수</td><td>4명</td>
</tfoot>
</table>
위처럼 colspan은 tfooter에 rowspan은 성별 부분에 넣어주니 속성에 주어진 값만큼 병합되는 것을 볼 수 있다. 사용할 때 주의할 점은 위처럼 인원 수 부분을 3으로 병합해 줄 때, 예전 코드에서 칸을 채우기 위해 만들었던 td 3개는 지워줘야한다. 또한 성별 부분도 병합 대상의 td를 지워줘야한다. 만약 이를 지우지 않고 사용한다면 병합 + td로 구현한 텍스트가 보여지게 된다.
02-07 (입력 양식 - form ~ 선택)
-form-
id, pawword 같은 정보들을 서버로 전송할 때 사용하는 글자 입력, 선택하는 것을 form이라고 부른다.
사용자가 입력한 것을 서버로 전송할 때 사용하는 것이라 이해하면 될 것 같다.
-<input>
사용자의 입력을 받는 태그다. 속성으로 type 등을 받는데, type 속성으로 쓰이는 것은 text, button, password, submit 등 여러가지 종류가 있다.
먼저 text는 input 태그로 단순 문자를 입력 받을 때 사용한다. button은 말 그대로 버튼을 의미하고, password는 text와 동작은 똑같지만, 사용자가 입력한 문자들을 그대로 쳐지는게 아닌, 웹사이트의 비밀번호 항목처럼 입력 값이 가려져서 입력된다. submit은 제출하다 라는 뜻인데, 말 그대로 사용자가 입력한 값을 서버 등에 제출해주는 기능을 하는 것이다.
<input type="button"><br>
<input type="text"><br>
<input type="password"><br>
<input type="submit">
위는 input 태그의 type 속성에 각각 button, text, password, submit을 입력한 후 브라우저로 열어본 모습이다. <html>,<head>,<body> 등은 코드가 길어지므로 생략했다. 또한 br(개행) 태그 없이 써준다면 한 줄로 쭉 나와서 보기 불편하므로 br 태그를 써서 줄바꿈을 해줬다. 물론 br 말고 p 태그를 써주는게 구조화 되어 좀 더 좋다.
1번째는 버튼인데, 버튼 text 속성을 따로 줘야지 제대로 된 버튼이 될 것 같다. 2번째는 text를 준 것으로 보다시피 입력이 가능하다. 3번째는 password로 입력 값이 가려져서 입력된다. 4번째는 submit, 제출하는 기능을 하지만 어디로 제출할지가 정해저 있지 않기 때문에 눌러도 아무런 반응이 없다.
또한 input에는 name이라는 속성이 있다. 뒤에 정리해둔 form 태그를 사용할 때 필요한 것인데, 이 input 값들을 전송할 때, 각각의 입력된 값들을 식별해주는 이름 같은 것을 정해줘야한다. 예를들어 id로 1234를 입력했으면, 전송했을 때 이 1234의 값이 id다 라고 식별할 수 있도록 말이다.
<input name="(이름)">
위처럼 (이름) 이부분에 이름을 넣어서 사용하면 된다.
value 속성도 있다. 이 value 속성은 간혹 웹사이트를 이용할 때, 입력 받는 곳이 이미 default 값으로 채워져 있는 곳이 있는데, 미리 값을 default로 채워주는 역할을 해주는 속성이 value다.
<p><input type="text" value="default id"></p>
위 코드에서 input value 속성에 default id를 주고 브라우저로 열어보니 default id 텍스트가 미리 input에 들어가 있는 것을 볼 수 있다. type이 꼭 text만 해당하는 것은 아니고 password 등에서도 가능하다.
선택 관련된 input type에는 radio, checkbox가 있다.
<h1>radio and checkbox</h1>
<form action="">
<h2>선호하는 정보보안 분야</h2>
<p>
시스템 해킹 : <input type="radio" name="security" value="pwnable">
웹 해킹 : <input type="radio" name="security" value="web">
네트워크 해킹 : <input type="radio" name="security" value="network">
포렌식 : <input type="radio" name="security" value="forensic">
</p>
<h2>선호하는 프로그래밍 언어</h2>
<p>
c언어 : <input type="checkbox" name="language" value="c">
c++ : <input type="checkbox" name="language" value="cpp">
c# : <input type="checkbox" name="language" value="csharp">
Python : <input type="checkbox" name="language" value="python">
HTML : <input type="checkbox" name="language" value="html">
</p>
<p><input type="submit"></p>
</form>
다른 input type과 비슷한 형태이지만 추가로 name을 필수로 줘야한다. radio로 구현된 선택지들을 눌렀을 때, 하나가 선택되면 선택 된 다른 부분은 선택이 취소되는데, 이 취소되는 범위 안이, 같은 name에 해당된다. checkbox는 위 사진처럼 check를 해주는 네모난 박스가 구현되는데, radio와 달리 다중 선택이 기본으로 가능하다. 아래에서 배우는 select option에서 다중 선택을 구현할 시 이 checkbox를 사용하면 사용자 입장에서 편해진다.
-<form>
위의 input의 type에 submit 속성을 주었을 때, 어디로 제출할지가 정해저 있지 않아 동작이 없다했는데, 이 어디로 제출할지를 정해주는 태그가 바로 form 태그다.
단순히 form으로만 감싸주는게 아닌 전송될 곳을 form의 속성으로 입력해줘야 하는데 그 속성이 바로 action이다.
<form action="(전송될 곳)">
(form(사용자 입력을 받는 코드들))
</form>
위처럼 사용하면 사용자의 입력을 받은 form 들, 가령 input type="text" 같은 것들로 입력 받은 값들이 action에 정해놓은 곳으로 전송된다. input 태그 부분에서 다뤘듯이 name을 지정해줘야지, 전송 된 값들이 식별 가능하기 때문에 input에 name 속성도 적어줘야한다.
<h1>Login</h1>
<form action="">
<p>id : <input type="text" name="id"></p>
<p>password : <input type="password" name="pwd"></p>
<p><input type="submit"></p>
</form>
form과 input 그리고 p 태그를 사용해 뭔가 그럴듯해 보이는 로그인 화면을 만들었다. form의 action 속성에는 아무 값도 주지 않았는데, 그 이유는 이 값들을 받을 곳이 없기 때문이다. 각 form들은 p 태그로 감싸서 단락으로 만들었다. 또한 input만 입력하면 뭔가 아쉬워서 앞에 id : , password : 도 넣어주니 완성도가 있어보인다. 물론 input에는 각각 name을 지정해줘야된다. 위 코드에는 id, pwd로 name 속성을 주었다.
id, password란에 1234를 입력하고 제출버튼을 누르니 주소가 바뀌었다. 원래 주소 뒤에 ?id=1234&pwd=1234가 추가됐는데, 이는 생활코딩에서 다루진 않았지만 구글링해보니 이는 get 방식의 데이터 전송인 것을 알 수 있었다. id는 <input type="text"> 부분에 지정해뒀던 name 속성인데 id=1234인것을 보면 name id에 입력한 값이 1234의 값이 들어가고, password의 name 속성 pwd에도 입력한 값인 1234 값이 들어간 것이다.
생각해보면 실제 웹사이트에서 로그인 정보를 get 방식으로 전송한다면, 타인에게 정보가 노출될 위험이 있을 것 같다.
-<textarea>
위에서 텍스트를 입력받을 때 사용했던 input 태그의 text나 password는 한 줄밖에 입력을 못했다. 텍스트 비교 사이트등을 보면 여러줄을 입력 가능한 form이 있는데, 이런 곳에 쓰이는 태그가 바로 textarea다. 직역하면 텍스트 영역(?)으로 이름부터가 텍스트를 입력받는 form 같다.
<textarea></textarea>
input과 달리 textarea는 닫는 태그가 필요하다. 브라우저로 열어보면 위처럼 여러 줄 입력 가능한 form이 보여진다. 또한 오른쪽 하단의 대각선 줄 표시를 드래그 엔 드롭하면 원하는 크기로 키울 수도 있다.
<textarea>dypar</textarea>
textarea 태그 영역에 텍스트를 넣으면, 위 사진처럼 input의 value 속성 같이 기본 값이 되어 텍스트가 form에 미리 들어가 있는다.
textarea의 크기 또한 속성을 통해 정해줄 수 있다.
가로 크기는 cols, 세로 크기는 rows 속성을 주면 된다.
<textarea cols="30" rows="5"></textarea>
위처럼 cols, rows 속성을 주면 정해진 크기의 textarea가 보여진다. rows에 5를 주니 5줄 크기가 됐지만, 30을 준 cols는 이상하게도 가로에 32 글자까지 입력이 가능했다.
-<select>, <option>
select, option 태그는 선택지를 구현해주는 드롭 다운 메뉴(drop down menu)태그다. select는 ul, ol과 비슷하게 쓰이며, 선택지, 요소를 나타내주는 기능을 한다. option은 select의 선택지 하나하나를 만들어준다.
<select>
<option>선택지</option>
<option>선택지2</option>
.....
</select>
위처럼 사용가능하다. 또한 이 select와 option 역시 form이므로 전송할 때 식별할 이름이 필요한데, 이 이름은 option 하나하나에 넣어줄 필요 없이 select에 name 속성만 추가해주면 된다. 예를들어 select에 'sel' name을 줬다 가정했을 때, 첫번째 선택지를 선택하고 전송하면 get 전송일 경우 sel=선택지1 이런식으로 전송된다.
또한 컴퓨터는 한글보다 영어가 더 이해하기 쉽기 때문에, 이왕이면 영어로 전송하는게 좋다한다. 이럴 경우 value 속성을 option에 써주면 시각적인 면에서는 사용자의 눈높이를 맞추고, 시스템 적인 면에서는 컴퓨터 눈높이에 맞출 수 있다.
<select name="sel">
<option value="sel1">선택지</option>
<option value="sel2">선택지2</option>
.....
</select>
option에 value 속성을 줬는데, 이럴 경우 첫 번째 option을 선택하고 전송할 때, sel="선택지"가 아닌 sel="sel1" 이렇게 value로 전송시켜준다.
다중 선택 또한 가능한데, select에 속성으로 multiple을 써주면 다중 선택이 가능해진다.
<h1>select & option</h1>
<form action="">
<h2>선호하는 정보보안 분야</h2>
<select name="sel1">
<option value="rce">리버싱</option>
<option value="pwnable">시스템 해킹</option>
<option value="web">웹 해킹</option>
<option value="network">네트워크 해킹</option>
<option value="forensic">포렌식</option>
</select>
<h2>선호하는 프로그래밍 언어</h2>
<select name="sel2" multiple>
<option value="c">c언어</option>
<option value="cpp">c++</option>
<option value="web">c#</option>
<option value="Python">Python</option>
<option value="html">HTML</option>
</select>
<p><input type="submit"></p>
</form>
multiple을 안써준 sel1은 하나만 선택 가능한 반면, multiple을 써준 sel2는 ctrl를 누른 상태에서 메뉴를 클릭하면, 중복 선택이 가능한 것을 알 수 있다.
submit 버튼을 누르니 sel1에는 시스템 해킹의 value 값이 pwnable이, sel2에는 python과 html이 들어간 것을 볼 수 있다.
ctrl을 눌러서 다중 선택해야한다는 점은 사용자가 생소할 수도 있고, 번거로울 수도 있어, 위쪽 input의 radio 속성이나 checkbox 속성을 사용한다면, 보다 좋게 다중 선택을 구현 가능하다.
'Old (2021.01 ~ 2021.12) > Programming' 카테고리의 다른 글
| 생활코딩 HTML 의미론적 태그 ~ 검색엔진 최적화 (0) | 2021.02.11 |
|---|---|
| 생활코딩 HTML 버튼 ~ meta (0) | 2021.02.09 |
| 파이썬 코딩도장 Unit 27 ~ 37 (0) | 2021.01.31 |
| 파이썬 코딩도장 Unit 23 ~ 26 (0) | 2021.01.27 |
| 파이썬 코딩도장 Unit 20 ~ 22 (0) | 2021.01.26 |
