6.태그의 구분과 인라인 텍스트 요소
- 블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
- 인라인 요소 : 자기에게 필요한 만큼의 공간만 차지
개발자 도구에서 마우스 커서를 p,head,body,h1 태그에 가져다 대면 블록을 형성하는 것을 볼 수 있다. 즉 이것들은 블록 레벨 요소이다.
- 인라인 요소에는 텍스트를 굵게 만드는 strong 태그, 텍스트를 이탤릭체로 쓰는 em 태그, 텍스트에 형광펜 표시를 하는 mark 태그가 있다.
개발자 도구에서 마우스 커서를 strong,em,mark 태그에 가져다 대면 그 태그에만 해당되는 부분의 공간만 차지하는 것을 볼 수 있다.
또한, 블록태그 안에 블록태그를 사용하면 블록 끼리의 층이 생긴다.
7.이미지 표시하기
- ing 태그 : 이미지를 표시할 때 사용하는 태그.
--> 단일 태그로써, 닫는 태그를 필요로 하지 않는다.
<img src="표시할이미지파일" alt="이미지설명" />-
여기서, src에는 이미지의 url을 입력받는다.
(url이란? 이미지가 어디에 있는지 알려주기 위해 사용하는 규약이다.) -
alt는 alternative의 약자로 대체 텍스트 역할을한다. 이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시된다.
<img src="표시할이미지파일" alt="이미지설명" width="너비값" height="높이값" />- 이미지의 크기를 조절하기 위해 width와 height 즉, 너비와 높이를 각각 지정할 수 있다.
이때 너비와 높이는 각각 픽셀 단위로 적용된다.
images 폴더에 있는 21 자연 사진을 업로드 한 결과이다.
사진의 url을 잘못된 경로로 변경 한 결과, alt에 설정된 텍스트가 결과 화면에 나오게 된다.
- 내 파일에 없는 사진을 가져오기 위해선 그 이미지의 주소를 복사해서 사용하면 된다.
김의찬입니다