HTML 기본문법

Heading(제목)

h 태그는 1-6까지 있다.
말 그대로 heading, 제목을 나타내어 주는 것이기 때문에 볼드설정이 되어있다.
하나의 html안에는 하나의 h1을 꼭 넣어주되, 두개이상 사용하지 않는다.
오류는 발생하지 않지만 검색엔진으로 검색했을 때 h1이 중요한 역할을 하기 때문이다. 하나의 제목을 크게 달아준다고 생각하면 좋을 듯!
h1~h6 태그는 순차적으로 사용해야 한다.(e.g. h3태그를 사용하려면 h1,h2태그가 무조건 존재해야 한다.)

h4 태그가 기본 글씨 사이즈이며 h1으로 갈수록 커지고 h6로 갈수록 작아진다.

줄바꿈

줄바꿈 태그는 p 태그와 br 태그가 있다.
p태그는 하나의 문단을 설정, br태그는 줄바꿈이다.
p태그를 사용했을 때는 줄과 줄 사이의 간격이 있어 문단을 나눠주는 역할을 하며 br태그는 간격없이 줄을 바꿔주는 역할을 한다.
따라서 br태그는 닫는 태그가 없다.
추가적으로 hr태그는 수평선 긋기 태그이다.

부모태그와 자식태그

코딩에는 재미있는 관계가 있다.
그것이 바로 '부모태그'와'자식태그다'
말그대로 '부모태그'안에 '자식태그'가 들어가는 것인데 보통은 div태그에서 그것을 볼 수 있다.
div 태그는 class로 이름을 붙여 css에서 각각의 속성을 변경할 수 있다.
예를 들어 child div의 글자색을 빨간색으로 변경한다면 "나는 자식태그지롱"의 색만 빨간색으로 변할 것이고, parent div의 글자색을 빨간색으로 변경한다면 모든 글씨가 빨간색으로 변할 것이다.

비슷한 예시로 ul태그와 li태그가 있다.
ul 태그는 순서가 정해지지 않은 목록을 나열해주는 태그로
li 태그를 자식태그로 가진다.
추가로 ol은 순서가 있는 리스트로 마찬가지로 li태그를 자식태그로 가진다.

부모자식 태그들

<!--순서가 없는 리스트-->
<ul>
	<li>떡볶이</li>
    <li>순대</li>
    <li>튀김</li>
</ul>

<!--순서가 있는 리스트-->
<ol>
	<li>햄버거</li>
    <li>피자</li>
    <li>스테이크</li>
</ol>

<!--표만들기-->
<table>
	<th>표의 제목이 되는 부분</th>
    <th>th</th>
    <tr><!--첫번째 줄-->
    	<td>첫번째 칸</td>
        <td>두번째 칸</td>
    </tr>
    <tr><!--두번째 줄-->
    	<td>첫번째 칸</td>
        <td>두번째 칸</td>
    </tr>
</table>

Attribute(속성)

태그의 이름만으로는 정보가 부족할 때 사용하는 문법, 바로 속성이다.
하나의 태그에는 2개 이상의 속성을 부여할 수 있다. 여러 속성을 주고 싶으면 한 칸 띄어쓰기 후 추가하면 된다. 속성의 순서는 상관없이 쓰면 된다.
image의 줄임말인 img 태그로는 정보가 부족하기 때문에 source의 줄임말 src라는 속성 태그를 사용해 이미지에 url을 제공할 수 있다.

저작권에 상관없이 이미지를 가져올 수 있는 사이트 : unsplash.com

다양한 태그들

a a태그는 클릭하면 화면이 이동한다. href 속성에 이동해야하는 주소를 써주면 된다. 만약 새창으로 떠서 이동하게 해주고 싶다면 target속성에 "_blank"값을 주면 된다. target="_blank"
span span태그는 주로 텍스트를 넣어준다. span을 사용하면 줄이 바뀌지 않고, 한 줄에 이어서 나오는 데 이것을 inline-element라고 한다.
header header태그는 문서나 특정 섹션의 헤더를 정의할 때 사용한다. 보통 도입부에 해당하는 콘텐츠나 네비게이션 링크의 집합 등과 같은 정보를 포함한다. (하나 이상의 제목요소, 로고나 아이콘, 저자정보 등..)
footer footer태그는 문서나 특정 섹션의 푸터를 정의할 때 사용한다. (저자정보, 저작권 정보, 연락처, 사이트맵, 페이지 맨 위로 되돌아갈수 있는 top버튼, 연관 페이지 등..)
button button태그는 클릭할 수 있는 버튼을 정의할 때 사용한다. button 요소 안에는 텍스트나 이미지와 같은 콘텐츠를 삽입할 수 있지만, input요소를 사용한 버튼에는 이와 같은 콘텐츠를 삽입할 수 없다. 브라우저별로 button요소에 대해 서로 다른 기본 타입을 사용할 수 있으므로, button요소에는 언제나 type속성값을 명시하는 것이 좋다.
(type속성값: button-클릭할 수 있는 버튼/ susbmit-폼 데이터를 제출하는 버튼/ reset-폼 데이터를 초기값으로 리셋하는 버튼)
input사용자가 직접 텍스트를 입력할 수 있는 태그. type속성에 따라 입력한 결과값이 보이는 방식이 다르다. 참고로 값을 미리 적어두고 싶다면 value속성을 주어서 입력할 수 있다. (input value="1234")
type 종류

• type="text": text를 입력하는 속성. 대부분의 input type는 text로 어느 텍스트나 입력할 수 있다. 주로 이름, id, 주소, 닉네임 등을 입력 받을 때 사용한다.
• type="password": text와 비슷한 속성이지만, 입력하면 검정색 원으로 나온다. 화면에서는 값이 보이지 않더라도 JavaScript에서는 무슨 값을 입력했는지 가져올 수 있다.
• type="number": 숫자만 입력할 수 있다. 만약 type="number"로 핸드폰 번호를 받으려고 한다면, "-"값은 입력할 수 없다.

textarea input보다 더 긴 텍스트를 입력받고 싶을 때 사용. 보통 짧은 방명록이나 댓글을 입력할 때 textarea태그를 사용.

다양한 속성들

id 각 태그에 이름을 주는 속성. 웹 페이지에 해당 id이름은 오직 하나만 가질 수 있다. 중복된 id이름이 있으면 안된다.
class 태그에 이름을 주는 속성. id와 비슷한 역할이지만 여러태그에 중복된 이름을 부여할 수 있다.
colspan td나 th태그에 주는 속성으로 가로 병합. (열을 나타내는 column의 줄임말) 사용은 colspan="n"-n은 병합할 셀 갯수
rowspan td나 th태그에 주는 속성으로 세로 병합. (행을 나타내는 row)
placeholder 사용자에게 도움말을 넣어주는 부분으로 실제 input에 입력되어진 텍스트가 아니다.