📓 HTML
Hypertext Markup Language의 약자
웹을 이루는 가장 기초적인 구성 요소로 웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류
* Hypertext : 웹 페이지를 다른 웹 페이지로 연결하는 Link.
* Markup Language : tag를 이용하여 문서나 데이터의 구조를 명시하는 언어. 📓 Tag
Markup Language는 tag를 이용해서 보여지는 언어이다.
HTML에서 사용하는 명령어, Tag는 꺽쇠괄호"<>"를 사용하여 나타낸다.
Element(요소)의 시작과 끝을 표시한다.
📓 Element
Element(요소)는 웹 페이지를 구성하며 Opening Tag, Content, Closing Tag로 이루어진다.
<p class=“editor-note”> // Opening Tag(여는 태그), 요소의 이름으로 구성된다.
My cat is very grumpy // Content, text의 형태를 가지고 있으며 요소의 내용을 뜻한다.
</p> // Closing Tag(닫는 태그), 요소의 이름 앞에 전방향 슬래시(/)가 포함되며 요소의 끝을 나타낸다.Nesting Element (중첩 요소): 요소를 다른 요소 안에 놓는 것을 뜻한다.
<p>
My cat is <strong> very </strong> grumpy
</p> Empty Element (빈 요소): 내용을 갖지 않은 요소를 뜻한다.
주로 문서에 무언가를 첨부하기 위해 단일 태그(Single tag)를 사용하는 요소도 있다.
<img src="이동할 경로"> 혹은
<img src="이동할 경로" /> 로 사용된다.위의 예시처럼 Content를 갖지 않고 무언가를 첨부하기 위해 단일 태그를 사용한 요소이다.
📓 Attribute
Element(요소)는 Attribute(속성)도 가질 수 있는데
속성은 실제 콘텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있다.
위의 예시에서는 class=“editor-note” 이 속성 부분에 해당한다.
전역 속성 (Flobal attributes)은 모든 HTML 태그에서 공통적으로 사용할 수 있는 속성이다.
속성 (attribute)이란 태그의 부가적인 기능을 정의하는 것, 선택사항이다.
속성은 태그 내부에 정의, 개수에는 특별한 제한이 없다.
ex.
<div style="background-color: red;">
하나의 영역
</div>
div = 태그의 이름, style = 속성의 이름
background-color: red; = 속성값대표적인 전역 속성들
- id : 요소의 고유한 이름을 부여하는 식별자 역할 속성
- class : 요소를 그룹 별로 묶을 수 있는 식별자 역할 속성
- style : 요소에 적용한 CSS 스타일을 선언하는 속성
- title : 요소의 추가 정보를 제공하는 텍스트 속성, 사용자에게 tool tip 제공
* tool tip : 요소에 마우스 커서를 갖다댔을 때 띄워지는 말풍선
📓 주석 달기
화면에는 표시하지않고 작성자 본인만 볼 수 있게 주석을 달 수 있다.
HTML에서는 아래처럼 표현한다.
<!-- -->맥북 단축키로는 Command + / , Command + K + C를 사용하고
주석을 해제할 때는 Command + K + U 를 사용하면 된다.
