select 태그, option 태그
- 미리 지정된 값들중에서 하나를 선택할 때 사용하는 태그
- 대표적으로 회원 가입시 태어난 년도, 성별등에 이용
- option 태그와 같이 사용
ul 태그
- 비순차적 목록을 표현할 때 사용
- li태그와 같이 사용
- type 속성은 점의 모양을 결정하는 속성으로 disc/circle/square 가 있으며 기본은 disc
ol 태그
- 순차적 목록을 표현할 때 사용
- li태그와 같이 사용
- type 속성은 1 / a / A / i / I가 있으며 기본은 1
- start 속성은 ol태그의 시작값
- reversed 속성은 항목 순서를 거꾸로 함
이번 시간에는 input 태그에 대해 살펴보겠습니다.
input 태그
- 정보를 입력하기 위한 태그
- 입력한 정보를 서버에 보내기 위해 form태그와 같이 사용합니다. (자세한 내용은 다음에 살펴보겠습니다.)
- input태그는 type이라는 속성을 통해 다양한 input태그들을 구성할 수 있습니다.
- 기본 사용법
1 2 3 | <body> <input type="속성명"> </body> |
type 종류
text
- 가장 많이 사용는 속성 중 하나입니다.
- 기본이 되는 속성으로 영문,한글,특수문자등으로 이루어진 문자열을 입력받을 수 있습니다.
- 예시
1 2 3 | <body> <input type="text"> </body> | cs |
- 결과
button, reset, submit
- 버튼을 만드는 속성입니다.
- button태그로 대체할 수 있습니다.
- button : 일반 버튼
- reset : form태그 안에 있는 모든 input태그들의 값을 초기화하는 버튼
- submit : 서버로 전송하는 버튼
- 속성 value에 버튼이름을 입력합니다.
- 예시
1 2 3 | <body> <input type="button" value="버튼"> <input type="reset" value="리셋"> <input type="submit" value="전송"> </body> | cs |
- 결과
checkbox
- 체크박스를 만드는 속성입니다.
- 체크박스는 주로 설문조사와 같이 다중 선택이 가능한 곳에서 사용합니다.
- 속성 value에 값을 지정하면 서버로 해당 값을 보낼 수 있습니다.
- 일반적으로 같은 항목에 대해 동일한 name을 지정합니다.
- 예시
1 2 3 4 5 | <body> 좋아하는 과일은?(복수 선택 가능)<br> <input type="checkbox" name="fruit" value="apple"> 사과 <input type="checkbox" name="fruit" value="orange"> 오렌지 </body> | cs |
- 결과
color
- 색상을 선택하는 속성입니다.
- 색상 정보는 16진수로 표현됩니다. 예를 들어 흰색의 경우 #ffffff으로 표현되며 전송 시 #이 %23으로 인코딩 되어 전송됩니다.
- 예시
1 2 3 4 5 6 | <body> <form> <input type="color" name="color"> <button>전송</button> </form> </body> | cs |
- 결과
month, week, date, datetime-local, time
- 일시를 나타내는 속성입니다.
- month는 년,월 표시
- week는 년,주 표시
- date는 년,월,일 표시
- datetime-local은 년,월,일,시,분,초 표시
- time은 시,분,초 표시
- 일반적으로는 일시를 나타낼 때 이 속성을 이용하지 않고 JQuerydml 플러그인인 datepicker를 이용합니다.(JQuery 수업 이후에 다시 설명하겠습니다.)
- 예시
1 2 3 4 5 6 7 | <body> <input type="month"> <input type="week"> <input type="date"><br> <input type="datetime-local"> <input type="time"> </body> | cs |
- 결과
- 이메일 형식만 입력할 수 있게하는 속성입니다. (xxxx@xxx.xxx)
- 이메일 형식이 아닐 경우 메시지 창을 통해 이메일 형식에 맞게 입력하라고 알려줍니다.
- 예시
1 2 3 4 5 6 | <body> <form> <input type="email"> <button>전송</button> </form> </body> | cs |
- 결과
file
- 첨부파일이 필요할 때 사용하는 속성입니다.
- 실제 파일을 서버로 보내기 위해서는 form태그의 속성을 수정해야합니다. (자세한 내용은 form태그수업에서 다루도록 하겠습니다.)
- 예시
1 2 3 | <body> <input type="file"> </body> | cs |
- 결과
hidden
- 데이터를 안보이게 감추면서 나중에 서버로 데이터를 전송하기 위한 속성입니다.
- 퍼블리셔보다는 백엔드개발자가 많이 사용하는 속성입니다.
- 예시
1 2 3 | <body> <input type="hidden"> </body> | cs |
- 결과는 화면에 안보이므로 생략
image
- 이미지를 넣기 위한 속성입니다.
- input태그의 image 속성을 이용하기보단 img태그를 이용합니다.
- src : 이미지가 있는 주소
- alt : 이미지가 없을 경우 보여주는 대체문자
- 예시
1 2 3 | <body> <input type="image" src="https://t1.daumcdn.net/cfile/tistory/990C70365D8AFF3434" alt="그림없음"> </body> | cs |
- 결과
number
- 숫자만 입력 가능한 속성입니다.
- up버튼과 down버튼으로 숫자를 조정할 수 있습니다.
- 예시
1 2 3 | <body> <input type="number"> </body> | cs |
- 결과
password
- 비밀번호를 입력할 때 사용하는 속성입니다.
- 예시
1 2 3 | <body> <input type="password"> </body> | cs |
- 결과
radio
- 문제에서 답이 하나인 경우와 같이 한가지만 선택할 때 사용하는 속성입니다.
- 동일한 name을 가지는 항목들은 하나만 선택됩니다.
- checked 속성을 이용하여 초기 값을 선택할 수 있습니다.
- 예시
1 2 3 4 5 | <body> 성별 <input type="radio" name="gender" value="male" checked>남성 <input type="radio" name="gender" value="male">여성 </body> | cs |
- 결과
url
- url주소인지 아닌지 확인할 때 사용하는 속성입니다.
- 입력을 안하거나 url 주소 형식에 맞아야 합니다.
- 예시
1 2 3 4 5 6 | <body> <form action=""> <input type="url" > <button>제출</button> </form> </body> | cs |
- 결과
search
- 문자열을 입력할 수 있으며, 입력한 문자열을 지우는 x버튼이 있습니다.
- 예시
1 2 3 | <body> <input type="search" > </body> | cs |
- 결과
range
- 상태바가 생겨 범위를 조절할 수 있습니다.
- 예시
1 2 3 4 5 | <body> 1 <input type="range"> 10 </body> | cs |
- 결과
학습하느라 수고하셨습니다.
과제
- 아래 예시와 같이 출력되도록 코드를 작성 후 실행하고, 작성한 코드를 github에 push하고 URL경로를 보내주세요.
결과화면
이번 시간에는 텍스트와 관련된 태그들 중 많이 사용되는 태그들에 대해 살펴 보겠습니다.
텍스트 관련 태그
<h[1~6]> 태그
- 제목 태그로 <h1>태그에서 <h6> 태그로 되어 있습니다.
- 쌍 태그로 태그 사이에 보여주고자 하는 텍스트를 입력합니다.
- 주로 제목과 소제목을 나타날 때 사용합니다.
- 크기는 브라우저별로 표시하는 방법이 달라 다르게 나타날 수 있습니다.
- block 태그
- 샘플 코드
1 2 3 4 5 6 7 8 | <body> <h1>제목1</h1> <h2>제목2</h2> <h3>제목3</h3> <h4>제목4</h4> <h5>제목5</h5> <h6>제목6</h6> </body> | cs |
- 결과
<p> 태그
- 새 문단을 작성할 때 사용하는 태그
- block 태그
- 문단 위와 아래에 여백이 생깁니다. 위와 아래의 공백은 상황에 따라 겹쳐질 수 있습니다.
- 샘플코드
1 2 3 4 | <body> 안녕하세요. <p>안녕하세요. 만나서 반갑습니다. 제이름은 홍길동입니다. </p> <p>안녕하세요. 만나서 반가워요. 제 이름은 임꺽정입니다.</p> 안녕하세요. </body> | cs |
- 결과
안녕하세요. 만나서 반갑습니다. 제이름은 홍길동입니다.
안녕하세요. 만나서 반가워요. 제 이름은 임꺽정입니다.
안녕하세요.<b> 태그
- 텍스트 굵기를 두껍게 합니다.
- inline 태그
<i> 태그
- 텍스트를 기울게 합니다.
- 요즘은 주로 텍스트를 기울일 때보다는 아이콘을 표시할 때 사용합니다. (나중에 css에서 설명)
- inline 태그
<strong> 태그
- 강하게 강조할 때 사용합니다.
- <b>태그 보이는 부분에선 같지만 <b>태그는 단순한 텍스트, <strong>태그는 강조된 텍스트로 분석할 때 차이가 있습니다.
- inline 태그
<em> 태그
- 약하게 강조할 때 사용합니다.
- <i>태그와 보이는 부분에선 같지만 <i>태그는 단순한 텍스트, <em> 태그는 약하게 강조된 텍스트로 분석할 때 차이가 있습니다.
- inline 태그
- 샘플코드
1 2 3 4 5 6 | <body> <b>b 태그 : 굵게 표시</b> <i>i 태그 : 기울기</i> <strong> strong 태그 : 강조</strong> <em>em 태그 : 약하게 강조</em> </body> | cs |
- 결과
<ins> 태그
- 텍스트에 밑줄을 표시합니다.
- inline 태그
<del> 태그
- 텍스트에 취소선을 표시합니다.
- inline 태그
- 샘플코드
1 2 3 4 | <body> <ins>밑줄 표시</ins> <del>취소선 표시</del> </body> | cs |
- 결과
<sup> 태그
- 텍스트를 위첨자로 표시합니다.
<sub> 태그
- 텍스트를 아래첨자로 표시합니다.
- 샘플코드
1 2 3 4 5 | <body> 2<sup>2</sup>=4 <br> log<sub>10</sub>10 = 1 </body> | cs |
- 결과
<br> 태그
- 줄을 바꿔주는 태그입니다.
- HTML에서는 여러개의 공백을 입력해도 하나의 공백으로 처리되며, 엔터를 쳐서 라인을 바꿔 작업을 해도 공백으로 표현이 됩니다.
<hr> 태그
- 가로줄을 그려줍니다.
- 샘플코드
1 2 3 4 5 | <body> 내용1 <hr> 내용2 </body> | cs |
- 결과
태그를 복합적으로 사용하기
- 샘플코드
1 2 3 4 5 | <body> <b><i>굵게 기울이기</i></b> <br> <b><del>굵게 취소선</del></b> </body> | cs |
- 결과
과제
- 아래 예시와 같이 출력되도록 코드를 작성 후 실행하고, 작성한 코드를 github에 push하고 URL경로를 보내주세요.
결과 화면
안녕하세요. 제 이름은 홍길동이고, 현재 활빈당 에서 의적활동을 하고 있습니다.
특징으로는 아버지를 아버지서자라서 ㅠㅠ라 부르지 못했고, 형을 형(형이 나빠서)이라 부르지 못했습니다.
문제 : 한 변의 길이가 a인 정사각형의 넓이는?
답 : S = a2
이번 시간에는 HTML 기본 구조에 대해 살표보겠습니다.
HTML은 html, head, body, meta 등 많은 태그들로 구성되어 있습니다. 이러한 태그들은 분류 방법에 따라 다음과 같이 분류 할 수 있습니다.
태그란?
- HTML를 구성하기 위한 요소입니다.
분류 1 : 쌍태그 vs 단일 태그
분류 2 : block 태그 vs inline 태그 vs inline-block 태그
쌍태그 vs 단일 태그
쌍태그 : 괄호처럼 여는 부분과 닫는 부분이 필요한 태그
- 태그 사이에 내용을 포함합니다.
- 괄호의 순서가 꼬이면 계산이 안되는 것처럼, 태그의 열고 닫는 부분이 꼬이면 원하는 배치가 안 될 수있습니다.
- 여는 태그 : <태그명>
- 닫는 태그 : </태그명>
- 종류 : head, body, title, p, div 등
단일 태그 : 닫는 태그가 필요없는 태그
- 종류 : meta, input, img 등
- <태그명> 또는 <태그명/>
block 태그 vs inline 태그 vs inline-block 태그
block 태그
- 앞 태그의 종류와 상관없이 새 라인에서 시작하고, 다음 태그를 새 라인에서 시작하도록 하는 태그
- css나 style 속성을 통하여 가로와 높이를 변경할 수 있는 태그
- 종류 : div, h[1~6], p 태그 등
inline 태그
- 현재 위치에 이어서 작업을 하는 태그
- 태그의 가로와 높이를 변경할 수 없는 태그
- 종류 : span 태그 등
inline-block 태그
- inline 태그와 block태그가 섞인 태그
- 현재 위치에서 이어서 작업을 하며 태그의 가로와 높이를 변경할 수 있는 태그
- 종류 : input 태그 등
이제 본격적으로 각 태그들의 대해 살표보도록 하겠습니다.
<!DOCTYPE>
- 문서 타입을 정의하는 태그입니다.
- 대소문자를 구별하지 않지만 일반적으로 DOCTYPE은 대문자로 사용합니다.
- HTML5의 경우 문서 맨 위에 다음과 같이 입력하면 됩니다.
1 | <!DOCTYPE html> | cs |
<html>
- HTML 문서 전체를 감싸는 태그
1 | <html></html> | cs |
<head>
- HTML 문서의 속성을 지정하기 위한 태그
- 현재 페이지에 대한 정보 및 필요한 파일을 연결하는 작업들을 합니다.
- <head>태그 안에는 <title>, <meta>태그 등을 넣습니다.
1 | <head></head> | cs |
<body>
- HTML 문서의 본문으로 화면에서 보이는 부분을 담당하는 태그로, 다른 태그들을 이용하여 화면을 구성합니다.
1 | <body></body> | cs |
HTML의 기본 구조 예시
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>안녕하세요.</p> </body> </html> | cs |