[HTML] 2022-03-21 1일차 개발일지

1. 학습한 내용

인터넷이 동작하는 원리

WWW is World Wide WEB.

웹 (1990년 초) vs 인터넷(1960년대 말)

Q. 인터넷이 동작하기 위해서 최소 몇대가 필요할까?
A. 2대

HTML 태그들

<></>
<열림태그></닫힘태그>

  • Tag 태그 실습

-줄바꿈 u
-강조 strong

bold 와 strong의 차이

시각적으로는 둘 다 진하게 보이지만 의미적으론 blod는 진하게, strong은 강조를 표시

-이미지 img

이미지 삽입

img 태그 + src(주소복사)

픽셀 조정

width 너비 heigh 높이
width 등 속성(attribute) 속성을 통해 태그는 더 다양한 동작을 함

-제목 h (Heading), tittle
h1~h6
숫자가 점차 커질수록 제목의 크기는 작아진다.

-목록 li
li (list)
목록 10개 동시 생성 : li*10 + tab키

위 목차와 아래 참여자 구분이 어려운 경우

ul 태그를 활용한 들여쓰기

li는 ol, il 태그와 함께 사용
부모형 : ol, ul
자형 : li

ol태그와 ul태그 차이

ol태그 - 순서가 있는 태그 ordered list
ul태그 - 순서가 없는 태그 unordered list

소스파일

<meta charste="utf-8">

WWW is World wide WEB.
<br>
www is <u>world wide web.</u>
<br>
www is <strong>world wide web.</strong>
<br>
<img src="https://images.unsplash.com/photo-1518773553398-650c184e0bb3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
width="500" height="500">
<br>

<u>제목</u>
<h1>web</h1>
<br>
<h2>web</h2>
<br>
<h3>web</h3>
<br>
<h4>web</h4>
<br>
<h5>web</h5>
<br>
<h6>web</h6>
<br>

<title>WEB!!</title>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
<ol> 
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ol>

<h1>WEB</h1>
welcome ! hello web 

<h2>html</h2>
html is ... 

<h2>css</h2>
css is ... 

<h2>javascript</h2>
javascript is ... 

2. 어려웠던 점

강조(blod, strong)
제목 (tittle, h) 등
비슷한 역할을 하는 태그들이 세부적으로 차이가 있고 그것을 구분하여 사용하는 것이 아직은 어렵게 느껴진다.

3. 해결방법

4. 학습소감

html을 통하여 웹에 이미지를 삽입하고, 목차를 입력하는 경험과
브라우저 실행 (ctrl + o) 단축키에 대하여 배울 수 있었다.

또한 기존에 만들어진 웹 사이트의 경우 우클릭 - 검사 버튼을 눌러봄으로 소스코드를 확인 할 수 있어, 웹 사이트가 어떤 태그를 작성하여 만들어졌는지 확인해보는 재미도 있었다.

좋은 웹페이지 즐겨찾기