-
이미지관련 태그Frontend/HTML 2024. 5. 30. 20:49
사진은 이미지주소 에 주소 혹은 저장 루트를 적으면 뜸
이미지 관련 태그 이미지 태그 img
- 웹 문서에 사진이나 그림 같은 이미지를 삽입하는 용도의 태그 [속성] (속성 : 태그에 작성하는 내용) 1. src : 삽입할 이미지의 경로를 작성하는 속성 (파일 위치, 인터넷 주소 = 이미지를 가져올 수 있는 경로) 2. width : 가로 길이를 지정해주는 속성 (필수 아님) 3. height : 세로 길이를 지정해주는 속성 (필수 아님) 4. alt : 이미지 설명을 작성하는 속성 (이미지가 보이지 않을 때 화면에 출력 되는 그림) + 이미지 설명을 읽어주는 역할인터넷에 존재하는 주소로 이미지 출력하기
이미지 절대 경로로 출력하기
절대 경로 : 변하지 않는 기준점으로 부터 목표까지의 경로 - 윈도우 기준 시작은 C드라이브 혹은 D드라이브
상대 경로로 이미지 출력하기
상대 경로 : 현재 파일/페이지 위치를 기준으로 하여 목표까지의 경로를 나타낸 것 (파일 기준에서부터 시작하는 위치) (기준이 HTML 파일 기준) 코드에서 뒤로 가기를 작성할 때는 ../ 를 이용해서 뒤로 가기를 진행 뒤로가기를 세 번 진행하고 싶다면 ../../../ 작성해주면 됨 cd(change directory) : 폴더변경
고정 크기 단위(px) : 항상 고정된 크기를 지님
<!DOCTYPE html> <html lang="ko"> <head> <title>이미지 관련 태그</title> <meta charset="UTF-8"> </head> <body> <h1>이미지 태그 img</h1> <pre> - 웹 문서에 사진이나 그림 같은 이미지를 삽입하는 용도의 태그 [속성] (속성 : 태그에 작성하는 내용) 1. src : 삽입할 이미지의 경로를 작성하는 속성 (파일 위치, 인터넷 주소 = 이미지를 가져올 수 있는 경로) 2. width : 가로 길이를 지정해주는 속성 (필수 아님) 3. height : 세로 길이를 지정해주는 속성 (필수 아님) 4. alt : 이미지 설명을 작성하는 속성 (이미지가 보이지 않을 때 화면에 출력 되는 그림) + 이미지 설명을 읽어주는 역할 </pre> <!-- http 로 시작하지 않는 이미지는 주소를 가져올 수 없음 http 로 시작하는 이미지는 보임 --> <!-- 이미지 크기를 조정할 때 width 가로 길이를 설정해주는데 보통 px 나 % 를 많이 사용 height 세로 길이를 설정해주는데 보통 px 나 % 를 많이 사용 --> <h2>인터넷에 존재하는 주소로 이미지 출력하기</h2> <img src="이미지주소" alt="지구가 회전하는 이미지" /> <br> <img src="이미지주소" width="200px" height="200px" /> <br> <!-- 구글에서 이미지를 가지고 와서 이미지 사이즈 500px 500px --> <img src="이미지주소" width="500px" height="500px" /> <h2>이미지 절대 경로로 출력하기</h2> <pre> 절대 경로 : 변하지 않는 기준점으로 부터 목표까지의 경로 - 윈도우 기준 시작은 C드라이브 혹은 D드라이브 </pre> <!-- 이미지를 절대 경로로 가지고 올 때 Preview 에서는 이미지가 제대로 보이지 않을 수 있음 그럴 때는 HTML 파일을 클릭해서 이미지가 제대로 들어가 있는지 확인 이미지 경로를 복사한 후 붙여넣을 때 경로가 \ 되어 있어도 문제는 없지만 나중에 mac or 리눅스 환경에서는 이미지 경로가 안될 수 있기 때문에 / 로 변경해줘야함 --> <img src="이미지주소" width="300px" height="300px" /> <br> <img src="이미지주소" alt="healing" width="300px" height="300px" /> <h2>상대 경로로 이미지 출력하기</h2> <pre> 상대 경로 : 현재 파일/페이지 위치를 기준으로 하여 목표까지의 경로를 나타낸 것 (파일 기준에서부터 시작하는 위치) (기준이 HTML 파일 기준) 코드에서 뒤로 가기를 작성할 때는 ../ 를 이용해서 뒤로 가기를 진행 뒤로가기를 세 번 진행하고 싶다면 ../../../ 작성해주면 됨 cd(change directory) : 폴더변경 </pre> <img src="../이미지주소/hogam.jpg" width="300px" height="300px" /> <hr> <h2>고정 크기 단위(px) : 항상 고정된 크기를 지님</h2> <img src="../이미지주소" width="300px" height="240px" /> <img src="이미지주소" width="500px" height="500px" /> <img src="이미지주소" width="400px" height="300px" /> </body> </html>