[CSS] text, border, display, box

< 텍스트(text) 관련 속성>

1. text-align : 텍스트의 위치를 좌/우/중간 중 하나로 위치하는 속성

- left(기본값), right, center

- justify: 문단을 균등하게 배분하여 가지런하게 표현

2. text-indent 들여쓰기

- 크기로 지정. px, em, %(너비에 대한 비율)

3. line-heigth 줄 사이의 간격을 지정

- 크기를 지정 px, em, %

4. text-decoration : 텍스트의 상/하/중간에 선을 그려주는 속성

- none(기본값), overline, underline, line-through

5. text-transform : 텍스트를 대문자, 소문자, 단어의 첫글자만 대문자로 변경

- uppercase, lowercase, caitalize

6. text-shadow : 텍스트에 그림자를 설정하는 속성

- 가로 세롤 번짐 색상 순으로 효과 적용

- 가로: +(오른) -(왼)

- 세로: +(아래) -(위)

7. letter-spacing : 자간, 글자 사이의 간격을 띄우는 속성

- 기본값: 0

- px, em, %

8. white-space: 공백을 표시하는 속성

- pre-line : 여러개의 공백을 하나로 표시, 줄바꿈 함

- pre : 여러 개의 공백을 그대로 표시, 줄바꿈 함

- pre-wrap : 여러 개의 공백을 있는 그대로 표시, 줄바꿈 함

- nowrap(기본값): 여러 개의 공백을 하나로 표시, 줄바꿈 하지 X

 

# 공백을 표현하는 특수기호

- &nbsp; (non-break space) 공백 한칸

- &ensp; 공백 한칸 &nbsp;보다 큰 스페이스 → 공백 2칸

- &emsp; 공백 한칸 &ensp;보다 큰 스페이스 → 공백 3칸

 

 

< 테두리(border) 관련 속성>

<style>
  .b1 {
    /* 1.각각 설정 - 방향 */
    border-top: 5px solid gray;
    border-bottom: 10px solid darkblue;
    border-left: 15px solid seagreen;
    border-right: 20px solid darkmagenta;
    
    /* 2. 각각 설정 -굵기, 스타일, 색상 */
    border-width: 10px;
    border-style: dotted;
    border-color: deeppink;

     /* 3. 한꺼번에 설정 - 방향 */
     border: 5px solid darkmagenta;

    /*  4. 각각 설정 - 굵기, 스타일, 색상, 방향*/
    border-width: 5px 10px 15px 20px;
    border-style: solid dotted double dashed;
    border-color: seagreen darkmagenta navy aqua;
  }
</style>

 

# display 속성

- 박스의 유형을 변경하는 속성

- 레이아웃을 위해서 사용하는 중요한 속성

 

< 블럭 유형 >

1. 블럭 (block)박스: 한 줄 전체를 차지

2. 인라인(inline) 박스: 한줄에 여러 태그를 사용할 수 있음, 속성의 일부(너비, 높이)가 무시됨.

3. 인라인-블럭(inline-block) 박스: 인라인 박스의 성질을 가지고, 모든 속성을 사용