-
(0)HTML_기본설명HTML, CSS 2023. 3. 23. 15:13728x90
VSCode를 이용해 코딩 하였다.
클라이언트(Client)
서버로부터 서비스나 데이터를 요청하는 컴퓨터
서버(Server)
데이터를 포함하거나 네트워크의 다른 컴퓨터에서 액세스하는 기능을 제공하는 컴퓨터
클리이언트 사이드 언어
HTML(Hyper Text Markup Language)
Hyper Text(웹 페이지에서 다른 페이지로 이동할 수 있는 것) 기능을 가진 문서를 만드는 언어CSS, JavaScript
최초의 웹사이트
http://info.cern.ch/http://info.cern.ch
info.cern.ch
HTML 문서 만들기
- HTML 문서는 확장명을 .html로 저장
- 대소문자를 구별하지 않음
- 문서를 작성할 수 있는 에디터라면 어디든지 작성이 가능
- 띄어쓰기, 줄바꿈을 구별하지 않음
- 명령어(태그) 형태로 괄호를 (예: <명령어>) 사용하여 표현
- 시작태그, 종료태그로 구성되어 있음 (예: <명령어> ... <명령어>)<html>
<head>
헤드내용
</head>
<body>
바디내용
</body>
</html>VSCode 편하게 설정하는 법
live server 익스텐션 설치
HTML 문서를 선택 -> 알트 + 누르고 있는 상태 L , O
가로 스크롤 없애기
파일 -> 기본설정 -> 설정 -> wrap 검색 -> word wrap을 on으로 설정VSCode 코드정렬
전체선택: 컨트롤 + a
코드정렬: 컨트롤 + k + fHTML의 특수 태그
- < : <
- > : >
- 띄어쓰기 :
- 줄바꿈 태그: <br>
- 주석 : <!-- --> 한줄 또는 여러줄문단태그 <p> ~ </p>
- 문단을 나타내는 태그
- 블록태그 (한 라인을 모두 차지함)제목 태그
- h1 ~ h6 까지 크기
- 블록 태그
- 검색엔진에서 제목으로 표현됨
- 중요한 키워드를 적을때 하는게 좋음 잡다한말 xAuto Rename 익스텐션
- 시작태그와 종료태그가 변화하면 태그를 동일하게 변경
서식 태그
- 글자를 꾸며주는 태그를
- <b>: 텍스트를 굵게 표현
- <strong>: 텍스트를 굵게 표현, 리더기에서 거쎈 발음으로 읽어줌
- <i>: 텍스트를 이탤릭체로 표현
- <em>: 텍스트를 이탤릭체로 표현, 리더기에서 거쎈 발음으로 읽어줌웹 표준
- 웹에서 표준적으로 사용되는 기술이나 규칙
- W3C가 권고한 표준안에 따라 웹사이트를 작성할 때 이용하는 HTML, CSS, JavaScript등에 대한 규정
- 모든 브라우저에서 동일하게 적용 가능하게 하는 것웹 접근성
- 장애인, 고령자 등이 웹사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장
목록 태그
- <ul>: 순서가 없는 목록 태그, 블록태그
· 김사과
· 오렌지
· 반하나
<ul>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ul>
ul>li*3 을 하면 한번에 작성 가능 emmet(에밋)에밋(emmet)
- html, xml, xsl 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인
- 원래 젠코딩으로 부르다가 에밋으로 이름을 변경- <ol>: 순서가 있는 목록, 태그
1. 김사과
2. 오렌지
3. 반하나
<ol>
<li>김사과</li>
<li>오렌지</li>
<li>반하나</li>
</ol>- <dl>: 정의 목록 태그, 블록 태그
선생님
a학생
b학생
c학생
<dl>
<dt>선생님</dt>
<dd>a 학생</dd>
<dd>b 학생</dd>
<dd>c 학생</dd>
</dl>이미지 태그
1. 비트맵 이미지
- 픽셀이 모여 만들어진 정보의 집합
- 레스터 이미지라고도 부름
- 픽셀 단위로 화면에 렌더링함
- 그럼판, 포토샵 등 툴로 편집2. 벡터 이미지
- 수학적 정보의 형태들이 만들어내는 결과물
- 이미지가 가지고 있는 점, 선, 면의 위치, 색상정보를 가지고 있음
- 확대 및 축소를 해도 이미지가 깨지지 않음
- 일러스트 같은 툴로 편집jpg(jpeg)
- 압축률이 훌륭하여 사진이나 예술분야에 많이 사용
- 가장 널리 쓰이는 이미지 포멧
- 손실 압축
- 표현 색상(24비트, 약 1600만 색상)이 뛰어나 고해상도 표시장치에 적합gif
- 이미지 파일내에 이미지 및 문자열 같은 정보를 저장할 수 있는 파일
- 여러장의 이미지를 한 개의 파일에 저장할 수 있음(움짤, 애니메이션)
- 8비트(256색상) 컬러만 지원
- 비손실 압축png
-gif의 대체 포멧으로 개발
- 8비트, 24비트 컬러 이미지 처리
- 알파 채널 지원
- W3C 권장 포맷webp
- jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포멧
- gif 같은 애니메이션 지원
- 알파 채널 지원(손실, 비손실)
- 가장 완벽한 포멧이미지 태그
- 이미지를 브라우저에 출력
- 인라인 태그(컨텐츠 크기 만큼만 영역을 사용)
<img src = '이미지가 위치하는 주소 또는 파일경로' alt = '이미지를 대신할 문장'>속성
태그를 보완하는 역할
<!DOCTYPE html>: html 버전
<html lang="en">: lang="en", 리더기의 언어를 설정(en: 영어, ko: 한국어)
<head>
<meta charset="UTF-8">: charset을 utf-8설정, 전세계의 모든 국가의 OS/브라우저에서 언어셋을 모두 설정
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 브라우저에서 최적의 크기로 페이지를 보여주고, 확대/축소를 금지
<title>목록 태그</title>
</head>메타 태그
- HTML 문서에 대한 정보를 정의할 때 사용
- <html>와 </html> 사이에 적용
- name, content, http-equiv, author, viewport, keyword, description 등 여러가지 속성...'HTML, CSS' 카테고리의 다른 글
(5)HTML_목록태그 (2) 2023.03.23 (4)HTML_서식태그 (0) 2023.03.23 (3)HTML_제목태그 (0) 2023.03.23 (2)HTML_문단태그 (0) 2023.03.23 (1)HTML_최초의 웹사이트 (0) 2023.03.23