html <div>, <span> tag 개념과 차이점
1. <div> 태그란?
<div>tag란 division, 분할, 분배, 분류를 뜻합니다. html 안에 존재하는 여러 개의 태그들을 <div>라는 큰 단위로 묶어주는 주머니 역할을 한다. 큰 단위인 <div>로 묶어주면, 나중에 css로 <div>에만 수식을 해도 <div>태그 안에 속해있는 태그들이 모두 같은 명령을 받아 동일하게 적용된다.
만약 코드가 1,000줄이 넘고 코드도 다른 코드 30개들이 있는데 여기에 모두 동일한 효과를 적용시켜야 된다고 하면, 코드 하나하나에 효과를 넣는 게 아니라 <div> 태그로 묶어 나중에 css로 30여 개의 코드에 동일한 효과를 적용시킬 때 사용한다.
<div> 태그는 block level element (블록 라벨 엘리먼트)라 해당하는 코드의 행 전체를 차지한다. 다만, <div> 태그는 이렇게 묶어주는 주머니 역할이기 때문에 <div>태그 자체로는 시각적인 변화를 나타낼 수 없다.
2. <span> 태그란?
<span> 태그도 <div>태그와 같이 여러 개의 태그들을 묶어주는 주머니 역할을 한다. <span>태그는 inline element (인라인 엘리먼트)라 자신의 content 만큼 공간을 차지한다. <span> 태그는 이렇게 묶어주는 주머니 역할이기 때문에 <span>태그 자체로는 시각적인 변화를 나타낼 수 없다.
3. <div>, <span> tag 출력하기
■ <div> tag 출력하기
■ <span> tag 출력하기
4.<p>, <div>, <span>tag의 차이점
<p>, <div>, <span> 태그가 뭐가 다른 건지 의문을 품게 될 때가 있다. 웹 제작 수업 선생님께 여쭤보니 아래처럼 가르쳐주셨다. 궁금하셨던 분들은 참고하시면 좋을듯하다.
■ <p> : 문단 분량의 content + 상하 margin이 있음
▲ <p> tag css box 조회화면 / 파란색 : content, 주황색 : margin
■ <div> : block level element (블록 라벨 엘리먼트) - 화면 전체를 쓰는 애들. content에 해당하는 <div>라는 텍스트가 행 전체를 차지하고 있다.
▲ <div> tag css box 조회화면 / 파란색 : content
■ <span> : inline element (인라인 엘리먼트) - 자기 content 만큼의 테두리를 쓰는 애들. content에 해당하는 <span>이라는 텍스트가 자기만큼의 공간을 차지하는 것을 볼 수 있다.
'DevOps > Web' 카테고리의 다른 글
| html rendered html page copy ( 소스가 변환되어 생성된 html 페이지 복사 ) (0) | 2022.07.27 |
|---|---|
| html page snapshot -> html2canvas ( html 화면 이미지로 변환 ) (0) | 2022.07.27 |
| html div style display 속성을 사용하여 화면 출력/숨김 (0) | 2022.07.27 |
| javascript 프로그램 실행 지연(sleep) (0) | 2022.07.27 |
| summernote reset 이후 pasteHTML 사용시 <p><br></p> 제거 (0) | 2022.07.14 |
