HTML 기초(4) class 속성, id 속성

HTML 기초(4)

---

오늘은 HTML class 속성과 id 속성에 대해 배워보겠습니다.

먼저 class 속성과 id 속성이란 HTML에서 태그 안에 이름을 지정해준다고 생각하시면 됩니다.

 

태그를 보면 div, a, h1 등 따로 이름을 지정하지 않는다면 똑같은 이름으로 사용되기 때문에

CSS를 사용하여 디자인을 하는 경우 원하지 않은 태그에 디자인이 지정되는 일이 벌어집니다.

 

이것을 방지하기 위해 class 속성과 id 속성이 있는데 

먼저 class 속성은 여러 태그의 그룹을 지어줄 때 사용합니다.

 

이유는 class 속성은 다른 태그와 이름이 겹쳐도 CSS가 적용이 되는데

id 속성은 다른 태그와 이름이 같다면 같이 사용되는 JS에서 오류가 발생하기 때문입니다.

 

그래서 class 속성은 여러 태그를 그룹 지어줄 때 사용하고

id 속성은 고유의 태그 한 개에만 CSS를 적용하고 싶을 때 사용합니다.

 

---

 

오늘은 간단하게 여기까지 하겠습니다.

 

오늘의 내용은 어느정도 이해만 하시고 넘어가시면 공부를 하시면서

자연스럽게 사용하실 수 있습니다.

 

HTML은 여기까지 진행하고 다음부터 CSS에 대해서 작성해보겠습니다.

 

마지막으로 HTML을 간단하게 정리하면

HTML은 html 태그와 head 태그, body 태그로 구성이 됩니다.

 

html 태그에는 국적을 head 태그는 제목, 속성, 브라우저 관란 한 메타 태그를,

body 태그는 웹페이지 구성을 위한 텍스트 및 이미지를 작성할 수 있습니다.

 

HTML은 '<태그></태그>' 로 구성이 되며

<태그> 안에 id 속성과 class 속성을 사용하여 이름을 지정해 줄 수 있습니다.

 

'<태그 class="영어 이름"></태그>'

'<태그 id="영어 이름"></태그>'

 

HTML은 웹페이지에서 뼈대를 담당하고 있고

뼈대를 탄탄하게 만들어야 완벽한 웹페이지가 나옵니다.

 

그렇기 때문에 부모 태그와 자식 태그, 형재 태그를 잘 사용하여

가독성이 좋은 코드를 작성하면 추후에 수정할 때 편리하게 수정할 수 있습니다.

 

HTML은 프론트 앤드 개발에 반드시 사용되며

보통 프론트 엔드 개발에는 Visual Studio Code라는 코드 소스 에디터를 사용하여

작업을 진행합니다.

 

https://jjong-wiki-bigdia.tistory.com/3

Visual Studio Code 설치(링크 포함)

 

그 밖에도 main, header, footer 등의 태그들을 적절하게 잘 사용하여 깔끔하게 코드를 작성할 수 있습니다.

오늘도 고생하셨습니다.

 

감사합니다!!