HTML 이란?
HTML 은Hyper Text Markup Language 약어로HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진
문서를 만드는 언어입니다.
다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있습니다.
시멘틱 마크업 : 기본 뼈대,구조가 되는 코드문법
DTD : 도큐먼트 타입, 선언하지 않을 경우 비표준모드로 렌더링 되어서
다른 브라우저에서 접속한다거나 하는 경우에 레이아웃이 깨져서 보이게 된다 .
VS CODE EXTENSION : LIVE SERVER , PRITTER ( 추천 확장팩)
10시
HTML 기본 구조에 대해 배우는중.
VS CODE 에서 ! 치고 엔터 . 바로 HTML 기본 구조 나옴
<!-- <!DOCTYPE html> : 문서의 유형을 선언 ,html 문서파일 -->
<!-- <html lang="en"> </html> : html 문서의 시작/끝 , lang 속성 이용 문서의 기본언어 지정-->
<!-- <head></head> : 문서의 메타데이터와 제목 등을 포함하는 머리말 -->
<!-- <meta charset="UTF-8"> : 인코딩방식 설정 -->
<!-- width=device-width : 장치의 너비만큼.뷰포트의 너비를 디바이스의 너비만큼 설정 -->
<!-- <meta name="viewport" content="width=device-width> :반응형 웹지다인 위한 뷰포트 -->
<!--initial-scale=1.0"> : 페이지가 처음 로드될때 확대/축소 지정 -->
<div> : 블럭형 태그 한 줄을 전부 차지한다.
<p> : div 와 기능은 비슷하지만 용도가 다르다. div는 블럭을 나누는게 목적이라면
p는 한 문단을 나눌때 사용한다.
<span> : 라인을 전부 차지하지 않고 블럭을 묶어준다
엔티티
HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)
(엔터티나 엔티티나 똑같은 거임!)
: 줄 바꿈 없는 공백
  ; : 줄 바꿈 없는 공백
(둘 다 같은 뜻이다 !)
-  : HTML 문자 참조로, 숫자 코드로 표현됩니다. 여기서 160은 유니코드 또는 ASCII 코드에서 Non-Breaking Space의 숫자값입니다.
- : HTML 엔티티로, 이름이 부여된 참조입니다. nbsp는 "non-breaking space"의 약자입니다.
대표적인 예 : 공백
hello world 를 출력할때 공백이 한번까지는 들어가지만 공백을 여러번을 해도 더이상 공백이 되지 않는데 이럴 때 엔티티를 사용한다.
hello world : 공백3번추가
ul : 리스트형 구조 생성 태그(동그라미 붙음)
ol : 순서가 있는 리스트(번호 붙음) , ol type=”” 하면 리스트의 번호 종류를 지정가능
Emmet : html에서 사용하는 자동완성 기능. html 작성 속도를 크게 향상시켜 준다.
진도 진짜 슥슥빼버시리네 ㄷㄷ
자식 요소 : '>' : 안에 포함시켜서 생성
형제노드 : '+' : 같은 위치에서 생김
상위태그 이동 : 한 단계 상위태그로 벗어남
반복처리(여러개만듬) : * , 문자열처리 {문자열} , 인덱스처리(순서지정) : $
div>ol>li*3{$@3} : 이런식으로 했을 때 , 3개의 li 안에 1부터 3까지의 인덱스가 지정이 된다.
선택자(셀렉터)
클래스 선택자 : .
id 선택자 : #
attr 추가
padding : 객체의 내부여백
간단히 객체가 패딩을 입고 있다고 생각하자. 그러면 내부에서 빵빵해지는 것.
margin : 객체의 외부여백
<table> : 표만들기
tr :열
td :행 (보통 행의 내용으로 사용)
th : 굵은 폰트로 중앙정렬 (행, 열의 제목으로 사용)
<caption> 표의 제목 지정
thead : 머리글
tfoot : 꼬리말
tbody : 본문
rowspan : 열 병합 ,,세로로 병합함
colspan : 행 병합 ,, 가로로 병합함
병합하고 싶은거 주석처리
근데 셀을 병합한다기 보다는 셀을 확장시키는 것이 더 맞는말 같다.
병합할 셀을 없애서 합치게 만드는 것처럼 보이게 하는 거니까.
border-spacing : 표 간격 띄우기
border-collapse: collapse; : 표 간격 없애기
<a href=””> 링크 </a> : 하이퍼링크
<a href="https://www.naver.com" target="_blank">네이버 ㄱㄱ</a>
새탭 만들어서 이동
a 태그에 class를 지정한 다른 속성의 주소값(이름)을 넣으면 같은 페이지 내에서 그 위치로 이동할 수 있다 !
iframe : 새로운 하나의 네모창을 만들어서 안에서 실행
rem :
rem은 root em으로, 최상위 요소 (보통 html 태그)에 지정된 font size의 값을 기준으로 변한다.
즉, 최상단 html에 있는 글자 크기가 1rem이 된다.
크롬 브라우저의 경우 최상단 html 폰트 사이즈가 16px이다.
img 태그
말 그대로 페이지에 img 를 나타내주는 태그 이다. 사용법은
<img src="" alt="">
여기서 alt는 이미지가 엑박이나 오류로 뜨지 않을 때 대신 문구를 나타내주는 곳이다.
html은 프로그래밍 언어도 아니고 난이도도 이쪽 분야에선 없는 수준이라 할만큼 매우 낮다지만 짧은 시간안에 많은 언어들의 지식을 한번에 머리에 집어넣으려니 머리가 복잡하다..
항상 우선순위를 두고 공부하자 . !
'Developer Note > 국비과정 수업내용 정리&저장' 카테고리의 다른 글
| 24년 08월 21일 (0) | 2024.08.21 |
|---|---|
| 24년 08월 20일 (0) | 2024.08.21 |
| 24년 8월 16일 (0) | 2024.08.19 |
| 24년 08월 14일 (0) | 2024.08.15 |
| 24년 8월 13일 (0) | 2024.08.14 |