HTML

숩·2022년 3월 15일

Web

목록 보기

1/5

HTML(Hyper Text Markup Language)

기본 구조

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

h1~h6

제목을 작성할 때 사용
기본적으로 개행(단락 구분)
bold 숫자가 커질수록 글자크기는 작다.

<h1>안녕하세요</h1>
<h2>안녕하세요</h2>
<h3>안녕하세요</h3>
<h4>안녕하세요</h4>
<h5>안녕하세요</h5>
<h6>안녕하세요</h6>

<br>

줄바꿈, 반복기능

<p>

단락구분, 반복안됨

특수문자

1) &nbsp;
	- 브라우저는 공백을 한개만 인식(공백을 여러개 넣고 싶을 때 사용)
2) &lt;
	 - 작다(less than) : <
3) &gt;
	 - 크다(greater than) : >
4) &amp;
	 - ampersand : &

<pre>

content안에 마크업이 있으면 마크업을 인식한다.

<pre>	
	오늘은 
	<u>월요일</u>
	비가 온다!
	<b><i>졸려</i></b>
</pre>

<xmp>

content안에 마크업이 있어도 문자로 인식한다.

<xmp>
	오늘은 
	<u>월요일</u>
	비가 온다!
	<b><i>졸려</i></b>
</xmp>

a태그 : in-line요소

다른 페이지로 이동
현재 페이지내에서 특정 영역으로 이동
mail to 기능
속성 : target="_self | _blank | _top | _parent | 창이름"
target속성은 이동할 페이지가 열릴 창을 뜻함

<a href="http://www.naver.com" target="self">네이버</a><p>
 <a href="http://www.daum.net" target="blank">다음</a><p>
 <a href="http://www.google.com" target="top">구글</a><p>

<img>

- bmp, jpg, gif, png 
- 경로설정 
	: ../ - 상위폴더
    : ./ - 현재폴더 기준
    : / - 최상위 root

<table>

<tr> - 행
<td> - 셀
<th> - 셀 : bold, 가운데정렬 기본

colspan, rowspan은 td 또는 th에 사용

1. 열병합 : colspan="개수"
2. 행병합 : rowspan="개수"

cellspacing : 셀과 셀사이 공백 X

form태그 속성

action="submit"되었을 때 이동할 페이지 설정"
method="전송방식"

get - 입력된 값들을 url주소에 보여지면서 전송되는 형태

구조 : http://domain:port/파일이름?name=value&name=value&...
보안상 주로 Select전용
ex) 게시판 글번호, 페이지번호

post- 전송되는 정보들이 request의 body영역에 숨겨져서 전송된다.

url주소에 노출이 안된다!!!
주로 update, delete, insert일때 많이 사용한다.

name="" 또는 id="" - 주로 JavaScript 또는 jQuery에서 form을 접근할 때 필요

input type

name
: submit할때 값을 전송하기 때문에 필수 속성
radio
: 반드시 그룹이 되어야 할 영역의 name을 동일하게 해줘야 단일 선택이 가능하다.

<input type="radio" name="gender" value="man" checked="checked">남자
<input type="radio" name="gender" value="woman">여자

checkbox
: name이 같아도 달라도 상관없다 - 멀티선택가능(주로 이름을 동일하게 한다.)
: 전송하기 전 유효성 체크를 위해 js를 실행하고 전송하는 경우가 많은데, js에서 checkbox를 접근할 때 이름이 같아야 배열의 형태로 사용할 수 있기 때문!

<input type="checkbox" name="hobby" value="등산">등산 
<input type="checkbox" name="hobby" value="수영" checked="checked">수영  
<input type="checkbox" name="hobby" value="낚시">낚시
<input type="checkbox" name="hobby" value="골프" checked="checked">골프  
<input type="checkbox" name="hobby" value="탁구">탁구

hidden
: 화면에 노출은 되지 않지만 전송될 때 내부적으로 넘겨야 할 데이터가 있을 때 사용
: 주로 개발자가 back단에서 넘어오는 데이터를 받아서 처리하는 용도로 사용

<input type="hidden" name="addr" value="seoul">
<input type="hidden" name="message" value="하잉">
<input type="hidden" name="pageNum" value="3">

submit
: 전송버튼
: action에서 설정한 주소로 이동을 하면 method방식으로 폼 안에 있는 모든 name=value를 전송

<input type="submit" value="전송" name="sub">

reset
: 취소버튼
: 클릭하면 모든 데이터 초기화

<input type="reset" value = "취소">

눌러지는 버튼 종류

button
: 눌려지는 형태이지만 기능은 전혀 없다.

<input type="button" value="클릭">

file
: 파일 첨부할 때 사용하는 것으로 name 필수
: 이 경우는 반드시 method 방식은 post, form요소의 속성으로 enctype="multipart/form-data"설정이 필수이다.

<input type="file" name="file">

button type

button, reset, submit
type속성 생략시 기본 submit
만약, form요소가 없이 <button>을 사용하게 되면 기본 button

<button type="button">눌러봐1</button>
<button type="reset">눌러봐2</button>
<button type="submit">눌러봐3</button>

HTML5에 추가된 form type의 attribute들

<input type="date" name="birth" min="2022-03-01" max="2022-04-06"><p>
<input type="number" name ="age" placeholder="숫자만입력"><p>
<input type="color" name="bgColor"><p>
<input type="email" name="email" required="required"><p> <!-- 유효성체크를 해줌 -->
<input type="range" name="test"><p>
<input type="text" name="jumin" required="required" placeholder="주민번호입력"><p>

<ul>, <ol> 태그

ul(unorder list)
: type - disc, circle, square

<ul type="circle">
	<li>과일
		<ol>
			<li>딸기</li>
			<li>복숭아</li>
			<li>사과</li>
			<li>포도</li>
		</ol>
	</li>
	<li>야채</li>
	<li>고기</li>
</ul>

ol(order list)
: type - 숫자, a, A, i, I
: ex) start = "5" -> 5번부터 시작

<ol>
	<li>과일
		<ol>
			<li>딸기</li>
			<li>복숭아</li>
			<li>사과</li>
			<li>포도</li>
		</ol>
	</li>
	<li>야채</li>
	<li>고기</li>
</ol>

iframe

해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.
target으로 iframe 영역에 새 화면 갱신 가능!

<table>
    <tr>
        <td rowspan="3" width="150">
           	<a href="http://www.naver.com" target="a">naver</a>
           </td>
    </tr>
    <tr>
        <td>
            <iframe src="http://www.daum.net" name="a" frameborder="0" width="100%"></iframe>
        </td>
    </tr>
</table>

숩

다음 포스트

HTML

Web

HTML(Hyper Text Markup Language)

기본 구조

h1~h6

<br>

<p>

특수문자

<pre>

<xmp>

a태그 : in-line요소

<img>

<table>

form태그 속성

input type

button type

HTML5에 추가된 form type의 attribute들

<ul>, <ol> 태그

iframe

CSS

0개의 댓글

관련 채용 정보