Web Frontend/HTML & CSS Basic

1. HTML tag, attribute, value, parent etc..

개발자킹콩 2021. 6. 14. 19:48

Tag == element(요소)

Attributes & Value —> 기능 확장

 

 

Img tag는 어떤 이미지를 삽입할지, 그 이미지는 어디에 존재하는지에 대한 정보를 속성과 값으로 명시해야한다.

그리고 img 태그는 닫힘태그에 /img가 아니다.

 

 

 


 

 

Source == src : 경로

Alternative == alt :  대체 텍스트

 

외부적 요인으로 인해 데이터를 못 가져 왔을때 삽입되는 텍스트 (필수)

—> 정상적으로 데이터를 가져오면 이 텍스트는 삽입되지 않는다. 

 

 

 


 

 

Division == div : 분할

 

 

h는 제목을 의미하고, p 는 문단을, img는 이미지 삽입을 의미한다.

그러나, div tag는 의미를 갖지 않는다.

 

그런데, 우리는 만드는 사람이고 홍길동이 무슨 의미인지를 알고 있다.

그럼 이 tag가 갖고있는 이름, 별명은 무엇인지를 명시해줘야 한다.

이때 우리는 class를 사용한다. 

class는 해당 태그가 갖는 별명을 의미하고 홍길동은 이름을 의미함을 알수 있다.

 

 

 


 

 

부모와 자식 요소(element) —> 상대적인 구조

 

 

여기서 손자 태그는 손자라고 부르지 않고 자손에 해당한다는 의미를 사용한다. 

마찬가지로 부모 이상은 조상이라고 한다.

이는 CSS를 이용할때 유용하게 사용된다.

 

 

 

 

 


 

 

 

빈 태그(empty tag) —> 닫히는 태그가 존재하지 않는다 (ex. Img tag)

 

이는 두가지로 나뉘게 된다. HTML5에서는 이 두가지를 모두 사용할 수 있다.

  1. 뒤에 / 가 붙는 tag    (1,2,3,4 에서 사용)
  2. 뒤에 / 가 안 붙는 tag     (XHTML 에서 사용)

 


 

 

 


 

 

정리하면, 환경에 따라 ‘ / ‘를 붙히는 경우와 안 붙히는 경우가 나뉠 수 있다.

알고는 있어야 하며, 한 프로젝트 내에서 붙혔다, 안붙혔다를 혼용해서 쓰면 문제가 될 수 있다는 의미이다.

 

 

 

빈 태그가 아닌 경우에 열리고 닫히는 범위가 존재하기에 이 태그가 갖는 의미 자체만으로도 사용할 수 있다. 

 

 

하지만 거의 대부분의 빈 태그의 경우 컨텐츠의 범위가 존재하지 않기 때문에 이 태그가 위치하는 그 부분에서 뭔가를 해결해야 하는 그런 용도로 사용한다.

그렇기 때문에, 태그가 갖는 의미보다는 그 의미를 확장해서 사용할 수 있는 ( 속성=“값” ) 형태가 이 빈 태그에 거의 대부분 포함된다. —> 빈 태그의 경우 ( 속성=“값” ) 형태가 대부분 붙는다.

 

 

 

 

 

 

 

'Web Frontend > HTML & CSS Basic' 카테고리의 다른 글

6. CSS 기본 문법과 Selector의 역할  (0) 2021.06.19
5. HTML 예제  (0) 2021.06.18
4. HTML 문서의 구조 (body) -- 매우 간단  (0) 2021.06.17
3. HTML 문서의 정보 (head tag)  (0) 2021.06.16
2. HTML 문서의 범위  (0) 2021.06.15