jacob's blog

form 태그 / entype 속성

<소스코드 예>

파일을 업로드 할때,

<form>태그에서 entype="multipart/form-data"라는 애트리뷰트를 반드시 써야한다.

그렇게 하지 않으면, 웹 서버로 데이터를 넘길때 파일의 경로명만 전송되고 파일 내용이 전송되지 않기 때문이다.

그리고 이때, method 애트리뷰트에는 'POST' 값을 지정해야 함

** <form>태그의 속성인 method, action, enctype 등은 입력받은 데이터를 어떻게 처리할 것인지 세부적으로 설정하는 데 사용한다.

  method는 전송 방식,

  action은 전송 목적지,

  enctype은 전송되는 데이터 형식을 설정.

** enctype

enctype 속성은 다음 세가지의 값으로 지정될 수 있다.

1. application/www-form-urlencoded

디폴트값이다. enctype을 따로 설정하지 않으면 이 값이 설정된다.

모든 문자열(폼데이터)은 서버로 전송되기 전에 인코딩된다.(공백은 "+"심볼로 변환되며, 특수문자는 ASCII 16진수로 변환된다.) 

2. multipart/form-data

파일이나 이미지를 서버로 전송할 경우 이 방식을 사용한다.

문자열이 인코딩되지 않는다. 이 속성은 보통 파일 업로드를 할 때 사용한다.

3. text/plain

이 형식은 인코딩을 하지 않은 문자 상태로 전송된다.

공백을 "+"심볼로 변환하며, 특수문자는 변환되지 않는다. 잘 사용되지 않는 속성이다.

출처 : 

xorms0707.tistory.com/29

m.blog.naver.com/PostView.nhn?blogId=kgw1988&logNo=220881043540&proxyReferer=https:%2F%2Fwww.google.com%2F

안녕하세요 오늘은 form 태그를 정리해보도록 하겠습니다.

일반적으로 form태그를 사용하는 이유는

사용자가 입력하거나 선택한 정보를 서버로 전송하기 위해서 쓰는 태그입니다.

​

간단하게 로그인 할때 아이디와 패스워드의 공간을 만든다고 생각하시면 됩니다.

form태그 예시화면

form 태그의 속성

폼 태그 속성에는 name, action, method, target 등이 있습니다.

​

<form action = "/success.html" accept-charset="utf-8" name = "form_info" method = "get" target="_blank">

​

action : 폼 전송 버튼을 눌렀을때 이동하는 페이지의 경로를 지정해주면 됩니다.

name : 폼을 식별하기 위한 이름을 여기에 작성합니다.

accept-charset : 폼 전송시 사용할 문자 인코딩을 지정합니다.

(즉 한국어나 영어와 같은 언어 설정을 해준다고 생각하시면 됩니다.).

target : action에서 지정한 파일을 현재 창이 아닌 다른 위치에 열도록 지정합니다.

method : 폼을 서버에 전송할 타입을 정합니다. (GET 또는 POST)

​

GET = 파라미터를 정보를 전송 URL에 보이게 전송시키는 방법

(보안이 필요 없고 파라미터 정보를 한눈에 보기위해 사용)

​

POST = 파라미터를 정보를 전송 URL에 보이지 않게 전송시키는 방법

(보안이 필요한 로그인이나 이런 류의 정보를 처리할때 사용)

​

​

<input> 태그

이번에는 form태그안에서 사용하는 input 태그에 대해서 말씀드리겠습니다.

​

​

input 태그의 속성

​

type의 종류

text

<input type = "text" name = "name" required placeholder="이름을 입력하세요"/>

대부분 텍스트를 넣을때 기본적으로 사용하는 타입입니다.

password

<input type = "password" name = "password"/>

로그인화면에서 패스워드를 입력 할때 사용합니다.

radio

남<input type = "radio" name = "gender" /> 여<input type = "radio" name = "gender" />

보통 다수의 선택에서 하나만 선택을 할때 사용하는 타입입니다.

checkbox

연예<input type = "checkbox" name = "checkbox1" /> 스포츠<input type = "checkbox" name = "checkbox2" /> IT<input type = "checkbox" name = "checkbox3" />

다수의 선택을 가능하게 하고자 할때 사용하는 타입입니다.

file

<input type = "file" name = "file" accept=".gif, .jpg, .png" />

파일을 첨부할때 사용하는 타입이다

​

accept 속성은 해당 확장자로만 파일을 선택할수 있게합니다.

