특수 문자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>특수문자</title>
</head>
<body>
    <h1>특수&nbsp;&nbsp;&nbsp;&nbsp;문자</h1>
    <h3>태그의 꺽쇠 부분을 html에서 표시하려고 하면<br>
        특수문자를 사용해 &lt;태그&gt;로 표시할 수 있어요.</h3>
    <footer>
        &copy;저작권
    </footer>
</body>
</html>

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f7fb1301-7dea-4a37-8d3a-5813e45fd446/Untitled.png

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지태그</title>
</head>
<body>
    <img src="image1.jpg" alt="인물사진">
</body>
</html>

alt 부분은 사진을 찾지 못했을 때 대체할 부분

image

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/61437538-805e-4160-ad71-f80c2ef6986b/Untitled.png

이미지가 같은 경로 내에 있지 않은 경우

<body>
    <img src="image/image1.jpg" alt="인물사진">
</body>

사진이 있는 경로를 설정해주면 된다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지태그</title>
</head>
<body>
    <!-- 하위 폴더 안의 이미지 주소 -->
    <img width="500px" src="image/image1.jpg" alt="인물사진">
    <!-- 웹의 이미지 링크 -->
    <img width="500px" src="<https://images.unsplash.com/photo-1620307264118-70a5ffb5cb30?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80>" alt="">
    <!-- unsplash 랜덤 이미지 -->
    <img width="500px" src="<https://source.unsplash.com/random>" alt="">
    <img width="500px" src="<https://source.unsplash.com/1600x900/?animal/1>" alt="">
    <img width="500px" src="<https://source.unsplash.com/1600x900/?animal/2>" alt="">
    <img width="500px" src="<https://source.unsplash.com/1600x900/?animal/3>" alt="">
    <img width="500px" src="<https://source.unsplash.com/1600x900/?animal/4>" alt="">
    <img width="500px" src="<https://source.unsplash.com/1600x900/?animal/5>" alt="">
  
</body>
</html>

width, height 둘 다 건들면 사진이 뭉개질 수도 있다

픽셀 말고 %도 가능함. img width="50%" 가로 길이의 50%라는 의미