css

Cascading Style Sheet

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

1. css 연결 방법

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

2. css 선택자

• Type : 특정 태그에 스타일을 적용
  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. css 주요 속성들

① 폰트 관련 속성

-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-align: 텍스트 정렬
$\qquad$start(시작점) | end(끝점) | left(왼쪽) | right(오른쪽) | center(중앙) | justify(양쪽) | match-parent(부모요소를 따라)

-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: 단어 사이 간격

② 배경 관련 속성

-background-color: 배경 색상

-background-image: 배경 이미지

-background-repeat: 배경 이미지의 반복 방법

-background-position: 배경 이미지의 위치

-background-attachment: 배경 이미지의 고정 여부

-background-size: 배경 이미지의 크기

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

③ 레이아웃 관련 속성

-width: 너비
-height: 높이

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

* { margin: 0; padding: 0; }

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

-border-style: 테두리 스타일
$\qquad$none | hidden | solid(실선) | dashed(짧은 선) | dotted(점선) | double(이중선) | groove(입체) ⋯

-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

③-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

-justify-content: x축 방향으로 아이템들이 배치되는 방식
$\qquad$flex-start(시작점) | flex-end(끝점) | center(가운데) | space-between(바깥 여백 없고 아이템 간격을 일정하게) | space_aruond(바깥 여백 있고 아이템 간격을 일정하게) | space-evenly(바깥여백과 아이템 사이 간격까지 모두 다 균일하게)

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

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

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

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

③-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(가운데)

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

④ 배치 관련 속성

-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: 요소 쌓는 순서

⑤ margin 병합 현상 -> position으로 문제 극복

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

⑥ 동적인 웹

• 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-timing-function: 효과의 속도 곡선
$\qquad$linear(처음부터 끝까지 일정한 속도) | ease(천천히 시작해서 점점 빨라지다가 천천히 마무리) | ease-in(시작을 느리게) | ease-out(마무리를 느리게) | ease-in-out(느리게 시작하고 느리게 마무리) | cubic-bezier(n,n,n,n)(함수를 직접 지정해서 사용)

-transition-delay: 효과 지연 시간

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

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

• animation: 애니메이션 효과

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

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

-animation-timing-function: 애니메이션의 속도 곡선
$\qquad$linear(처음부터 끝까지 일정한 속도) | ease(천천히 시작해서 점점 빨라지다가 천천히 마무리) | ease-in(시작을 느리게) | ease-out(마무리를 느리게) | ease-in-out(느리게 시작하고 느리게 마무리) | cubic-bezier(n,n,n,n)(함수를 직접 지정해서 사용)

-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- ; }
}

• 가상 선택자 (띄어쓰기 없이 작성)
-:hover: 웹 요소에 마우스를 올렸을 때
-:active: 웹 요소를 활성화했을 때
-:focus: 웹 요소에 초점이 맞춰졌을 때
-:link: 방문하지 않은 링크
-visited: 방문한 링크

⑦ 반응형 웹

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

- 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: 다양한 디지털 기기의 화면 상에 표시되는 영역