개발 전 기본 셋팅
Visual Studio Code
- Visual Studio Code 설치
- VSC 내 확장 프로그램 설치
◽ 오늘 설치한 프로그램
◾ Prettier : 코드를 분석하여 깔끔하고 일관된 코드스타일을 유지시켜주는 프로그램
◾ Live Server : 내 컴퓨터를 실제 서버처럼 작동시켜서 웹 개발을 도와주는 확장 프로그램
◾ W3C Web Validator : 웹 표준 검사
Visual Studio Code 단축키
- 주석처리 : Ctrl+/
- 선택 줄 복사 : shift + alt + 위아래 방향키
- 선택 줄 이동 : alt + 위아래 방향키
확장도구
- HeadingsMap (Chrome) : 페이지의 헤딩 구조 확인
폴더 및 파일 이름 규칙
1. 영어 소문자
2. 공백 X
3. 하이픈( - )
폴더 및 파일 경로
상대경로
- ./: 현재 폴더
- ../: 상위 폴더
- ./폴더명/: 하위 폴더
절대경로
http://, https://로 시작하는 도메인 네임이 포함된 인터넷상의 유일한 절대적인 경로(URL)
개발자 도구
ctrl+shilft+I / F12
WEB
- World Wide Web의 재귀적 용어
- 인터넷을 통해 접근할 수 있는 공용 웹페이지의 상호 연결 시스템
- 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간을 의미
WEB ≠ Internet
→ 웹은 인터넷을 기반으로 한 수많은 서비스 중 하나일 뿐
네트워크
- 컴퓨터와 컴퓨터를 연결해주는 망
- 네트워크와 네트워크가 모여 더 큰 네트워크인 인터넷이 된다.
HTML
= HyperText Markup Language
- Markup Language (마크업 언어) : 태그 등을 이용하여 문서나 데이터의 구조를 표시하는 언어
- 프로그래밍 언어가 아니다.
- 웹을 이루는 가장 기초적인 구성 요소 → 웹 콘텐츠의 의미와 구조를 정의
- 확장자 : .html
CSS
= Cascading Style Sheets
- 웹페이지의 모양/표현
- 확장자 : .css
JS (JavaScript)
- 웹페이지의 기능/동작
- 확장자 : .js
결론
HTML = 구조물(뼈대)
CSS = 인테리어
JavaScript = 집의 시스템 ex) 수도, 전기, 가스
HTML5
- HTML5라는 용어는 최신 웹 기술을 가리키는 유행어
- Living Standard를 HTML의 유일한 버전으로 사용
HTML 문서해부
! + Tab
→ VSCode에 기본적으로 내장되어 있는 에밋(Emmet) 플러그인 프로그램 입력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
- html Living Standard 문서라는 의미
- 문서 최상단에 선언해야 함
html
- 시작 태그는 HTML 문서의 시작을, 닫는 태그는 HTML 문서의 끝을 나타낸다.
- 모든 HTML 요소는 <html> 태그 내에 포함된다.
- lang 속성을 통해 주 언어가 무엇인지 설정 가능하다.
- 언어코드(소문자)-국자코드(대문자)
- ex) ko-KR
head
- 문자 인코딩, 타이틀, 설명, 스타일시트, 스크립트 등 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다.
- 사용자에게는 제목(title), 파비콘(favicon), 뷰포트(viewpoint) 정보 등이 보이게 된다.
title
- 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의한다. (only 텍스트 / 특수문자X)
- 약 60자를 넘지 않아야 한다.
link
- 빈 태그, 속성만을 포함
- head : 요소 내부에만 위치할 수 있음
- rel : relations 관계. 대상 파일의 속성을 나타냄
- href : 연결 시 참조할 파일의 위치를 나타냄
<html>
<head>
<!-- 스타일 시트 링크 -->
<link rel="stylesheet" href="style.css">
<!-- 폰트 링크 -->
<link rel="stylesheet" href="font.ttf">
<!-- 파비콘 링크 -->
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
</body>
</html>
body
- 사용자에게 보이는 영역
HTML 기본문법
태그
- 어떤 표시를 하기 위해 붙인 꼬리표
- 웹 문서에 정보를 정의해주는 형식
- <> 시작 태그(여는 태그) </> 종료 태그(닫는 태그)의 쌍으로 구성
block 🆚 inline
h1 ~ h6
- 숫자가 작을수록 크기가 큰 제목
- 제목태그는 검색엔진 사이트에도 스크린리더를 사용하는 사용자에게도 중요한 정보가 됨
- h1태그는 한 페이지에 한 번만 사용을 권장
a
- 인라인 요소
- href
◽ 절대 URL 연결
◽ 상대 URL 연결
◽ 같은 페이지의 요소로 연결
◽ tel: 전화번호
◽ malito: 이메일주소
- target 속성값
◽ _self: 현재 페이지(기본값)
◽ _blank: 새 탭
- download: 링크 이동 대신 사용자에게 URL을 저장할지 물어봄
<a href="b.html">b.html 으로 이동</a>
<a href="b.html" target="_blank">b.html 으로 이동</a>
<a href="b.html" download>b.html 파일 다운로드</a>
<a href="mailto:google@gmail.com">mailto:google@gmail.com</a>
<a href="tel:010-0000-0000">010-0000-0000로 전화걸기</a>
p
- 블록 요소
- Paragraph의 약어로 하나의 문단을 나타냄
br
- 줄바꿈 속성
- HTML은 엔터값을 인식하지 않기 때문에 HTML 문서에서 여러 줄로 되어 있어도 실제 화면에서는 한 줄로 보임
- 여백을 위해 내용없는 <p>태그나, <br>태그를 여러 번 사용 금지 -> 여백은 CSS에서 적용
wbr
- 현재 요소의 줄바꿈 규칙을 무시하고 브라우저가 줄을 바꿀 수 있는 위치를 나타냄
code
- 짧은 코드 조각(한 줄)을 나타낼 때 사용
<p>배열에 요소를 추가하려면 <code>push()</code> 메소드를 사용할 수 있다.</p>
pre
- HTML에 작성한 내용 그대로 표현
- 텍스트는 고정 폭 글꼴을 사용하고, 공백은 그대로 유지
- 공백이 필요한 코드나 텍스트를 사용해 그림을 그릴 때 사용
🌙｀、、｀ヽ｀ヽ｀、、ヽヽ、｀、ヽ｀ヽ｀ヽヽ｀
ヽ｀、｀ヽ｀、ヽ｀｀、ヽ｀ヽ｀、ヽヽ｀ヽ、ヽ
｀ヽ、ヽヽ｀ヽ｀、｀｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ
、ヽ｀ヽ｀、ヽヽ｀｀、ヽ｀、ヽヽ 🚶♀ ヽ｀｀ヽ｀｀、ヽ｀、
strong
- 중대하거나 긴급한 콘텐츠를 나타낼 때 사용
- 기본적으로 굵은 글꼴이 적용
- 스크린 리더를 사용하여 컴퓨터 화면을 낭독할 때 거센 억양으로 소리내어 발음함
<strong>경고! 이런 행동은 매우 위험합니다.</strong>
em
- 텍스트의 강세를 나타내며, 콘텐츠를 강조해서 읽었으면 하는 부분에 적용
- 기본적으로 기울임 꼴이 적용
- 음성 강조를 하는 것처럼 문자의 의미를 변경하는 데 사용
<p><em>개리가</em> 학교에 오지 않았어요!</p>
<p>개리가 <em>학교에</em> 오지 않았어요!</p>
i
- 기본적으로 기울임 꼴로 적용
- 외국어, 등장인물의 생각 등 일반적인 산문에서 벗어난 경우 사용
q
- 짧은 인용문을 나타냄
- 줄 바꿈이 없이 짧은 경우에 사용
- <q>태그를 사용하면 브라우저가 자동으로 인용 부호를 추가
<p>
나는 어린 왕자 책에서 이 구절을 좋아해!
<q>만약 네가 오후 네 시에 온다면 난 세시부터 행복해질 거야</q>
</p>- cite 속성을 사용하여 URL을 넣어줄 수 있음
<p>When Dave asks HAL to open the pod bay door, HAL answers:
<q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">
I'm sorry, Dave. I'm afraid I can't do that.
</q>
</p>
blockquote
- 긴 인용문을 나타냄
<blockquote>
<p>
"만약 네가 오후 네시에 온다면 난 세시부터 행복해질 거야.
그리고 널 만날 시간이 가까워질수록 점점 더 행복해지겠지.
네시가 되면, 흥분해서 안절부절 못할 거야.
그래서 행복이 얼마나 값진 것인지를 알게 될 거야."
</p>
</blockquote>
<cite>— 어린왕자 여우의 말 중</cite>
cite
- 저작물의 출처를 표기할 때 사용하며, 제목을 반드시 포함해야 함
address
- 연락처 정보
- 물리적 주소, URL, 이메일 주소, 전화번호, SNS정보, 좌표
- 연락처의 개인, 조직, 단체의 이름을 반드시 적어야 함
mark
- 형광펜으로 칠한 것처럼 표시
- 보통 검색 결과에 대한 시각적 효과를 위해 사용
abbr
- 약어(abbreviation)을 나타내는 태그
<p>쉽고 재미있는 <abbr title="Hypertext Markup Language">HTML</abbr>을 배웁시다!</p>
dfn
- 현재 맥락이나 문장에서 정의하고 있는 용어를 나타냄
<p>
<dfn id="html">
<abbr title="HyperText Markup Language">HTML</abbr>
</dfn>
웹 페이지의 의미론과 구조를 만드는 데 사용되는 마크업 언어입니다.
</p>
sup
- 위 첨자 요소로 지수, 서수 표기를 위해 사용
<p><var>a<sup>2</sup></var></p>
<p>English: 5<sup>th</sup></p>
sub
- 아래 첨자 요소로 각주, 변수, 화학식 등을 표기하기 위해 사용
CO<sub>2</sub>
<var>x<sub>1</sub></var>
kbd
- 키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타냄
<p>맥 브라우저 강력 새로고침 <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></p>
강조
<div class="example">
<p><strong>strong</strong> 태그 예시:</p>
<p>이 문장에서는 <strong>중요한 콘텐츠</strong>를 강조합니다.</p>
<p>strong 태그는 <strong>굵게</strong> 표시되며, 스크린 리더에서도 강조됩니다.</p>
</div>
<div class="example">
<p><em>em</em> 태그 예시:</p>
<p>이 문장에서는 <em>강세를 나타낼</em> 텍스트를 강조합니다.</p>
<p>em 태그는 <em>기울임꼴</em>로 표시됩니다.</p>
<p>중첩된 <em>em 태그는 <em>중요도가</em> 더 높아집니다.</em></p>
</div>
<div class="example">
<p><mark>mark</mark> 태그 예시:</p>
<p>이 문장에서는 <mark>텍스트에 하이라이트</mark>를 사용하여 강조합니다.</p>
<p>mark 태그는 <mark>배경색으로 하이라이트</mark> 처리됩니다.</p>
</div>
강조 용어 등 특수 표기
//code
<h2>코드 예시</h2>
<p>인라인 코드 예시는 이렇게 사용할 수 있습니다.<code>const pi = 3.14;</code></p>
//abbr
<h2>약어 정의 (<code><abbr></code>)</h2>
<p>HTML은 <abbr title="HyperText Markup Language">HTML</abbr>의 약어입니다.</p>
//dfn
<h2>용어 정의 (<code><dfn></code>)</h2>
<p><dfn>HTML</dfn>은 웹 페이지를 구성하는 마크업 언어입니다.</p>
//sup
<h2>지수, 서수 표기 (<code><sup></code>)</h2>
<p>수학 식: E = mc<sup>2</sup></p>
<p>서수: 4<sup>th</sup></p>
//sub
<h2>각주, 변수, 화학식 표기 (<code><sub></code>)</h2>
<p>화학식: H<sub>2</sub>O</p>
<p>수학 변수: a<sub>i</sub></p>
//kbd
<h2>키보드 입력 (<code><kbd></code>)</h2>
<p>복사하려면 <kbd>Ctrl</kbd> + <kbd>C</kbd>를 누르세요.</p>
주석
- 단축키 : Ctrl+/
- 프로그래밍 소스를 이해하기 쉽게 메모해놓은 것
- 언어별로 주석도 생김새가 다름
<!-- -->목록 관련 태그
ol
- ordered list = 순차적 목록
- 정렬된, 순서가 있는 보통 숫자 목록을 의미
- 순서가 중요한 목록에 적용
ul
- unordered list = 비순차적 목록
- 정렬되지 않은, 불릿으로 표현되는 목록을 의미
- 순서가 중요하지 않는 목록에 적용
li
- 목록의 항목을 나타냄
- 단독 사용 X / ol, ul의 자식요소로만 사용가능
ol의 자식요소 li 특성
- type : 넘버링 타입 / ol요소에 지정하는 유형을 덮어씀
◽ 1 : 숫자 (기본값)
◽ a : 소문자 알파벳
◽ A : 대문자 알파벳
◽ i : 소문자 로마 숫자
◽ I : 대문자 로마 숫자
- value : 항목의 현재 서수 값을 나타내는 서수
dl
- definition list = 설명 목록
- dt : 용어, dd : 용어설명
- 여러 개의 용어와 하나의 설명, 하나의 용어 하나의 설명도 가능
dt
- 용어
- dl요소 안에 위치해야 함 -> dl의 자식, 자손이 아닌 단독으로 사용 X
- dl과 함께 사용
dd
- 설명 목록
- dl요소 안에 위치해야 함 -> dl의 자식, 자손이 아닌 단독으로 사용 X
- dt과 함께 사용
출처 - 위니브(Weniv)
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
| [EST] 240611 HTML-05 (0) | 2024.06.25 |
|---|---|
| [EST] 240610 HTML-04 (0) | 2024.06.25 |
| [EST] 240607 HTML-03 (0) | 2024.06.24 |
| [EST] 240605 HTML-02 (0) | 2024.06.24 |
| [EST] 240603 인터넷 VS 웹 (0) | 2024.06.24 |
