내가 보려고 정리하는 CSS 요약

kim unknown·2022년 4월 5일

JavaScript

목록 보기

2/24

CSS

Cascading Style Sheet

선택자 {
  속성: 속성값;
}

1. css 연결 방법

① Inline StyleSheet - html 요소에 직접 style 작성
② Internal StyleSheet - html 문서의 head 영역에 style 작성
③ External StyleSheet - 외부 스타일 시트에 따로 작성 후 연결

2. css 선택자

Tag : 특정 태그에 스타일을 적용
ex) p { color: red; }
Class : 클래스에 스타일을 적용
ex) .class { color: red; }
ID : 아이디에 스타일을 적용
ex) #id { color: red; }

3. css 상속 Cascading

위에서 아래로 흐른다는 의미로 어떤 스타일이 적용될지를 결정하는 것을 의미

작성된 순서에 따라 가장 나중에 작성된 스타일이 우선순위가 높다.
선택자가 명확하게 명시될수록 우선순위가 높다.
inline style > id > class> type 순으로 우선순위가 높다.

부모 자식 형제 관계
<div>
  <h1>Hello World</h1>
  <p>Hello World</p>
</div>
div와 h1, p: 부모 자식 관계
h1과 p: 형제 관계

4. 폰트 관련 속성

-font-family: 글꼴 (브라우저 마다 지원되지 않는 글꼴도 있기 때문에 여러개 지정 해주는 것이 좋음)

-font-size : 글자 크기

-font-weight: 글자 굵기
$\qquad$ normal | bold | bolder | lighter

-font-variant: 작은 대문자
$\qquad$ normal | small-caps

-font-style: 글자 기울기
$\qquad$ normal | italic | oblique

* font로 한꺼번에 지정 가능 ex) font: 12px italic bolder;

-color: 글자 색상

-text-decoration: 텍스트 밑줄, 취소선 제거
$\qquad$ none | underline(밑줄) | overline(글자 위에 선) | line-through(취소선)

-text-shadow: 텍스트 그림자
$\qquad$ none | <가로거리> <세로거리> <번짐정도> <색상>

-text-transform: 텍스트 대소문자 변환
$\qquad$ none | capitalize(첫 글자를 대문자로) | uppercase(모든 글자를 대문자로) | lowercase(모든 글자를 소문자로) | full-width(모든 문자를 전각문자로)

-text-justify: 정렬시 공백 조절
$\qquad$ auto | none | inter-word(단어 사이의 공백 조절) | distribute(글자 사이의 공백을 일정하게 조절)

-text-indent: 텍스트 들여쓰기

-text-overflow: 넘치는 텍스트에 대한 처리
$\qquad$ clip(자름) | ellipsis(말 줄임표(⋯) 표시)

-white-space: 공백 처리
$\qquad$ normal(여러 개의 공백을 하나로 표시)
$\qquad$ nowrap(여러 개의 공백을 하나로 표시, 줄바꿈 X)
$\qquad$ pre(여러 개의 공백을 그대로 표시, 줄바꿈 X)
$\qquad$ pre-line(여러 개의 공백을 하나로 표시, 줄바꿈O)
$\qquad$ pre-wrap(여러 개의 공백을 그대로 표시, 줄바꿈O)

-direction: 텍스트 작성 방향
$\qquad$ ltr(왼쪽->오른쪽) | rtl(오른쪽->왼쪽)

-line-height: 줄 간격

-letter-spacing: 낱 글자 사이 간격

-word-spacing: 단어 사이 간격

5. 배경 관련 속성

-background-color: 배경 색상

-background-image: 배경 이미지
$\qquad$ url('파일 경로') *작은 따옴표 대신 큰 따옴표도 사용 가능하며 생략도 가능

-background-repeat: 배경 이미지의 반복 방법
$\qquad$ repeat(화면에 가득찰 때까지 가로와 세로로 반복)
$\qquad$ repeat-x(화면 너비와 같아질 때까지 가로로 반복)
$\qquad$ repeat-y(화면 높이와 같아질 때까지 세로로 반복)
$\qquad$ no-repeat(한 번만 표시하고 반복X)

