[2023 신입부원 기초 스터디] 최종은 #3주차 - CSS 딥-하게 학습하기

float 속성

HTML 요소에서 이미지를 어떻게 텍스트와 함께 배치할 것인가에 대한 속성

none	left	right	inherit	initial
요소를 띄우지 않음	왼쪽에 띄움	오른쪽에 띄움	부모 요소로부터 상속함	기본값으로 설정

 

clear 속성

clear:none;	clear:left;	clear:right;	clear:both;
기본값	왼쯕 취소	오른쪽 취소	좌우 취소

 

position 속성

HTML요소 배치 방법을 지정

static	relative	absolute	fixed	sticky
기본 배치상태	기본 배치상태이지만 top,right,bottom,left와 같은 속성을 자신 기준으로 적용	어려웡.. 다시 공부하겠습니다	움직이더라도 요소가 특정 위치에 고정되어있음	움직이다가 특정 위치에 도착하면 고정

위치 속성

요소를 원하는 위치로 최종적으로 이동시키는 속성 (position , static에는 적용 X)

top

left

bottom

right

 

배경 스타일링

background-color: 배경 색 지정

 

background-image: 배경 이미지 지정

 

background-repeat: 배경 이미지 반복 지정(가로 or 세로)

  - repeat: 가로,세로 반복

  - no-repeat: 반복X

  - repeat-x: 가로 반복

  - repeat-y: 세로 반복

 

background-position: 배경이미지 초기 위치 설정

 

background-attachment: 배경이미지의 고정 위치 설정

  - scroll: 선택한 요소와 같이 움직임(스크롤의 영향 받지 않음)

  - fixed: 안움직임

  - loacl: 선택한 요소와 같이 움직임(스크롤의 영향 받음)

  - initial: 기본값으로 설정

  - inherit: 부모의 속성값을 상속받음

background: 위에 말했던 속성들을 전부 선언

 

background-size: 배경이미지 크기 설정

  - contain: 이미지를 자르거나 왜곡하지 않고 제일 크게 설정

  - cover: 이미지를 자르더라도 빈공간 없이 제일 크게 설정

  - auto: 배경 이미지의 원본 크기 유지

  - <length> : 원본 이미지의 가로/세로 길이 수정

  - <percentage> : 배경을 백분율에 맞는 사이즈로 조절

 

 

그라데이션

liner-gradient(): 선형 그라데이션효과

  - to: 방향 결정

  - deg: 각도 결정

 

radial-gradient(): 타원 그라데이션 효과

 

radial-gradient(circle): 원형 그라데이션 효과

 

가상클래스

선택하고자하는 HTML요소의 상태 명시

 

문법-    선택자:가상클래스이름 {속성: 속성값;}

 

:link	:visited	:active	:hover	:focus	:nth-child
아직 방문안한 요소 나타냄	방문한 적 있는 링크 나타냄	사용자가 활성화한 요소 나타냄	마우스 포인터가 요소 위에 있음 선택됨	포커스 상태로 만듬	형제 사이의 순서에 따라 요소 선택

 

가상 요소

HTML요소의 특정 부분만 선택할 때 사용

 

문법- 선택자::가상요소이름 {속성:속성값;}

 

::first-letter	::first-line	::before	::after	::selection
택스트 첫글자만 선택	텍스트 첫 라인만 선택	특정 요소의 내용 바로 앞에 다른 요소 삽입	특정 요소의 내용 바로 뒤에 다른 요소 삽입	사용자가 선택한 부분만 선택

 

Transform

HTML 요소를 회전, 크기 조절, 기울이기, 이동 효과를 나타낼 때 사용

(transform 속성값으로 특정 함수를 넣어주면 됨)

 

- translate(tx, ty) 
    tx,ty만큼  x축, y축으로 이동
- translateX(tx) 
    tx만큼 x축으로 이동합니다.
    
- translateY(ty) 
   ty만큼 y축으로 이동합니다.
    
- scale(sx, sy) 
    sx,sy만큼 x축과 y축으로 확대·축소합니다.
    
- scaleX(sx) 
     sx만큼 x축으로 확대·축소합니다.
    
- scaleY(sy)
    sy만큼 y축으로 확대·축소합니다.
    
- rotate(각도)
    지정한 각도만큼 회전합니다. (+:시계방향, -:시계반대방향)
    
- rotateX(각도)
    x축을 기준으로 회전

- rotateY(각도)
    y축을 기준으로 회전

- rotateZ(각도)
    z축을 기준으로 회전
    
- skew(ax, ay)
    지정한 각도만큼 x축과 y축으로 왜곡
    
- skewX(ax)
    지정한 각도만큼 x축으로 왜곡
    
- skewY(ax)
    지정한 크기만큼 y축으로 왜곡

 

Transition

속성값이 전환될 때 부드럽게 전환되게 함

 

transition-property: 어떤 속성에 트랜지션 효과를 줄 것인지 지정합니다.

  - transitino-property: <속성1>, <속성2>; 와 같이 지정할 수 있습니다.

  - all : 모든 속성을 지정합니다. (all은 생략 가능합니다.)

  - none : 아무것도 지정하지 않습니다.

 

transition-duration: 트랜지션 효과를 몇 초 동안 실행할 것이지 지정합니다.

 

transition-delay: 지정한 초 만큼 기다렸다가 실행할 때 사용합니다.

 

transition-timing-function: 트랜지션이 시작하면서 끝날때 속도 지정

• linear : 트랜지션의 시작과 끝의 속도가 일정함
• ease-in : 천천히 시작했다가 완료될 때 속도가 증가합니다.
• ease-out : 빨리 시작했다가 완료될 때 속도가 낮아집니다.

transition: 위의 속성을 한꺼번에 표기할 수 있습니다.

 

Animation

CSS 스타일 변화를 부드럽게 해줌

 

@keyframes 으로 애니메이션 생성 가능

 

Animation 속성

animation-duration: 애니메이션이 한바퀴 도는 시간 지정

 

animation-delay: 애니메이션 시작 지정.

animation-iteration-count: 애니메이션 반복 횟수 지정. (infinite=무한반복)

animation-play-state: 애니메이션 정지/시작

animation-timing-function: 상태전환을 시간간격 지정

animation-fill-mode: 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정

animation: 위에 것들 한꺼번에 작성 가능

 

반응형 웹 사이트

여러 디바이스의 해상도에 반응하여 최적의 화면을 보여줌

 

viewport: 웹 브라우저에서 실제로 표시되는 영역(디바이스마다 크기가 다름)

 

메타 뷰포트 태그: 뷰포트에 따라 화면을 다르게 보여줄 때 사용

 

메타 뷰포트 태그 속성

width	height	user-scalable	initial-scale	maximum-scale	minimum-scale
뷰포트 가로	뷰포트 세로	확대/축소 가능한지	초기 화면비율	최대 화면비율	최소 화면비율

*뷰포트 단위*

vw:뷰포트 너비, 100vw=뷰포트 width의 100%

vh:뷰포트 높이, 100vh=뷰포트 height의 100%

vmin: 뷰포트의 너비,높이 중 작은값

vmax: 뷰포트의 너비,높이 중 큰값

 

미디어 쿼리

뷰포트에 따라 특정 css스타일 사용

 

문법: @media [only | not] 미디어 유형 [and 조건] * [and 조건]

 

미디어 유형

all	print	screen	speech
모든장치에 적합	미리보기 화면에 표시중인 문서	화면	음성 합성장치