2023.03.15 수 (img태그, 하이퍼 링크 태그, 목록 태그)

📖 Coding Study/웹 디자인

2023.03.15 수 (img태그, 하이퍼 링크 태그, 목록 태그)

빵모루 2023. 3. 16. 19:55

프론트엔드 웹 디자인 강의

수업 주제 : HTML 태그(2) - ~~하이퍼링크, 비디오 및 오디오 태그~~ img태그, 하이퍼 링크 태그, 목록 태그

주요 학습내용 : ~~하이퍼링크 및 비디오 태그~~ img태그, 하이퍼 링크 태그, 목록 태그

img 태그

이미지가 많은 사이트를 만들 때 고려해야 할 점

- 이미지가 고 해상도면 네트워크 속도에 따라 이미지를 제대로 표시하지 못 할 수도 있다.

- 따라서 이미지가 많은 사이트(갤러리 등)를 만들 때는, 편집 프로그램을 이용하여 이미지의 썸네일을 만들고 그 썸네일을 웹 페이지에 표현한다.

- 사용자가 이미지를 클릭했을 때 원본 이미지가 다운로드 되도록 하이퍼 링크 작업을 해주면, 속도 문제를 해결할 수 있다.

이미지 경로 설정

- html문서가 들어있는 폴더보다 한 개 상위 폴더의 경로로 이동하려면 '..' 을 입력해주면 된다.

<img src=“/imgs/1.jpg”>라고 해도 됨.

- 다른 웹 서버에 있는 이미지를 가려오려 할 때는, 해당 이미지의 주소를 복사해서 붙여넣기 하면 되지만 저작권을 주의해야 한다.

하이퍼 링크 태그

<a href=“b.html”> 다음으로 </a> 라는 형식으로 사용한다.

웹 페이지에는 '다음으로'라고 표시가 되고, 그것을 클릭하면 b.html문서로 이동된다.

이미지 태그와 같은 느낌으로, 경로를 입력해주는 부분에 다른 웹 사이트의 주소를 적어놓으면 해당 사이트로 이동하게 된다.

목록 태그

크게 세 가지의 리스트 종류가 있다.

1. Unordered List (UL)

2. Ordered List (OL)

3. Definition List (DL)

사용 방법은 순서대로

<ul>

</ul>

<ol>

<ol>

<dl>

</dl>

이다.

기타

-  는 공백 하나를 의미한다. html 코드 상에서 스페이스바를 이용해 공백을 띄운 것은 브라우저가 한 개 이상 반영해주지 않기 때문에, 강제로 빈칸을 추가하고 싶을 때 사용한다.

- 이미지를 삽입할 때에는

<p> <img src="van0.jpg"> </p> 처럼 문단 안에 넣어주는 것이 html의 가이드라인상 추천된다.

- <h1>과 <p> 사이의 여백(위 아래 간격)은 css로 조절할 수 있음. (Box Model)

코드

<!doctype html>
<html>
    <head>
        <title>제목제목</title>
        <meta charset="utf-8">
    </head>
    
    <body>
        <h1>ㅇㅇㅇㅇ</h1>
        <h4><em>ㅁㄴㅇㄹ</em>ㅁㄴㅇ</h4>
        <ul>
            <li><b>출생:</li>
            <li><b>사망 날짜/장소:</b>2120</li>
            <li><b>본명:</b>으아아</li>
            <li><b>주요작품:</b>영화, 그림</li>
        </ul>
        <p><a href="URL"><img src="va.jpg" style="width: 300px; height: 300px"></a></p> 
 	</body>
</html>

참고

https://penguingoon.tistory.com/263#recentComments

HTML 이미지 : img 태그 src url 지정하는 방법

HTML 문서에서 이미지를 표시하기 위해 사용하는 img 태그에는 src라는 속성이 있고, 이 속성은 속성값으로 표시할 이미지 소스 파일의 위치 정보, 즉 url을 입력받습니다. 이번 포스팅에서는 이 src

penguingoon.tistory.com

https://kephilab.tistory.com/76

6. HTML - 하이퍼 링크 태그 <a> (anchor)

현재 사이트에서 다른 웹 문서나 다른 사이트로 연결하는 태그 링크가 있는 부분에 마우스를 올려놓으면, 손가락 모양의 커서로 바뀌어서 표시된다. 태그 형태 네이버 이동 href 속성의 속성값으

kephilab.tistory.com

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=heartflow89&logNo=221153992682

[HTML] 목록태그 리스트 <ul> <ol> <li> <dl> <dt> <dd>

목록 리스트(list) 관련 태그 이번 포스팅에서는 html 목록 리스트(list) 관련 태그에 대해서 알아보...

blog.naver.com

https://www.codingfactory.net/10225#_-_dl

HTML / ol, ul, dl / 순서 있는 목록, 순서 없는 목록, 정의 목록

순서 있는 목록 - ol 순서 있는 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록이다. 순서 있는 목록은 ol로, 목록의 내용은 li로 만든다. <!doctype html> <html lang='ko'>

www.codingfactory.net

LIST

'📖 Coding Study > 웹 디자인' 카테고리의 다른 글

2023.04.03 월 (HTML position) (0)	2023.04.03
2023.03.29 수 (CSS 실습) (0)	2023.03.29
2023.03.27 월 (CSS) (0)	2023.03.27
2023.03.22 수 (HTML 멀티미디어 자료 태그) (0)	2023.03.22
2023.03.13 월 (HTML 실습) (4)	2023.03.13

현재글2023.03.15 수 (img태그, 하이퍼 링크 태그, 목록 태그)

📘공부 기록장

인문학, 돈을 좋아하는 컴공 부적응자 블로그

05-09 03:06

Today :
Yesterday :

📘공부 기록장