티스토리 뷰

부산 ITWILL 학원 실습/Web

이미지와 경로

김뽀삐. 2018. 8. 14. 10:44
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html>
    <head>
        <title>이미지와 경로</title>
    </head>
    <body>
        <hr>
            <h1>img src로 이미지 지정하기</h1>
            <p>
                <b><img src="이미지 경로" alt="대체 텍스트" width="npx" height="npx"></b><br>
                src속성으로 이미지 파일의 경로를 지정한다. 이미지 종류는 (png(최근에 나온, jpg + gif), jpg(일반 사진, 픽셀, 확대하면 깨짐, 쓸 수 있는 색상 많음, 고압축으로 파일 용량이 작다), gif(확대하거나 축소해도 안 깨짐, 256가지 색, 투명한 배경색 가능), svg)<br>
                alt 속성으로 이미지를 설명하는 내용을 넣어준다(시각 장애인용 음성 낭독기, 이미지가 안 나타날 때를 위함)<br>
                width와 height 속성으로 각각 이미지의 가로와 세로 크기를 지정한다.
            </p>
            
        <hr>
 
        <img src="img/img_submit.gif" alt="화살표" height="100" title="이동하기"><br>
        <img src="img/dandelion.jpg" alt="민들레 씨앗" width="300px">
        <img src="img/field-of-poppies.jpg" alt="양귀비 꽃밭" width="300px">
 
        <pre> 이미지 무료 사이트
 morguefile.com
 pixabay.com
 pexels.com
        </pre>
 
        <h1>절대경로와 상대경로</h1>
        <p>
            절대경로란 항상 어디에서 링크를 걸거나 같은 주소로 나타난다.<br>
            주로 외부 사이트를 연결 할 때 쓴다.<br>
            (예) https://www.pexels.com<br>
        </p>
        <i>절대경로로 외부사이트에 있는 이미지 표현하기</i><br>
        <p>
            상대경로란 현재 소스가 있는 문서를 기준으로 링크를 걸거나 파일을 지정할 때 쓰며<br>
            문서의 위치에 따라서 주소가 달라진다.<br>
            (예) ../../img/aa.jpg - aa 이미지가 두 단계 상위에 위치한 img 폴더 안에 있을 때<br>
                  ../img/aa.jpg - aa 이미지가 한 단계 상위에 위치한 img 폴더 안에 있을 때<br>
                  web/img/aa.jpg - aa 이미지가 하위에 위치한 web 폴더 안에 있는 img 폴더 안에 있을 때<br>
                  img/aa.jpg - aa 이미지가 하위에 위치한 img 폴더 안에 있을 때<br>
        </p>
    </body>
</html>
cs







 



저작자표시 비영리 변경금지

'부산 ITWILL 학원 실습 > Web' 카테고리의 다른 글

a 태그로 페이지 안에서 이동하는 링크  (0) 2018.08.14
a 태그로 링크 걸기  (0) 2018.08.14
연습해보기 - 소스  (0) 2018.08.14
연습해보기  (0) 2018.08.14
form-2  (0) 2018.08.13
공지사항
최근에 올라온 글
링크
Total
Today
Yesterday