HTML&CSS-1(HTML의 정의와 기본 구성)
HTML(Hypertext Markup Language)
1. 정의와 기능
HTML은 웹 페이지를 만들기 위한 언어입니다. 웹 페이지의 전체적인 구조를 잡을 수 있으며, 이미지, 텍스트, 비디오, 버튼 등으로 구성되어있습니다. 브라우저를 통해 HTML의 파일이 뭘 가지고 있는지 파악 후 웹 페이지를 생성해준다.
2. tag
HTML파일에 필요한 최소한의 태그는 <html>, <head>, <body>
세가지가 있습니다. HTML의 기본적인 구조는 <시작태그> + 내용 + <종료태그>로 구성되어있습니다.종료태그>시작태그>
Example
<태그이름>
내용</태그이름>
<div>
블라블라</div>
<p>
내용을 쓰세요</p>
대표적인 태그로는 <div>
, <p>
, <title>
, <a>
, <span>
등이 있습니다.
<!DOCTYPE>
태그는 HTML 파일이라면 제일 첫 줄에 위치해야하는 선언문입니다. 태그처럼 생겼지만 tag는 아닙니다. <head>
태그 내에 여러 중요한 태그들이 있습니다. <meta charset="utf-8">
: 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 합니다. <meta name="viewport" content="width=device-width">
: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미입니다. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보입니다. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타납니다.
cf) 웹 페이지에서 많이 사용되는 태그들
3. attribute(속성)
속성은 tag에 필요한 것을 추가하기 위해 작성하는 것입니다. attribute는 시작 태그 안에 위치하며, 여러 속성을 동시에 지정해서 사용할 수 있습니다. 대표적으로 id, class, href, src, alt 등이 있습니다.
4. element (요소)
요소는 태그와 태그 사이에 있는 content(내용)을 의미합니다.
<h1> 제목 </h1>
가 있을 때 ‘제목’은 요소가 됩니다. 만약 img태그와 같이 끝 태그가 필요 없는 것은 태그 자체가 요소가 됩니다.
댓글남기기