#26. [유노코딩] 입문자를 위한 HTML 기초강의 7~9강

유노코딩

입문자를 위한 HTML 기초강의

 

---

 

 

---

목차(T.O.C)

1. 이미지를 표시해보자
1-1. 이미지 설명 alt
1-2. 이미지 크기 조절하기

 

2. 영억을 구분해보자
2-1. 컨테이너 태그
2-2. 전역속성

 

3. 링크만들기
3-1. 새탭에서 열고싶다
3-2. 연락을 해보자

 

---

7강. 이미지를 표시해보자

이미지 태그: <img/> 단일태그

<img src="표시할 이미지 파일 url, 또는 컴퓨터에 저장된이미지 파" alt="이미지 설명"/>

 

7-1. 이미지 설명 alt

이미지 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체 텍스트가 표시됨.

 

7-2. 이미지 크기 조절하기 

img 태그를 통해 이미지 표시시 너비와 높이 지정

<img scr="표시할 이미지 파일" alt="이미지 설명" width="너비 값" height="높이 값"/>

자동으로 px 단위로 지정되므로 숫자만 적으면 됨

---

8강. 영역을 구분해보자

 

8-1. 컨테이너 태그

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하게 편하게 만드는 태그

• <div> </div> 블록 레벨 컨테이너
• <span> </span>: 인라인 컨테이너

 

 

8-2. 전역속성

전역속성은 모든 html 태그에서 공통으로 사용할 수 있는 속성

 

• id: 요소에 고유한 이름을 부여하는 식별자 역할 속성
• class :요소를 그룹별로 묶을 수 있는 식별자 속성
• style : 요소에 적용할 css 스타일을 선언하는 속성
• title: 요소의 추가정보를 제공하는 텍스트 속성

---

9강. 링크 만들기

링크란 현재문서에서 다른 문서로 이동할 수 있는 수단

<a href="이동할 링크의 주소"> </a>

9-1.  새 탭에서 열고 싶다

• traget="_self"> 현재 탭에서 열기
• traget="_blank"> 새 탭에서 열기

 

9-2. 연락을 해보자

a태그의 href에는 웹문서의 주소 뿐 아니라 전화번호나 메일 주소 등을 지정할 수도 있다. 

• <a href="tel : 010-8789-4456" target-"_slef">전화걸기</a>
• <a href="mail to:agdfdss@naver.com" taget="_blank">메일 보내기</a>