▶ color 색상
▷ currentColor
부모에 color 값이 있다면 상속으로 처리된다.
div {color: sandybrown;}
p {border: 1px solid currentColor;}▷ 명도 대비
- 저시력 시각 장애(시력 저하, 색약, 색맹)를 위해 폰트 색상과 배경의 명도 대비가 중요.
- 크롬에서는 개발자 도구를 열어 확인이 가능하다. 대비율은 최소한 4.5:1이 되어야 함.
▷ 시스템 기본 폰트 외, 웹 폰트 적용방법
import보다는 link 사용 권장. (import는 순간적으로 폰트가 보이지 않을 수 있다)
@font-face 속성은 브라우저 사용자의 컴퓨터에 특정 폰트가 설치되어 있지 않아도 폰트를 사용하도록 할 수 있다.
@font-face {
font-family: "Pretendard-Regular";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
body{
font-family: Pretendard-Regular, "Times New Roman", Dotum, "돋움", sans-serif;
}- 한글일 경우에는 폰트명을 "" 로 묶는다. 영문이지만 공백이 포함될 경우 "" 를 사용한다.
- 폰트의 한글 이름, 영문 이름을 제대로 인식하지 못하는 경우를 대비해 한글과 영문 이름을 같이 작성해주는 것이 좋다.
- generic(sans-serif, serif와 같은 기폰 폰트)는 "" 를 사용하지 않는다.
- 한글은 한글 폰트로, 영문은 영문 폰트로 나오길 원한다면 영문폰트명-한글폰트명 순서로 적어준다.
▷ font-size
- px: 절대단위
- em: 현재 요소의 부모 요소에 설정된 글꼴 크기 상대 단위
- rem: 루트요소(html)에 설정된 글꼴 크기 상대 단위
▷ font-weight
- normal: 기본
- bold: 굵게
- lighter: 현재 요소의 굵기를 부모 요소 굵기 보다 한 단계 가볍게
- bolder: 현재 요소의 굵기를 부모 요소 굵기 보다 한 단계 두껍게
▷ text-transform
- none: 변형방지
- uppercase: 모든 텍스트를 대문자로
- lowercase: 모든 텍스트를 소문자로
- capitalize: 모든 단어의 첫글자를 대문자로
▷ text-shadow
offset-x | offset-y | blur-radius | color
text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;▷ text-align
- left : 왼쪽 정렬
- right : 오른쪽 정렬
- center : 중앙 정렬
- justify : 양쪽정렬 (불규칙한 여백으로 가독성이 좋지 않음)
▷ vertical-align
- 텍스트를 기준으로 세로정렬을 설정.
- 인라인, 인라인 블록 및 테이블 셀 요소에만 적용된다.
▷ word-break
텍스트가 콘텐츠 박스 밖으로 넘칠 경우 줄바꿈 여부를 지정한다.
- break-all : 어떠한 두 문자 사이에서도 줄바꿈이 발생한다. (한중일 텍스트는 normal과 결과가 같다)
- keep-all : 단어 기준으로 줄바꿈한다. (한중일 텍스트에만 적용. 영어 텍스트는 normal과 결과가 같다)
▷ text-overflow
- 텍스트가 넘칠경우 말줄임 처리를 위해 사용한다.
- ellipsis: 말줄임
.ellipsis{
white-space:nowrap; /* 공백을 어떻게 처리할지 정의. nowrap은 줄바꿈 하지 않고 박스를 벗어나 표시된다. */
overflow:hidden; /* 넘친 문자를 hidden 처리한다. */
text-overflow:ellipsis;
}
.multi-ellipsis{
overflow:hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}▶ CSS 선택자(가상 클래스)
가상 클래스는 요소 자체를 선택하고, 가상 요소는 선택한 요소에 자식을 생성한다.
▷ :first-child
형제 요소 그룹 중 첫 번째 요소
▷ :last-child
형제 요소 그룹 중 마지막 요소
body의 직계 자손의 경우 :first-child 선택자는 사용가능하지만, :last-child 선택자는 적용되지 않는다.
▷ :nth-child
형제 사이에서 유형에 관계없이 순서에 따라 요소를 선택한다.
/* 2번째 li */
li:nth-child(2) {
color: lime;
}
/* 홀수번째 li */
li:nth-child(odd) {
color: lime;
}
/* 짝수번째 li */
li:nth-child(even) {
color: lime;
}
/* 2n+1번째 li */
li:nth-child(2n+1) {
color: lime;
}▷ :nth-of-type
형제 그룹 안에서 특정 유형만을 선택해 카운트한다.
▷ :only-of-type
동일 유형의 형제가 없는, 형제 요소 중 유일하게 사용된 태그
▷ :not
부정 선택자
/* li 중 첫번째가 아닌 li */
li:not(:first-child){
margin-top:20px;
}▶ CSS 선택자(**가상 요소) ::
▷ ::after, ::before
- 선택한 요소에 자식을 생성한다.
- 빈태그, img, br, input에는 적용할 수 없다.
▷ ::placeholder
- 자리표시자. input, textarea 요소에 정보를 제공한다.
- 접근성 문제로 placeholder를 사용하면 안 된다는 이야기도 있다.
▶ CSS 선택자(우선순위)
- 후자우선의 원칙:
동일한 선택자에 동일한 속성이 사용되면 뒤에 적힌 속성을 따른다.
- 구체성의 원칙:
어떤 선택자가 더 구체적인지, 가중치에 의해 결정된다.
(inline 스타일 속성 > id # > class ., 가상 클래스, 속성선택자 > type(tag), 가상 요소 선택자)
- 중요성의 원칙:
!important 선언은 CSS의 어떤 선언보다도 우선시된다. 하지만 이는 CSS의 자연스러운 상속을 깨트려 오류/버그 발생 시 수정이 어려우므로 사용을 지양하도록 하자.
▶ 목록 태그
▷ ol(ordered list) : 순차적 목록
- 순서가 중요한 목록에 적용한다. (ex. 레시피, 브레드크럼)
- reversed: 순서 역전
- start: 항목을 셀때 시작할 수, 아라비아 숫자만 가능.
▷ ul(unordered list) : 비순차적 목록
- 순서가 중요하지 않는 목록에 적용한다.
▷ li
- 단독 사용 불가. ol, ul의 자식요소로만 사용할 수 있다.
▷ dl(definition list)
- 값이 변화할 수 있는 정보에는 사용하지 않는다. 사전적인 내용을 구현할 때 주로 사용된다.
- dt(용어 - dl 요소 안에 위치해야 함. 단독 사용 불가.)
- dd(용어설명 - dl 요소 안에 위치해야 함. 단독 사용 불가.)
<dl>
<dt>WEB<dt>
<dt>WWW<dt>
<dt>W3<dt>
<dt>World Wide Web<dt>
<dd>인터넷에 연결된 컴퓨터를 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간<dd>
</dl>▶ block과 inline 요소
▷ block (너비-높이-마진-패딩-보더)
- 언제나 새로운 줄에서 시작, 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지한다.
- 블록요소는 인라인 요소 안에 중첩 될 수 없지만, 인라인 요소는 블록 요소 안에 중첩 될 수 있다.
- width, height 크기 지정 가능. padding, border, margin 속성 사용 가능.
- div, p, li, nav, footer 등이 있다.
▷ inline (너비-높이-마진상하값 적용 X)
- 항상 블록 레벨 요소 내에 포함된다.
- 새로운 줄을 만들지 않는다. 컨텐츠의 흐름을 끊지 않으며, 자신의 컨텐츠 크기만큼 할당된 공간만 차지한다.
- width, height 크기 지정 불가. padding, border, marigin 속성을 사용할 수 있지만, 상하 maring 속성은 사용할 수 없다.
- a, em, strong 등이 있다.
▶ CSS Box Model
- padding: 요소 주변 영역을 감싼다.
- margin: 테두리 밖의 영역을 감싼다.
- CSS box model은 블록박스에 적용된다. 인라인 박스는 박스 모델에 정의된 일부 동작만 사용한다.
- inline 요소는 width, height, 상하 margin 값이 적용되지 않는다.
▷ 마진병합 현상(Margin Collapsing)
- 요소와 요소의 사이에 마진 탑(margin-top) 혹은 마진 바텀(margin-bottom)의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상.
- 또는, 부모 요소와 자식 요소가 존재할 때, 자식 요소의 마진 탑 혹은 마진 바텀 값이 부모의 높이에 영향을 미치지 않는 현상.
▷ 마진병합 현상 해결방법
- 부모 요소에 'overflow' 속성 값을 적용.
- 부모 요소에 'display: inline-block' 값을 적용.
- 부모 요소에 'border' 값을 적용.
- 부모 요소에 'display:flow-root;을 사용. (IE 지원 불가)
- 마진병합 현상을 반드시 해결할 필요 없이, 이것 때문임을 알고 작업을 진행해도 된다.
▷ box-sizing
- content-box :기본값. width, height에 border, padding 포함하지 않음.
- border-box: width, height에 border, padding 포함.
→ width = 콘텐츠 너비 + border + padding
▷ overflow
- 콘텐츠가 박스를 넘칠 경우 어떻게 처리할지를 지정한다.
- visible: 기본값. 박스를 넘는 컨텐츠를 자르지 않는다.
- hidden: 요소의 크기만큼 맞추기 위해 잘라낸다. 스크롤바를 제공하지 않는다.
- scroll: 요소의 크기만큼 잘라내고 스크롤을 제공한다.
- auto: 콘텐츠가 넘칠 경우 자동으로 스크롤바를 노출한다.
▷ background
- background-attachment : 백그라운드의 스크롤 여부를 결정.
→ fixed: 뷰포트에 고정.
→ local: 내용을 스크롤하면 배경 이미지도 함께 스크롤 됨.
→ scroll: 요소에 스크롤이 존재해도 배경은 함께 스크롤 되지 않음.
- background-clip: 요소 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지 지정.
→ 배경을 텍스트에 적용할 수도 있다.
- background-origin : 배경 위치 시작점을 결정.
- background-repeat : 배경 이미지를 어떻게 반복할 것인지 설정.
- background-size: 배경 이미지 크기 설정.
- 개별 속성은 단축 속성 뒤에 작성되어야 한다.
→ background은 단축 속성이다.
→ background-clip과 같은 개별 속성을 별도로 지정한다면 background 속성 뒤에 작성해야한다.
div{
background: skyblue url(img/bg.jpg) no-repeat 50% 50% / center;
background-clip: padding-box;
}
/* 잘못 작성됨
후자 우선의 원칙에 따라 단축속성인 background 속성만 적용됩니다. */
div{
background-clip: padding-box;
background: skyblue url(img/bg.jpg) no-repeat 50% 50% / center;
}▷ box-shadow
- 그림자 효과 추가
- offset-x offset-y blur-radius spread-radius color
생각 더하기
+ 성능최적화에 관심이 있다면 @font-face 사용 규칙을 알아봐도 좋다.
+ 마우스 위치에 따라 폰트 쉐도우가 달라지는 애니메이션 효과를 줄 수도 있다.
+ word-spacing 사용해서 넓은 간격-좁은 간격으로 사악 모이면 멋있다!! 😉
+ 유지보수를 용이하게 하기 위한 방법을 늘 생각하자.
+ 알고 있던 것들이 변경되거나 사라질 수 있다. 변경사항들을 늘 숙지하자.
