▶ 웹 개발의 기본
■ 웹 문서의 뼈대를 만드는 HTML
- 웹 브라우저 창에 웹 문서의 내용을 보여주기 위한 약속
- HTML에서 약속한 표기법을 사용해서 문서 작성해야 함
■ 웹 문서를 꾸미는 CSS
- 웹 문서를 꾸미거나 웹 요소를 적절하게 배치하는 방법
- 다양한 디바이스에 맞는 반응형 웹 디자인을 만들기 위해 필수적으로 학습해야 함
■ 사용자 동작에 반응하는 자바스크립트
- 사용자 동작에 반응해서 동적인 효과를 만들기 위한 기술
- 자바스크립트를 알고 있다면 새로운 프레임워크를 배우기 쉬움
▶ 프런트엔드 개발을 위한 기술
▶ 백엔드 개발을 위한 기술
▶ HTML 설정라이브러리
VS Code 확장 프로그램
1. Material Theme: VS Code의 테마를 구글의 Material Design 스타일로 변경합니다.
2. Material Icon Theme: VS Code의 파일 및 폴더 아이콘을 Material Design 스타일로 변경합니다.
3. Auto Rename Tag/Jun Han: HTML 태그를 수정할 때 자동으로 쌍을 이루는 태그도 함께 수정해줍니다.
4. HTML CSS Support/ecmel: HTML과 CSS 코드를 편리하게 작성할 수 있도록 도와줍니다.
5. CSS Peek: CSS 선택자를 클릭하면 해당 CSS 코드를 볼 수 있습니다.
6. Autoprefixer: CSS 속성에 자동으로 벤더 프리픽스를 추가해줍니다.
7. Indent-rainbow: 들여쓰기 된 코드를 색상으로 구분하여 보여줍니다.
8. Live Server: 로컬 웹 서버를 실행하여 실시간으로 코드 변경 사항을 확인할 수 있습니다.
9. Korean Language Pack for Visual Studio Code/Microsoft: VS Code의 사용자 인터페이스를 한국어로 변경합니다.
10. Prettier - Code formatter: 코드를 자동으로 포맷팅해줍니다.
11. ESLint: JavaScript 코드 스타일을 검사하고 오류를 찾아줍니다.
12. Path Intellisense: 파일 경로를 자동 완성해줍니다.
▶ D2Coding 폰트 변경하기
- 설정 검색 창에 font를 입력하고, Font Family에 'D2Coding'을 입력하고 변경된 내용을 적용합니다.
▶ HTML 이란
- HTML은 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
- H(Hyper)T(Text)M(Mark up)L(Language)
▶ HTML 문서의 기본 구조
■ <!DOCTYPE html> 또는 <!doctype html>
- 웹 브라우저에 이제부터 처리할 문서는 HTML 문서라고 알려주는 것
■ 웹 문서 시작을 알리는 <html> 태그
- 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
- lang 속성을 사용해 문서에서 사용할 언어 지정
- 문서 정보를 지정하는 <head> 부분과 문서 내용을 입력하는 <body> 부분 포함
■ <head>
- 문서에 대한 메타데이터와 링크를 포함하는 부분
- 예를 들어 문서 제목(<title>), 외부 스타일 시트(<link>),
문자 인코딩 설정(<meta charset="UTF-8">) 등을 정의
■ <body>
- 실제 내용이 들어가는 부분으로, 화면에 표시되는 모든 콘텐츠를 포함
- 텍스트, 이미지, 링크, 테이블 등이 여기에 위치합니다.
▶ 제목 (Heading)
- HTML은 제목을 표현할 수 있는 다양한 크기의 <h>태그를 제공
- 가장 큰 <h1> 태그부터 가장 작은 <h6> 태그까지 다양한 크기로 제목을 표현할 수 있음
<h1>제목1의 크기입니다!</h1>
<h2>제목2의 크기입니다!</h2>
<h3>제목3의 크기입니다!</h3>
<h4>제목4의 크기입니다!</h4>
<h5>제목5의 크기입니다!</h5>
<h6>제목6의 크기입니다!</h6>
▶ 단락 (Paragrahp)
- 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 부름
- HTML에서는 <p> 태그를 이용하여 단락을 표현
<h1>제목1의 크기입니다!</h1>
<h2>제목2의 크기입니다!</h2>
<h3>제목3의 크기입니다!</h3>
<p>여기서부터 단락입니다.</p>
▶ 띄어쓰기와 줄 나누기
- HTML 코드에서 띄어쓰기나 줄 나누기를 여러 번 하더라도
웹 브라우저를 통해 나타나는 화면에는 영향을 주지 못함
- 웹 브라우저는 여러번의 띄어쓰기나 줄 나누기를 오직 하나의 띄어쓰기나 줄로만 인식하기 때문임
- <br> 태그(break line)를 사용하면 새로운 단락을 만들지 않고도 줄을 나눌 수 있음
▶ 서식 (Formatting)
- HTML은 텍스트(text)에 다양한 효과를 주는 여러 태그(tag)를 제공함
■ 강조 효과
- HTML 문서에서 텍스트를 굵게 표현하고 싶을때 <b> 태그(bold text)나 <strong>태그를 사용
■ 하이라이팅 효과
- <mark>태그는 텍스트 하이라이팅(highlighting) 효과를 적용시켜 줌
■ 삭제효과
- <del>태그(delete)는 텍스트 중앙에 가로줄을 만들어 마치 텍스트를 지운 것과 같은 표과를 내줌
■ 삽입효과
- <ins>태그(insert)는 텍스트 밑에 가로줄을 만들어 마치 빈칸에 텍스트를 삽입한 것과 같은 효과를 내줌
■ 위첨자와 아래첨자 효과
- 위첨자는 <sup>태그 (superscript)를 사용하여, 아래첨자는 <sub>태그 (subscript)를 사용하여 각각을 표현
'education' 카테고리의 다른 글
| 교육 38DAY HTML (0) | 2024.07.03 |
|---|---|
| 교육 37DAY HTML (0) | 2024.07.02 |
| 교육 34DAY SQL (0) | 2024.06.27 |
| 교육 33DAY SQL (0) | 2024.06.26 |
| 교육 32DAY SQL (0) | 2024.06.25 |