-background-attachment: 배경 이미지의 고정 여부
$\qquad$ scroll(함께 스크롤됨) | fixed(고정)

-background-size: 배경 이미지의 크기
$\qquad$ auto(원래 크기만큼) | contain(요소 안에 이미지가 다 들어오도록) | cover(요소를 이미지가 다 덮도록) | 백분율 | 크기 값

-background-clip: 배경 적용 범위
$\qquad$ border-box(테두리까지 적용) | padding-box(테두리를 뺀 패딩까지 적용) | content-box(내용 부분에만 적용)

-background-origin: 배경 이미지 배치할 기준
$\qquad$ border-box(테두리까지 적용) | padding-box(테두리를 뺀 패딩까지 적용) | content-box(내용 부분에만 적용)

* background로 한 줄로 작성 가능 ex) background: green url() center;

그라데이션 효과

선형 그라데이션 : linear-gradient( <각도> to <방향>, color-stop, ...);

원형 그라데이션 : radial-gradient( <최종 모양> <크기> at <위치>, color-stop, ...);

6. 레이아웃 관련 속성

-width: 너비
-height: 높이

-margin: 콘텐츠의 테두리 기준 바깥쪽 여백
-padding: 콘텐츠의 테두리 기준 안쪽 여백
* 기본적으로 브라우저에 margin과 padding이 적용되어 있기 때문에 0으로 초기화해주는 것이 편리하다.

* { margin: 0; padding: 0; }

margin 병합 현상 -> position으로 문제 극복
－ 형제지간의 마진 병합
형제 지간의 요소가 공통의 공간을 공유한다면 마진이 큰 값으로 병합되어 나타난다.
－ 부모 자식간의 마진 병합
부모 자식간의 요소 중 자식에게 margin-top을 주면 부모에게도 영향을 끼쳐 부모도 함께 이동하게 된다.

-display: 요소의 성격 변환
$\qquad$ none | contents | block | inline | inline-block ⋯

-border-width: 테두리 두께
$\qquad$ border-(top | right | bottom | left)-width

-border-color: 테두리 색상
$\qquad$ border-(top | right | bottom | left)-color

*border-(top|right|bottom|left)로 한 줄로 작성 가능
$\qquad$ ex) border: solid 1px black;

-border-radius: 테두리 둥글게
$\qquad$ border-(top-left | top-right | bottom-left | bottom-right)-radius

-border-shadow: 테두리 그림자
$\qquad$ none | <그림자 값> = <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset

6-1 Flex 🔗참조

-display: flex;: flex 컨테이너에 flex 적용
$\qquad$ flex | inline-flex

-flex-direction: 아이템들이 배치되는 방향
$\qquad$ row(x축) | row-reverse(x축 역순) | column(y축) | column-reverse(y축 역순)

-flex-wrap: 아이템 줄바꿈 방식
$\qquad$ nowrap(줄바꿈X) | wrap(줄바꿈O) | wrap-reverse(줄바꿈O, 역순으로 배치)

-flex-flow: flex-direction과 flex-wrap을 한꺼번에 지정
$\qquad$ ex) flex-flow: row wrap

-align-items: y축 방향으로 아이템들이 배치되는 방식
$\qquad$ stretch (끝까지 늘림) | flex-start(시작점) flex-end(끝점) | center(가운데) | baseline(텍스트 베이스라인 기준)

* 요소를 화면의 정가운데로 배치하기

display: flex;
align-items: center; /*수직적으로*/
justify-content: center; /*수평적으로*/

📑 이 외에 속성들은 제목 옆에 링크 참조

6-2 Grid🔗참조

-display: grid;: grid 컨테이너에 grid 적용
$\qquad$ grid | inline-grid

-grid-template-rows or grid-template-columns: 그리드 형태(크기) 정의. rows는 x축 배치, column은 y축 배치
$\qquad$ ex) grid-template-columns: 1fr 1fr 1fr;
$\qquad$ -> 그리드의 각 열을 1:1:1 비율로 지정 (*fr은 fraction의 의미)

-justify-items: x축 방향으로 아이템들이 배치되는 방식
$\qquad$ stretch (끝까지 늘림) | flex-start(시작점) flex-end(끝점) | center(가운데)

