클라이언트 사이드 랭귀지
HTML : 웹사이트의 틀을 작성하는 언어 (프로그래밍언어X, logicX )
CSS : HTML 문서를 시각적으로 만들어주는 언어
JavaScript : HTML문서의 컨텍츠 내용을 바꾸고 동적인 페이지를 만들기 위해 사용하는 프로그래밍 언어
---------------------------------------------------------------------------------------------------------------------------------------------
HTML : 웹사이트의 틀을 작성하는 언어 (프로그래밍언어x logicX )
<명령어> 마컴language?
웹사이트 문서
웹사이트화면
CSS : HTML 문서를 시각적으로 만들어주는 언어
서버가 html css js를 클라이언트에게 전달
웹서버(자바=언어,웹페이지구성)-----도구 html, css, js---> 도구만 사용자에게 날라감
JavaScript : HTML문서의 컨텍츠 내용을 바꾸고 동적인 페이지를 만들기 위해 사용하는 프로그래밍 언어 (웹사이트를 동적으로 만들어줌)
--------------------------------------------------------------------------------------------------------------------
서버 사이드 언어
JSP
Spring
python
HTML 문서 만들기
-HTML 문서는 확장명을 .html로 저장
-문서를 작성할 수 있는 에디터라면 어디든지 작성이 가능
-대소문자를 구별하지 않음
-태그 형태로 괄호를 (예:<명령어>) 사용하여 표현
-띄어쓰기, 줄바꿈을 구별하지 않음
-시작태그, 종료태그로 구성되어 있음 <명령어>/시작/ 내용 </명령어>/종료/
<html>
<head>
</head>
<body>
</body>
</html>
특수태그
(개행): <br> 글자가 아래로 내려감
(띄어쓰기): 한칸 띄어 쓰기
<: <
>: >
<<br>> = <br>
에밋(Emmet) =!
HTML,XML, XSL 문서등을 편집할 때 빠른 코딩을 위해 사용하는 플로그인(구 젠코딩)
HTML 주석문
<!-- 시작해서 --> 끝남
사용자에게 원본이 노출될수 있을 우려가 있기 때문에 조심해야함, 코드위치알려주는역할
문단 태그<p>
-문단을 만드는 태그
-블록 태그
제목 태그<h>
-제목을 표현할 수 있는 태그
-가장 큰 <h1> 태그부터 가장 작은 <h6>태그까지 제공
-블록 태그
-검색엔진에서 키워드로 사용
auto rename tag
자동으로 시작 태그, 종료 태그를 수정
HTML의 문서 구조
<!DOCTYPE html>
-HTML 문서의 선언
-HTML 버전 5를 나타냄
<html lang="en"> en은 영어 co는 한국어
- lang 속성은 웹 접근성에 관한 명시
- 스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나 해당 언어에 적합한 발음을 제공
-한국어로 설정하려면 lang="ko"
wrap
✅웹 접근성
정상적인 웹 컨텐츠 사용이 가능한 일반 사용자부터 고령자, 장애인 같은 신체적, 환경적 조건에 제한이 있는 사용자를 포함해 모든 사용자들이 동등하게 접근할 수 있도록 웹 컨텐츠를 제작하는 기법
<html ddd> ddd은 속성
<h1 ld>
태그 속성
✅속성
-요소(element)에 대한 추가적인 정보를 제공
<img src="apple.jpg">
-- -- --------
(태그) 속성 속성값
요소
속성은 태그마다 다름
<img src="apple.jpg"> (O)
<img src='apple.jpg'> (O)
<img src=apple.jpg> (O)
<img src=맛있는 사과.jpg>파일명에 띄어쓰기 있는경우 에러 (X)
<meta charset="UTF-8">
-meta 태그는 <head> 태그에 정보를 추가하기 위한 태그
-<meta name="작성자">,Keywords,Description, ... 의 값을 설정
-charset="UTF-8" 속성은 문자를 인코딩할 때 문자코드를 설정하는 역할
모바일로 확대 축소시킬때 기준
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-모바일로 최적화된 사이트에 포함하는 META 속성을 설정
-viewport: 가상의 화면
content:
-기본 해상도는 유지시켜줌
-모바일은 브라우저 해상도를 떨어뜨림
html