오늘의 공부
HTML
- HTML은 HyperText Markup Language의 약자로 웹 페이지의 구조를 구성하는 마크업 언어다. Javascript(웹의 상호작용, 기능을 담당)와 CSS(모양, 스타일을 담당)와 함께 웹 페이지를 구성한다.
<html>
<head>
<title>Document</title>
</head>
<body>
</body>
<html>- HTML은 다음과 같은 구조로 이루어져 있으며, <> 태그 안에 태그 이름을 넣어 사용한다.
- 웹 페이지에 표시되는 글자나 사진은 마크업을 사용하며 HTML의 요소(Element)를 통해 구현한다.
주로 쓰는 요소
<div>:<div>요소는 순수한 콘테이너로 다른 요소들을 묶는 컨테이너이다.<span>:<span>요소는 구문을 위한 인라인 컨테이너이다.<div>는 블록 레벨 요소로 새로운 줄에서 시작하지만,<span>요소는 어느 곳에서나 시작할 수 있다.<p>:<p>요소는 하나의 문단을 나타낸다.<input>:<input>요소는 웹 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생산한다.
<input type="?">? 안에 들어가는 타입이 무엇이느냐에 따라 특성이 달라진다. 타입들에 대한 설명은 MDN에 자세히 설명되어 있다. 여기를 눌러 이동<img>:<img>요소는 이미지를 넣을 수 있다.<img src="/파일경로/사진.jpg">와 같이 src 특성을 통해 이미지의 경로를 지정한다.<ul>:<ul>요소는 unorder list를 만드는 요소로 내부에<li>요소 list item을 포함하여 각 항목을 표시한다. 보통 불릿으로 표현된다.<ol>:<ol>요소는 order list를 만드는 요소로 숫자 목록 등으로 정렬된 목록을<li>요소를 포함하여 나타낸다.<button>:<button>요소는 클릭할 수 있는 버튼을 나타낸다.
시멘틱 요소
<article>:<article>요소는 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 타나낸다.<header>:<header>요소는 페이지 가장 윗부분에 위치해 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다.<footer>:<footer>요소는 페이지 아랫부분에 위치해 라이선스, 주소, 연락처 등을 남긴다.<nav>:<nav>요소는 네비게이션의 약자로 상단바 등 사이트를 안내하는 요소에 사용된다.
id와 class
- id 전역특성은 문서에서 유일한 고유식별자를 정의한다. 요소#id명으로 나타낸다.
- class 전역 특성은 공백으로 구분한 요소 클래스의 목록이다. 주로, 반복해서 사용하는 요소에 CSS나 javascript를 적용하고자 할 때 부여한다. 요소.class명으로 나타낸다.
마무리
오늘은 페어 프로그래밍 없이 강의를 듣고 HTML의 요소와 구성에 대해서 배웠다. 요소들의 역할이 직관적으로 드러나기 때문에 어려움도 없었고, 재미있었다. 내일은 CSS를 학습하는데 CSS 문법에 따라 요소나 id, class에 스타일을 입힐 수 있는 언어이다.
