'WEB/HTML' 카테고리의 글 목록

META 태그 속성

http-equiv="항목명"
웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다.

content="정보값"
meta 정보의 내용을 지정합니다.
name="정보 이름"
몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능을 합니다.

META 태그 사용법

<html>
    <head>
        <meta name="subject" content="toy code project" />
        <meta name="description" content="디자이너, 퍼블리셔, 프론트엔드, 백엔드" />
        <title>TOY CODE</title>
    </head>
    <body>
        //...code
    </body>
</html>

META 태그 종류

KEYWORD
검색이 되는 단어들을 정의합니다.

 <meta name="Keywords" content="디자이너, 퍼블리셔, 프론트엔드, 백엔드" />

DESCRIPTION
검색 결과에 표시되는 단어를 정의합니다.

  <meta name="Description" content="디자이너, 퍼블리셔, 프론트엔드, 백엔드" />

ROBOTS
검색 로봇을 제어합니다.
- All (Default) : 'index, follow' 를 지정한 것과 같습니다.
- None : 'noindex, nofollow' 를 지정한 것과 같습니다.
- Index : 이 페이지를 수집 대상으로 지정합니다.
- Follow : 이 페이지를 포함, 링크가 걸린 모든 페이지를 수집 대상으로 지정합니다.
- Noindex : 이 페이지를 수집 대상에서 제외합니다.
- Nofollow : 이 페이지를 포함, 링크가 걸린 모든 페이지를 수집 대상에서 제외합니다.
- 아래와 같은 속성도 사용되지만 웹표준에서 인정하지 않는, 권고되지 않은 방식입니다.
- Noarchive : 그 페이지를 캐시하지 않습니다.
- Noimageindex : 그 페이지에 포함된 이미지를 검색 대상에서 제외합니다.
- Noimageclick : 그 페이지에 포함된 이미지의 링크를 방지합니다.
```
<meta name="Robots" content="index, follow" />
```
CONTENT-TYPE
문자 인코딩을 설정합니다.
- EUC-KR / ISO-2022-KR : 한국어 문자 인코딩
- EUC-JP / ISO-2022-JP : 일본어 문자 인코딩
- GB2312 : 중국어 문자 인코딩
- ISO-8859-1 : 북미, 서부유럽, 라틴 아메리카, 카리브해, 캐나다, 아프리카
- ISO-8859-2 : 동유럽
- ISO-8859-3 : 남동유럽, 에스페란토
- ISO-8859-4 : 스칸디나비아, 발트 연안국
- ISO-8859-5 : 불가리아어, 벨로루시어, 러시아어, 마케도니아
- ISO-8859-6 : 아랍문자
- ISO-8859-7 : 현대 그리스문자 언어뿐 만 아니라 수학 기호
- ISO-8859-8 : 히브리어 문자를 사용하는 언어
- ISO-8859-9 : 터키어
- ISO-8859-10 : 에스키모, 북유럽 언어
- UTF-8, UTF-16, UTF-32 : 모든 언어의 문자를 지원하는 인코딩
- ISO-* 타입의 문자 설정은 크기의 제한이 있습니다. 또한 다국어 환경 ( 영문과 중문, 일문, 한글을 함께 사용하는 경우 )에서 호환되지 않기 때문에 유니코드 컨소시엄이 개발한 유니코드 표준 문자로 지정해야합니다. ( 대표적으로 UTF )
```
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
```
DATE
사이트를 생성한 날짜를 명시해 줍니다.사용할 때 content '+09:00' 은 GMT(그리니치 표준시)로 부터의 시차이며, 한국은 '+09:00', 미국 동부는 '-05:00'(서머타임 때에는 -04:00)이 되며 나라/지역에 따라 결정됩니다.
```
  <meta name="Date" content="2021-08-04T07:45:37+09:00" />
```

SUBJECT
홈페이지의 주제를 지정해 줍니다.

  <meta name="Subject" content="TOY CODE PROJECT" />

TITLE
홈페이지의 제목을 지정해 줍니다.
```
  <meta name="Title" content="TOY CODE" />
```
AUTHOR
페이지를 제작한 제작자 이름을 지정해 줍니다.
```
  <meta name="Author" content="eaim93k" />
```
PUBLISHER
페이지를 제작한 제작사의 명칭을 지정해 줍니다.
```
  <meta name="Publisher" content="toy project" />
```
OTHER AGENT
페이지의 책임자를 지정해 줍니다.
```
  <meta name="Other Agent" content="eaim93k" />
```
GENERATOR
페이지의 제작도구를 지정해 줍니다.
```
  <meta name="Generator" content="VUE.JS 3.X" />
```

