HTML 기본 tag정리
HTML 기본 tag정리
참고: 아케이코딩
HTML 핵심만 배우기
웹개발
다양한 사람들이 다양한 정의로 할 수 있겠지만 내가 검색해보고 간단히 정리한 것은 3개로 기억하면 될것 같다.
- HTML: 웹사이트의 구조(뼈대)
- CSS: 웹사이트의 스타일(폰트, 이미지 등)
- javascript: 동적인 움직임(애니메이션이나 동영상)
시작을 배우는 단계로 이 포스트는 html 핵심 tag 기본 정리를 해봤다.
태그 사용법
보통은
head
-웹 사이트에 대한 정보 -외부 자료 참조(css, js)
title
-단어 그대로 제목이다.
body
-우리가 보는 실제 화면의 내용
h1 ~ h6
-주로 글의 제목이나 강조를 위해서 사용하고 -12,3,4,5,6 의 숫자들은 글자의 크기를 나타낸다. 1이 제일 크고 6이 제일 작음
p
-책에서 제목 밑으로 쓰는 책의 내용, 문단을 쓰는 부분이다.
input
-위에서 말한 </tag>이고 <>내용</> 이 필요 없기 때문이다. -마찬가지로 단어 뜻 그대로 입력받는 부분이다. -기본 tag이지만 text만 입력 받거나 email, password등 type을 지정할 수 있다.
button
-이것도 단어 그대로 버튼을 만드는 tag이다. -html의 태그들은 style로 크기나 폰트크기, 색상 등을 변경할 수 있는데, 이것은 따로 css에서 자세하게 만든다. -간단한 style정도는 html에서 해도 문제가 없다.
div
-여러개의 tag를 하나로 묶거나 나눌때 사용한다. -내가 이해하기 쉽게 말하면 div하나를 하나의 구역이라고 생각하면 될듯하다. -태그들을 나누고 싶다면 div를 여러개 만들어서 각각 구역을 주면 되고, 모이게 하고 싶다면 div 하나에 몰아넣으면 될듯
br
-줄 바꿈. 키보드로 말하자면 엔터키 쳐서 한줄 내리는 것이다.
-근데 생각해보니 지금 작성하고 있는 이 .md파일도
로 줄바꿈을 하고 있는데 영상의 첫 설명처럼 html도 하나의 Markdown이다.
strong
-텍스트 강조를 위한 태그 이 태그를 사용하면 텍스트가 볼드체가 된다.
a
-다른 웹사이트로 갈 수 있는 링크를 걸어준다. -사이트 이름 이런식으로 사용 하면 된다.
img
-
-alt는 이미지를 불러오지 못했을 때 나타나는 텍스트
ul
-리스팅(Listing)(순서대로 세로로 정렬 하는 것)을 하는데 사용 하는 태그 -ul 태그 안에 li 태그로 한줄씩 적어주면 된다.
- 1
- 2
- 3
-위 처럼 사용 하면 된다.
ol
-ul과 동일하게 리스팅할때 사용하는 태그이고 li태그를 사용하는 것까지 동일하다. -다른 점은 ul은 앞에 .으로 표현되는데 ol은 숫자로 표현된다.
table
-주로 표를 만들 때 사용하는 태그 -tr태그가 표의 한줄을 표시하고 -tr태그 안에서 사용하는 th와 td가 있는데 th표를 만들때 보여질 첫번째 행의 종류를 나타내고 -td태그는 그 아래부터 나올 내용을 적으면 된다. -caption태그로 table의 이름을 정할 수 있다.
form
-회원가입이나 로그인 정보 같이 하나로 묶어서 제출해야 되는 내용들을 담는 태그이다.
select
-항목선택을 위한 태그이다. -ul, ol 과 비슷하게 여러개의 option태그들을 감싸는 태그이다. -dropbox와 같다고 생각하면 된다. 나오는 여러가지 항목들에서 선택하면 된다.
아주아주 기본적인 내용이다. 굳이 정리하는 이유는 한번 정리 하면서 나도 다시 한번 보기 위해서.
Leave a comment