[Frontend] CSS의 태그 속성

Chapter #4 태그를 표현하는 CSS와 Advanced CSS

 

Section 2. CSS의 주요 속성과 값

✴︎ 색상과 배경 지정

: 글자색

• color 속성

: 태그 내용인 텍스트 문자열의 글자색을 지정하는데 사용

: 배경

• background-color 속성

: 태그의 배경색을 지정하는데 사용

• background-image 속성

: 태그의 배경 이미지를 지정하는데 사용

: 배경 이미지가 지정되었을 경우에도 배경색 지정 가능

: 이미지의 경로는 상대 경로, 절대 경로로 지정할 수 있음

• background-repeat 속성

: 배경 이미지가 있는 경우, 이것을 반복해서 화면에 표시할지 여부를 결정하는데 사용

• background-attachment 속성

: 배경 이미지가 있을 때 화면의 스크롤이 이동하더라도 이미지를 고정적으로 보여줄 것인지의 여부를 지정

• background-position 속성

: 이미지의 초기 위치를 지정

• background 속성

: color, image, repeat, attachment, position 속성 값을 한 번에 같이 간단히 표기하기 위해 사용

 

✴︎ 색상과 배경 지정

• font-family 속성

: 엘리먼트에 설정할 폰트의 종류를 지정, 값은 'Gill', 'Helvetica', 'serif', 'sans-serif', 'cursive', 'fantasy', 'monospace' 중에서 선택 가능

: font-family 이름의 우선순위 리스트로 지정할 수도 있음

• font-style 속성

: 폰트 스타일을 'normal', 'italic', 'oblique' 중에서 하나를 선택 → 'oblique'와 'italic'은 형태가 거의 유사

• font-variant 속성

: 'small-caps' 속성 값을 사용하면 소문자는 모두 대문자로 표시

• font-weight 속성

: 폰트의 굵기를 선택

: 100~900사이의 값 지정, 클수록 굵은 글씨

: 'normal' → 400, 'bold' → 700

• font-size

: 폰트의 크기를 지정

• font 속성

: style, variant, weight, size, height, family 속성을 한 번에 간결하게 표시

 

✴︎ Text 지정

• text-indent 속성

: 문단에서 첫 번째 줄의 들여쓰기 지정

• text-align

: 문단의 내용을 왼쪽, 오른쪽 등으로 맞춤 → left, right, cetner, justify

• text-decoration

: 텍스트에 장식을 지정

: 'none' → 없음, 'underline' → 밑줄, 'overline' → 윗줄, 'line-through' → 취소선 중 하나의 값

• letter-spacing

: 글자 간격을 지정

• word-spacing

: 단어 간격을 지정

• text-transform 속성

: 영문자의 첫 글자를 대문자로 변환 또는 영문자의 대소문자의 변경을 지정

: 'capitalize' → 첫 글자만 대문자로, 'uppercase' → 대문자로, 'lowercase' → 소문자로, 'none' → 지정 안함

• white-space 속성

: 태그 내의 여백을 처리하는 방법을 정의

: 'normal' → 줄바꿈이 필요한 경우 자동으로 줄 바꿈

: 'pre' → 엔터와 같은 줄 바꿈 기호가 있는 경우에만 줄 바꿈

:  'nowrap' → <br> 태그를 만나기 전까지 절대 줄바꿈 되지 않음

: 'pre-wrap' → 줄 바꿈이 필요한 경우 자동으로 줄 바꿈, 줄바꿈 기호가 있는 경우에도 줄 바꿈

: 'pre-line' → 줄 바꿈이 필요한 경우 자동으로 줄 바꿈, 줄 바꿈 기호가 있는 경우에도 줄 바꿈

 

✴︎ Table 지정

• 테이블 관련 작업은 CSS에서 테이블을 위한 레이아웃을 정의

• CSS 테이블 모델 : Table, Caption, Row, Row group, Column, Column group, Cell로 구성

• 테이블의 내용 배치 : 태그들의 내용과 테두리를 가진 사각의 박스로 생성, 각 셀들은 padding을 가지지만, margin을 갖진 않음

• 테이블의 내용 배치

: table-layout 속성 → 셀을 배치하는데 사용하는 것으로 'fixed', 'auto' 중 하나의 값을 사용

• 테이블의 Height 과 Width

: 세로 높이는 table 또는 inline-table의 height 속성에 의해 지정

: 너비는 width 속성에 의해 결정

 

✴︎ Border 지정

• 2가지 모델

: separated → 각각의 셀로 구성된 모델

: collapsing → 셀들이 연속되어 한 덩어리로 합쳐진 듯한 모델

• border-collapse 속성

: 테이블의 테두리 모델을 선택하는 것

⇒ Separted border model

• border-spacing 속성

: <length>는 분리되어 있는 서로 인접한 셀과 테두리들 간의 거리를 기술

• empty-cells 속성

: 빈 셀을 화면에 표시할지 여부를 결정하는 속성

: show → 빈 셀이 화면에 표시

: hide → 빈 셀은 화면에 표시되지 않음

 

⇒ Collapsing border model

: 셀, 행, 행 그룹, 열, 열 그룹에 테두리를 지정하는 것이 가능

: 모든 셀의 모든 경계면들은 테두리 속성들에 의해 기술

 

✴︎ Box model 지정

• 각각의 박스들은 content 영역과 선택적인 영역 padding, border, margin 영역으로 둘러싸여 있음

• 위 4영역의 각각의 경계면을 edge라고 바름

⇒ Margin 속성

• margin-top, margin-right, margin-bottom, margin-left 속성

: margin 영역의 위, 아래, 좌, 우의 마진을 의미

• margin 속성

: 위 영역의 값을 한번에 주는 것

⇒ Padding 속성

• padding-top, padding-right, padding-bottom, padding-left 속성

: padding 영역의 위, 아래, 좌, 우의 패딩을 의미

• padding 속성

: 위 영역의 값을 한번에 주는 것

⇒ Border 속성

• Border width 관련 속성 : 테두리 두께를 지정

• Border color 관련 속성 : 테두리 색상을 지정

• Border style 관련 속성 : 테두리 스타일을 지정

• Border shorthand 관련 속성 : 테두리 속성을 간략하게 기술

 

✴︎ 가시성(Visibility)과 위치(Positioning) 지정

• Display 속성

: CSS에서 태그를 화면에 표시할지 여부와 표시한다면 어떻게 표시할지 지정

• Visibility 속성

: 태그를 화면에 표시할지의 여부를 결정

• Position 속성

: 태그의 배치를 지정

• Z-index 속성

: 태그들이 겹쳐졌을 때, 어떤 태그가 앞에 표시되고 뒤에 표시되는지의 태그간 순서를 결정

• Float 속성과 Clear 속성

: Float 속성 → 태그를 유동적으로 배치

: Clear 속성 → Float 속성을 해제

유동적 배치 : 화면의 가로 너비에 따라 배치되는 태그의 수가 달라져서, 결국읜 화면의 크기에 따라 태그들이 유동적으로 배치