[CSS] CSS의 기본 속성
✔️ 시작하기 전
- 개인적으로 공부하며 작성한 것으로 지속적으로 추가하고 수정 할 예정입니다.
- 내용은 TCP School , MDN , 얄코 강좌 를 참고하여 작성하였습니다.
✔️ CSS(Cascading Style Sheets)
CSS는 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다.
✔️ CSS 구문
CSS는 규칙 기반 언어입니다.
웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다.
스타일을 지정할 HTML 요소를 선택한 선택자(selector)로 시작해 중괄호{} 안에 속성과 값 쌍의 형태를 취하는 하나 이상의 선언하여 스타일링합니다.
각 쌍은 선택한 요소의 속성을 지정하고 속성에 부여할 값을 지정합니다.
✔️ CSS를 적용하는 3가지 방법
- 인라인 스타일이 가장 우선으로 적용되며 내부 스타일 시트와 링킹 스타일 시트 중 마지막에 적용된 것이 적용됩니다.
📌 인라인 스타일(inline style)
HTML 태그마다 style 속성으로 CSS 코드를 넣어주는 방식입니다.
여러 요소들에 공통 속성을 재사용하여 부여할 수 없고 HTML 코드와 CSS 코드가 분리되지 않기 때문에
특별한 경우를 제외하고는 사용되지 않습니다.
📌 내부 스타일 시트(internal style sheet)
head 태그 안에 style 태그를 두고 그 안에 CSS 코드를 작성하는 방식입니다.
HTML과 CSS의 전체 코드량이 많지 않고 CSS가 해당 HTML 문서에서만 적용될 경우 유용합니다.
📌 링킹 스타일 시트(linking style sheet)
외부의 CSS 파일을 HTML 문서에 연결하는 것입니다.
HTML과 CSS의 코드가 분리되고 CSS 코드를 여러 HTML 파일에서 공통으로 사용할 수 있으므로
가장 널리 사용되는 방식입니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
✔️ CSS 기본 속성
📌 글꼴
<!-- 단축 속성 -->
font: [style] [weight] [size]/[height] [family];- font-style
- 주로 이탤릭체를 사용하기 위해 사용합니다.
- normal : 텍스트에 어떠한 스타일도 적용하지 않습니다.
- italic : 텍스트를 이탤릭체로 나타냅니다. (기울여서 쓴 서체)
- oblique : 본래 텍스트를 기울여 나타냅니다.
- 폰트 중 italic 이나 oblique 중 하나가 없을 시 서로 상호 교차되어 사용
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
- font-weight
- 텍스트를 얼마나 두껍게 표현할지를 설정합니다.
- lighter, normal, bold, bolder, 100, 200, ..., 900 등으로 두께를 설정할 수 있습니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
- font-size
- 텍스트의 크기를 설정합니다.
- 크기는 절대적 크기(px, pt)와 상대적 크기(%, em)가 있습니다.
- 절대적 크기는 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다.
- 상대적 크기는 둘러싸고 있는 HTML 요소들의 크기나 사용자의 브라우저를 통해 변경됩니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
📌 텍스트
- text-decoration
- 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용합니다.
- underline : 밑줄을 긋습니다.
- line-through : 취소선을 긋습니다.
- overline : 윗줄을 긋습니다.
- underline line-through overline : 밑줄, 취소선, 윗줄을 함께 긋습니다.
- wavy underline red : 물결로 밑줄을 빨간색으로 긋습니다.
- dashed line-through deeppink : 점선으로 취소선을 딥핑크색으로 긋습니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
- text-transform
- 텍스트에 포함된 영문자에 대한 대소문자나 단어의 첫 문자만을 대문자로 설정합니다.
- capitalize : 단어의 첫 문자만을 대문자로 설정합니다.
- uppercase : 영문자를 대문자로 설정합니다.
- lowercase : 영문자를 소문자로 설정합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
- text-shadow
- 텍스트에 간단한 그림자 효과를 설정합니다.
- text-shadow: X좌표 Y좌표 (흐림) 색
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
- text-align, letter-spacing, word-spacing, line-height
- text-align : 텍스트의 수평 방향 정렬을 설정합니다.
- left : 왼쪽 정렬
- right : 오른쪽 정렬
- center : 가운데 정렬
- justify : 꽉 채움
- letter-spacing : 텍스트 내에서 문자 사이의 간격을 설정합니다.
- word-spacing : 텍스트 내에서 단어 사이의 간격을 설정합니다.
- line-height : 텍스트의 줄 간격을 설정합니다.
- text-align : 텍스트의 수평 방향 정렬을 설정합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
- text-indent
- 단락의 첫 줄을 들여쓰기할지 안 할지 설정합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
- text-overflow
- 텍스트가 상자의 너비를 넘어갈 때 어떻게 표시될지를 지정합니다.
- clip 속성은 overflow의 hidden과 같이 넘어간 부분이 가려진채로 표시됩니다.
- elipsis 속성은 끝 부분에 ... 을 표시합니다.
- 사용하기 위해선 overflow 는 hidden 또는 scroll로, white-space는 nowrap으로 지정해야 합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
📌 리스트
- list-style
- list-style-type : 리스트 요소의 마커(marker)를 설정합니다.
- list-style-image : 리스트 요소의 마커로 사용할 이미지를 설정합니다.
- list-style-position : 리스트 요소의 위치를 설정합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
📌 색상
- keyword : 색상마다 부여된 이름으로 지정합니다.
- RGB(A) : 빨강, 초록, 파랑의 광원으로 색을 혼합하는 방식이며 마지막은 알파값으로 투명도를 조절합니다.
- HEX : RGBA를 16진수로 나타낸 것입니다.
- HSL(A) : 색상, 채도, 명도, 알파값을 조합하여 나타냅니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
📌 정렬
- vertical-align
- inline 또는 table-cell box에서의 수직 정렬을 지정합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.
- white-space
- 요소 내의 공백과 줄바꿈들이 처리되는 방식을 지정합니다.
See the Pen Untitled by 김영찬 (Kim YoungChan) (@0chnxxx) on CodePen.