EMAIL, REPLAY-TO
이메일 주소를 지정해 줍니다.

  <meta name="Replay-To" content="email@eamil.com" /> <meta name="Email" content="email@eamil.com" />

FILENAME
이 페이지의 파일 이름을 지정해 줍니다.
```
  <meta name="Filename" content="index.html" />
```

LOCATION
회사의 위치를 지정해 줍니다.

  <meta name="Location" content="서울특별시" />

DISTRIBUTION
이 페이지를 배포한 사람을 지정해 줍니다.
```
  <meta name="Distribution" content="eaim93k" />
```
COPYRIGHT
이 페이지의 저작권을 지정해 줍니다.
```
  <meta name="Copyright" content="eaim93k" />
```

REFRESH
새로고침이나 페이지를 전환할 때 사용합니다.

  <!-- 120초 후에 페이지를 새로고침 -->
  <meta name="Refresh" content="120" />
  <!-- 10초 후에 페이지를 지정 URL로 이동 -->
  <meta name="Refresh" content="10;url=naver.com" />

PAGE-ENTER
페이지 진입시 전환 효과를 지정해 줍니다.
- Box out : 네모난 박스가 안쪽에서 바깥쪽으로
- Circle in : 원이 바깥에서 안쪽으로
- Circle out : 원이 안쪽에서 바깥쪽으로
- Wipe up : 이미지의 아래에서 위쪽으로 수직 이동
- Wipe down : 이미지의 위에서 아래쪽으로 수직 이동
- Wipe right : 이미지의 왼쪽에서 오른쪽으로 수평 이동
- Wipe left : 이미지의 오른쪽에서 왼쪽으로 수평 이동
- Vertical blinds : 수직 블라인드가 쳐지는 형태로 변환
- Horizontal blinds : 수평 블라인드가 쳐지는 형태로 변환
- Checkerboard across : 바둑판 형태의 격자가 왼쪽에서 오른쪽으로 생성
- Checkerboard down : 바둑판 형태의 격자가 위에서 아래로 생성
- Random dissove : 안개와 비슷한 형태로 전환
- Split vertical in : 왼쪽과 오른쪽 끝에서 중앙으로 수직 이동
- Split vertical out : 중앙에서 양쪽 끝으로 수직 이동
- Split Horizontal in : 양쪽에서 중앙으로 수평 이동
- Split Horizontal out : 중앙에서 양쪽끝으로 수직이동
- Strips left down : 대각선 형태로 오른쪽 상단에서 왼쪽 하단으로 이동
- Strips left up : 대각선 형태로 오른쪽 하단에서 왼쪽 상단으로 이동
- Strips right down : 대각선 형태로 왼쪽 상단에서 오른쪽 하단으로 이동
- Strips right up : 대각선 형태로 왼쪽 하단에서 오른쪽 상단으로 이동
- Random bars horizontal : 수평선이 무작위로 생성
- Random bars vertical : 수직선이 무작위로 생성
- Random : 임의로 생성
```
<meta name="Page-Enter" content="revealtrans(Duration=1,Transition=12)" />
```

저작자표시

'WEB > HTML' 카테고리의 다른 글

[HTML] 버튼 클릭으로 이미지 다운로드 (0)	2017.12.27
[HTML] link 태그 사용법 (0)	2017.12.12
[HTML] 메타(meta) 태그 (0)	2017.12.12
[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그) (0)	2017.12.05
[HTML] class와 id의 정의 (0)	2017.12.05

버튼을 a 태그로 감싸고 a태그에 download를 붙여준다.
ex) <a href="이미지 경로" download><button>이미지 다운로드</button></a>

이렇게 해주면 어디서든 이미지가 다운로드 가능하다.

단, HTML5 이상의 버전에서만 사용이 가능하다.

저작자표시

'WEB > HTML' 카테고리의 다른 글

[HTML] META 태그 (0)	2021.11.29
[HTML] link 태그 사용법 (0)	2017.12.12
[HTML] 메타(meta) 태그 (0)	2017.12.12
[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그) (0)	2017.12.05
[HTML] class와 id의 정의 (0)	2017.12.05

html의 head 태그에 보면 link 태그가 많이 쓰인다는 걸 알수있다.

link를 간단하게 설명하면 말 그대로 '외부에 있는 문서를 연결해준다.' 라는 뜻이다.

