HtmlCss. 15. 문제//text-align를 이용해 텍스트 정렬하기

문제

정답

내 풀이

<div>
  <a href="http://www.naver.com" target="_blank">네이버로 이동</a>
</div>

<section>
  <a href="http://www.google.com" target="_blank">구글로 이동</a>
  <a href="http://www.google.com" target="_blank">구글로 이동</a>
  <article></article>
</section>

<nav>
  <a href="http://www.daum.net" target="_blank">다음으로 이동</a>
</nav>

div, section, nav {
  border:10px dotted red;
  margin:50px;
  padding:20px;
}

section{
  text-align : center;
}
/*왜 후손선택이나 자식선택으로 하면 안될까*/
nav{
  text-align : right;
}

a {
  background-color:gold;
}

section article {
  width:200px;
  height:200px;
  background-color:blue;
}

선생님 풀이

<div>
  <a href="http://www.naver.com" target="_blank">네이버로 이동</a>
</div>

<section>
  <a href="http://www.google.com" target="_blank">구글로 이동</a>
  <a href="http://www.google.com" target="_blank">구글로 이동</a>
<div>  
    <article></article>
</div>
</section>

<nav>
  <a href="http://www.daum.net" target="_blank">다음으로 이동</a>
</nav>

div, section, nav {
  border:10px dotted red;
  margin:50px;
  padding:20px;
}

a {
  background-color:gold;
}

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

section {
    text-align:center;
}

nav {
    text-align:right;
}

핵심사항

a태그의 영역은 inline 이기 때문에 영역에서 자동정렬할 영역이 없어서 section에서 중앙정렬 속성을 주어야함

• a태그의 영역의 중앙정렬이 아니다.
• section태그의 영역의 중앙정렬이다.

---

section영역의 article 네모를 중앙정렬 하고 싶다면:

• article 태그 display: block이기 때문에 안되서
• display:inline-block 속성으로 바꾸어 주면 된다