Programming/HTML5 & CSS3
[HTML] 이미지, 수평선 삽입하는 법
hi-choi
2020. 12. 7. 00:58
코드를 작성하다보면 이미지와 수평선을 삽입해야하는 경우가 발생합니다. html에서는 <img> 태그를 이용해 이미지를 <hr> 태그를 이용해 수평선을 삽입할 수 있습니다.
이미지 삽입하는 법 : <img> 태그
이미지를 넣어야하는 경우 <img> 태그를 사용하시면 됩니다. <img> 태그의 형태는 다음과 같습니다.
<img src=" " alt=" " width=" " height=" ">
src에는 출력하고자 하는 이미지 파일의 위치를 입력해주시면 됩니다. alt에는 이미지 출력에 문제가 발생했을 때 이미지 대신 출력할 텍스트를 입력해주시면 됩니다. src와 alt는 <img> 태그의 필수 속성으로 반드시 모두 입력해주셔야 합니다. width와 height는 각각 이미지의 가로 길이와 세로 길이를 의미합니다. 출력하고자 하는 이미지의 크기를 width와 height 속성을 사용해서 조절하시면 됩니다. width와 height 속성은 선택사항으로 생략하셔도 상관없습니다.
| 속성 | 설명 |
| src | 이미지 경로 지정 |
| alt | 이미지 출력 에러 시 이미지 대신 출력할 텍스트 지정 |
| width | 이미지 가로 길이 지정 |
| height | 이미지 세로 길이 지정 |
<head></head>
<body>
<img src="example.jpg" alt="image error" width="300px" height="100px">
</body>
수평선 삽입하는 법 : <hr> 태그
수평선을 넣어야하는 경우 <hr> 태그를 사용하시면 됩니다. <hr> 태그 하나만 입력하시면 기본값으로 지정되어 있는 수평선이 출력됩니다. 수평선의 스타일은 <hr> 태그의 속성을 따로 지정해주셔야합니다.
| 속성 | 설명 |
| noshade | 수평선 입체감 제거 |
| size | 수평선 두께 지정 |
| color | 수평선 색 지정 |
| width | 수평선 길이 지정 |
<head></head>
<body>
기본 수평선
<hr>
수평선 입체감 제거
<hr noshade>
수평선 두께 5px
<hr size="5px">
수평선 두께 5px + 색깔 변경
<hr size="5px" color="skyblue">
수평선 두께 10px + 색깔 변경
<hr size="10px" color="skyblue">
수평선 두께 10px + 색깔 변경 + 수평선 길이 변경
<hr size="10px" color="skyblue" width="300px">
</body>
