[WEB1 - HTML & Internet] 2일차 : 이미지 Image, 리스트 List, 링크 Link, HTML의 구조

배운 내용 목록

이미지 태그
속성
부모 자식 관계 ex) 리스트 태그
HTML의 구조
링크 태그
실습 - 웹페이지 완성하기

이미지와 속성

<img>

img➡️ image의 약자

src➡️ source의 약자

width = "100%" 이미지 크기 화면의 100%으로 맞춤

주의할 점

이미지를 진행하고 있는 프로젝트 디렉토리에 추가했는지 확인

속성 Attribute

태그의 정보만으로 부족할 때 사용함

순서는 상관 X

*유용한 사이트

unsplash.com

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

unsplash.com

저작권 무료 이미지 제공

부모 자식 관계 & 리스트

<parent>

<child></child>

</parent>

부모 자식 관계의 예시 ➡️ 리스트

<li> </li>

li ➡️ list의 약자

리스트 태그는 서로 연관된 항목끼리 그룹핑하기 위한 부모 태그가 필요하다.

그래서 반드시 부모 태그인 <ul> 혹은 <ol> 태그가 필요하다.

(반대로 부모 태그는 자식 태그인 <li>가 필요하다. *부모자식관계임)

<ul> </ul>

ul ➡️ unordered list의 약자

순서가 없음

리스트를 수정하게 된다면?

만약 리스트를 수정하게 되면 숫자를 일일이 수정해야 한다.

위에 제가 작성한 코드에서는 3개밖에 없어서 큰 불편함을 못 느끼지만

만약 100개 혹은 그 이상의 목록이 있다면?

이 문제를 해결하기 위해 <ol> 태그를 사용하면 된다.

<ol> </ol>

ol ➡️ ordered list의 약자

순서가 있음

리스트를 수정해도 자동으로 넘버링을 해준다

HTML의 구조

웹 제목 바꾸는 방법 ➡️ <tittle> </title> 사용

(2022년도 기준 : 작성을 안 해도 한글이 안 깨진다. 아마 버전이 올라가면서 기본적으로 적용되는 것 같다.)

HTML은 기본적인 틀이 있다

<!DOCTYPE html> <!-- 이 문서는 html이라는 뜻 -->
<html>
	<head> <!--본문을 설명하는 태그들--> </head>

	<body> <!-- 본문 내용 --> </body>
</html>

링크

<a> </a>

a ➡️ anchor의 약자 : 링크를 말함

href : hypertext reference의 약자

_blank : 새 탭으로 열기

title : 링크에 마우스 커서 올리면 설명이 뜬다

실습 - 웹페이지 완성하기

정리

<img src = "이름.확장자" width = "100%"> <!-- 이미지 삽입 -->
<ul> <!-- 순서 없는 리스트>
	<li> <!--목록 --> </li>
</ul>
<ol> <!-- 순서 있는 리스트 -->
	<li> <!--목록 --> </li>
</ol>
<a href = 링크명 target = “_blank” title = “html5 spec”> </a> <!-- 링크 삽입 -->

<!-- HTML의 구조 -->
<!DOCTYPE html>
<html>
	<head> </head>

	<body> </body>
</html>

저작자표시 (새창열림)

'개발 공부 > HTML & CSS' 카테고리의 다른 글

[WEB2 - CSS] 6일차 : 박스 모델 & 그리드 모델 (0)	2022.07.05
[WEB2 - CSS] 5일차 : 효과 Declaration/Property & 선택자 Selector (0)	2022.07.02
[WEB2 - CSS] 4일차 : CSS의 기본적인 문법 (0)	2022.07.01
[WEB1 - HTML & Internet] 3일차 : 웹 & 인터넷 Web and Internet (0)	2022.06.30
[WEB1 - HTML & Internet] 1일차 : 태그 Tag (0)	2022.06.27