시작하며
내 문제를 해결하기 위해서 코딩을 배워야 한다.
얼마나 이 문제가 나에게 중요한지 생각해야 한다.
원인(code) -> 결과(app, program, webpage...)
웹페이지를 만드는 코드는 HTML(Hyper Text Markup Language)
HTML의 특징
1. 쉬움
2. 중요함 - 가장 거대함
3. public domain - 저작권 X
HTML 코딩의 단계
1. 기획
기획이란 무언가를 만들기 위해 상상하고 설계하는 과정
제목을 누르면 옆에 영상과 내용이 나오는 사이트를 만들자!
2. 환경 준비
코드 편집기 - Visual Studio Code
3. 기본 문법 학습 및 실습과 수정
HTML 기본문법 태그
글자 속성 태그
<b> 굵게 bold
<strong> 굵게 (강조)
<u> < 밑줄 underline
<h1> ~ <h6> 제목 heading (강조)
숫자가 올라갈수록 글씨가 작아짐, 줄 바꿈이 됨
<hn>을 사용할 경우 검색엔진이 발견하기 더 쉬움
줄 바꿈 태그
<br> 새로운 줄 바꿈 line break
<p> 문단 paragraph 영역지정해야 함
-> <br> 보다 <p>가 정보로 더 가치 있는 태그
이미지 추가 태그
<img src="____" width="___" > image source
목록 태그
<ul> 순서 없는 리스트 unordered list
<ol> 순서 있는 리스트 ordered list
<li> 리스트
반드시 <ul> 또는 <ol>과 <li> 태그 같이 쓰기
부모와 자식 태그!
문서 구조 태그
<!Doctype html> <html>
<head> 본문 설명 내용
<title> 탭의 이름, 웹페이지 정보, 검색엔진에 잘 걸림
<meta charset="utf-8"> 문서 읽는 방법 meta character set
<body> 본문
+) 기본 태그 한 번에 입력하는 단축키 : ! + tab
링크 태그
<a href="_____"> anchor 닻
<a href="______" target="_blank" title="_____">
target="blank" 새 탭으로 열림
title -> 마우스 올렸을 때 보임
꿀팁
1. 사이트 코드 보는 법 : 페이지소스보기, Ctrl+U
2. advancedwebranking.com 많이 쓰이는 태그 확인
3. github.com 코드 공유, 웹호스팅
4. 그 외 코드 활용법
(1) 유튜브 - embed 링크 (2) 댓글 - disaus, livere
(3) 채팅 - tawk (4) 방문자 분석기 - 구글 애널리틱스
5. 공부한 것을 활용하자
6. 추가로 공부할 내용 선택하기
(1) CSS : 웹사이트 아름답게 하기 -> 웹퍼블리셔, 웹디자이너
(2) JavaScript : 상호작용 웹 -> 웹프론트엔드 엔지니어, 웹인터렉티브 디자이너
(3) PHP, JSP, Node.js, Python, Django : 여러 웹 수정사항 바꾸기 -> 백엔드 디자이너
'FrontEnd > HTML&CSS' 카테고리의 다른 글
| [CSS] 좋은 HTML과 CSS를 작성하는 법 (3) | 2023.11.29 |
|---|---|
| [CSS] 기본 설정 (1) | 2023.11.21 |
| [HTML] 이미지와 하이퍼링크 정리+연습 (0) | 2023.08.06 |
| [HTML] 텍스트 관련 태그 정리+연습 (1) | 2023.08.05 |
| [HTML] HTML의 기본 (1) | 2023.08.05 |