오늘 배운 것
1. HTML (HyperText Markup Language)
웹의 가장 기초적인 구성 요소, 웹 콘텐츠의 의미와 구조를 정의하는 마크업 언어
HTML 문서의 구성
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>1) <html> </html>
페이지 전체를 감싸며, 루트(root) 요소라고 한다.
2) <head> </head>
head의 내용는 페이지에 표시되지 않고 페이지에 대한 metadata를 포함한다. 기본 언어 설정, css, javascript, 폰트, 아이콘, 이미지 등을 링크한다. 단, <script>는 head에 포함될 필요는 없다. 보통 </body> 태그 바로 앞에 넣는 것이 에러를 피할 수 있다.
<head>
<meta charset="utf-8"> // 인간의 방대한 주류 기록언어에 있는 대부분의 문자가 포함
<title>NAVER</title> // 브라우저 페이지 제목, 브라우저 탭에서 확인할 수 있다.
<meta name="viewport" content="width=1190"> // 뷰포인트
<meta name="apple-mobile-web-app-title" content="NAVER"> // 모바일 title
<link rel="stylesheet" href="https://pm.pstatic.net/dist/css/nmain.20210826.css"> // css 링크
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?1"> // icon 링크
<script type="text/javascript" src="index.js"></script> // js 링크
</head>3) <body> </body>
페이지에 방문한 모든 웹 사용자에게 보여주길 모든 컨텐츠를 담고 있다.
HTML 요소의 구성
1) 요소(element)
여는 태그에서 닫는 태그까지를 통틀어 요소라고 한다. 요소는 태그, 속성, 컨텐츠로 이루어져 있다.
2) 태그(tag)
태그는 요소의 이름으로 구성되고 < >로 감싸진다. 요소의 시작과 끝을 나타낸다.
3) 속성(attribute)
실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있다. 해당 요소를 특정해 스타일이나 기능적 요소를 추가할 때 식별자로 지정할 수 있다. attribute name(속성의 이름)과 attribute value(속성의 값) 으로 구성
4) 컨텐츠(content)
요소의 내용. 보통 텍스트를 의미한다.
자주 사용되는 HTML tag
div, span
분할 영역을 지정하는 태그
div는 화면 전체의 가로폭을 차지하는 block 특성을 가진다.
span은 content 너비의 가로폭만 차지하는 inline 특성을 가진다.
ul, ol, li
리스트를 나타내는 태그이다.
ul은 순서가 없는 unordered list, dot으로 표현된다.ol은 숫자로 순서를 나타내는 ordered list, 숫자, 기호 등으로 표현된다.li는 list item
a
anchor 닻을 의미한다. 클릭하면 설정된 주소로 이동하는 Hypertext이다.
<a href="이동하고 싶은 주소" target="해당 링크를 띄울 탭창" title="커서 hover시 설명">네이버</a> <a>의 속성
target: 해당 링크를 띄울 탭창을 지정
_blank: 새로운 탭창_self: 현재 탭창- title : 링크에 커서를 올렸을 때 나오는 설명
input
form의 요소 중 하나이다, 사용자가 정보를 입력하는 전달하는 기능을 만들 때 사용한다. 주로 radio, checkbox, text를 이용한다.
input의 속성과 기능은 다양하기 때문에 상황에 맞게 공식 문서를 참고해 사용한다.
id class
id > class > tag 순으로 서열이 존재한다. 서열이 강한 순으로 스타일이 적용된다.
- id : 스타일을 지정할 때 한가지만 지정해서 쓰는 이름. 하나의 문서에 고유한 id 하나만 사용 가능
- class : 그룹으로 묶어 스타일을 지정할 때 쓰는 이름. 자주 사용되는 스타일에 적용
주말에 할 것
- css 기초
- 과제 예습
- Git 예습
- 알고리즘
'프로그래밍 공부 > Javascript' 카테고리의 다른 글
| 계산기 구현 / TIL 7일차 (0) | 2021.08.31 |
|---|---|
| TIL 6일차 2021.08.30 (0) | 2021.08.30 |
| TIL 4일차 2021.08.26 (0) | 2021.08.26 |
| TIL 3일차 2021.08.25 (0) | 2021.08.25 |
| TIL 2일차 2021.08.24 (0) | 2021.08.24 |