link 태그의 사용법으로 기본적으로 <head></head> 사이에 사용해야한다.
중복된 link 태그 사용이 가능하고 <link></link> 형식이 아닌 <link /> 형식으로 닫는다.

rel 속성

이건 문서와 외부에서 불러올 연결관계를 설정하는 것이다.
<link rel="stylesheet"> 가 가장 기본적인데 이건 스타일 시트로써 이 문서를 불러오겠단 의미이다.

stylesheet : 스타일 시트로 연결 ( .css)
alternate : 문서 대안 ( 프린트나 번역 사이트 )로 연결
ex) <link rel="alternate" type="application/test+xml" href="/print/test">
author : 저작자로 연결
help : 도움말로 연결
license : 문서의 저작권 정보로 연결
search : 검색 도구로 연결

rel 속성들이다. 주로 높은 빈도로 사용되는 rel 속성은 stylesheet이다.
개인적으로 일반 적인 홈페이지를 만들때에는 다른 속성들은 별로, 거의 사용되지 않는다.

type 속성

type은 연결문서의 MIME 유형을 나타낸다.

css 파일일 경우 type="text/css"
js 파일일 경우 type="text/javascript"
xml 파일일 경우 type="application/txml"

주로 이렇게 3가지 속성이 많은 빈도를 차지하며, 더 MIME 유형을 보려면

https://www.sitepoint.com/mime-types-complete-list/

이 사이트를 참고 바란다.

href 속성

연결될 문서를 설정해주는 곳이다. 경로 설정에는 상대경로와 절대경로가 있다.

상대경로의 경우에는 현재 머물고 있는 페이지부터 시작해서 경로를 설정하는 방법이고,
절대경로의 경우에는 이 페이지를 가지고 있는 최상위 경로부터 시작해 설정하는 방법이다.

폴더의 위치가
/home/eeiim/common/css.css 에 css 파일이 있고
/home/eeiim/blog/style.html에 html 파일 있다고 가정한다면

style.html의 위치에서 상대 경로로 css파일을 불러오려면
href="../common/css.css"로 불러와야하는 것이고,
절대 경로로 불러오려면
href="/home/eeiim/common/css.css" 이렇게 사용하면 된다.

저작자표시

'WEB > HTML' 카테고리의 다른 글

[HTML] META 태그 (0)	2021.11.29
[HTML] 버튼 클릭으로 이미지 다운로드 (0)	2017.12.27
[HTML] 메타(meta) 태그 (0)	2017.12.12
[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그) (0)	2017.12.05
[HTML] class와 id의 정의 (0)	2017.12.05

html을 작성할때 많은 meta 태그가 사용된다.
특히 검색엔진에 등록할 때 meta 태그를 적어주면 검색에 관련된 키워드, 설명등등 용이하게 작용된다.

검색엔진에 등록할 경우

<meta name="keywords" content="웹 코딩의 기본" />
<meta name="description" content="웹의 관련된 코딩을 설명을 해주는 블로그" />
<meta name="author" content="이아임">

meta name="keywords" 같은 경우는 사용자가 검색했을 경우 이 키워드를 통해 검색이 된다.
meta name="description" 일 경우에는 그 키워드로 검색 후 이 사이트가 어떤 사이트 인지 설명을 적어주는 곳이다.
meta name="author" 일 경우에는 저작자의 표시다.

하지만 요새 사이트 같은 경우는 이 meta 태그를 악용하는 사례가 많기 때문에 전혀 다른 태그를 사용한다.
keywords 메타 태그는 무시하는 경우가 많지만 description과 author 메타 태그를 수집해서 검색에 반영하기 때문에 잘 작성해주는게 좋다.

description 메타 태그 내에 페이지 요약을 넣을 때 가급적 20단어를 넘지 않아야 한다.
검색 엔진은 description을 적당한 크기까지만 읽고 나머지는 임의로 무시하기 때문이다.

만약 지극히 개인적인 사이트이고, 사이트가 검색엔진에 노출되기를 원하지 않는다라고 한다면, robots 네임을 사용하면 되는데

<meta name="robots" content="index,follow" />
- 모든 걸 허용
<meta name="robots" content="noindex,follow" />
- 문서는 가져가지 않는 대신에 링크를 가져감
<meta name="robots" content="index,nofollow" />
- 문서를 가져가는 대신에 링크를 가져가지 않음
<meta name="robots" content="noindex,nofollow" />
- 문서와, 링크 둘가 가져가지 않음.

