[UI/UX]coding 기초(3) - HTML- Block태그

Dohee·2024년 11월 22일

Block 태그
block속성 태그는 넓이 높이를 가질 수 있고, 따로 넓이나 높이를 설정해주지 않으면
브라우저의 넓이 전체를 차지한다. 여러 개를 출력할 경우 세로로 출력된다는 특징이 있다.

< h1>~< h6> : 제목태그

  • 제목태그는 제목이나 로고에 사용
  • 우선수위(중요도)에 따라 순차적으로 글자가 작아짐
  • h1은 각 페이지 header안에 제목을 나타내는 용도로 문서 1개당 1번씩만 사용가능
  • h1~h4는 실무에서 많이 사용하지만 그 외는 잘 사용하지 않는다.

< p>< /p> : 본문태그(단락태그)

  • 본문을 나타내기 위해 단락으로 구분하는 태그로 < p>태그와 < /p>태그 사이에 내용을 넣을 수 있다.
  • 보통 한 줄 이상의 긴 글을 표현할 때 사용한다.

< br /> : 줄바꿈 태그(단독 태그)

  • 문장안에서 줄바꿈이 필요한 경우 사용한다. 줄바꿈 태그는 단독태그로 태그 이름 뒤에 바로 / 를 붙여 마무리한다.

  • 단독태그는 혼자서 기능을 수행한다.
    br태그는 넓이와 높이를 줄 수 없지만(block 태그 속성) 다음 줄로 문자를 내려주는 역할(세로 출력)을 하여 block 속성에 속한다.

잘 사용하지는 않지만 block속성을 가진 다양한 태그들

1.< hr /> : 수평선 태그
브라우저의 가로 입체 라인효과가 들어있는 선을 출력, css를 통해 디자인을 하면 더 예쁘고 다
양한 형태의 선을 꾸밀 수 있어 hr태그는 잘 사용되지 않는다.

2. < blockquote>< blockquote> : 인용문 태그
긴 인용문에 사용, 자동으로 들여쓰기되어 표현된다.
css로 레이아웃 작업할 때 들여쓰기를 초기화 하여 없애고 사용하면 p태그와 다른점이 없기 때문에 잘 사용하지는 않는다.

3.< pre>< /pre> : 문단 안에 공백이나 줄 바꿈을 그대로 적용해주는 태그
pre태그는 줄바꿈이나 공백을 여러 칸 적용했을 때 이것을 그대로 브라우저에 표현해준다.
하지만 글자 폰트가 굴림체로 적용되어 있고, 앞에 들여쓰기가 되어있어 나중에 css로 초기화할 때 공수가 더 많이 들어가서 잘 쓰이지 않는다.

0개의 댓글