본문 바로가기

프로그램/코딩

[HTML]div, span, p

728x90
반응형

div, span, p를 알아둬야 돼는 이유

블로그를 운영한다면 블로그 스킨에 따라서 거의 모든 태그에 CSS가 설정되어 있다

디자인을 위해서 설정해 둔 경우이긴 하나 어떨때는 왜 이 태그는 이런디자인으로? 이 태그는 왜 건드린거야? 하는 경우가 있다

그렇기 때문에 블로그에 글을 쓸 때 html로 작성 할 경우에는 어떠한 태그로 감싸주는게 좋다

기본 글쓰기 모드로 글을 쓸 경우 네이버 블로그에서는 p안에 span으로 내용을 감싸주고 있고 구글 블로그에서는 div태그로 티스토리는 p태그로 감싸주고 있다

 

  • p태그는 단락을 구분해 주는 태그
  • div태그는 block속성을 갖고 있는 아무 의미 없는 태그
  • span태그는 inline속성을 갖고 있는 아무 의미 없는 태그

https://korearaogong.tistory.com/10

 

[CSS] 태그의 크기 block, inline, margin, padding

태그에는 기본적으로 block의 속성이나 inline속성을 갖고있고 margin, padding의 속성을 갖고있다 block block의 속성을 갖고 있는 대표적인 태그는 div로 한줄을 전부 사용하는 태그이다 block속성을 갖고

korearaogong.tistory.com

왼쪽 네이버 블로그, 오른쪽 티스토리, 구글블로그는 처음부터 html로 작성하기 때문에 예시는 없음

즉 글쓰기 모드에서 글을 쓰게 되면 글쓴이에게는 안보이지만 모든 글씨를 p, div, span태그로 감싸주고 있다

티스토리 글쓰기 html 모드

이렇게 모든 글씨에 태그를 감싸주는 이유는 모든 글씨의 스타일을 지정해 주기 위해서이다

나의 구글 블로그같이 처음부터 html로 작성을 할 경우에는 블로그에 스킨에 맞는 태그로 내용들을 감싸주거나 직접 모든 글씨에 디자인을 해주는 것이 이질감이 없다

 

예제

See the Pen Untitled by korearaogong (@korearaogong) on CodePen.

728x90
반응형