(HTML) block요소 (2019/9/10)

-종류

address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video

 

 

-특징

1. 한 줄 전부 사용한다.

  <div id="warp">
    <h1>block 요소1</h1>
    <h1>block 요소2</h1>
    <h1>block 요소3</h1>
  </div>

#warp{
  background: black;
  width: 500px;
  margin: 100px auto;
}
#warp h1:nth-child(1){
  background: crimson;
}
#warp h1:nth-child(2){
  background: blueviolet;
}
#warp h1:nth-child(3){
  background: indianred;
}

block요소 가로줄 전체 사용 화면

부모 영역(warp) 안에 있는 h1태그들은 혼자서 한 줄 전체를 사용하고 각각 세로로 정렬된다.

또한 h1태그에게 width값을 따로 설정하지 않으면 부모 넓이 전체를 사용한다.

 

 

2. width, height, padding, margin값을 줄 수 있다.

#warp{
  background: black;
  width: 500px;
  margin: 100px auto;
}
#warp h1:nth-child(1){
  background: crimson;
  width: 300px;
}
#warp h1:nth-child(2){
  background: blueviolet;
  padding: 30px;
  margin: 30px;
}
#warp h1:nth-child(3){
  background: indianred;
}

block요소 width,height,padding,maring 설정 화면

#warp h1:nth-child(2){
  background: blueviolet;
  padding: 30px;
  margin: 30px;
}

blcok 요소2 에 width, height, padding, margin을 설정 하였다.

 

 

3. inline요소와 다르게 text-align속성으로 레이아웃을 잡을 수 없다.

#warp{
  background: black;
  width: 500px;
  margin: 100px auto;
  text-align: center; /* 텍스트만 중앙으로 배치 된다.*/
}
#warp h1:nth-child(1){
  background: crimson;
  width: 300px;
}
#warp h1:nth-child(2){
  background: blueviolet;
  padding: 30px;
  margin: 30px;
}
#warp h1:nth-child(3){
  background: indianred;
}

block요소 text-align값 주기 화면

 

block구조는 inline구조와 다르게 text-align속성으로 영역 전체를 움직일 수 없다.

다만, block요소 안의 text는 text-align속성 값에 따라 위치가 달라진다.

따라서 block요소에서 레이아웃을 하려면 margin속성 또는 position 등등으로 레이아웃을 짠다.