유희를 즐겨
html 23.12.22 본문
웹 표준
- 웹에서 사용하는 표준 기술
- 웹 표준을 준수 한다 = 웹 페이지가 표준화된 html, css, js 규정을 따르고 있다
- 웹 표준을 준수 -> 어떤 브라우저에서 웹 페이지를 실행 -> 동일한 화면 출력
w3c(World Wide Web Consortium)
- 웹 표준과 가이드 라인 개발 수행
w3c 권고안에 해당하는 기술이 웹 표준
- 초안
- 후보 권고안
- 제안 권고안
- 권고안
브라우저 엔진
- 브라우저의 구성 요소 : 브라우저 엔진
- 브라우저 엔진 : 웹 페이지를 구성하는 html, css 자료를 해석 -> 사용자 장치에 맞게 변환하는 역할
- 브라우저 엔진은 웹 표준에 의거하여 프로그래밍 되어 있다 -> 따라서 우리가 코드를 작성할 때 웹 표준에 맞게 코드를 작성해야 브라우저가 정상적으로 읽을 수 있다
브라우저 기본 인터페이스
- 탭
- 주소창
- 뷰 포트(Viewport) : 하나의 웹 페이지가 출력되는 영역
출력 -> 렌더링 : 브라우저의 뷰 포트에 웹 사이트를 출력하는/그려내는 것.
웹 접근성
- 장애를 가진 사람이나 장애를 가지지 않는 사람 모두가 웹 사이트를 이용할 수 있게 하는 방식
웹 호환성
- 사용자의 단말기(pc, 테블릿, 스마트폰)가 달라져도 동등한 서비스를 제공하는 것
UI/UX
UI
UX : 사용자 중심으로 설계된 디자인(사용자 경험)
웹
- 인터넷에 연결된 사용자들이 서로 정보를 공유하는 공간
- 웹 브라우저를 통해 접근할 수 있는 사이트를 웹 사이트라고 한다
브라우저
- 사이트에 접속할 수 있는 도구
- 크롬, 엣지, 사파리 등
웹 개발
- 웹 사이트를 만드는 것
정적 사이트
- 단순한 정보만 보여준다
동적 사이트
- 화면에 보이는 모습 + 사용자에게 제공하는 기능, 서비스 포함
백 엔드(서버)
- 보이지 않는 정보를 처리
- 서버에서 데이터를 관리하는 프로그래밍
- 데이터베이스를 설계하고, 데이터를 처리하는 영역
프론트 엔드(클라이언트)
- 눈에 보이는 화면
- 웹 사이트를 디자인, 사용자의 동작에 반응하는 기능을 만든다
- 서버에서 받아온 정보를 웹 브라우저에 어떻게 표시할 것인지 프로그래밍
서버(Serve:제공하다)
- 한 컴퓨터가 네트워크에 연결된 다른 컴퓨터들에게 어떤 것을 해주면,
그것을 서버의 역할을 해준다 라고 말한다
- 역할의 개념
- ex 유튜브
영상 제공해준다 -> 유튜브 서버
우리 -> 클라이언트
클라우드와 서버의 차이점은 무엇일까
: 클라우드가 서버보다 더 큰 개념 클라우드가 더 많은 기능을 제공
vs 코드 사용
웹 개발 : 소스 작성 > 저장(ctrl+s) > 웹 브라우저에서 확인
워크스페이스
파일명 : vscode_html
확장팩(Extension)
- live server
- 한국어
- html css support : 자동완성
- auto rename tag
- html auto conpletion
- material icon theme(이건 선택 설치)
html, css
- html의 기본 구조
- tag : html에서 사용하는 명령어이며 대부분 한 쌍으로 이루어져 있음
<...> 으로 작성
- 요소와 속성
- css : selector
html은 기본적으로 의미를 가지고 있으며, 자주 사용하는 html 요소들이 정해져 있다
html의 목적 : 정보 전달
- 운영체제나 프로그램에 상관 없이 일정한 형식이 동일하게 보이는 html 문서를 제안 했다
html
- hyper text : 문서를 연결해주는 링크
- markup lang : hyper text를 만드는 언어
tag를 이용해서 표시하다
html은 웹 페이지 - 웹 문서를 만들기 위한
페이지의 제목, 문단, 표, 이미지 등 기본적이 구조를 담당
현재 표준 html 버전은 html5이다
html5 : 의미있는 태그 지원
html 문서는 어디에서 실행되는가?
웹 브라우저에서 실행
브라우저 엔진이 우리가 작성한 html 문서를 읽음
엔진이 웹 표준을 기준으로 읽음
html 확장자 명 .html
파일을 만들 때 날짜(숫자)는 띄어쓰지 않는다고 한다..?
html 기본 구조 단축키
1) !html 입력후 enter
2) ! + tab
! : 선언하다
DOCTYPE : Document Type Definition
html : html 버전 5
<html></html> : 브라우저에게 html 문서의 시작과 끝을 보여준다
<head></head> : 웹 ㅍ에이지에 대한 정보를 작성하는 공간
설정 정보를 작성하는 영역
meta 태그 : 해당 문서에 대한 정보를 기술
meta 태그에는 charset, description이 대표적
<body></body> : 실제 웹 브라우저에 표시될 내용을 작성
사용자 눈에 보여지는 구조
* f12 개발자 도구(웹페이지에서)
문자셋(Character Set)
- ASCII(American Standar Code) : 미국 정보 교환 표준 부호
영문 알파벳, 숫자, 특수 기호 지원
단점 -> 다른 나라의 언어를 표시할 수 없음
- EUC(Extended unix code) : 국가 별 문자 표현을 위해 만들어짐
한국 -> EUC-kr
단점 -> 국가 별 문자 표현 코드 표에서 중복되는 영역이 발생
Unicode : 모든 문자 표현
UTF-8
UTF(Unicode Transformation Format)
주석 처리
<!--여기에 주석을 작성-->
단축키
ctrl + s : 저장
ctrl + z : 실행 취소
ctrl + shift + home : 커서가 뒤에 있을 때 사용
ctrl + shift + end : 커서가 뒤에 있을 때 사용
ctrl+spacebar : 자동 완성이 나오지 않았을 때
html 태그
제목을 표시하는 태그 <h*>
- h1 태그는 하나의 문서에 1개만 존재해야 한다
- h 태그는 순서대로 작성해야 한다
굵은 글씨 태그 <b>, <strong>
<strong> 중요한 내용을 표시할 때 사용
기울어진 글씨 태그 <i>, <em>
<i> 단순한 기울어진 글씨
<em> 의미를 가지고 강조하는 것
문단을 나타내는 태그 <p>
<p> 엔터를 치고 사이에 사용
<p>
문단을 나타내는 태그
</p>들여쓰기를 하는 이유 : 가독성을 위해
줄바꿈(개행) 태그 <br>
문단 뒤에 작성을 하는게 옳다
<p>
<h3>Lorem ipsum dolor,</h3><br>
sit amet consectetur adipisicing elit. <br>
Optio molestiae doloribus, <br>
quod vel non, amet voluptas, <br>
vero voluptates ducimus explicabo repellat maiores? <br>
Magni impedit ab error temporibus vero omnis aut.<br>
</p>
* html에서는 공백을 여러 개 넣어도 1개만 처리
강제 공백을 지정하기 위해서는
밑줄<u>
취소선<s>
마킹<mark>
더미 태그 <lorem>
이미지 삽입 <img>
<body>
<img src="https://cdn.pixabay.com/photo/2023/12/08/09/13/vine-8437282_1280.jpg" alt="잎">
</body>
src는 이미지를 출력
alt는 이미지를 설명
하이퍼 링크
<body>
<a href="http://www.ksmart.or.kr/">한국스마트정보교육원</a><br>
<a href="http://www.ksmart.or.kr/" target="_blank">한국스마트정보교육원</a>
</body>
target="_blank" : 새탭으로 열기
테이블
- 행과 열로 구성된 표를 만드는 요소
- table 함께 사용하는 태그 caption
- 웹 표준에 관련 : 테이블이 어떤 테이블인지 설명을 작성하는 태그가 caption
caption은 많은 설명이 화면에 보이게 할 수 없으니 디자이너들이 css를 사용해 화면 밖으로 뺀다
테이블 구성
- table 태그 : 테이블의 시작과 끝
- thead : table head (맨 위 첫줄)
- tbody : table body 테이블의 본문
- th : 주로 thead 안에서 사용한다
thead의 칸을 나타낼 때 사용 -> td보다 글씨가 더 굵음
- tr : table row 줄을 표현(세로)
- td : table data 한 칸을 표현(cell data)
<table border="2">
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>유희</td>
<td>익산</td>
</tr>
</tbody>
</table
<tr>은 세로
<td>는 가로
목록
<!--순서가 있는 목록-->
<ol>
<li>java</li>
<li>js</li>
<li>dm</li>
</ol>
<!--순서가 없는 목록-->
<ul>
<li>전주</li>
<li>익산</li>
<li>군산</li>
</ul><li> 리스트
<ol> 숫자가 출력되는 목록
<ul> 도형이 출력되는 목록
목록 예제
- 내가 입력한 코드
<body>
<ol>
<li>뚜벅이 여행지 선정</li>
<ul>
<li>쉽게 갈 수 있나?</li>
<li>동선을 어떻게 짜야할까?</li>
</ul>
<li>숙소 찾기</li>
<ul>
<li>터미널에서 가까워야 해</li>
<li>무조건 오션뷰</li>
<li>방, 화장실 깨끗해야 해</li>
<li>조식도 맛있어야 해</li>
</ul>
<li>맛집 찾기</li>
<ul>
<li>찾아가기 쉬운가?</li>
<li>사람이 너무 많나?</li>
<li>혼자 가도 괜찮을까?</li>
<li>메뉴는 뭐가 있나?</li>
</ul>
<li>관광지 찾기</li>
<ul>
<li>찾아가기 쉬운가?</li>
<li>교통편 확인하기</li>
</ul>
</ol>
<br>
<br>
<ol>
<li>여행지 선정</li>
<ul>
<li>쉽게 갈 수 있나</li>
<li>동선은 어떻게</li>
</ul>
<li>숙소 찾기</li>
<ul>
<li>터미널</li>
<li>오션뷰</li>
<li>깨끗</li>
<li>조식</li>
</ul>
<li>맛집</li>
<ul>
<li>찾아가기</li>
<li>사람</li>
<li>혼자 가능?</li>
<li>메뉴?</li>
</ul>
<li>관광지</li>
<ul>
<li>교통편</li>
</ul>
</ol>
</body>- 출력
* 드롭다운을 작성해야 할 때에는
<ol>
<li>
여행지 선정
<ul>
<li>쉽게 갈 수 있나</li>
<li>동선은 어떻게</li>
</ul>
</li>
<li>
숙소 찾기
<ul>
<li>터미널</li>
<li>오션뷰</li>
<li>깨끗</li>
<li>조식</li>
</ul>
</li>
<li>
맛집
<ul>
<li>찾아가기</li>
<li>사람</li>
<li>혼자 가능?</li>
<li>메뉴?</li>
</ul>
</li>
<li>
관광지
<ul>
<li>교통편</li>
</ul>
</li>
</ol>이렇게 작성해야 드롭다운이 적용 됨
<div> 구역을 나눌 때 사용
요소와 속성(매우중요)
<...></...> -> 태그
<h1></h1> -> h1 태그
<h1>안녕하세요</h1> -> h1 요소
요소 : 태그와 태그 사이에 내용을 포함한 것이 요소이다
<...> : 시작 태그 또는 열린 태그
</...> : 종료 태그 또는 닫는 태그
태그 작성에 있어서 w3c에서 소문자를 권장한다
빈 요소 : 내용을 가질 수 없는 태그
ex. link, br, meta 등
속성(attributes)
- 태그가 가질 수 있는 정보
- 속성이 있고 값이 있다
- <...> 시작 태그 내부에 작성
<img src="https://cdn.pixabay.com/photo/2023/12/08/09/13/vine-8437282_1280.jpg" alt="잎">img 태그에서
src속성이 있는데
값은 https://cdn.pixabay.com/photo/2023/12/08/09/13/vine-8437282_1280.jpg 이고
alt속성의 값은 잎 이다
전역 속성
- 태그에 쓸 수 있는 속성은 정해져 있지만 id와 class는 모든 태그에 사용할 수 있다
- 속성 : 태그가 가질 수 있는 정보
- 전역 속성의 종류
1) id 속성
2) class 속성
- 공통점 : 요소를 가리키는 이름
- 차이점 : id는 중복 사용을 할 수 없고 class는 중복 사용이 가능하다
class는 여러 이름을 가질 수 있다