audio/* 은 모든 오디오 파일을 보여줍니다.

video/* 은 모든 비디오 파일을 보여줍니다.

image/* 은 모든 이미지 파일을 보여줍니다.

submit & reset

<input type = "submit" value = "저장"/> <input type = "reset" value = "초기화"/>

submit 은 form의 데이터를 전송하는 버튼이 생성됩니다.

reset은 폼안의 데이터를 초기화 시켜줍니다.

button

<input type="button" onclick="alert('클릭했습니다.')" value="눌러주세요!">

버튼을 생성해주고 클릭 이벤트는 onclick으로 사용가능하다

출처 : 

blog.naver.com/gksjs3468/221893489322

html 문서에는 엄청 많은 태그가 있다.

곧 뭐가 뭔지 헷갈리고 혼란스러워질 것이다.

여기 보이는 것처럼

특히 div가 엄청 많으면 헷갈리게 된다.

그래서 각 div가 무엇을

뜻하는지 알려줄 필요가 있다.

​

예를 들면 섹션 그리고 헤더를 만들어보자.

그 헤더 안에 h1을 만들어보자.

하단에 div를 만들어보자.

그 안에 헤더를 또 만들고

자 이제 이 2개의 헤더를 구분할 수 있는 방법이 없다.

​

2개의 헤더 모두 같은 명칭 header를 갖고 있으니

새로운 이름을 지어줘야 한다.

이건 굉장히 중요하다.

​

왜냐하면 나중에 css를 할 때

이 헤더를 빨간색이고

이건 파란색이고

분리해서 명령을 내려야 하기 때문이다.

그래서 이름을 짓는 것은 엄청 중요하다.

​

이걸 하는 방법은 2가지가 있다.

첫 번째는 id이고,

두 번째는 class라고 한다.

​

​

id와 class는 이렇게 생겼다.

​

각 element(요소)마다

id는 한 개만 가질 수 있다.

왜냐하면 id는 고유값이기 때문이다.

이건 마치 나의 여권번호, 주민등록번호

같은 것이다.

​

반면에 class는 내 이름처럼 반복될 수 있다.

실제로 많은 사람들의 이름은

나의 이름 와 같은 경우가 많다.

​

다시 반복하면

id는 고유하고

class는 여러 개가 존재할 수 있다.

​

그래서 예를 들면,

이 헤더는 고유한 id를 갖고 있다.

그리고 동일한 속성의 class를 갖고 있을 수 있다.

​

헤더의 배경색을 class 속성 값으로

파란색이라고 하자.

그러면 2개의 헤더가 같은 클래스를

사용하기 때문에

둘 다 파란색으로 나올 것이다.

​

그러나 모두 같은 푸른 배경색을

가지고 있지만

하나는 사이즈가 크고

나머지 하나는 작다고 말할 수 있다.

​

즉 2개의 헤더 모두 같은 class를 갖고 있지만

각기 다른 id를 갖고 있다.

​

class는 반복해서 여러 번 사용할 수 있다.

동일한 속성이 있을 때마다 계속!

​

나는 주로 class를 많이 사용한다.

왜냐하면 웹사이트 상에는

아예 고유한 element는 많이 없다.

​

예를 들면 채팅창은 계속 반복된다.

메뉴바는 아이콘이 많고 계속 반복되기 때문에

id는 고유하기 때문에 아마도

헤더 그리고 내비게이션에 사용할 것이다.

​

하지만 채팅 메시지들은 class 들이다.

계속 반복되니까!

​

정리하자면

고유한 element를 사용할 때

id를 적용하고

​

반면에 고유하지 않은

계속 반복되는 element의 경우엔 class를 적용한다.

출처 :

blog.naver.com/cksdn4214/222004286700

​

semantic 태그, non-semantic 태그, div, span 

이번 글에서는

semantic tag 와 non-semantic tag에 대해

얘기해보겠다.

​

간단하게 설명하자면

1. semantic 뜻은 의미가 있는 태그이고

​

2. non-semantic 은 아무 의미가 없는

태그를 뜻한다.

이게 무슨 말일까?

​

예를 들면 h1 태그는 의미가 있다.

이것은 제목이라는 걸 알 수 있다.

하지만

<div>무엇일까?</div>

div 태그의 경우는 아무 의미가 없다.

굳이 뜻을 찾으면 division 정도이다.

이 태그는 헤더 푸터 내비게이션 등등

뭔가를 지칭하지 않고

아무 의미가 없다.

비슷하게 span 태그도 non-semantic 태그다.

span의 짧다는 뜻인데.

그게 다다.

​

이게 짧은 타이틀인 건지,

문단인 건지 설명인지,

전혀 알 수가 없다.

​

section 태그는 말 그대로 부분이다.

그래서 의미가 있다고 볼 수 있다.

또 비슷한 의미로

article 태그가 있다.

이것도 어떠한 항목을 의미한다.

의미가 있다고 볼 수 있다.

​

header 태그는 머리말 부분,

영역이기 때문에 의미가 있다고 볼 수 있다.

​

이와 같이 header, article, section 과 같은 태그와

div , span 과 같은 태그에는 큰 차이가 있다.

​

주로 나는 header와 같은 태그를 사용한다.

그런데 박스 같은 것이 필요할 때

div와 같은 태그를 사용한다.

div는 컨테이너, 박스와 같은 태그다.

그 안에 내용물을 넣을 수도 있다.

​

span은 텍스트를 위한 컨테이너다.

텍스트를 위해서는 제목 title,

문단 p와 같은 태그가 있는데

이와 같은 경우는 아니고

텍스트를 위한 컨테이너가 필요하면

span을 쓰면 된다.

​

다시 반복하면 semantic 태그는

제목, 문단, 내비게이션 등등

뭔가 뜻이 있는 태그이고

​

non-semantic-태그는

아무 지칭하는 바가 없는

의미 없는 태그를 뜻한다.

출처 : 

blog.naver.com/cksdn4214/222004261013

​

문서를 연결하는 a 태그

(href, title, target 속성)

문서를 링크시키기 위해 사용하는 태그가 바로 <a>태그 입니다.

​

<a>태그

anchor '정박지' 또는 '닻 '의 약자입니다

<a>태그는 혼자만 사용하지 않고 아래와 같은 속성과 함께 사용합니다.

• herf 속성

hypertext reference 약자로, 연결할 주소를 지정하는 속성입니다.

사용 예 :<a href="http://aboooks.tistory.com">지구별 안내서 바로가기</a>

따옴표(" ")를 빠트리지 않도록 주의해 주세요. 링크가 정상적으로 나오지 않을 수도 있습니다

• title 속성

해당 링크에 마우스를 갖다 대면 link에 대한 설명이 나옵니다.

사용 예: <a href="http://aboooks.tistory.com/" title="my homepage">지구별 안내서</a>



• target 속성

링크를 클릭 할 때 창을 어떻게 열지 결정합니다

_self 연결 문서를 클릭한 창에서 엶(기본값)

_blank 연결 문서를 새 창에서 엶

_parent 부모(상위 레벨) 창에서 엶(부모가 없으면 _self처럼 표시함)

_top 가장 상위 창에서 엶(즉 프레임을 무시하며, 전체 브라우저 창에서)(부모가 없으면 _self처럼 표시됨)

frame name 지정된 프레임 안에 염.

사용 예 : <a href=http://aboooks.tistory.com" target="_blank">지구별 안내서 바로가기</a>

<a>태그는 문자뿐 아니라, 이미지, <div> 등도 링크를 걸 수 있습니다.

목록(리스트)을 표현하는 태그 <ul>, <ol>, <li>, <dl>

​

1. UL(Unordered List) 태그

- 순서가 없는 목록 요소이다.

- ol과 거의 동일하며, ul 역시 블럭요소이지만 자식으로 li 요소만 포함할 수 있다.

2. ol (Ordered List) 태그

- ol 요소는 Ordered List의 줄임말로, 순서가 있는 목록이다. ol요소 안에 li(list의 줄임) 요소로 목록 항목을 표현한다.

- 순위나 레시피 등 순서가 있는 부분을 나타낼 수 있다.

- 보통 브라우저의 기본 표현이 숫자이며, css로 로마자 같은 다른 형식으로도 표현이 가능하다.

- ol과 li 요소는 모두 블럭요소오지만 ol요소안에는 오직 li요소만 올 수 있다.

3. DL(Description List) 태그

- DL 요소는 개념과 정의로 이루어진 목록이다.

- 개념은 dt요소로 정의는 dd요소로 작성한다.

<활용 예제>

출처:

blog.naver.com/zboizz/221798627092

[html.200206] 목록을 표현하는 요소 <ul>, <ol>, <li>, <dl>|작성자 streotypeofkosmos