ㅁ 웹페이지에서 우클릭 - "검사(f12)" or "페이지 소스 보기"하면 소스코드 볼 수 있다. 웹 브라우저로.
ㅁ 브라우저마다 속성도 되는 것도 있고 안되는 것도 있음. 크롬으로 통일함.
[웹 통신 기초]
ㅁ 인터넷과 웹은 다른 개념이다.
ㅁ 인터넷은 전 세계적으로 모든 네트워크가 연결. 연결된 네트워크 망을 인터넷이라 함.
인터넷은 웹이 아니다. 엄연히 다른 개념.
ㅁ 웹(WEB)은 인터넷이라는 망 위에서 가능한 서비스이다.
ㅁ 외국에선 인터넷 익스플로러(IE) 안 씀. 근데 우리나라는 아직도 조금 씀.
전세계적으로는 크롬을 가장 많이 씀.
ㅁ
- 사용자가 웹브라우저를 키고 접속하고자 하는 url주소를 써서 보냄(엔터). 이게 구글 서버(측)에 요청을 보내는 것이다.
- 구글 서버는 매 페이지마다 HTML 문서를 가지고 있음. 이걸로 사용자에게 응답함.
- HTML은 소스코드로 되어 있다. 서버는 HTML을 브라우저로 쏴서 브라우저가 소스코드를 해석해서 사용자에게 시각적인 요소로 보여준다.
[HTML 개요]
ㅁ 태그를 마크업이라고도 함.
ㅁ HTML 문서를 작성한다하면 기본적으로 이것들은 써야 한다.
- 기본구조 자동완성 ! + 엔터
ㅁ 4번째 워크 스페이스 폴더
- 이번엔 깃에 원격저장소로 먼저 만들고 내려받는 방식으로 해본다.
- 깃허브 - your repository - new - Repository name에 "04_front-workspace"
- private, readME 체크하고 create repository하면 원격저장소가 생겼다.
- 얘랑 연동되는 로컬저장소 구축.
- 깃허브에서 방금 "04_front-workspace" 원격저장소에서,
초록색 Code - open with githubdesktop - local path에서 choose 누르고 C:\workspaces를 선택하면,
local path가 C:\workspaces\04_front-workspace가 된다. clone 누른다.
- 그러면 C:\workspaces에 04_front-workspace가 만들어진다.
- 수업 깃허브 https://github.com/gdj84-archive
ㅁ VS 코드를 설치한다.
- 이클립스에서도 프론트언어를 쓸 수 있지만 불편함. 자바 특화라.
- VS 코드로 자바 작성할 수도 있다.
ㅁ 설정
- encoding 검색 - UTF-8인지 확인
- font 검색 - Editro : Font Family에 기존 글꼴 지우고 직접 D2Coding 입력
- mouse wheel zoom 검색 - Editor : Mouse Wheel Zoom 체크
- 나중에 탭 4칸인데 너무 길어서 2칸으로 하는 경우도 많다.
ㅁ 확장기능
- Korean Language Pack for Visual Studio Code (UI툴 한글화)
- Auto Rename Tag (제작자 Jun Han)(시작태그, 종료태그 동시 수정)
- Live Server (제작자 Ritwick Dey) (실시간 HTML 작성 결과 브라우저로 보기)
ㅁ VScode에 설치된 확장 프로그램 확인하기
- 좌측 익스텐션 탭 누르고 검색어로 @enabled 입력
- 한글팩은 컴퓨터를 껐다 켜야 적용되는 경우가 있다.
ㅁ VScode로 "C:\workspaces\04_front-workspace" 열기
- 상단 File - open folder - "C:\workspaces\04_front-workspace" 선택
ㅁ 01_html 폴더 생성(C:\workspaces\04_front-workspace에)
ㅁ assets 마이박스에서 받아서 01_html과 동일한 곳에 폴더 이동.
- 오디오, 비디오, 이미지 파일을 정적 자원이라 함.
- 정적자원을 보관하는 디렉토리를 assets나 resources로 많이 함.
ㅁ 01_html 폴더에 새 파일 생성
- 파일 확장자를 꼭 .html을 지정해줘야 한다. "00_html.html"
ㅁ 주석 <!-- -->
- 한줄이든 여러줄이든 가능.
ㅁ vscode 단축키
(1) 한줄 단위 주석 ctrl /
- 블럭씌우고 ctrl /하면 여러줄 주석됨.
(2) 저장 ctrl s
(3) 행 복사 alt shift 방향키(위 아래)
(4) 행 이동 alt 방향키
(5) 행 삭제 shift delete, ctrl x
(6) 어시스턴스(자동완성) ctrl spacebar
(7) html 기본구조 자동완성 ! enter
(8) 태그 자동완성 꺽쇠없이 태그만 입력하고 엔터
(9) 문장 중간에서 줄바꿈 ctrl 엔터
(10) 행 선택(블럭)
(11) 여러 행에 같은 작업 하기 ctrl alt 방향키로 움직이고, shift 방향키로 블럭
ㅁ < HTML >
- HyperText Markup Language
- 프로그래밍 언어가 아닌 Markup(태그)로 정의하는 언어
- 웹 문서를 만들 때 사용되는 언어
- 태그로 구성된다.
ㅁ 태그
- 각 태그마다 화면에 표현되는 형식이 다르다.
- 태그는 대부분 시작 태그와 종료 태그로 구성되어 있으나,
시작 태그만 존재하는 경우도 있다. ex) <input>
- 계층 구조를 가지고 있다. (부모태그, 자식태그, 형제태그)
- 작성 형식
<태그명 속성명1="속성값1" 속성명2="속성값2">화면에 표현할 값</태그명>
- 속성값에 따옴표가 없어도 반영이 잘 되지만 항상 따옴표를 쓰는 습관을 들이는 것이 좋다.
속성값에 공백이 있을 수도 있어서. 쌍따옴표 홑따옴표 다 가능. 뭐가됐든 상관없다.
- 태그명은 대소문자를 가리지 않지만 소문자로 작성하는 것이 권장된다.
- 시작태그부터 종료태그까지(태그 포함)해서 element(요소)라고 한다.
ㅁ 태그 적용 범위
(1) 블럭 요소
- 한 줄 전체에 적용된다. 다음 요소 작성시 자동으로 줄 바꿈 처리된다.
(2) 인라인 요소
- 해당 요소에만 적용된다. 줄바꿈을 강제로 해줘야 한다.
ㅁ html 예제1
- < html lang="ko"> 제작 언어에 대한 속성. 사실 없어도 무방. 검색 엔진에서 쓴다.
- meta 태그는 해당 html 문서의 정보를 표현(누가, 어떤 프로그램으로 작성했는지 등)
- 이런것들이 검색엔진에 전달되어서 검색될 때 사용된다.
- charset은 이 문서 제작 인코딩.
- generator라는 속성의 값으로 문서를 제작한 프로그램
- author라는 속성의 값으로 문서의 제작자
- 메타태그로 쓸 수있는 것들을 나열하고 있다. 그런데 매번 쓸 필요는 없다.
- head에 작성된 것들은 화면에 노출되지 않는다.
- <title>제목</title> 태그는 html 문서를 웹 브라우저로 열어볼 건데, 탭 부분에 노출된다.
- body 태그에 두 줄로 썼지만 웹 브라우저에는 한 줄로 표시된다.
강제로 줄바꿈이 필요하다. <br> 태그.
ㅁ 엔티티 코드
- 특수문자를 의미하며 &로 시작하고 ;으로 끝난다.
- < > 비교연산자를 화면에 노출시키고 싶은데 태그의 시작으로 인식함.
- 스페이스바를 여러번 눌러도 한번만 적용된다.
ㅁ p 태그
- 문단 태그 <p></p>
- 블럭 요소 : 앞뒤로 자동 줄바꿈 처리. 한줄 단위로 영역을 차지하고 있는 것을 블록 요소라고 한다.
- 문단 내 공백은 하나만 적용되고 줄 바꿈은 적용되지 않는다.
※ <p>태그
<p>태그는 paragraph 약자로 문단을 구분할 때 씁니다.
즉 p태그는 br태그가 두번 들어간 것과 같은 결과가 나옵니다.
<p>안녕하세요</p>
<p>안녕하세요</p>
안녕하세요
출력
"
안녕하세요
안녕하세요
안녕하세요
"
ㅁ pre 태그
- 형식을 갖춘 문단 태그 <pre></pre>
- 블럭 요소.
- 문단 내에 입력한 내용을 화면에 그대로 보여줌.
ㅁ div 태그
- 영역을 지어주는 태그 <div></div>
- 블럭요소. 한줄 전체를 영역으로 차지함. 그래서 다음 요소 작성시 자동으로 줄 바꿈
ㅁ span 태그
- 영역을 지어주는 태그 <span></span>
- 인라인 요소. 현재 그 요소만을 영역으로 차지.
- div 요소에 마우스를 갖다대면 블럭요소라 한 줄 단위로 영역을 차지.
- span 요소에 마우스르 갖다대면 한줄 전체가 아닌 그 텍스트 문구(컨텐츠 영역)만을 차지하고 있다.
- 블럭 요소는 한 줄 전체를 차지. 인라인 요소는 컨텐츠 영역만 차지.
[ 텍스트와 관련된 태그들 ]
ㅁ heading 태그(h1~h6)
- 제목을 표현하는 태그
- 블럭 요소(한 줄 단위 영역 차지)
- 숫자가 작아질 수록 글자크기 + 굵기가 커진다.
ㅁ 텍스트 효과를 지정하는 태그
- 인라인 요소(줄바꿈 br로 해야함)
(1) b, strong(의미)
- 글자를 굵게 표현 bod
(2) i, em(의미)
- 글자를 기울여 표현 italic
(3) u, ins
- 글자에 밑줄로 표현 underline
(4) s, del
- 글자에 취소선 표현 strikethrough
(5) sub, sup
- 글자를 첨자로 표현
(6) mark
- 글자에 형광펜 표현
(7) small
- 글자를 작게 표현
(8) abbr
- 글자의 약어를 표현(약어의 풀네임을 작성할 때 사용. 툴팁처럼 뜬다.)
- IOT에 커서 올리면 툴팁이 뜬다.
(툴팁(Tooltip)은 사용자 인터페이스에서 사용되는 UI 요소로, 사용자가 특정 UI 요소 위에 마우스를 올리거나 특정 작업을 수행할 때 추가 정보를 제공하는 작은 팝업 박스입니다.)
- 사실 이런 스타일들은 CSS로도 다 줄 수 있다.
HTML에도 기본적으로 이런 효과를 주는 태그가 존재한다.
- 태그의 중첩 사용도 가능하다.
[ 리스트 관련 태그(목록을 구성하는 태그) ]
ㅁ 순서 없는 목록 unordered list
- 블럭 요소
- 글머리 기호(불릿기호)를 이용해서 목록이 구성된다.
- disc 타입 : ●
- circle 타입 : ○
- square 타입 : ■
- 형식
<ul type="속성값">
<li>목록1</li>
<li>목록2</li>
<li>목록3</li>
</ul>
- li*5 하고 엔터치면 특정 태그를 여러개 만들고 싶을 때 * 수량하고 엔터.
ㅁ 순서 없는 목록 ordered list
- 블럭 요소
- 번호를 이용해서 목록이 구성됨
- "1": 기본 숫자 목록 (1, 2, 3, ...)
- "A": 대문자 알파벳 목록 (A, B, C, ...)
- "a": 소문자 알파벳 목록 (a, b, c, ...)
- "I": 대문자 로마 숫자 목록 (I, II, III, ...)
- "i": 소문자 로마 숫자 목록 (i, ii, iii, ...)
- 형식
<ol type="형식" start="시작번호" reversed>
<li>목록</li>
<li>목록</li>
<li>목록</li>
</ol>
- reversed는 역순이다.
- 속성명과 속성값이 똑같은 애들은 그냥 속성명 제시만으로도 표현이 된다.
ㅁ 개요 목록 description list
- 블럭 요소
- 제목과 설명으로 하나의 목록이 구성된다.
- 형식
<dl>
<dt>제목1</dt>
<dd>설명1</dd>
<dt>제목2</dt>
<dd>설명2</dd>
</dl>
- 기본적으로 설명은 들여쓰기되어서 표현된다.
ㅁ HTML 엔티티
- HTML 엔티티 HTML에서 특정 캐릭터들이 예약되어있기 때문에 표기의 혼란을 막기 위해서 사용한다.
-   공백
- & &(앰퍼샌드)
- < <
- > >
'03. 웹 표준 기술 > HTML' 카테고리의 다른 글
| 07. 폼 관련 태그 (0) | 2024.08.05 |
|---|---|
| HTML 실습문제 (0) | 2024.08.02 |
| 03. 표 관련 태그 05. 멀티미디어 관련 태그 (1) | 2024.08.02 |
