FrontEnd/HTML&CSS

[HTML] 생활코딩 WEB1 - HTML&Internet 복습

dev seon 2023. 8. 5. 13:09

시작하며

내 문제를 해결하기 위해서 코딩을 배워야 한다.

얼마나 이 문제가 나에게 중요한지 생각해야 한다.

원인(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를 작성하는 법  (1) 2023.11.29
[CSS] 기본 설정  (1) 2023.11.21
[HTML] 이미지와 하이퍼링크 정리+연습  (0) 2023.08.06
[HTML] 텍스트 관련 태그 정리+연습  (1) 2023.08.05
[HTML] HTML의 기본  (1) 2023.08.05