210723 CodeStates 5일차
210723 CodeStates 5일차
오늘은 웹페이지의 틀을 만들어주는 HTML에 대해 공부를 했다.
HTML(HyperText Markup Language)
HTML은 웹페이지를 기술하기 위한 마크업 언어로 웹페이지의 내용과 구조를 담당하는 언어이다.
위 사진의 HTML,CSS,JS가 웹페이지를 만들어주며 다음과 같은 역할을 한다.
- HTML:웹 페이지의 내용과 구조를 담당한다.(contents)
- CSS:웹페이지의 스타일을 담당한다.(presentation)
- JS:웹페이지와 사용자의 상호작용을 담당한다.(interactive)
HTML문서의 구조는 다음과 같이 이루어져있다.
<!DOCTYPE html>
<!--HTML문서의 버전이 HTML5라고 브라우저에 알려주는 DTD(Document Type Declaration)-->
<html>
<head>
<!--웹페이지의 제목(title),외부파일의 참조등의 메타데이터 설정이 위치한다.
여기에 쓰여진 항목들은 브라우저에 표시되지 않는다.-->
</head>
<body>
<!--브라우저에 표현되는 모든 요소들이 여기에 쓰여진다. -->
</body>
</html>HTML은 요소(element)들로 이루어져 있다.
위의 사진은 h1요소의 코드이다.
요소는 시작태그와 종료태그 그 사이의 컨텐츠로 구성되어 있다.
태그는 태그이름을 꺽쇠 괄호(<>)로 감싸서 표현한다.
컨텐츠와 종료태그가 없이 시작태그로만 이루어진 태그도 있다.
Ex) <img><br><hr>
HTML요소는 여러 속성(attribute)을 가질 수 있으며, 이러한 속성은 해당요소에 대한 추가정보를 제공한다.
속성은 시작태그에 위치하며 이름,값(key,value)의 쌍을 이룬다.
시멘틱웹(Semantic)
검색엔진은 로봇을 이용해 매일 전 세계의 웹사이트 정보를 수집한다.(크롤링)
이용자가 검색할만한 키워드를 예상하여 인덱스를 만든다.(인덱싱)
크롤링으로 수집된 정보를 바탕으로 인덱스를 생성하는 작업 중, HTML코드로 의미를 인지할 때, 시멘틱 요소를 해석하게 된다.
시멘틱 태그란 브라우저,개발자,검색엔진에게 컨텐츠의 의미를 명확히 설명하는 역할을 한다.
시멘틱 웹이란 웹에 존재하는 웹페이지들에 메타데이터를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가진 DB를 구축하려는 발상이다.
- non-semantic요소: 컨텐츠에 대해 어떠한 의미도 부여하지 않는다.
- div,span
- semanitc요소: 컨텐츠에 대한 의미를 부여한다.
- header(소개 및 탐색에 도움을 주는 콘텐츠),
article(문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획)
- header(소개 및 탐색에 도움을 주는 콘텐츠),
form태그
<form>태그는 사용자가 입력한 데이터를 수집하기 위해 사용된다.
입력양식태그(<input>)을 포함하여 사용자의 입력을 받는다.
action,method라는 속성(attribute)를 갖는다.
- action: 사용자로부터 입력받은 데이터가 전송될 url
- method: 입력데이터를 전송할 방법을 지정
- GET: URL의 뒤에 입력데이터를 적어서 전송하는 방식으로 데이터가 URL에 그대로 노출되기에 보안성이 떨어지고 길이의 제한이 있다.
- POST: 데이터가 외부에 드러나지 않으며, 길이에 제한도 없다.
block요소와 inline요소
HTML의 모든 요소는 해당요소가 어떻게 보이는지를 결정하는 display속성을 갖는다.
대부분의 요소는 display속성 값으로 block 혹은 inline을 갖는다.
display속성 값이 block인 요소들은 언제나 새로운 라인에서 시작하며 해당라인의 모든 너비를 차지한다.(대표적인 block요소:<div>)
display속성 값이 inline인 요소들은 새로운 라인에서 시작하지 않으며 요소의 컨텐츠의 너비만큼의 너비를 차지한다.(대표적인 inline요소:<span>)