위에서 보면 대충은 이해가 될 것이다.
index의 경우 문서 허용, follow 일 경우 링크 허용이다.
index : 로봇이 문서 가져가기 허용
follow : 로봇이 링크 가져가기 허용
noindex : 로봇이 문서 가져가기 비허용
nofollow : 로봇이 링크 가져가기 비허용

웹 주소가 바꼇을 경우에는
<meta http-equiv="refresh" content="5; url=http://naver.com/" />

처럼 5초후에 naver.com으로 넘어가줘라란 뜻이다.

글씨가 깨질경우 인코딩 변경
필자가 개발하는 환경은 UTF-8 환경이기 때문에 utf-8로 포맷을 맞춘것이다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

html5에서는
<meta charset="utf-8">
로만 사용해도 된다.

원하는 입맛대로 뒤에 있는 charset을 바꿔주면 되겠다.
그리고 여기서 http-equiv가 있다.
서버가 클라이언트로부터 온 http request를 접수한 다음 http response를 다시 웹 브라우져로 보내준다.
그 http response의 헤더를 각 html 문서 별로 따로 설정할 수 있는 것이 http-equiv 메타 태그라고 이해하면 된다.

http-equiv 속성의 경우

Content-Type, refresh, default-style

이 있는데 Content-Type의 경우 문자 포맷 설정을 할때 사용

refresh 같은 경우는 요즘 웹 표준에서 권장하지 않는 방식이다. 그러므로 잘 사용하지 않는다.

default-style 같은 경우는 선호하는 스타일 시트 선택이다.

저작자표시

'WEB > HTML' 카테고리의 다른 글

[HTML] 버튼 클릭으로 이미지 다운로드 (0)	2017.12.27
[HTML] link 태그 사용법 (0)	2017.12.12
[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그) (0)	2017.12.05
[HTML] class와 id의 정의 (0)	2017.12.05
[HTML] 모바일 확대 방지 (0)	2017.11.29

일단 주석부터 알아보겠다.

HTML에서는 주석이 // 이거나 /* */ 이것들이 안먹힌다.

HTML에는 주석이 다르게 적용된다.

 주석은 이런식으로 달면된다.

띄어쓰기의 경우에는 한칸 스페이스바 하면 먹히긴 한다.

하지만 100번 스페이스바로 띄워도 적용이 안되는걸 볼수 있다.
그 이유는 HTML에서 띄어쓰기 코드가 따로있기 때문이다.

바로   이다.
세미콜론까지 적용해야된다.

또, 선 긋는 태그는
hr 태그이다.

hr태그의 속성 변경 방법으론
style 시트에 hr 태그를 직접 적용하셔도 되고, 태그 안에 인라인 스타일로 넣어도 된다.
또 hr 속성으로 noshade 속성이 있는데, 이건 음영 효과 없이 선을 긋는다는 것이다.

저작자표시

'WEB > HTML' 카테고리의 다른 글

[HTML] link 태그 사용법 (0)	2017.12.12
[HTML] 메타(meta) 태그 (0)	2017.12.12
[HTML] class와 id의 정의 (0)	2017.12.05
[HTML] 모바일 확대 방지 (0)	2017.11.29
[HTML] <table> 태그 (0)	2017.11.27

특정 문단에만 및 태그에만 속성이나 스크립트를 적용하려면 클래스를 사용하면 된다.
정의하는 방법은 .class_name 같이 .으로 정의한다.
클래스는 모든 엘리먼트 태그에 여러개, 다중으로 사용이 가능하다.

<style type="text/css">
span.red {color:red}
</style>
<div class="red">class를 정의한 곳에만 red 효과 부여</div>
<div><span class="red">red</span>효과 부여 테스트</div>

span 태그에 red라는 클래스가 정의가 되면, red가 정의된 엘리먼트에는 스타일이 적용이 된다.
하지만 div에 적용된 red 클래스는 적용되지 않는다.

또한 특정 HTML 요소에 적용시키지 않고 독립적으로 클래스를 사용해도 된다.
이럴 경우 red class가 지정되어있는 모든 엘리먼트 태그에 스타일이 적용이 된다.
<style type="text/css">
.color_red{color:red}
</style>
<div class="color_red">class를 정의한 곳에만 red 효과 부여</div>
<div><span class="color_red">red</span>효과 부여 테스트</div>

이와 같이 클래스를 독립적으로 지정하는 방법이 편리하므로 더 많이 사용된다.

