HTML 기초 - 리스트 태그 / 이미지 태그

이전에 쓴 글보다 더 알아먹기 쉽게 캡쳐를 많이 써야겠다 생각했다!
그 전 글은 너무 전공 책 정리하는 것처럼 써놔서 읽기가 싫어.,

오늘은 리스트 태그 / 이미지 태그 / a 태그 / 테이블 태그를 배웠다.
오늘 내용은 절대 잊어선 안 될 내용 !

 

 

1. 리스트 태그

1) 리스트 공간 선언은 2가지
- ul (unordered list) : 순서가 필요하지 않은 리스트
- ol (ordered list) : 순서가 필요한 리스트
2) 리스트 안의 실질적인 데이터
- li (list-item) : ul이든 ol이든 li태그가 꼭 필요하다!

사진을 보면
구매목록 아래 세 가지가 ul
샤브샤브 순서 아래 세 가지가 ol 이다.

위 사진을 만들기 위한 코드는
•
•
•

이거다!
'딸기' 앞의 사각형이라던지(원래 모양은 채워진 동그라미),

'고기를 볶는다' 앞의 A.는 type 속성으로 바꿔줄 수 있다.

나는 span 태그에 '구매 목록'과 '샤브샤브 순서'를 썼지만

문제출제 의도는 p태그를 사용하는 것이었다고 하셨다.

하지만 span 태그를 이용해도 밑의 리스트 태그들이 한 줄을 다 차지하기 때문에

사진과 같이 만드는 데에 문제는 없었다.

그리고 꿀팁!
ul안에 li 3개라는 뜻으로
ul>li*3
를 입력하면 사진과 같이 편하게 작성할 수 있다!

2. 이미지 태그

1) 이미지태그는 필수 속성이 있다
    - 필수 속성 : src
2) 절대경로 => 페이지 주소 가져오기
3) 상대경로
    a. 현재 기준으로 ./ (생략가능)
    b. 상위 기준으로 ../
    c. 여러번 상위 ../../
    d. 최 상위 /

이렇게만 써두면 이해를 잘 못하겠지..

이미지 태그 이해를 위해선 일단 그림이 필요하다.

예를 들어 내가 방 2개인 집을 샀다.
내가 거실에서 1번방으로 들어가는건 한번에 바로 들어갈 수 있다(파란색)
하지만 2번방에서 1번방으로 가는건 거실로 나와야 2번방으로 갈 수 있다(보라색)

상대경로로 설명하면
파란색 : ./
보라색: ../
방이 많아질수록 ../../../ ~ 쭉 이어질 것이다.


절대경로 코드는

상대경로 코드는

두 가지 코드를 실행하면 웹에는 내 이미지 태그로 이미지가 보인다

절대경로, 상대경로 둘 다 실행되어 사진도 2개가 뜬당

뉴진스 갓기들 넘 예뻐

아 맞다
절대경로는 그 사이트에서 이미지가 지워지면 그걸 가져온 나도 쓸 수 없으니
왠만하면 상대경로를 쓰는 게 좋다.