[CSS] border & text 속성 ( + 글자 가운데 정렬 방법 )

 

border

border 속성은 테이블 윤곽 설정이다.

보통 3가지 속성을 한 번에 지정해서 사용한다.

 

ex) 1px  solid  #777

두께 1픽셀, 줄 종류 한 줄, 색상 rgb값

두번째 줄 p 태그 border 확인

텍스트 속성은 바로 밑에서 설명한다.

html에서 p 속성 3개 블록을 만듦.

 

스타일에서 p 태그 속성에 모두 테이블 윤곽과 색상을 회색으로 정해준다.

#rgb값은 대표적인 색깔을 영어로 입력해도 인식한다.

 

border-radius = 테두리가 둥글어짐

p {border: 1px solid #777;
        border-radius: 8px;}

둥글어진 테두리의 모습

---

text 속성

color 텍스트 색 지정

 

line-height 줄 사이의 간격 지정

 

letter-spacing 글씨 사이의 간격

 

text-align 수평에서 글자 정렬, 영역에서 텍스트의 위치

나머지 left, right, center, justify 등이 있다.

 

text-decoration 글자에 줄 속성으로 보통 none을 자주 사용한다.

ex) a 앵커 태그의 밑줄 삭제

 

overflow-hidden, scroll, auto 등 글이 칸을 넘을 경우 숨기거나 스크롤 형태 등으로 적용할 수 있다.

tx 클래스들 text-align 확인

각 속성에 대입된 값에 맞게 차례대로 좌측, 중간, 우측으로 배치된다.

 

 

 

vertical-align은 기준이 될 속성한테 준다.

css 3이라는 사진의 vertical(수직) 정렬을 함으로 내부 텍스트들이 수직 상 가운데가 되었다.

 

텍스트 가운데로 정렬하는 방법!

 

실제 현업에서 백엔드 개발자로 일하셨던 강사님이 주신 팁인데 바로 밑에서 확인해보자.

 

우측 드래그한 코드에 height, line-height를 맞춰준 것을 볼 수 있다.

한 줄의 문단이 수평으로 잘 적용된 것을 볼 수 있다.

 

line-height는 줄 간격을 뜻해 다음 줄로 넘어갈 때 세로 길이 200px을 넘게 된다.

이때 처음 시작하는 줄이 위에 딱 붙어있으면 어색하니

위아래 100px 나눠서 줄 간격을 주는 듯하다.