HTML 태그

1. 강조 태그

무언가를 강조하기 위한 태그에는 크게 굵게 만드는 것과 글자 기울임이 있습니다.

1) 글자를 굵게 만드는 태그

글자를 굵게 만드는 태그에는 b태그와 strong 태그가 있습니다.

 

See the Pen Untitled by 김영주 (@nwmqiqhp-the-reactor) on CodePen.

위 예시를 봤을 때 육안으로는 동일합니다. 그러나 두개는 다른 태그입니다. b태그는 단순히 글자를 굵게 만들뿐이지만, strong 태그는 내용을 강조하는 의미를 가지고 있습니다. strong 태그는 검색엔진이 해당 태그를 인식했을 때 중요하다고 인식하며 스크린리더로 읽어냈을 때 강조된 톤으로 읽기 때문에 시각장애인들이 어느부분이 중요한지 파악할 수 있게합니다.

 

2) 글자를 기울이는 태그

글자를 기울이는 태그에는 i태그와 em태그가 있습니다.

 

See the Pen Untitled by 김영주 (@nwmqiqhp-the-reactor) on CodePen.

 

두 개의 태그 또한 육안으로는 차이가 나지않지만 em태그는 위의 stong태그처럼 검색엔진이 강조하는 내용이라고 인식하며 스크린리더에서도 강조된 톤으로 읽습니다.

 

2. 이미지 태그

이미지 태그는 말그대로 이미지를 삽입하는 태그입니다. 

 

See the Pen Untitled by 김영주 (@nwmqiqhp-the-reactor) on CodePen.

 

 

일반적으로 툴팁의 내용과 대체텍스트의 내용은 다르게 하는 것이 권장됩니다.

 

3. a태그

a 태그는 다른 곳으로 이동할 수 있게 하는 태그입니다. 

 

1) target 옵션

_self : 링크를 클릭한 해당 창에서 엽니다.

_blank : 링크를 새창으로 엽니다.

_parent : 부모 창에서 엽니다. (부모 창이 없으면 _self 속성으로 처리)

_top : 전체 브라우저 창에서 가장 상위의 창에서 엽니다.. (부모 창이 없으면 _self 속성으로 처리)

 

a태그의 속성을 사용한 예제는 아래와 같습니다.

 

See the Pen Untitled by 김영주 (@nwmqiqhp-the-reactor) on CodePen.

 

2) css 관련 옵션

1] 밑줄 없애기 (text-decoration-line)

• none : 선 없음
• underline : 밑줄
• overline : 윗줄
• line-through : 취소선

2] 밑줄 색깔 바꾸기 (text-decoration-color)

3] 밑줄 모양 바꾸기(text-decoration-style)

• solid -실선
• double - 밑줄 두개
• dotted - 점선
• dashed - 조금 긴 점선
• wavy - 물결선

4] 밑줄 모양 굵기 바꾸기 (text-decoration-thickness)

5] 선 위치, 색깔, 모양, 굵기 한번에 바꾸기 (text-decoration)

text-decoration 속성을 사용하면 선위치, 색깔, 모양, 굵기를 한번에 설정할 수 있습니다.

각 속성의 값들은 스페이스로 구분하여 입력할 수 있습니다.

 

css관련 옵션의 예제는 아래와 같습니다.

See the Pen Untitled by 김영주 (@nwmqiqhp-the-reactor) on CodePen.

 

4. form 태그

form 태그는 사용자 데이터를 수집하여 서버로 전송하는데 주로 사용하는 태그입니다. 

이러한 form태그에는 여러가지 속성이 있습니다.

1) method

method는 전송방식입니다. get하고 post를 사용가능하며 get은 URL에 입력값들이 보이게 전송합니다. 주로 데이터 조회 시 사용됩니다. post는  입력값을 URL에 보이지 않게 전송합니다. 보안이 중요하거나 url의 길이가 너무 길어질때 사용합니다.

2) name

form의 이름을 지정합니다. JavaScript에서 form을 참조할 때 사용됩니다.

3)action

form의 데이터가 전송될 경로를 지정합니다.

4)target

action이 실행되는 위치를 지정합니다. 새로운 창이나 프레임에 열리도록 설정할 수 있습니다.

• _self: 현재 창에 열기 (기본값)
• _blank: 새로운 창이나 탭에 열기
• _parent: 부모 프레임에 열기
• _top: 최상위 프레임셋에 열기

5) autocomplete

자동 완성 기능을 설정합니다.

• on: 자동 완성 기능 활성화 (기본값)
• off: 자동 완성 기능 비활성화

6) enctype

폼 데이터가 서버로 제출될 때 인코딩되는 방법을 명시합니다

 

• application/x-www-form-urlencoded: 기본값으로, 모든 문자들을 서버로 보내기 전에 인코딩합니다.
• multipart/form-data: 모든 문자를 인코딩하지 않습니다. 파일이나 이미지를 서버로 전송할 때 주로 사용합니다.
• text/plain: 공백 문자는 "+" 기호로 변환하고 나머지 문자는 인코딩하지 않습니다.

 

주의할점은 form태그 내부에서는 다른 form태그를 사용할 수 없습니다. 또한 같은 페이지에서 form의 name속성은 중복될 수 없습니다.

5. fieldset 태그

fieldset 태그는 주로 form태그 안에서 그룹을 묶을 때 사용합니다.

See the Pen Untitled by 김영주 (@nwmqiqhp-the-reactor) on CodePen.