웹 기초- text-align

text-align

• text-align
  • 자신을 정렬하는 것이 아니라 자신이 가지고 있는 텍스트를 정렬
  • 대상 엘리먼트의 글자와 자식 inline요소만 정렬한다.
  • 글자가 아닌 엘리먼트를 정렬하려면 display:inline-block;으로 바꾸면 엘리먼트가 텍스트화가 되므로, text-align을 사용하여 정렬이 가능하게 된다.

문제1

HTML
<div>
  안녕하세요.
</div>
<section>
  잘가세요.
</section>
<nav>
  또 봐요
</nav>

CSS
div, section, nav {
  border:3px dotted red;
  margin:10px;
  padding:10px;
}
/* div {		/*text-align의 기본값은 left이기 때문에 따로 좌측 정렬을 안 해줘도 된다.*/
  text-align:left;
} */
section{
  text-align:center;	/*가운데 정렬*/
}
nav{
  text-align:right;		/*우측 정렬*/
}

결과

---

문제2

• 첫 번째 : 왼쪽 정렬, 두 번째 : 가운데 정렬, 세 번째 : 우측 정렬 구현하기(링크만)

HTML
<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>

CSS
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;
}

결과

---

문제3

• '안녕'을 가운데로 정렬하기

HTML
<div>
  <section>
    안녕
  </section>
</div>

CSS
div {
  border:20px solid red;
  padding:20px;
  text-align:center;	
}
section {
  width:100px;
  display:inline-block;
  border:20px solid blue;
  padding:20px;
}

결과

• div에 text-align:center;을 준 이유?
  : section에 글자가 있어서 section에 줘야된다고 생각하겠지만,
  text-align은 자기 자신을 정렬하는 것이 아니라 자신이 가지고 있는(즉, div가 가지고 있는) 텍스트를 정렬하는 것이기 때문에 div에 줘야 하는게 맞다.

---

문제4

• 각각의 크기와 색상과 정렬상태가 다른 링크 버튼 3개 만들기

HTML
<div>
  <a href="http://www.bnx.co.kr/16fw/main/main.asp" target="_blank">bnx 사이트</a>
</div>

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

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

CSS
div {
  text-align: right;
}
div a {
  color:black;
  font-size: 2rem;
}
nav {
  text-align: center;
}
nav a{
  color: red;
  font-size: 3rem;
}
section a {
  color:blue;
  font-size: 5rem;
}