HTML의 문법에는 tag 외에 한 가지가 더 있다고 지난 시간에 말씀드렸었던 것 기억나시요?
오늘은 그 외에 한 가지 바로 속성에 대해서 알아보도록 하겠습니다.
속성이란 태그의 이름만으로는 정보가 부족할 때에
속성을 적용하여 더 많을 일을 할 수 있도록 하는 것
이라고 생각하시면 될 것 같습니다.
HTML 문법의 심화?일까요 ㅎㅎ 무튼 여기까지만 아신다면
문법은 거의 끝났다고 생각하시면 될 것 같습니다.
그래서 오늘은 속성과 같이 쓰이는 태그 중
두 가지와 함께 속성의 이름과 쓰임새에 대해서 알아보도록 하겠습니다.
<img>
<img>는 src를 사용하여 경로를 설정해야
그 역할을 제대로 수행하는데요.
먼저 사용되는 속성들을 살펴보고
그다음 예제를 통해서 해당 속성이
어떤 용도로 사용되는지 확인하시면 될 것 같습니다.
src="url"
source의 줄임말로 이미지의 경로를 파악하여 웹브라우저에 전달하는 역할을 합니다.
width="size"
가로 크기를 결정하는 역할을 하지만 사용하지 않으면 auto로 처리됩니다.
height="size"
세로 크기를 결정하는 역할을 하지만 이것 역시 사용하지 않을 시 auto로 처리됩니다.
alt="text"
alterative text의 줄임말로 이미지의 대체제 역할을 합니다.
이미지 오류 시 텍스트로 표현되기도 하고
시각 장애인들의 경우 alt의 정보를 토대로 전달된다고 합니다.
아래 예제와 이미지와 같이 위에서 언급했던 내용들을 살펴봅시다.
<img src="34Coding.png" alt="34코딩" /></br>
<img src="34Coding.png" width="100px" /></br>
<img src="34Coding.png" height="100px" /></br>
<img src="34Coding.png" width="100px" height="20px"/>
input
input은 입력을 받을 수 있는 여러 가지 기능들을 제공하므로
어떤 면에서는 HTML에서 가장 강력한 요소라고 볼 수 있습니다.
대표적인 input요소들은 몇 개를
예제와 함께 살펴보도록 하겠습니다.
type=""
nput의 타입을 결정합니다. 타입의 종류는
type = "text" 문자 입력 창을 생성합니다.
type = "password" 비밀번호 입력 창을 생성합니다.
type = "checkbox" 체크박스를 생성합니다. 체크를 용이하게 해 줍니다.
type = "radio"체크박스와 비슷하지만 다릅니다. (한 그룹일 때 동시에 여러 개를 선택할 수 없습니다.)
type ="submit" 버튼 모양을 생성하고 form으로 전송하는 기능 또한 갖고 있습니다.
name=""
태그의 이름 설정(임의로 지정)
value=""
입력 칸에 미리 값을 지정(임의로 지정)
<input type="text" name="text" value="텍스트입력칸">
<input type="password" name="패스워드" value="비밀번호입력칸"/>
<input type="radio" name="check1" />
<input type="checkbox" name="check2" value="eng" />
<input type="submit" value="입력" />
두 가지 태그와 속성들을 살펴보았습니다.
속성에 개념이 어느 정도 잡히지 않으시나요?
요소와 마찬가지로 속성 또한 외우시는 것보다
필요에 의해서 찾아 사용하면
훨씬 더 쉽고 빠르게 익히실 거라 생각이 듭니다.
이왕 하는 거 조금이라도 덜 지루하게 공부하는 것이
좋을 것 같기도 하고요... ㅎㅎ.
오늘은 여기까지입니다.
다음 시간에 더 유익한 포스팅으로 찾아뵙도록 하겠습니다.
감사합니다.
'HTML' 카테고리의 다른 글
| tag의 종류 3/3 (0) | 2020.07.04 |
|---|---|
| tag의 종류 2/3 (0) | 2020.07.02 |
| tag의 종류 1/3 (0) | 2020.07.01 |
| tag 란? (0) | 2020.06.30 |
| HTML이란? (0) | 2020.06.29 |
