자주 사용하는 마크업

 

- a 마크업 : 하이퍼링크 

 

https://codingeverybody.kr/html-a-%ed%83%9c%ea%b7%b8/

HTML <a> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

어찌보면 제일 중요한 마크업이라 볼수있습니다. 

 

전화걸때 tel: 전화번호

메일접속 mailto: 이메일

앵커태그 : #test 

ㄴ 링크를 접속하면 브라우저에서 한 구획 위치로 이동됩니다.

 

정확한 사용법은 위에 링크를 참고하세요.

 

 

 

 

 

 

- address 마크업 : 회사정보, 카피라이트 표시

 

https://codingeverybody.kr/html-address-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <address> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

회사정보 및 카피라이트를 표현하기 위해서 사용 되는 마크업입니다.

 

 

 

 

 

 

- aside 마크업 : 사이드바 

 

https://codingeverybody.kr/html-aside-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <aside> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

주로 사이드바 혹은 문서의 내용과 관련된 추가 정보를 제공하는 작은 영역으로 표현됩니다.

 

 

 

 

 

 

- button 마크업 : 버튼 

 

https://codingeverybody.kr/html-button-%ed%83%9c%ea%b7%b8/

HTML <button> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

html4 에서는 input 타입으로 버튼으로 사용 됩니다. 하지만 html5에서는 따로 마크업이 생겨서 버튼 마크업을 자주 활용하시면됩니다.

 

 

 

 

 

 

 

 

- dl, dt, dd 마크업 : 목록 (?)

 

https://codingeverybody.kr/html-dd-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <dd> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

저는 목록(list) 마크업 위주로 사용합니다. 

dt는 제목이고 dd는 필드 내용입니다.

 

 

 

 

 

 

- p 마크업 : 문단 

 

https://codingeverybody.kr/html-p-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <p> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

문단을 나타나기 위해서 사용되는 마크업입니다.

긴 내용이 있으면 p 마크업으로 감싸서 사용합니다.

 

 

 

 

 

- textarea 마크업 : 여러줄 입력 필드

 

https://codingeverybody.kr/html-textarea-%ed%83%9c%ea%b7%b8/

HTML <textarea> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

내용을 입력할때 쓰는 필드 마크업입니다.

 

 

 

 

 

- strong 마크업 : 찐하게~ 

 

https://codingeverybody.kr/html-strong-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <strong> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

문구를 찐하게 표현할때 쓰인데 html4 에선 b로 쓰였고 현재는 strong으로만 사용하면됩니다.

 

 

 

 

 

 

- figure 마크업 : 이미지 감싸기 

 

https://codingeverybody.kr/html-strong-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <strong> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

이미지를 감싸기 위해서 쓰입니다. div로 처리 했더라만 용도에 맞게 figure 를 쓰면 됩니다. 

 

figcaption 마크업은 제목, 내용을 기재할때 쓰입니다.

 

 

 

 

 

- iframe 마크업 

아이프레임 자주 사용하는 마크업으로 유튜브, 지도 등 사용됩니다. 

https://codingeverybody.kr/html-iframe-%ed%83%9c%ea%b7%b8/

HTML <iframe> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

옛날에는 아이프레임을 통해서 레이아웃을 나눠서 사용했습니다. 현재는 절대 쓰이지 않고 특별한 상황으로 쓰입니다.

예를들어서 서버사이드언어로 데이터를 불러올경우 이런 방법으로 했지만 브라우저 보안 문제로 강화 되어서... 권한 허용만 하면 사용 가능합니다. 

 

 

 

- img 마크업 : 이미지 

이미지를 표현하기 위해서 쓰입니다.

https://codingeverybody.kr/html-iframe-%ed%83%9c%ea%b7%b8/

HTML <iframe> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

 

 

 

- form 마크업 : 데이터 전송

입력한 데이터를 폼 내부에서 백엔드로 전송하기 위해서 사용됩니다.

 

https://codingeverybody.kr/html-form-%ed%83%9c%ea%b7%b8/ 

HTML <form> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

 

 

 

 

- fieldset 마크업 : 입력필드 그룹화

입력 필드를 그룹으로 묶을때 사용됩니다.

 

https://codingeverybody.kr/html-fieldset-%ed%83%9c%ea%b7%b8/

HTML <fieldset> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

 

 

 

 

- input 마크업 : 입력 필드

 

데이터를 입력하기 위해서 사용됩니다.

 

https://codingeverybody.kr/html-input-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <input> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

 

 

 

- div 마크업 

이 마크업은 html4 에서도 자주 사용 됐고 현재 까지 자주 사용 됩니다.

아래참고 링크를 통해서 구체적인 사용법을 익히면됩니다.

 

https://codingeverybody.kr/html-div-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <div> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

 

 

 

- label 마크업 

입력 태그 와 곁들어서 사용하면됩니다. 제목, 용도 표현으로 쓰이면됩니다.

 

https://codingeverybody.kr/html-label-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <label> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

 

 

 

- ul,li 마크업 

 항목을 목록으로 표현하기 위해서 사용됩니다.

https://codingeverybody.kr/html-ul-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <ul> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

dl, dt, dd 마크업 과 비슷합니다. 너무 자주 쓰입니다.. 

 

 

 

 

 

- nav 마크업

네비 마크업은 메뉴, 카테고리를 표현하기 위해서 쓰입니다.

https://codingeverybody.kr/html-nav-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <nav> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

 

 

 

 

- meta 마크업

메타 마크업은 홈페이지에 관한 정보를 표현하기 위해서 사용됩니다.

그리고 캐릭터셋, 오픈그래프 등으로 사용됩니다. 제일 중요합니다.

 

https://codingeverybody.kr/html-meta-%ed%83%9c%ea%b7%b8-%ec%98%ac%eb%b0%94%eb%a5%b8-%ec%9d%b4%ed%95%b4%ec%99%80-%ec%82%ac%ec%9a%a9-%eb%b0%a9%eb%b2%95/

HTML <meta> 태그 – 올바른 이해와 사용 방법 - 코딩에브리바디

 

 

 

- br 마크업 : 엔터

줄바꿈 즉 엔터로 쓰입니다.  

 

https://codingeverybody.kr/html-br-%ed%83%9c%ea%b7%b8/

HTML <br> 태그 – 줄바꿈 요소의 올바른 이해와 사용 방법 - 코딩에브리바디

 

 

 

 

 

 

 

 

 

주의) 개인 공부 법에 따라서 다를수 있습니다. 만약에 틀린 문법이 있으면 댓글로 남겨주시면 수정하겠습니다.