[목차]
01. 기본정의
1) 웹표준
👉🏻1️⃣ W3C : 웹 표준 권고안2️⃣ 엔진 : 웹 표준에 의거하여 프로그래밍
3️⃣ 크로스 브라우징 : 여러 브라우저에서 동일한 화면 / 동작 등을 보여줄 수 있도록 제작하는 기술 또는 방법
4️⃣ 뷰포트 : 하나의 웹페이지가 출력되는 영역
5️⃣ 출력 - 렌더링 : 브라우저의 뷰포트 영역에 웹 사이트를 출력/그려내는 것
2) 웹 접근성
👉🏻장애를 가지신 분들도 웹 사이트를 이용할 수 있게 하는 방식
3) 웹 호환성
👉🏻웹 사이트가 작동하는 서비스 이용자 단말기(PC, 모바일 등)가 다른 환경에서도 동등한 서비스를 제공하는 것
4) UI
👉🏻1️⃣ 사용자가 마주하게 될 시각적인 디자인을 말함2️⃣ UI디자인 : 화면의 모양이나 기능 등을 표현하는 것
3️⃣ 목적 : 일관성을 확보하는 것
5) 웹
👉🏻1️⃣ 인터넷이 연결된 사용자들이 서로 정보를 공유하는 공간2️⃣ 웹 브라우저를 통해 접근할 수 있는 사이트를 웹사이트 라고 함(www / w3)
6) 웹 브라우저
👉🏻1️⃣ 어떤 사이트에 접속할 수 있는 도구를 브라우저 또는 웹브라우저 라고 함2️⃣ 종류 : 크롬, 엣지(MS), 파이어 폭스, 사파리 등
7) 웹개발
👉🏻1️⃣ 정적인 사이트- 사용자에게 단순한 정보를 보여주는 것
2️⃣ 동적 사이트
- 화면에 보이는 모습 뿐만 아니라 사용자에게 제공할 기능과 서비스까지 포함한 사이트
3️⃣ 백엔드(서버)
- 보이지 않는 정보 처리
- 서버에서 데이터를 관리하는 프로그래밍
- 데이터베이스를 설계하거나, 데이터를 처리하는 영역
4️⃣ 프론트엔드
- 눈에 보이는 화면
- 웹 사이트의 디자인, 사용자 동작에 반응하는 기능을 만든다.
- 서버에서 받아온 데이터를 웹 브라우저에 어떻게 표시할 것인지 프로그래밍한다.(HTML, CSS, JS)
8) 서버(제공하는 역할)
👉🏻1️⃣ 서버라고 부르는 컴퓨터에 들어있는 내용2️⃣ 제공하는 컴퓨터 : 서버
3️⃣ 서비스를 받는 컴퓨터 : 클라이언트
9) 웹 동작 방식
👉🏻1️⃣ 사용자 컴퓨터 ↔ 서버- 브라우저를 연다.
- 주소창에 접속을 원하는 사이트 주소를 입력한다.
- 해당 사이트의 주소에 맞는 서버로 최초 요청
- 최초 응답 - 기본적인 웹사이트 구조를 담고 있는 HTML파일로 응답
- 작성된 HTML에 맞는 이미지, CSS파일 등 서버로 추가 요청
- 새로운 파일들(페이지를 구성하는)을 보내준다.
2️⃣ 키워드
- 로컬(Local)개발 환경 : 개발 컴퓨터 환경
- HTML : 자주 사용하는 HTML요소를 가지고 실제 CSS와 JS를 통해 어떻게 웹 사이트를 만들 수 있는지 알아야 한다.
02. HTML(Hyper Text Markup Language)
[HTML]
👉🏻HTML5➡️ 시멘틱 태그를 지원
➡️ 문서 구조에 적합하게 웹페이지를 설계할 수 있다.
➡️ 직관적으로 레이아웃을 작성할 수 있다.
👉🏻HTML 기본 구조➡️ HTML에서 사용하는 명령어 - 태그(Tag)라고 합니다.
- <...>로 나타내며, 대부분 한 쌍으로 이루어져 있다.
- HTML문서는 웹 브라우저에서 실행된다 -> 웹 표준 준수 -> 브라우저 엔진(표준) -> 정상적으로 읽는다.(뷰포트 영역에 렌더링)
- <!DOCTYPE html> : !는 선언한다는 의미. 브라우저에게 이 문서는 HTML(5) 문서다라고 알려주는 것.
- <html></html> : 브라우저에게 HTML 문서의 시작과 끝을 알려준다.
- <head></head> : 해당 페이지에 대한 정보를 서술하는 공간. 웹페이지에 단 하나만 존재. 브라우저 실행 화면에는 보이지 않는다. (설정 정보 작성 영역) ex) title, meta, link, style, script
- <title></title> : 탭에 보이는 웹 페이지의 제목 표시
- <meta> : 해당 문서에 대한 정보를 기술한다.
ex) <meta charset="utf-8"/> : 언어 설정👉🏻문자셋 종류
➡️ ASCII (American Standard Code...) : 미국 정보 교환 표준 부호 ➡️ EUC : ASCII가 아닌 국가 별 문자 표현을 위해 만들었다. 중복되는 영역이 발생 (여러 문자셋 사용x) ex) EUC-kr, JP, CN ➡️ Unicode(중복되는 영역이 발생하는 문제를 해결) : 모든 문자를 표현할 수 있다. 하나의 문자셋 안에 전세계 모든 문자를 넣어서 사용한다.(UTF-8)
- <body></body> : 브라우저 실행 화면에 보인다. 사용자의 눈에 보이는 구조를 작성하는 범위 / 영역
[코드] HTML 기본구조
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> </body> </html>
👉🏻HTML tag➡️ 텍스트와 관련된 태그들
- 제목을 표시하는 h*
- h1태그는 모든 페이지에 하나만 작성해야 한다.(웹표준)
- 굵은 글씨
- b태그는 단순한 굵은 글씨
- strong태그는 실제 페이지에서 더 중요한 내용을 표기할 때 사용하며 시각 장애를 가지신 분들을 위한 HTML을 만들 때 사용. * 웹표준을 준수하고 싶으면 strong태그 사용 권고
- 이텔릭체(기울어진 글씨)
- i태그는 단순한 기울어진 글씨
- em태그는 문장의 흐름에서 특정 부분을 강조하고 싶을 때
- 문단을 나타내는 p
- 밑줄 u, 취소선 s
- 큰 글자 big, 작은 글자 small
- 강제 공백 (문자 엔티티)
- 주석 <!--주석-->
- 개행 br : 웹 표준을 준수하려면 사용하지 말아야 한다.
- 구분선 hr
➡️ 미디어 관련 태그
- video
- img
[코드예제] 미디어
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8" /> <title>미디어 관련 태그</title> </head> <body> <video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video> <img src="https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255__340.jpg" alt="흰둥이"> <p> <a href="http://ksmart.or.kr">한국스마트정보교육원</a> <a href="http://ksmart.or.kr" target="_blank">한국스마트정보교육원</a> </p> </body> </html>
➡️ 링크 관련 태그
- 하이퍼링크
➡️ 테이블
➡️ 목록
- ul : 순서가 없는 목록
- ol : 순서가 있는 목록
➡️ input
[코드] HTML 태그
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <b>굵은글씨</b> <strong>굵은글씨</strong> <i>기울어진 글씨</i> <em>기울어진 글씨</em> <u>밑줄</u> <s>취소선</s> <big>클글씨</big> <small>작은글씨</small> <!-- 구역 내 콘텐츠 태그들 --> <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1> <h2>h2는 소제목입니다.</h2> <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3> <hr> span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요 <hr> a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a> <hr> img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /> <hr> video 태그입니다 : <video src=" " controls>미디어</video> <hr> input 태그입니다: <input type="text" /> <!-- 구역을 나누는 태그들 --> <div>나는 구역을 나누죠</div> <p>나는 문단이에요</p> <ul> <li>순서가 없는 목록</li> </ul> <ol> <li>순서가 있는 목록</li> </ol> </body> </html>
👉🏻요소와 속성<h1>안녕하세요</h1> → h1요소
1️⃣ 요소(Element) : 태그와 태그 사이에 있는 내용을 포함하여 요소라고 한다.
- 태그 사용 시, 대소문자를 구별하지 않는다. 단, W3C에서 소문자를 권장하고 있기 때문에 소문자를 사용하는 것이 일반적인 방법
2️⃣ 빈 요소(Empty Element) : 내용을 가질 수 없는 요소 ex) <br> <hr> <input> <image> <link>
3️⃣ 속성(Attributes) : 태그가 가질 수 있는 정보. 태그 내부에 속성을 부여하고, 값을 넣을 수 있다. (시작 태그에 작성해야 한다.)
- HTML에는 태그마다 지정할 수 있는 속성이 미리 정의되어 있다.
4️⃣ 전역 속성
- id : 요소를 가르키는 이름을 작성한다. 중복 불가
- class : 요소를 가르키는 이름을 작성한다. 중복 가능
- style : 요소에 스타일을 지정할 수 있다.
웹 편집기(VSCode)
💡자주 사용하는 Extensions 세팅
03. 기타정리
HTML과 CSS의 개념
👉HTML은 뼈대, CSS는 꾸미기!- HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었습니다. HTML 코드 내에 CSS 파일을 불러와서 적용합니다.
- 또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.
tag : #웹 #개발 #HTML #기본구조 #정의 #VSCode
Uploaded by N2T