WEB1 - HTML(2)

WEB/HTML & CSS

WEB1 - HTML(2)

inderrom 2022. 7. 6. 21:44

HTML이 중요한 이유

-웹의 핵심적인 철학은 접근성이다.
웹은 모든 운영체제에서 동작하고,
웹페이지의 소스코드는 누구나 볼 수 있고,
웹은 저작권이 없는 순수한 공공재이다.
웹의 이런 특징들이 웹을 다른 기술들과 구별되는 특별한 것으로 만든다.

-TAG-

이미지를 넣기 <img>

<img src="coding.jpg" width="100%">

1.처음 이미지를 부르려고 <img> 태그를 쓰면 동작하지 않는다

-> 어떤 이미지를 불러오는 지에 대한 정보가 없기 때문에

따라서 속성(attribute) 을 적용한다.

1. img 태그에 source의 줄임말인 src를 붙히고 이미지 주소를 넣는다.

(이 경우 내 컴퓨터에 이미지가 없어도 인터넷에 있는 이미지를 표시할 수 있당)

*내 컴퓨터에 있는 이미지를 표시하고 싶은 경우

ex) http://unsplash.com 의 저작권 없는 사진을 이용하여 이미지 저장 후

다운받은 이미지를 프로젝트 폴더에 드랍

웹페이지 파일(1.html)과 같은 위치에 있는 이미지 파일 (coding.jpg)

src속상값으로 이미지 파일의 이름만 적어주면 됨

2. 이미지 크기 변경 <width>

숫자나 %를 사용하여 원하는 크기로 조정 가능하다

** 결과**

부모 자식과 목록

몇몇 태그들은 부모 자식 세트로 묶이는 태그가 있다.

li, ul ,( ol )

html
css
javascript

이 세 가지 항목의 목차를 만들 때

필요한 태그는 list의 앞글자 두 개를 따온

li이다.

<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>

이때 경계를 구분하기 위한 ul 태그를 사용한다.

<ul>
  <li>1. HTML</li>
  <li>2. CSS</li>
  <li>3. JavaScript</li>
</ul>

이처럼 li 태그는 ul 태그를 꼭 필요로 한다.

다만, 목록이 1억개가 넘는데 중간에 번호를 지운다고 치면

모든 번호를 일일이 수정할 수 없으므로

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

ul 태그 대신 ol 태그를 써주면 수정 없이 자동적으로 번호를 매겨준다.

ul은 unordered list

ol은 ordered list 의 약자이다!

문서의 구조와 슈퍼스타 태그!

-이제 html의 문법은 다 배웠다고 보면 된다

정보가 많아짐에 따라 정보를 잘 정리정돈하기 위한 체계, 다시 말해 구조가 필요하다.

지금까지 파일명이 제목이었다면 이제는

<title>태그를 통해 웹페이지 제목을 변경한다

<title>WEB1 - html</title>

또 영어가 아닌 문자로 웹페이지를 만들면 문구가 깨지기 때문에

-에디터 하단에 UTF-8-

웹페이지를 UTF-8로 저장했으면 웹페이지를 열 때도 UTF-8 열어야 하므로

title 태그 밑에 추가한다.

<meta charset="utf-8">

이 두 코드는 본문이 아닌 본문을 설명한다.

HTML을 만든 사람이 본문과 본문을 설명하는 정보를 각기 다른 태그로 분리해서 정리 정돈함.

<본문은 body 태그 , 본문을 설명하는 태그는 head 태그 사용>

또 body와 head를 감싸하는 html 태그를 사용한다.

마지막으로! 이 웹페이지가 HTML로서 만들어졌다는 것을 표현하기 위해

문서 시작에 <!doctype html> 사용

****

정말 강의 몇 편 들었다고 웹페이지 소스를 봤더니 까막눈이던 시절(불과 일주일전)과 다르게

오늘 공부한 태그들이 눈에 보여서 신기했다 😮