-align-items: y축 방향으로 아이템들이 배치되는 방식
$\qquad$ stretch (끝까지 늘림) | flex-start(시작점) flex-end(끝점) | center(가운데)

📑 이 외에 속성들은 제목 옆에 링크 참조

7. 배치 관련 속성

-box-sizing: 박스 너비 기준
$\qquad$ content box(width값을 콘텐츠 영역 너비 값으로) | border-box(width값을 패딩과 테두리 포함으로)

-float: 배치 방향
$\qquad$ none | left(왼쪽) | right(오른쪽)

-clear: float속성 해제
$\qquad$ none | left(왼쪽) | right(오른쪽) | both(둘다)
$\qquad$ * left, right 각각 지정해도 되지만 무조건 기본 상태로 돌리고 싶다면 clear: both;를 쓰는 것이 더 간편하다.

-position: 배치 방법
$\qquad$ static(문서의 흐름대로)
$\qquad$ relative(기준점을 이전 요소로 하여 자연스럽게 연결해 배치, 위치 지정 가능)
$\qquad$ absolute(기준점을 이전 relative 요소로 하여 원하는 위치 지정, relative 없으면 뷰포트가 기준점)
$\qquad$ fixed(기준점을 브라우저창으로 하여 위치 지정)

-visibility: 요소의 표시 유무
$\qquad$ visible(표시) | hidden(감춤, 공간 차지O) | collaspe(겹치도록)

-z-index: 요소 쌓는 순서

8. 선택자

• 연결 선택자 - 선택자와 선택자를 연결해 적용 대상을 한정시킴
－ 하위 선택자(공백) 상위요소 하위요소 : 모든 하위 요소에 적용
－ 자식 선택자(>) 부모요소>자식요소 : 자식 요소에만 적용
－ 형제 선택자(~) 요소1~요소2 : 모든 형제 요소에 적용
－ 인접 형제 선택자(+) 요소1+요소2 : 가장 가까운 형제 요소에만 적용

• 속성 선택자 - 태그 안에서 사용하는 속성 값에 따라 스타일 지정
-[속성] : 지정한 속성에 스타일 적용
-[속성 = 값] : 특정 값을 갖는 속성에 스타일 적용
-[속성 ~= 값] : 여러 값 중에 특정 값이 포함된 속성에 스타일 적용
-[속성 |= 값] : 특정 값이 포함된 속성에 스타일 적용
-[속성 ^= 값] : 특정 값으로 시작하는 속성에 스타일 적용
-[속성 $= 값] : 특정 값으로 끝나는 속성에 스타일 적용
-[속성 *= 값] : 값의 일부가 일치하는 속성에 스타일 적용

• 가상 선택자

① 사용자 동작에 반응하는 가상 선택자
-:hover : 웹 요소에 마우스를 올렸을 때
-:active : 웹 요소를 활성화했을 때
-:focus : 웹 요소에 초점이 맞춰졌을 때
-:link : 방문하지 않은 링크
-:visited : 방문한 링크

② UI 요소 상태에 따른 가상 선택자
-:enabled : 해당 요소가 사용 가능한 상태일 때
-:disabled : 해당 요소가 사용 불가능한 상태일 때
-:checked : 라디오나 체크박스에서 해당 항목을 선택했을 때

③ 구조 가상 선택자
-:root : 문서 전체에 적용

-:nth-child(n) : 앞에서부터 n번째 자식 요소에 적용
-:nth-last-child(n) : 끝에서부터 n번째 자식 요소에 적용

-:nth-of-type(n) : 앞에서부터 n번째 요소에 적용
-:nth-last-of-type(n) : 뒤에서부터 n번째 요소에 적용

-:first-child : 첫 번째 자식 요소
-:last-child : 마지막 자식 요소

-:first-of-type : 첫 번째 형제 요소
-:last-of-type : 마지막 형제 요소

-:only-child : 부모 안의 자식 요소가 유일하게 하나일 때
-:only-of-type : 해당 요소가 유일한 요소일 때

④ 그 외 가상 선택자
-:target : 앵커 목적지
-:not : 특정 요소가 아닐 때

