[생활코딩] 웹 애플리케이션 만들기(2): HTML 이론

c o d i n g . . 🍉/HTML & CSS

[생활코딩] 웹 애플리케이션 만들기(2): HTML 이론

H J 2021. 1. 30. 19:01

어제 공부하다가 또 늦게까지 노래듣고 넷플릭스 보느라 아침에 잠이 들어서 오후 4시 30분에 일어났다ㅠㅠ

밥 먹고 씻고 공부시작! 오늘은 5시 45분에 공부 시작했다!!

루트 파일에 새로운 메모를 저장하고 아래와 같이 입력한다

(아직은 어떤 의미인지 몰라도 됨!)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	

</body>
</html>

<strong>~</strong>으로 콘텐츠를 강조

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	오늘부터 <strong>html</strong> 공부 열심히 해야지!

</body>
</html>

속성 - 태그
<a href="링크">콘텐츠</a>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	나는 html을 <a href="http://opentutorials.org/course/1">생활코딩</a>에서 배운다

</body>
</html>

속성 - 타겟

<a href="링크" target="어떤 방식으로 열 것인지">콘텐츠</a>

*속성과 속성을 구분할 때는 띄어쓰기를 사용해야한다*

_blank는 새로운 창에서 링크를 연다는 정보를 갖고 있다

_self는 현재 창에서 링크를 연다(기본값)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	나는 html을 <a href="http://opentutorials.org/course/1" target="_blank">생활코딩</a>에서 배운다

</body>
</html>

속성 - 리스트 <li>~</li>
순서있는 리스트 <ol>~</ol>
순서없는 리스트 <ul>~</ul>

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
</head>
<body>
	<ol> #순서가 있는 리스트의 시작을 알림(order list)
	<li>html</li>
	<li>css</li>
	<li>javascript</li>
	</ol> #순서가 있는 리스트의 끝을 알림
	
	<ul> #순서가 없는 리스트의 시작을 알림(unorder list)
	<li>ㅇㅅㅇ</li>
    </ul> #순서가 없는 리스트의 끝을 알림

</body>
</html>

***코드의 기본 구조이다***

<!DOCTYPE html>은 없어도 작동이 되지만 어떤 html 표준을 사용했는지 웹 브라우저에게 알려주는 역할을 한다

그리고 위와 같은 태그들 말고도 많은 태그들이 있지만 그것을 외울 필요가 없다! 그때마다 내가 필요한 태그들을 검색해서 사용하면 되는 것이다! (tag reference)

나중에 웹에 대해 더 자세히 공부할 때 아래의 링크로 들어가서 HTML 태그들의 내용을 살펴볼 예정이다

https://opentutorials.org/course/1058

HTML 사전 - 생활코딩

본 코스는 HTML의 사용법을 찾아 볼 수 있는 사전 입니다. 본 코스는 리체님의 HTML 5 Tag Dictionary 모듈을 사용하고 있습니다. 좋은 사전을 만들어주신 리체님 감사합니다. ^^

opentutorials.org

'c o d i n g . . 🍉 > HTML & CSS' 카테고리의 다른 글

Visual code 설치 & 파일 만들기 (0)	2021.03.15
[생활코딩] 웹 애플리케이션 만들기(5): CSS 실습 (0)	2021.02.01
[생활코딩] 웹 애플리케이션 만들기(4): CSS 이론 (0)	2021.01.31
[생활코딩] 웹 애플리케이션 만들기(3): HTML 실습 (0)	2021.01.30
[생활코딩] 웹 애플리케이션 만들기(1): 환경 조성 (0)	2021.01.30

현재글[생활코딩] 웹 애플리케이션 만들기(2): HTML 이론

🍃🛋🧤🍋🍧🍈🐈🎧

웹 프로그래밍, 내가 정리한, 코딩, html, 프론트엔드, python, 생활코딩 웹, 백엔드, 생활코딩 nodejs, 웹프, html 독학, 인프런, 생활코딩, 42 seoul, Nodejs, 자바스크립트, 웹프로그래밍, 파이썬, JavaScript, css,

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

🐹's tory