생각기록
HTML 본문
영어로 구분하자면,
명사(HTML) 형용사(CSS) 동사(JS) 귀여운(css) 고양이(html)가 춤추고 있다(js)
웹문서 : 우리가 화면에서 보고있는 인터넷 화면, 즉, 홈페이지를 구성하는 문서
웹브라우저 : 웹문서는 웹브라우저 프로그램을 통해서 볼 수 있다.
예)인터넷 익스플로어, 크롬
HTML(Hypertext Markup Language) : 웹 페이지를 구성하는 가장 기초적인 언어
Hypertext
: 웹 상의 다른 문서나 멀티미디어 등으로 이동할 수 있도록 구조화되어 있는 텍스트.
즉 링크를 의미
Markup
:문서나 데이터의 구조를 명기하다.
구조 파악 좋음
예) 과정명: 풀스택 교육시간: 6개월
태그
- < > 로 감싸진 얘들
- 시작태그, 종료태그가 세트 <html> </html>
- 안닫아도 동작하는 얘들이 존재
- 태그는 특정한 기능(역할)을 지녔다
- 태그를 쓸 때, 대소문자 구분 X (html표준은 소문자 권장)
html의 전체 구조
<html>태그는 웹문서의 시작과 끝을 알림
<head>태그는 웹문서의 각종 정보를 기록 (눈에 보이지 않는 메타 정보)
- title태그 : 문서(페이지)의 제목
- meta태그 : <meta charset="UTF-8"> 한글이 안나오는 문제 발생시 써주기
<body>태그는 웹문서의 실제 내용=컨텐츠들을 기록 (페이지 출력)
| 기본 구조 <!DOCTYPE html> //Document Tyoe Declearation의 약자 어떠한 약속, 어떠한 표준을 따르고 있는 태그인지 알려주는 것 <head> <title> 문서 제목(이름) </title> <meta charset="UTF-8"> // 한글이 깨질 때, 인코딩이 안되서 그럴 때 씀 </head> <body> </body> </html> head, body는 무조건 한 개만 존재하는 태그 |
부모, 자식 태그란?
HTML의 자식 태그 개수는? 3개 X / 2개 이다
<title>은 <head>의 자식으로
<html>의 자식 태그(head태그)의 자식 태그 이다.
<head><body>태그는 형제 태그 라고 한다.
- 같은 태그 안 : 형제
- 안의 태그 : 자식
- 밖의 태그 : 부모
*추가로 부모 태그 = parent, 자식 태그 = child, children, 형제 태그 = sibling
이런 구조들은
페이지 우클릭 > 검사(f12) (페이지 구성 코드를 볼 수 있다.)
HTML 구성요소 3가지
빈 요소 ( Empty Element )
내용 없이 구조적인 기능만 하는 요소 (닫지 않아도 동작이 가능)
예) <br> 줄 바꿈 태그
<hr> 구분선
레이아웃의 핵심, 기본적으로 직사각형의 형태를 지닌다.
블록 요소 ( Block Element )
- 부모 요소의 전체 너비 100% 차지 (박스), 가로 세로 크기 지정 가능
- 개행(줄바꿈)이 일어난다.
- 모든 온라인 요소를 포함하거나 다른 블록 요소를 포함한다.
예) <h1> 글씨 크기 1-6
<div> 묶음
<p> paragraph 하나의 문단으로 취급, 위 아래에 약간의 여백이 추가 된다.
인라인 요소 ( Inline Element )
필요한 공간만 차지하는 친구(글자) , 글자만큼 공간값 가짐
기본적으로 왼쪽에서 오른쪽으로 정렬
너비와 높이를 지정할 수 없다.
블록 요소 안에 포함되어 있는 것으로, 인라인 요소만 가질 수 있다.
(인라인 요소안에는 블록이 들어갈 수 없다) > div안의 span은 가능하지만, span안의 div는 불가능 하다는 의미
예) <span> , <a>, <strong> 줄바꿈 X, 가로로 한 줄에 나타내고 싶은 요소
태그의 속성 attribute : 태그를 보조하는 명령어로 태그 안쪽에서 작동
- 태그마다 사용 가능한 속성이 정해져 있음
- 속성은 세부 설정, 속성값을 가진다.
<태그 속성=" 값 " ></태그>
예) <img src=“1.jpg” target="_blank"></a>
img 태그는 target속성을 가지고, 속성값으로 "_blank"를 지님
보통 색상은 부모의 영향을 받는다.
but 본인에게 지정이 되어있다면, 본인 지정이 우선시 된다.
'SeSAC 풀스택 > HTML' 카테고리의 다른 글
| HTML 자주쓰는 태그 모음 img(사진), 상대경로, 절대경로, table(표), a(하이퍼링크), ul&ol(목차) (0) | 2022.11.01 |
|---|---|
| 웹에 대한 기초 사항 (0) | 2022.10.31 |
| 언어는 왜 여러개인가? 종속적(dependent), 독립적(independent) (0) | 2022.10.31 |
