1. HTML _재밌는 코딩이야!

관리 메뉴

무냐의 개발일지

1. HTML _재밌는 코딩이야! 본문

카테고리 없음

1. HTML _재밌는 코딩이야!

무냐코드 2024. 6. 2. 11:19

완성된 나의 귀여운 웹 감상

https://jean-yun.github.io/my-website/index.html

Disney Movies

jean-yun.github.io

| HTML 문법 기초 (부품들)

원시 웹 : https://info.cern.ch/

http://info.cern.ch

info.cern.ch

br, p (띄어쓰기, 단락)

img, a (이미지삽입, 링크삽입)

oi/ui, li (리스트 삽입)

title, html, head, body (큼직한 표시 태그)

h1 ~ h6 (제목)

빈 웹사이를 열고 cmd + o 를 해서, 내가 만든 html 코드를 선택하면 짠 !!! 하고 열린다

1. 이미지

<img src="이미지 들어있는 파일 링크" width="70%"> 사이즈도 조절 가능

2. 리스트 (oi/ ui - li)

unordered list (ul)

리스트를 만드는 li

반드시 ul (부모태그) 가 필요하다 (2대가 같이 다닌다)

<ul>
	<li>1. SOUL</li>
	<li>2. Ratatouille</li>
	<li>3. UP</li>
</ul>

자동으로 넘버링 해주는 ol (ordered list)

<ol>
	<li>SOUL</li>
	<li>Ratatouille</li>
	<li>UP</li>
</ol>

테이블은 3대가 같이 다닌다

3. title

웹페이지 이름 title

4. 읽는 규칙

utf-8 로 문서를 읽어라, 라는 규칙이다

<meta charset="utf-8">

5. 종합

<!doctype html>
<html>
<head>
	<title>Disney Movies</title>
	<meta charset="utf-8">
</head>
<body>
	<ol>
		<li>SOUL</li>
		<li>Ratatouille</li>
		<li>UP</li>
	</ol>

	<h1>Disney Soul</h1>

	<br>In <strong>New York City</strong>, pianist <u>Joe Gardner</u> teaches music part-time at a middle school while dreaming of playing jazz professionally.

	<img src="disney.jpg" width="100%">
	<p style="margin-top: 40px;">When he receives an offer to teach full-time, his mother Libba urges him to accept, although Joe is resistant. Joe learns famous jazz musician Dorothea Williams has an opening in her quartet and auditions at a jazz club. Impressed with his piano playing, Dorothea hires him for that night's show. As Joe heads off, his excitement distracts him, and he falls down an open manhole.</p>
</body>
</html>

맨 위에 html 타입임을 명시해준 후

html

head

body

이런 식으로 안에 겹겹이 싸여져 있다. 부모자식 수직관계 잘 확인.

6. <a> </a>

링크를 연결한다. 주소뒤에 target ="_blank" 는 새탭에서 여는 것 , title =""은 링크에 마우스 갖다댔을때 뜨는 이름

<a href="https://www.imdb.com/title/tt2948372/" target="_blank" 
title="imdb website">Moive Soul Synopsis</a>

7. 동영상 추가

유투브 그냥 링크 - 퍼가기 해서 그대로 붙여넣기만 하면 됨

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/pynau4O26Uw?si=SYJbd8qX1p9YgH3r" 
title="YouTube video player" frameborder="0" allow="accelerometer; 
autoplay; clipboard-write; encrypted-media; gyroscope; 
picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" 
allowfullscreen></iframe>>

8. 댓글 구현하기 (https://disqus.com/)

내가 스스로 하면 어렵고, 백엔드를 알아야함

DISQUS, LIVERE 등 댓글 코드를 지원해주는 서비스들이 있음

DISQUS에서 아이디를 만들고, create 하고나서 생성된 코드 그대로 복붙하면 완성된다

단, local host로 열어야 열린다.VSCODE에서 다시 여니까 열림

(http://127.0.0.1:5500/3.html 요런 식의 주소)

이런 식의 너!무!예!쁜! 웹사이트가 만들어졌다 >< 짱이뻐!!!!

9. 담당자 채팅기능 추가하기 (https://www.tawk.to/)

이것도 역시 사이트 가입 후, 코드 붙여넣기만 하면 이렇게 구현된다

누가 말을 하면 내 tawk 사이트에서 call 소리가 들림...와우

이 사이트에 서비스 무료라고 나와있길래 도대체 어떻게 왜 무료인지 (사이트에 잘 나와있다) 봤는데, 이 시장에 진입도 늦게 했고, 1등 주자가 될 수 없는 수많은 이유들이 적혀있었다 ㅋㅋㅋ

이미 시장을 선점하고 있는 경쟁자들이 아니라, 오히려 소비자들이 진짜 원하는 것에 더 집중했다고. 캬 멋진 말이야.

So we ignored our competitors, and focused on our customers a strategy many would consider as ‘putting the blinders on’ – we call it the secret to our success.