HTML 기본 문법

들어가기 앞서,

• html의 꼭 알아야할 기본적인 문법들에 대해서 다루어보겠다.

태그

하이라이트 된 부분이 의미하는 것을 알아보자.

• <태그>내용</태그> : 요소(Element)
• <태그>내용</태그> : 시작(열린) 태그(Tag)
• <태그>내용</태그> : 종료(닫힌) 태그
• <태그>내용</태그> : 요소의 내용(Contents)
• <태그><태그><태그>내용</태그></태그></태그> : 빨간 태그 기준으로 하이라이트 된 부분이 부모 요소이다.
• <태그><태그><태그>내용</태그></태그></태그> : 빨간 태그 기준으로 하이라이트 된 부분이 자식 요소이다.
• <태그><태그><태그>내용</태그></태그></태그> : 빨간 태그 기준으로 하이라이트 된 부분이 상위(조상) 요소(바깥쪽의 모든 태그)이다.
• <태그><태그><태그>내용</태그></태그></태그> : 빨간 태그 기준으로 하이라이트 된 부분이 하위(후손) 요소(안쪽의 모든 태그)이다.
• <태그></태그> : 종료(닫힌) 태그가 없는 태그를 빈(Empty) 태그라고 한다. 빈 태그는 <태그> 혹은 <태그/>로 표기해준다. 그냥 <태그>로 쓰는 것이 편리하긴하지만 <태그/>로 쓰는 것이 더 안전한 방법이다. 
• <태그 속성="값">내용</태그> : 이처럼 속성(Attribute)와 값(Value)를 이용하여 기능을 확장할 수 있다.

이미지 태그

• <img/> : 이미지를 삽입하는 요소(태그)이다.

<img src="./cat.jpg" alt="고양이"/> 와 같이 사용할 수 있다. src에 이미지의 경로를 넣어주고 alt에 이미지의 이름(대체 텍스트 / Alternate Text)를 넣어준다. 아래는 이전에 설명한 codepen에서 테스트한 결과이다.

고양이 이미지 태그

입력 태그

• <input/> : 사용자가 데이터를 입력하는 요소(태그)이다.

<input type="text"/> or <input type="checkbox"/> 처럼 사용할 수 있다. type에 데이터 타입을 설정하여 사용한다. 이외에도 그룹에서 체크 여부를 1개만 입력받게하는 "radio" type, 체크박스 입력 요소가 체크되게해주는 checked 속성 등 여러가지 속성들을 추가해서 사용할 수 있다.

입력 태그

글자와 상자

• 인라인(Inline) 요소 : 글자를 만들기 위한 요소들.

대표적인 인라인 요소로는 <span></span>이 있다. 요소가 수평으로 쌓인다. 포함한 콘텐츠의 크기만큼 자동으로 크기가 줄어든다. <span style="width: 100px;">Hello</span>과 같이 css속성으로 크기를 설정해도 반응이 없다.

• 블록(Block) 요소 : 상자(레이아웃)을 만들기 위한 요소들.

대표적인 블록 요소르는 <div></div>가 있다. 요소가 수직으로 쌓인다. <div style="width: 100px;">Hello</div>과 같이 css속성으로 크기를 설정할 수 있다.

 

블록 요소 안에 인라인 요소를 넣는 것은 가능하지만 인라인 요소안에 블록 요소를 넣는 것은 불가능하다.

전역 속성

• <태그 title="설명"></태그> : 요소의 정보나 설명을 지정한다.
• <태그 style="스타일"></태그> : 요소에 적용할 스타일(css)을 지정한다.
• <태그 class="이름"></태그> : 요소를 지칭하는 중복 가능한 이름이다.
• <태그 id="이름"></태그> : 요소를 지칭하는 고유한 이름이다.
• <태그 data-이름="데이터"></태그> : 요소를 데이터를 지정한다.