비전공자를 위한 HTML/CSS-속성

코딩 공부

뉴 데이 2022. 5. 1. 20:27

속성이란?

속성은 태그에 추가로 정보를 제공하거나 태그의 동작이나 표현을 제어할 수 있는 설정값을 의미합니다.

속성을 사용하는 방법

속성은 이름과 값으로 이루어져 있습니다.

시작 태그에서 태그 이름 뒤에 공백으로 구분 후 속성 이름="속성값"으로 표현합니다.

속성값은 홑따옴표(')와 쌍따옴표(")로 감싸 표현합니다.

<h1 id="title">Hello, HTML</h1>

위는 <h1>에 id 속성을 추가해 title 값을 선언한 코드입니다.

여러 속성을 사용하는 방법

의미와 용도에 따라 여러 속성이 존재하며 하나의 태그에 여러 속성을 선언할 수 있습니다.

여러 속성을 선언할 때는 공백으로 구분해서 사용합니다.

<h1 id="title" class="main">Hello, HTML</h1>

위는 <h1>에 id와 class 2개의 속성을 선언한 코드입니다.

속성의 선언 순서는 태그에 영향을 미치지 않으며 class를 id보다 먼저 선언해도 결과는 같습니다.

속성의 종류

속성은 종류에 따라 모든 태그에 사용할 수 있는 글로벌 속성과 특정 태그에서만 사용할 수 있는 속성으로 구분됩니다.

또한, 선택적으로 쓸 수 있는 속성과 특정 태그에서 필요한 필수 속성으로 구분됩니다.

위의 예시에서 쓰인 id와 class 속성은 글로벌 속성입니다.

참고자료

HTML attribute reference

HTML의 요소들은 속성을 가지고 있습니다; 속성은 사용자가 원하는 기준에 맞도록 요소를 설정하거나 다양한 방식으로 요소의 동작을 조절하기 위한 값을 말합니다.

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

부스트코스는 NAVER 계열사 등과 함께 만들어가는 현장 중심 온라인 교육 프로그램입니다.
현업 전문가들이 고민하여 만들고 1:1 코드리뷰도 받을 수 있는 부스트코스에서 기업이 원하는 유능한 개발자로 boost하세요!