frontend/html

HTML.04.속성

dalc3154 2025. 3. 12. 16:06

HTML 속성 (Attributes)

 

모든 HTML요소는 속성을 가질 수 있다

>> 속성은 요소에 대한 추가 정보를 제공

 

속성은 항상 시작 태그에 지정

속성은 일반적으로 name = "value"와 같이 이름/값의 쌍으로 지정

속성은 이름 다음에 등호를 넣고, 등호 다음에 속성값을 넣음

이때, 속성값은 따옴표로 감싸야 한다

ex) class = "text01"

 

코드 작성시 권장사항

요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백을 첨부

하나 이상의 속성들이 있는 경우 속성과 속성 사이에 공백을 첨부

속성명은 소문자 권장

속성값에는 따옴표 사용 권장

일반적으로 작은따옴표보다 큰따옴표를 주로 사용하지만

속성 값 자체에 작은따옴표(큰따옴표)가 있는 경우 큰따옴표(작은따옴표)를 반드시 사용해야 한다

 

HTML 속성 (Attributes)의 종류

 

href속성

하이퍼링크를 정의하는 a 태그에서, 링크를 클릭했을때 이동하는 페이지의 URL을 지정

 

##URL지정에는 절대 경로와 상대 경로가 있음

절대 경로: 다른 웹 사이트에서 호스트되는 완전한 URL

상대 경로: 웹 사이트 내에서 호스트되는 이미지. 현재 페이지를 기준으로 경로를 따라가 이미지를 가져옴

웹페이지 제작시 상대 경로를 사용하는 것이 권장됨

 

src속성

이미지를 HTML페이지에 삽입하기 위해 사용하는 img태그에서 표시할 이미지에 대한 경로를 지정

 

width와 height속성

img 태그에서 이미지의 폭과 높이(픽셀 단위)를 지정

 

alt속성

alter: 바꾸다, 대체하다

img태그의 alt속성은 이미지를 표시할 수 없는 경우에 이미지 대체 텍스트를 보여줌

 

style속성

색상, 글꼴, 크기 등 각종 스타일을 요소에 추가할때 사용

 

lang속성

웹페이지의 언어를 선언

html 태그 안에 lang 속성을 포함해야 함

 

title 속성

요소에 대한 추가 정보를 정의

해당 요소 위에 마우스를 놓으면 속성값이 설명으로 표시됨

'frontend > html' 카테고리의 다른 글

HTML.06.Head(헤드)  (0) 2025.03.12
HTML.05.Semantic(시맨틱)  (0) 2025.03.12
HTML.03. Block요소와 Inline요소  (0) 2025.03.12
HTML. 02. Element  (0) 2025.03.07
HTML. 01. HTML...?  (0) 2025.03.07