12.12 국비학원 48일차 (글자 관련 스타일속성2, 리스트/배경/영역/요소배치 관련 스타일 속성)

• 글자 관련 스타일 속성(2)

         - white-space : 공백 처리와 관련된 기능을 제공

                   white-space: normal; : 기본 공백 처리 방식으로 여러 공백이 있어도 하나의 공백만 반영

                   white-space: nowrap; : 여러 공백이 있어도 하나의 공백만 반영. 줄 바꿈이 필요해도 안바꾸고 한 줄로 표기

                   white-space: pre; : 여러 공백을 그대로 반영하여 출력. 줄 바꿈도 입력한 내용대로 출력

                   white-space: pre-line; : 여러 공백을 그대로 반영하지 않음. 줄 바꿈은 입력한 내용대로 출력 (자동 반영)

                   white-space: pre-wrap; : 여러 공백을 그대로 반영. 줄 바꿈도 입력한 내용대로 출력 (자동 반영)

         - text-overflow : 지정된 영역을 벗어나는 텍스트 글자에 대한 스타일 지정

                   text-overflow: clip; : 벗어난 텍스트 글자에 대해 잘라내기 처리를 함

                   text-overflow: ellipsis; : 벗어난 텍스트 글자에 대해 말줄임표 처리를 함

 

• 리스트 관련 스타일 속성

html 파일

                위의 목록에 사용할 수 있는 스타일 타입

                    decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman

                    disc, circle, square, none

                 위의 목록에 이미지 활용하기

내부/외부 링크 사용하여 이미지 불러오기 가능

                       위의 목록 위치

기본적으로는 outside

• 배경 관련 스타일 속성

         - 배경색 적용 범위

         - margin > border > padding > content

html

css

         - 배경 이미지

 

• 영역 관련 스타일

        - 내부여백(padding) / 외부여백(margin) 나누는 기준은 border

상하좌우 각각 설정 가능. 한번에 값을 다르게 설정할 때는 시계방향 순서이다.

          - 인라인 영역을 블럭 영역으로, 블럭 영역을 인라인 영역으로, 영역을 보이지 않게 할 수 있다.

           - 블럭 영역 설정

            - 인라인 영역 설정

           - 테두리 스타일

• 요소 배치 관련 스타일

         - 배치 변경

          - z 축 위치 변경

index 숫자가 작을수록 뒤에 배치

          - 플러팅 속성 (레이아웃 구조 생성에 주로 쓰임)