사이트 명

$$config title: HTML 만들기 with Visual Studio Code keywords: - 웹 브라우저 - HTML $$ # 웹 브라우저 만들기 (HTML) 웹 브라우저는 **HTML**, **CSS**,**Java Script**로 구성 된다. HTML : 화면 상의 구조를 나타내는 요소 (ex : 어떤 데이터가 어디에 있어야 하는지) CSS : 디자인 요소 (ex : 글씨의 색깔 변경, 크기 조절, 배치 등 ) JS : 움직임, 동적인 기능을 넣어주는 요소 > html문서 작성 시 유의점 1. html 관련 폴더, 파일 명은 소문자로 작성한다. 2. <>꺽쇠 괄호로 생긴 태그를 사용하여 문서를 작성한다. 3. 주석 단축기 : command + / , 직접 작성 시 : > 4. Visual Studio Code에서 문서 작성 후 option + b (mac 단축키) 누르면 웹 브라우저로 출력 # HTML 코드 예제 ### basic.html ~~~html - import 태그 - 내용이 보여지는 태그

- 제목 태그 - 표 태그 text test ~ --- ### test.html ~html 사이트 명 여기는 노랑색 글씨로 나온다. 여기는 일반 글씨 ~ --- ### ex01.html ~html 사이트 명
브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h1
브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h2

브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h3
브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h4

브라우저에게 표시될 문서의 내용
/ 크기 태그 테스트 h5

브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h6
브라우저에게 표시될 문서의 내용 / 진하게 테스트 b
브라우저에게 표시될 문서의 내용 / 기본
브라우저에게 표시될 문서의 내용 / 기울임 i
네이버 링크 / 웸 문서, 외부 사이트를 연결하는 링크 a
~ --- ### b_i_img_a.html ~html b, i, img, a 태그 사용법
<b>태그는 텍스트를 굵은글꼴로 표시한다.
<i>태크는 텍스트를 기울임꼴로 표시한다.
브라우저에게 꺽쇠괄호를 표시하고 싶다면
태그명 앞에 &,l,t (태그명) &,g,t를 써준다.(,빼고)
브라우저에게 이미지를 표시하고 싶다면 원하는 그림파일을 준비한 후
<img src = "파일제목.파일명" width = "가로크기" heigth = "세로크기"> 를 작성한다.
네이버 링크
브라우저에게 링크를 표시하고 싶다면
<a href = "외부사이트 링크">를 작성한다.
~ --- ### p_br.html ~html p 태그 사용법

텍스트의 위 아래로 택스트 단락이 생긴다.
줄바꿈이 없는 텍스트의 경우 자동으로 브라우저의 크기에 맞춰서 표시되고 위 아래로 단락이 자동으로 만들어진다.
자주 사용되는
태그이다.
br태그는 닫는
태그가 없다
쉽게 생각해서
p태그는 자바에서의 frintln이라고 생각하면 되고
br태그는 닫는 태그 없는 일회용 frintln이라고 생각하면된다.
~ --- ## 웹 표준 비적용과 웹 표준 적용 비교 ### non_standard.html (웹 표준 비적용) ~html 웹 표준 비적용
이제 웹 표준 의 역할은 아주 중요합니다.
~ --- ### standard.html (웹 표준 적용) ~html 웹 표준 적용
이제 웹 표준
의
역할은 아주 중요 합니다.
~ --- ## HTML4 와 HTML5 비교 #### HTML4 문서 구조 ~html HTML4 문서 구조
Header
Content
Footer
- HTML4의 일반적인 문서구조는 div태그(ex : 자바의 자료형)에 id(ex : 자바의 변수)를 붙혀 영역을 설정
- 개발자마다 이름이 다를 수 있어 해석하기 나름이며, 소스코드가 길어질수록 구조 파악이 어려움

-> 따라서 HTML5의 문서구조를 사용할 예정 ~ --- #### HTML5 문서 구조 및 semantic 태그 적용 ~html HTML5 문서 구조 및 시맨틱 태그 적용

입양하기

Menu1
Menu2

고양이 용품 준비하기
본문 내용

Copyrigth 2022 yurim

~~~ --- ### Semantic 태그 ‘의미의’ 라는 의미를 가진 태그로 각 요소가 스스로 의미를 가진 태그 - 시맨틱 태그의 종류 1. <header> 2. <nav> 3. <h1~h6> 4. <article> 5. <section> 6. <aside> 7. <footer> - 시맨틱 태그를 사용하는 이유 1. 태그만 보고 쉽게 레이아웃을 파악할 수 있음 2. 사이트 검색 시 필요한 내용을 찾기 용이함 3. 웹 접근에 있어서 장애인, 비장애인 모두 이용할 수 있음 구조 ![img](https://github.com/miruy/vsc/blob/master/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-01-07%20%EC%98%A4%ED%9B%84%207.30.02.png?raw=true) ## semantic 비적용과 적용 비교 예제 #### 적용 전 ~html 고양이 돌보기 (시맨틱태그 적용 전)

고양이 종류

입양하기

고양이 종류
장모종 고양이

페르시안

하얗고 털이 긴 장모종 고양이

노르웨이 숲 고양이

털이 긴 장모종 고양이

단모종 고양이

러시안 블루

회색 빛깔의 단모종 고양이

건강한 고양이

코가 젖어 있고 눈꼽이 없어야 함

털이 윤기가 나고 부드러워야 함

Copyright 2022 yurim
~ --- #### 적용 후 ~html 고양이 돌보기 (시맨틱 태그 적용 후)

고양이 종류

입양하기

고양이 종류

장모종 고양이

페르시안

하얗고 털이 긴 장모종 고양이

노르웨이 숲 고양이

털이 긴 장모종 고양이

단모종 고양이

러시안 블루

회색빛깔의 단모종 고양이

건강한 고양이

코가 젖어 있고 눈꼽이 없어야 함

털이 윤기가 나고 부드러워야함

Copyright 2022 yurim

~ --- 적용 전과 적용 후 결과 befor_semantic.html과 after_semantic.html의 결과는 같지만 화면 판독기에tj도 문서를 쉽게 해석, 검색사이트에서 효율적으로 검색, CSS를 이용하여 레이아웃 적용이 가능하므로 Semantin 태그를 사용하여 유용하게 문서를 작성할 수 있다.

브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h1

브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h2

브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h3

브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h4

브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h5

브라우저에게 표시될 문서의 내용 / 크기 태그 테스트 h6

고양이 용품 준비하기

고양이 종류

장모종 고양이

단모종 고양이

건강한 고양이

고양이 종류

장모종 고양이

단모종 고양이

브라우저에게 표시될 문서의 내용
/ 크기 태그 테스트 h5