아이디(id) 선택자
아이디는 클래스와 구분을 지어놔야하기 때문에 #을 이용하여 정의한다.
클래스와 다르게 아이디 같은 경우에는 고유성을 가지고 있기 때문에 한 html 파일에 하나의 id만 정의가 가능하다.
<style type="text/css">
#id_red {color:red}
</style>
<div class="id_red">id를 정의한 곳에만 red 효과 부여</div>
<div><span id="id_red">red</span>효과 부여 테스트</div>

홈페이지를 비슷하게 만들고 똑같은 레이아웃이 있을 경우에는 class를 사용하는게 통상적이다.

그리고 클래스가 정의되고 사용할 때 스타일 적용 순서는 css에서 제일 나중에 선언된 것이 적용된다.

즉,

<style type="text/css">
.red {color:red}
.blue {color:blue}
</style>
<div class="red blue">클래스 정의 값에 따른 CSS 적용 순서</div>
<div class="blue red">클래스 정의 값에 따른 CSS 적용 순서</div>

이렇게 넣었을 경우에 blue가 제일 나중에 적용된 css 이기 때문에 위 아래 div에 둘다
color: blue 값이 적용되게 되는 것이다.

정책상 특정 부분에 밑줄을 넣어라! 라고 하는 부분에는 class로 text-decoration을 주면 되는 것이다.

저작자표시

'WEB > HTML' 카테고리의 다른 글

[HTML] 메타(meta) 태그 (0)	2017.12.12
[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그) (0)	2017.12.05
[HTML] 모바일 확대 방지 (0)	2017.11.29
[HTML] <table> 태그 (0)	2017.11.27
[HTML] <select> 태그 (0)	2017.11.27

width : 넓이 - device-width | N px (200~10000 px, default 980 px)
height : 높이 - device-height | N px (223~10000 px)

initial-scale : 초기 확대/축소 배율
minimum-scale : 최소 축소 배율 - N (0~10, default 0.25)
maximum-scale : 최대 확대 배율 - N (0~10, default 1.6)

user-scalable : 확대/축소 가능 여부 - yes | no (default yes)

'WEB > HTML' 카테고리의 다른 글

[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그) (0)	2017.12.05
[HTML] class와 id의 정의 (0)	2017.12.05
[HTML] <table> 태그 (0)	2017.11.27
[HTML] <select> 태그 (0)	2017.11.27
[HTML] <form> 태그 (0)	2017.11.27

<table> 태그는 엑셀처럼 표로 만드는 것이다.

게시판의 글 목록이나, 글의 간단한 목록들은 거의 테이블로 작성되지만
요즘은 <ul><li> 태그로 대체되고 있는 실적이다..

<table> 태그에 기본적 하위 태그는 <thead> <tbody> <tr> <th> <td> 태그가 있다.

<thead>는 머릿말, 표의 제목을 쓰는 곳이다.
<tbody>는 몸통, 즉 내용을 뜻한다.

<tr>은 가로줄을 만드는 역할을 하는 태그이고,
<th>는 표의 제목에 들어가는 태그이고, 세로줄을 만드는 역할을 한다. (기본으로 굵은 글씨체와 중앙 정렬을 지원한다.)
<td>는 몸통에 들어가는 태그이고, 세로줄을 만드는 역할을 한다. (기본으로 기본 글씨체와 왼쪽 정렬을 지원한다.)

그 다음은 <table> 태그 속성이다.

colspan : 가로줄을 합치는 역할
rowspan : 세로줄을 합치는 역할
border : 테두리를 그려주는 역할
bgcolor : 배경색을 설정하는 역할
width : 가로 크기 지정 역할
height : 세로 크기 지정 역할
cellpadding : 셀과 경계선 사이의 여백 설정
cellspacing : 셀과 셀사이의 여백 설정
align : 가로 정렬
valign : 세로 정렬

등등이 있다.
하지만 html5에서는
width, height, cellpadding, cellspacing, align, valign, bgcolor, border 등을 지원하지 않는다.

위에 적혀있는 속성들은 css에서 설정해주는 것이 바람직하다.

이 예제는 예제 사이트에서 정확히 알아보겠다.

http://hyoseung930.cafe24.com/bolg_poster/table_test_page.php

'WEB > HTML' 카테고리의 다른 글

[HTML] class와 id의 정의 (0)	2017.12.05
[HTML] 모바일 확대 방지 (0)	2017.11.29
[HTML] <select> 태그 (0)	2017.11.27
[HTML] <form> 태그 (0)	2017.11.27
[HTML] <input> 태그의 type 속성 (0)	2017.11.27

