[HTML/CSS] text-align 문자 정렬 border 테두리 속성

-text- align: center(left, right, justify)

CSS text-align 속성은 문자(text) 텍스트의 정렬 방향 의미한다.

• text-align: left; 텍스트 왼쪽 정렬
• text-align: right; 텍스트 오른쪽 정렬
• text-align: center; 텍스트 가운데 정렬
• text-align: justify; 텍스트 양쪽 정렬

 

 

-border: solid(dashed, dotted,

border 속성은 태그의 테두리를 설정하는 속성으로, 세부 속성들을 한번에 쓸 수 있으며

width - style - color의 순서로 사용한다.

 

(아래 코드 예시처럼 width 10px, style solid, color blue 일 경우 각각의 값만 차례대로 쓴다.)

 

<style>
.div{
     border: 10px solid blue;
</style>

 

border-width 테두리 두께로, 주로 `px` 단위 사용

border-style 테두리 스타일로 실선, 점선, 이중선 등의 옵션 // solid : 실선,  dotted : 점선, double : 이중선

border-color 테두리 색상으로, 값은 color 속성의 포맷을 사용

 

text-align 속성과 border 속성의 코드 예시

<style>
.class {
  text-align: center;
  border: solid;
}
</style>

 

border 테두리의 특정 방향만 따로 설정할 수도 있다.

각 테두리마다 다른 스타일을 적용하고 싶을때는

bottom-top, bottom-bottom, bottom-left, bottom-right 값을 각각 준다.

 

• border-top (위 테두리)
• border-bottom (아래 테두리)
• border-left (왼쪽 테두리)
• border-right (오른쪽 테두리)

 

 

---