치로의 부자되기 프로젝트
VS CODE로 html 학습하기
1. html이란?
HyperText Markup Language의 약자로써 웹문서를 만들기 위한 언어이다. html언어는 태그라는 명령어로 이루어져 있다. 태그는 < > 괄호로 묶어서 표현하고, <시작>, </종료> 태그로 작성해야 한다. html 언어는 영문자 대, 소문자로 작성 가능한데, 소문자로 작성하는 것을 추천한다. html 언어는 저장 시 반드시 파일명.html 또는 파일명.htm으로 저장한다. 저장된 html 문서를 미리보고자 한다면 더블클릭하면 된다. 브라우저에서 자동으로 열리게 된다.
2. HTML(Hyper Text Markup Language) 언어
WWW를 통해 볼 수 있는 하이퍼텍스트 문서를 만들기 위한 프로그래밍 언어. 웹페이지의 구조를 만들기 위한 언어. 웹에서 대부분의 웹페이지들이 HTML로 작성된다.(HTML5) 구조와 문법이 단순하면서 쉬워 누구나 쉽게 배울 수 있다. 어느 플랫폼에서나 독립적인 언어이다. 브라우저마다 종속성이 있다.
※ 작성 프로그램 종류 - 메모장, 드림위버, 웹에디터, VSCode
3. 기본적인 html 문서의 구조
! + tab키: 기본적인 html 문서의 구조를 불러온다. 기본적으로 header, main, footer로 나누어서 코딩한다.
4. title 작성하기
<title>html언어학습하기</title>
html 문서의 제목
제목작성을 위한 태그 - h1, h2, h3, h4, h5, h6
5. html 선언하기
지금부터 html5를 사용하겠다는 의미 한다.(문서 버전을 의미)
6. 기본 언어 선언하기
문서에 한글이 포함되어 있음을 의미한다.(기본 언어)
7. 인코딩 방법 선언하기
<meta charset="UTF-8">
인코딩(언어를 표현) 방법을 표기한다.
8. viewport 속성 정의하기
viewport 속성: 사용자마다 다른 모바일 디바이스 크기에 맞게 100%로 조절해서 보여준다.
9. body 정의
화면에 문서내용이 출력되는 영역. 모든 내용은 body 태그 안에 들어간다.
10. 개행 태그
개행
11. 문단 태그
<p>paragraph: 문단 태그로써 내용을 작성하고자 할 때 사용</p>
문단 태그
12. 이미지 태그
./는 html 파일이 존재하는 폴더의 하위 폴더를 의미하며, 그 안에서 이미지를 불러와서 img 태그로 삽입할 수 있다.
13. 하이퍼링크 태그
하이퍼링크 태그
※ 홈페이지 제작 시 레이아웃과 관련된 태그
div, header, main, footer, nav, section, article, aside, address
14. CSS 선언
CSS를 사용하겠다는 태그
15. CSS 문법
CSS 문법. 서식이름과 내용 정의
실제 적용은 이런 식으로 해당 위치에 선언
※ 빠른 입력을 위해서는 해당 명령어 글씨만 먼저 치는 중에 탭키를 누르면 알아서 삽입된다.
16. 여백을 없애주는 CSS 서식
여백을 없애주는 CSS 서식. margin은 바깥쪽 여백, padding은 안쪽 여백을 뜻한다.
17. 스와이퍼 슬라이드(https://swiperjs.com/)
휴대폰, 모바일 홈페이지, 탭에서 터치해서 HTML 소스를 만들 수 있는 서비스
Swiper Demos
18. CSS 서식
19. 헤더 고정 및 헤더를 가장 앞으로 나오게 설정(숫자가 크면 앞에 위치함)
'본업성장' 카테고리의 다른 글
| 이직 면접 준비하기 | 답이 있는 면접 질문(내용 업데이트 중) (0) | 2024.11.30 |
|---|---|
| Product Manager의 지표 바로보기, 대시보드 잘 구성하고 활용하기 (0) | 2024.10.06 |
| Figma 모달 팝업, 탭 메뉴, 인디케이터와 좌우 슬라이딩 배너 구현하기 (0) | 2024.08.08 |
| Figma 프토토타입, 프로토타이핑 (0) | 2024.08.06 |
| 와이어프레임과 와이어프레임 구성요소, 와이어프레임 그리기 (0) | 2024.07.31 |