HtmlCss. 6. 문제//section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요.

문제

정답

내 풀이

<h1>문제 : section(green 색 막대)과 article(blue 색 막대)을 
  한 줄에 보이게 해주세요.</h1>

<div></div>
<section></section>
<article></article>

div {
  height:100px;
  background-color:red;
}

section {
    display : inline-block;
  height:100px;
  background-color:green;
  width : 100px;
}

article {
   display : inline-block;
  height:100px;
  background-color:blue;
  width : 100px;
}

선생님 풀이

<h1>문제 : section(green 색 막대)과 article(blue 색 막대)을 한 줄에 보이게 해주세요.</h1>

<div></div>
<section></section>
<article></article>

div, section, article {
  height:100px;
  background-color:red;
}

section, article {
  width:100px;
  display:inline-block;  
}

section {
  background-color:green;
}

article {
  background-color:blue;
}

핵심 사항

<div> <section> <article>

• 각각 태그의 속성은 display : block 이여서 한줄을 다 쓴다.
• 속성을 바꾸고 싶은 태그는 inline-block으로 높이와 넓이를 조절해준다.

• 각 태그에 중복되는 태그의 속성을 가지고 있을 경우
  불리되어 써야 하는 태그는 각각의 태그로 속성을 지정해주고
  중복되는 속성은 태그들을 입력해주고 ,로 구분해서 나누어주면 된다.