끵뀐꿩긘의 여러가지

[부스트코스] - 웹 프로그래밍 6. HTML(2) 본문

부스트코스 - 웹/1. 웹 프로그래밍 기초

[부스트코스] - 웹 프로그래밍 6. HTML(2)

끵뀐꿩긘 2020. 2. 6. 17:23

저번 시간에 HTML을 처음 접하면서 제가 좋아하는 심슨에 관해서 사이트를 만들어 보았습니다.

아직은 많이 조잡하지만 시작했다는 것에 큰 의미를 두고 싶습니다!

 


<ID 와 Class>

 

ID

  • 고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.
  • 고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다.
  • 선택자에 #(샾) 사용

Class

  • 하나의 HTML문서 안에 중복해서 사용 가능합니다.
  • 하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.
  • 홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.
  • 선택자에 .(점) 사용

 

이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다.

 

HTML에서 부여하는 CLASS와 ID는 CSS에서 아주 중요하고 편리하게 작용합니다. 다음 주제인 CSS와 함께 더 자세히 알아봅시다.

 

 


<div 와 span>

 

div

  • 블록 레벨 요소이며 인라인 요소와 텍스트를 포함하고 다시금 블록 레벨 요소를 포함할 수 있습니다.

span

 

  • 인라인 요소이며 인라인 요소와 텍스트를 포함하지만 블록 레벨 요소를 포함할 수는 없습니다.

div&span

 

div와 div는 줄바꿈이 생기고, span과 span은 줄바꿈이 생기지 않습니다. div는 전체적인 레이아웃을 잡을 때, span은 텍스트 스타일 등 특정 부분에 스타일을 지정할 때 주로 사용됩니다.

 

부스트코스 강좌: https://www.edwith.org/boostcourse-web/lecture/16667/

부스트코스 강좌: https://www.edwith.org/boostcourse-web/lecture/16668/


 

 

HTML,  활용하는 것은 어렵지 않아 보입니다!

다음 강의에서는 디자인을 주로 담당하는 CSS에 대해서 알아봅시다.

 

 

 

 

Comments