⑤ 가상 요소
-::first-line : 지정한 요소의 첫 번째 줄
-::first-letter : 지정한 요소의 첫 번째 글자
-::before : 지정한 요소의 내용 앞부분
-::after : 지정한 요소의 내용 뒷부분
* 가상 요소는 가상 선택자와 구분하기 위해 클론을 두 개(::) 붙인다.

9. 동적인 웹

① transform: 회전, 이동 등 웹 요소 변형

-rotate(): 평면적 회전
$\qquad$ 각도의 단위는 deg

-scale(): 크기를 비율로 키움 (기준점은, 기존 박스의 정가운데)
$\qquad$ scale(X축, Y축) | scaleX() | scaleY()
$\qquad$ scale(3,5)은 width를 3배, height를 5배 확대하란 의미. (줄일 때는 소수점으로 표기)

-skew(): 입체적으로 각도를 왜곡
$\qquad$ skew(X축, Y축) | skewX() | skewY()

-translate(): 위치 변경(원래 요소가 있던 위치를 기준으로)
$\qquad$ translate(X축, Y축) | translateX() | translateY()

*rotate, skew, translate은 음수를 넣을 수 있다.

* transform을 여러개 작성하게 되면 이전에 작성된 건 모두 무시되고 가장 나중에 작성한 transform 속성만 적용되는 것을 알 수 있습니다.

② transition: 웹 요소의 스타일 속성 변형

-transition-property: 효과를 적용하고자 하는 대상(css 속성)
$\qquad$ all(요소의 모든 속성) | none
$\qquad$ *transition-property를 생략하는 경우 all과 동일하게 모든 속성이 트랜지션 대상으로 지정된다.

-transition-duration 효과 실행 시간

-transition-delay: 효과 지연 시간

* transition으로 한 줄로 작성할 수 있다. ex) transition: width 2s linear 1s;

* transition 작성 순서는 상관 없지만, duration 과 delay의 순서는 유의해야 한다. 먼저 작성 되는 것이 duration이고 나중에 오는 것이 delay이다. 즉, 숫자가 하나인 경우는 무조건 duration인 것이다.

③ animation: 애니메이션 효과

-animation-name: @keyframes와 연결하기 위해 임의로 지정해주는 애니메이션 이름

-animation-duration: 애니메이션 실행 시간

-animation-delay: 애니메이션 지연 시간

-animation-iteration-count: 애니메이션 재생 횟수 (from에서 to로 갈 때 하나씩 counting)
$\qquad$ infinite(무한 반복)

-animation-direction: 애니메이션 진행 방향
(alternate(시작과 끝 번갈아 반복) | normal(시작->끝) | reverse(역순))

* animation으로 한 줄로 작성할 수 있다. transition과 마찬가지로 작성 순서는 상관 없지만, duration 과 delay의 순서는 유의해야 한다. 먼저 작성 되는 것이 duration이고 나중에 오는 것이 delay이다.

-keyframes: 애니메이션 설정

@keyframes animation-name {
	from { }
    to { }
}

④ prefix 접두사 : 다른 버전의 브라우저에서도 실행될 수 있게끔 작성해줘야 한다.
$\qquad$ -webkit- (크롬, 사파리)
$\qquad$ -moz- (파이어 폭스)
$\qquad$ -ms- (익스플로러 9.0)
$\qquad$ -o- (오페라)

<!--prefix 작성시 keyframes 앞에만 쓰는 것이 아니라
from과 to에도 모두 작성해 주어야 적용된다.-->

@-webkit- keyframes animation-name {
	from {-webkit- ; }
	to {-webkit- ; }
}

10. 반응형 웹

반응형 웹: 사용자의 접속 환경에 맞추어 사이트 레이아웃을 바꾸어 보여주는 웹 디자인

- html
<meta name="viewport" content="width=device-width, initial-scale=1">

- css
@media all[미디어유형] and (min-width:320px) and (max-width: 768px) {
	적용할 css 스타일
}

미디어 쿼리: 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문
• width=device-width: viewport의 가로폭
• initial-scale=1.0: 비율은 항상 1
viewport: 다양한 디지털 기기의 화면 상에 표시되는 영역