2023.07.31 모각코 5회차 결과

block레벨 요소의 대표적인 태그로는, div태그가 있고,

inline레벨 요소의 대표적인 태그로는, span태그가 있습니다.

 

 

 

먼저 div태그는, block레벨 요소의 대표적인 태그로, 영역 태그의 역할과 동시에 컨테이너의 역할을 합니다.

 

span태그는 inline레벨 요소의 대표적인 태그로, 영역 태그의 역할과 동시에, div태그와 달리 특정 아이템을 꾸미는 역할을 합니다.

 

div태그와 span태그의 차이점을 알아보기 위해서 코드를 작성해보았습니다.

 

빨간색 부분은 div 태그로 작성된 문단이고, 노란색 부분은 span태그로 작성된 부분이다. 확연한 차이가 있는 것을 볼 수 있습니다.

 

 

작성된 웹 페이지를 개발자 도구를 이용하여 살펴보면, div태그의 기본속성은 block, span태그의 기본 속성은 inline으로 표시된 것을 볼 수 있습니다.

 

 

다음으로는 block 레벨 요소와 inline 레벨 요소의 특징에 대해 알아보았습니다..

block레벨 요소는 부모 요소의 전체 공간을 차지하여 블록을 만듭니다. 이 블록 레벨 요소는 한 칸을 모두 차지하기 때문에 세로로 나열됩니다. 또한 width,height,margin같은 속성이 적용됩니다.

inline레벨요소는 콘텐츠의 흐름을 끊지 않고(줄바꿈x), 요소를 구성하는 태그의 할당된 공간만 차지합니다. 따라서 가로로 나열되는 특성이 있고, width,height같은 속성이 적용되지 않습니다.

 

 

 

위 특징에 대해 더 자세히 알아보기 위해 코드를 작성해보았습니다.

세로로 나열되는 div태그와, 가로로 나열되는 span태그의 차이점이 명확히 보이는 것을 알 수 있었습니다.

 

 

 

 

또다른 코드에서는 style태그로 width와 height,border 속성을 입혀보았습니다. 

div태그로 감싸진 부분은 변경된 넓이와 길이가 적용이 된 반면, span태그는 적용되지 않는 모습을 볼 수 있습니다.