<select></select> 태그는 클릭하면 메뉴가 나타나 선택하는 박스이다.

기본적으로 값을 선택하기 위해선 중간에 <option>이 필요하며 <option>의 value 값으로 <select> 변수 값이 정해진다.

<select>는 기본적으로 날짜중에 월이나 일만 선택하거나, 나이, 휴대폰 번호 앞자리 선택 등
다양한 곳에서 사용된다.

<select> 박스에서 value 값을 한글로 줘도 되지만 되도록이면 영어로 주도록한다.

<select name="select_box" id="select_box" onChange="change_event(this.value);">
<option value="number_1_data">첫번째 데이터</option>
<option value="number_2_data">두번째 데이터</option>
<option value="number_3_data">세번째 데이터</option>
<option value="number_4_data">네번째 데이터</option>
</select>

예시 페이지에서 가져온 <select>박스문의 기본이다.

<select>박스에서는 주로 onChange 이벤트를 많이 사용한다.
<option>이 변경되었을 경우 스크립트를 실행해준다는 내용이다.

this.value 일 경우 현재 <select> 박스가 선택한 <option>의 value 값을 가져간다는 뜻이다.
좀 더 정확한건 예시 페이지에서 보도록 하겠다.

http://hyoseung930.cafe24.com/bolg_poster/select_test_page.php

'WEB > HTML' 카테고리의 다른 글

[HTML] 모바일 확대 방지 (0)	2017.11.29
[HTML] <table> 태그 (0)	2017.11.27
[HTML] <form> 태그 (0)	2017.11.27
[HTML] <input> 태그의 type 속성 (0)	2017.11.27
[HTML] <span> 태그 (0)	2017.11.27

<form>은 게시글이나 로그인 등등 값을 post 및 get으로 넘길 때 사용되기 때문에
꼭 알아두는 것이 좋다.

기본적인 베이스는 php와 병행하면서 사용하도록 하겠다.

<form>은 다양한 속성이 있다.

<form name="text_test_form" method="post" onsubmit="return form_submit()">

가장 기본적으로 써주는 속성들이다.

name은 스크립트에서 form 값을 가져올때 사용되고, method는 무엇으로 넘겨줄지 선택하는 속성이다.
그리고 onSubmit은 스크립트에서 체크할 것을 체크하고 return 값을 다시 받아 넘겨주는 역할을 한다.

그리고 action 속성을 넣어주고 url을 입력하면 앞서 포스팅한
<input type="submit"> 속성을 클릭할 경우 url로 이동하는 역할을 한다.

만약 위 예시처럼 action을 넣어주지 않는 다면 이 페이지로 다시 로딩이 되는 것이기 때문에
페이지를 굳이 변환하지 않고 사용하려면 action을 넣어주지 않아도 된다.

PHP일 경우에는 action="<?=$PHP_SELF?>" 를 넣어줘도 form이 있는 페이지로 넘어오게 된다.

예시를 보자.

http://hyoseung930.cafe24.com/bolg_poster/form_test_page.php

'WEB > HTML' 카테고리의 다른 글

[HTML] <table> 태그 (0)	2017.11.27
[HTML] <select> 태그 (0)	2017.11.27
[HTML] <input> 태그의 type 속성 (0)	2017.11.27
[HTML] <span> 태그 (0)	2017.11.27
[HTML] <p>와 <br> 태그 (0)	2017.11.27

이아임의 블로그

[HTML] META 태그

META 태그 속성

META 태그 사용법

META 태그 종류

'WEB > HTML' 카테고리의 다른 글

[HTML] 버튼 클릭으로 이미지 다운로드

'WEB > HTML' 카테고리의 다른 글

[HTML] link 태그 사용법

'WEB > HTML' 카테고리의 다른 글

[HTML] 메타(meta) 태그

'WEB > HTML' 카테고리의 다른 글

[HTML] 주석 및 띄어쓰기, 선긋기(hr 태그)

'WEB > HTML' 카테고리의 다른 글

[HTML] class와 id의 정의

'WEB > HTML' 카테고리의 다른 글

[HTML] 모바일 확대 방지

'WEB > HTML' 카테고리의 다른 글

[HTML] <table> 태그

'WEB > HTML' 카테고리의 다른 글

[HTML] <select> 태그

'WEB > HTML' 카테고리의 다른 글

[HTML] <form> 태그

'WEB > HTML' 카테고리의 다른 글

+ Recent posts

티스토리툴바