이번에는 태그 요소들에 대해서 조금 더 알아보고 이미지를 표시하는 것까지 해볼게요.
요소 유형
태그들 중 블록 요소를 형성하는 태그가 있고, 인라인 요소를 형성하는 태그가 있습니다.
● 블록 레벨 요소
블록 레벨 요소는 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성합니다.
필요하지 않은 너비까지 모두 차지하고 있을 때에는 블록 레벨 요소라고 봅니다.
개발자 도구에서 단락을 만들었을 때 주변을 감싸는 주황색 여백이 있었던 것처럼,
어떤 블록을 새롭게 형성하게 하는 <p> </p> 같은 경우에는 블록 레벨 요소라고 볼 수 있습니다.
블록 안에 블록을 넣을 수도 있습니다.
일반적으로 블록 안에 블록을 넣지는 않지만 마치 표 속에 표를 그리는 것과 같은 것이라고 보시면 돼요.
<p>
빈정대며 네가 말했지.
나는 끝까지 말하지 않았어.
<p>우리라고.</p>
</p>
단락 안에 단락이 추가됩니다. 결과 화면은 다음과 같습니다.
그럼 이번에는 인랑니 요소를 살펴볼게요.
● 인라인 요소
인라인 요소 : 자기에게 필요한 만큼의 공간만 차지합니다. (콘텐츠의 크기만큼)
인라인 태그들에 대한 예시를 통해 어떤 차이점이 있는지 확인해볼게요.
출처 : 유노코딩 ; https://www.youtube.com/c/%EC%9C%A0%EB%85%B8%EC%BD%94%EB%94%A9/about
● strong 태그는 감싸고 있는 콘텐츠를 굵게 표시하는 태그입니다. 인라인 요소를 만드는 태그예요.
● em 태그는 감싸고 있는 콘텐츠를 기울여 이탤릭체로 표시하는 태그입니다. 인라인 요소를 만드는 태그예요.
● mark 태그는 감싸고 있는 콘텐츠에 형광펜 표시를 더해주는 태그입니다. 인라인 요소를 만드는 태그예요.
그럼 이제 위의 인라인 요소를 사용해서 텍스트를 입력해볼게요.
<strong>밤과 낮이라고</strong>
<em>두 번 </em>
<mark>말하지</mark>
실행한 결과는 다음과 같습니다.
<p> </p> 처럼 단락이 나누어지지 않은 것을 확인할 수 있어요.
인라인 요소는 이처럼 단락이 나누어지지 않고, 자신의 영역 안에서만 특성이 발휘됩니다.
개발자 도구로 열어보았을 때에도 주황색의 블록이 표시 되지 않습니다.
즉 여백 없이 블록 안에 있는 코드들 안에 작성되었다는 것을 알 수 있는데요.
이처럼 블록을 새롭게 형성하지 않고 자기 자신의 영역만큼 자리를 차지하는 요소를 인라인 요소라고 합니다.
이미지 또한 인라인 요소 중 하나예요. (블록을 새롭게 형성하지 않습니다.)
인라인 코드는 블록 안의 부품으로써 삽입이 되어 기능합니다.
● 이미지 표시
img 태그
img 태그는 이미지를 표시할 때 사용하는 태그입니다.
이미지 태그는 단일 태그로 닫는 태그를 필요로 하지 않습니다.
콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 하고, 반드시 원본 파일이 존재해야 합니다.
img 태그의 기본 형태
기본 형태는 다음과 같습니다. (속성이 두 개)
<img src=“표시할이미지파일” alt=“이미지설명” />
각 속성을 살펴볼게요 .
src 속성
img 태그의 src 속성은 표시할 이미지의 위치정보와 파일명을 입력받는 속성입니다.
즉, 이미지의 url을 입력받습니다.
서버에 위치한 이미지 파일이어도 되고, 내 컴퓨터에 저장된 이미지 파일이어도 상관 없습니다.
=> url이란 이미지가 어디에 있는지 알려주기 위해 사용하는 규약(형식)입니다.
★ 여기서 잠깐!
이미지 파일은 다운로드 하거나 사용할 때 반드시 저작권에 주의해주셔야 합니다.
무료로 사용할 수 있는 이미지들을 공유하고 있는 사이트가 많으니 해당 사이트들을 참고하시어
저작권의 문제에 휘말리지 않도록 주의합시다...
이번에는 픽사베이의 이미지를 이용해볼게요.
놀라운 무료 이미지 - Pixabay
놀라운 무료 이미지 우리의 관대한 커뮤니티를 통해 공유되는 0.1 백만개의 이미지와 비디오를 살펴보세요. 인기 이미지: 가을, 꽃, 바다, 하늘, 배경, 겨울, 사람, 국화, 단풍, 자연, 강아지, 크리
pixabay.com
제가 다운로드 한 이미지는 설원 사진이에요.
이 사진을 현재 이미지를 표시하기 위해 작성하고 있는 html이 있는 폴더에서
새로운 images 폴더를 생성하여 그 안에 저장해주세요.
이제 이미지의 경로를 지정해주어야 하는데요.
경로에는 두 가지가 있습니다.
1. 절대경로는 c드라이브부터 추적해서 들어가는 경로
2. 상대경로는 이 파일로부터 어느 위치에 있는지를 비교하는 경로
상대경로는 내가 기준이므로 image.html 을 기준으로 합니다.
즉 아까 생성한 html이 있는 폴더의 images 폴더에서 이미지를 가져오도록 할게요.
만약 폴더를 따로 생성하지 않았을 시에는 다음과 같이 작성하시면 됩니다.
.. 은 한 칸 위 상위 폴더를 의미합니다.
. 은 현 위치의 폴더를 의미합니다.
아래의 예시를 참고해주세요.
<img src="./snowflakes.jpg"/> <!-- . 은 현 위치를 의미 -->
<img src="../snowflakes.jpg"/> <!-- ..은 한칸 위 상위 폴더를 의미 -->
<img src="C:/ai_developer_bee/month02/frontend/day23/images/snowflakes.jpg"/><!--절대 경로-->
절대 경로는 원본이 있는 곳으로 가서 해당 주소를 복사하시면 됩니다.
(images 폴더로 직접 들어가서 절대 경로를 복사해옵니다.)
그럼 두 개의 이미지를 불러와볼게요.
<body>
<h2> 겨울 </h2>
<!-- 소스(원본)파일의 URL(위치 정보)을 지정해서 이미지를 표시한다. -->
<img src="images/snowflakes.jpg"/>
<img src="C:/ai_developer_bee/month02/frontend/day23/imagessnowflakes.jpg"/>
</body>
실행하면 다음과 같이 이미지가 출력 됩니다.
이미지의 alt 삽입
이미지를 삽입할 때 중요한 것이 하나 더 있습니다.
바로 이미지에 대한 텍스트 설명입니다.
alt는 alternative의 약자로 대체 텍스트 역할을 합니다.
이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시되기도 하지만
alt를 사용하면 이미지를 볼 수 없거나 시각의 사용이 불편하신 분들께 웹페이지를 서비스해야 하는 상황에 대한 대비가 가능합니다. (음성인식기가 이미지 대신 이를 활용해요.)
즉 컨텐츠를 소리로 들을 분들을 위해 이미지에 대한 묘사를 alt로 표시합니다.
그리고 이미지 사용이 어려우신 분들은 그 내용을 듣고 이미지를 인식할 수 있습니다 .
<img src="../snowflakes.jpg" alt="겨울의 서리에 부딪쳐 눈부시게 빛나는 설원"/> <!-- ..은 한칸 위 상위 폴더를 의미 -->
<img src="C:/ai_developer_bee/month02/frontend/day23/images/snowflakes.jpg"/><!--절대 경로-->
alt는 가급적으로 사용을 해주시는 것이 좋습니다!
alt를 사용하면 웹 사이트 이용자의 폭이 넓어지고 제약사항이 있는 이용자에게도 서비스가 제공될 수 있습니다.
이를 가리켜 웹 접근성 향상이라고 합니다.
이미지 크기 조정
이미지의 크기를 조정할 수 있습니다.
img 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있습니다.
너비와 높이를 각각 지정할 수 있는데 단위 없이 정수 값만 지정합니다.
다음과 같이 작성합니다.
<img src=“표시할 이미지파일의 주소값” alt=“이미지설명”
width=“너비값” height=“높이값”/>
너비와 높이는 각각 픽셀(px) 단위로 적용됩니다.
<h2> 겨울 </h2>
<!-- 소스(원본)파일의 URL(위치 정보)을 지정해서 이미지를 표시한다. -->
<img src="../snowflakes.jpg"
width="320"
alt="겨울의 서리에 부딪쳐 눈부시게 빛나는 설원"/> <!-- 크기는 둘 중 하나만 지정해도 따라서 크기가 달라집니다. -->
<img src="C:/ai_developer_bee/month02/frontend/day23/images/snowflakes.jpg"/>
상기 코드를 실행했을 때의 출력 결과 입니다.
크기는 둘 중 하나만 지정을 해도 따라서 조정이 됩니다.
만약 가로만 조정을 하고 싶다면 가로 값과 높이 값을 동시에 지정하면 됩니다!
여기까지 요소의 유형과 이미지의 출력에 대해서 알아보았습니다.
'HTML · CSS > HTML · CSS 입문 공부일지' 카테고리의 다른 글
| 웹 HTML 입문 공부 6. 하이퍼링크 표시 (0) | 2022.11.09 |
|---|---|
| 웹 HTML 입문 공부 5. 컨테이너 요소, 전역 속성 (+ 검색 엔진에 노출 잘 되는 법) (0) | 2022.11.09 |
| 웹 HTML 입문 공부 3. 텍스트 입력 (0) | 2022.11.09 |
| 웹 HTML 입문 공부 2. html 문서의 기본 구조 (0) | 2022.11.09 |
| 웹 HTML 입문 공부 1. HTML 이란? (0) | 2022.11.09 |