TIL 5 | CSS_Text Style

1. Text-align

텍스트 정렬 

• 왼쪽 정렬 : left, 모든 요소의 기본 정렬은 왼쪽 정렬이므로, 아무 text-align을 주지 않은 태그는 왼쪽 정렬이됨.
• 오른쪽 정렬 :  right
• 가운데 정렬 : center

.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}

 

예외.   <span>은  inline-element이므로, text만큼의 영역을 차지하고 있으므로, 정렬이 되지 않는다!

---

 

2. text-indent

띄어쓰기로 들여쓰기 안되는 것도 text-indent 을 이용하면 들여쓰기 가능!

✋  text-indent : 10px 는 스페이스바 두번(&nbsp;&nbsp;)과 동일하다!

.js-description {
  text-indent: 50px;
}

---

 

✌️ 덤으로 알고가자!

 <blockquote>  </blockquote> 
인용구문을 넣을 때 쓰는 태그로, 문단의 양쪽에 여백을 넣는 기본 스타일이 자동으로 적용됨.

&nbsp;
자바스크립트는 단어 사이에 스페이스를 여러번 넣어도 한번으로 밖에 인식하지 못한다.
이 때문에 단어와 단어 또는 문장과 문장 사이에 스페이스를 여러번 넣고 싶을 때 사용. 

<p>스페이스 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;넣는 예제</p>

 

 

---

Melody's Memo

text-indent를 사용하여 스페이스바로 띄어쓰기한 내용과 똑같이 css를 만들어보는 Assignment가 있었다.
스페이스바 1칸이 text-indent의 몇 px을 의미하는지를 알아야했다.
열심히 구글링하여 결국 발견!

🤙 잊지 않기로 약속!!!
text-indent : 10px 는 스페이스바 두번(&nbsp;&nbsp;)과 동일합니다요.

고로 띄어쓰기 한칸(&nbsp;)  ==  text-indent : 5px~!!