-
html이란 (.MDN)Study/html 2020. 3. 28. 11:12
1. html 이란?
HyperText Markup Language
하이퍼텍스트(문장 중의 어구나 그것에 붙은 표제, 표제를 모은 목차 등이 서로 연결된 문자 데이터 파일)
마크 업 언어. (프로그래밍 언어는 아님)
형광펜으로 중요한 부분을 긋고 나누듯,
여기부터 여기까지는 head 야.
여기부터 여기까지는 body야.
여기부터는 이건 box고, a라고 이름을 지을게.
라고 컴퓨터에게 마크업해주는 것이다.
엄청 길고 못생긴 코드들을 작성할 거라, 브라우저에게 각각 이 코드들이 무엇을 뜻하는지 html을 통해
마크업해줘야 한다.
"웹을 이루는 가장 기본적인 빌딩블록" 웹 컨텐츠의 구조와 의미를 결정한다.
html은 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하기 위해 '마크업'을 사용한다.
마크업은 <head>, <body> ,<footer>처럼 수많은 'elements'를 사용한다.
elements는 문서의 다른 텍스트와 'tag'로 구분하며, 대소문자를 구분하지 않는다.
1-2. Nesting elements
elements 들은 다른 elements안에 위치할 수 있다. 이것을 nesting이라고 한다.
<p>My cat is <strong>very</strong> grumpy. </p>이렇게 작성시, My cat is very grumpy. 로 나타난다.
문단에 사용하는 p태그 안에 strong태그가 위치할 수 있다는 것이다.
1-3.Block vs inline elements
여러분이 알아야할 html의 2가지의 중요한 elements 카테고리가 있다.
그것은 바로..! block-level elements와 inline elements 이다.
1) block-level elements
-웹페이지 상에 block을 만드는 elements 이다. 이는 앞 뒤 요소 사이에 line을 만들고 나타난다.
즉, block-level elemnets는 화면의 한 줄을 차지함. 한줄에 하나.
ex)<p>, <li>...
<p>, <div>, <h>, <ul>, <ol>, <form>요소는 display 속성값이 블록(block)인 대표적인 요소이다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements block-level elements 보기.
2) inline elements
-새로운 한 줄을 만들어내지 않는다. block처럼 한 줄의 공간을 차지하지 않는다.
inline elements에는 <a>, <em>, <strong>등이 있다.
<span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소이다.
*<!DOCTYPE html> = 이 document 문서의 type은 html이다.
head => 컴퓨터에게 말해주는 부가설명, 타이틀, css 등이 담긴다. meta data만 있음.
body => user에게 보여지는 내용들이 담김.
'Study > html' 카테고리의 다른 글
semantic elements (0) 2020.06.24 데이터 속성 사용하기 (data attribute) (0) 2020.06.12 vs code 같은 글자 한번에 선택하는 방법 (같은 글자 한번에 바꾸는 방법) (0) 2020.05.11 html form tag (0) 2020.04.09 semantic element (0) 2020.03.31