[2023 신입부원 기초 스터디] 조상혁 3주차 - CSS와 친해지기

float 속성

float 의 사전적 의미는 "뜨다"

HTML 요소에 float이 적용되면 그 요소는 흐름에서 벗어나 둥둥 떠다니듯 배치된다.

자주 사용되는 속성값

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

---

clear 속성

clear는 취소하다는 뜻으로 float: left; 또는 float: right; 값을 취소한다.

속성값

• clear:none; - 기본값
• clear: left; - 왼쪽 취소
• clear: right; - 오른쪽 취소

---

position 속성

HTML 요소를 배치하는 방법을 지정

• static - 요소가 html 문서에서 일반적인 흐름을 따라 배치되게 하며,기본값이다.
• relative - static과 유사하게 일반적인흐름에 따라배치된다. 차이점은 요소가 자신의 static 위치에서 top right left bottom 같은 속성에 의해 상대적으로 배치
• absolute - 요소의 문서가 일반적인 흐름을 따르지 않게 한다. 
• fixed - 요소가 일반적인 흐름에서 제거된다 대신, 스크린의 부포트를 기준으로 한 위치에 배치된다.

배경 이미지 스타일 

• background-color : HTML요소의 배경색을 지정
• background-image: HTML요소의 배경이미지를 하나 또는 여러개 지정
• background- attachment: 배경이미지를 뷰포트 내에서 고정할지 말지를 정하는 속성
• background-size: 요소의 배경이미지의 크기를 설정. 그대로두거나 ,늘리고 줄이거나 공간에 맞출 수 있다.

---

그라데이션

그라데이션이란 두 가지 이상의 색상이 연결되면서 자연스럽게 보여주는 것을 말한말한다.

선형 그라데이션

• linear-gradient() 함수는 두 개 이상의 색상이 직선을따라 점진적으로 변화하는것을 말한다.
• to 키워드를 사용하여 방향을 결정
• deg 키워드를 사용하여 각도값을 지정

원형 그라데이션

• 타원형 - radial-gradient() 함수를 사용하여 타원 그라데이션을 만들 수 있다.
• 정원  - radial-gradient(circle) 함수를 사용하여 정원 그라데이션을 만들 수 있다.

---

가상 클래스

선택하고자 하는 HTML요소의 특별한 상태를 명시할 때 사용

문법 

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

 

대표적 css가상 클래스 

• :link - 아직 방문하지 않은 요소를 나타낸다.
• :active - 사용자가 활성화한 요소를 나타낸다.
• :focus - 양식의 입력칸을 포커스를 받은 요소를 나타낸다.

대표적 css가상 요소

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

---

Transform

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

+ 이해를 돕기위한 추가자료

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

함수

• translate(tx, ty) : 지정한 크기만큼 x축과 y축으로 이동
• translateX(tx) : 지정한 크기만큼 x축으로 이동
• translateY(ty) : 지정한 크기만큼 y축으로 이동
• scale(sx,sy) : 지정한 크기만큼 x축과 y축으로 확대/축소
• scaleX(sx) : 지정한 크기만큼 x축으로 확대/축소
• scale(sy) : 지정한 크기만큼 y축으로 확대/축소
• rotate(각도) : 지정한 각도만큼 회전

Transition

속성값이 변할 때 더욱 더 부드럽게 전환할 수 있도록 돕는다.

transition	모든 transition 속성을 이용한 스타일을 한 줄에 설정할 수 있음.
transition-property	요소에 추가할 전환(transition) 효과를 설정함.
transition-duration	전환(transition) 효과가 지속될 시간을 설정함.
transition-timing-function	전환(transition) 효과의 시간당 속도를 설정함.
transition-delay	전환(transition) 효과가 나타나기 전까지의 지연 시간을 설정함.

+ 표의 출처

코딩교육 티씨피스쿨

---

Animation

CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다.

 

속성

• animation-delay - 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정한다.
• animation-direction - 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.
• animation-duration - 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.
• animation-iteration-count - 애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있다.
• animation-name - 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술한다.
• animation-play-state - 애니메이션을 멈추거나 다시 시작할 수 있다.
• animation-timing-function - 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다.
• animation-fill-mode - 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.

CSS 애니메이션(Animation), 키프레임(keyframes)

---

반응형 웹 사이트

반응형웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말한다.

 

• width: viewport의 가로 크기를 조정한다. 
• height : viewport의 세로 크기를 조정한다.
• initial-scale : 페이지가 처음 로딩될 때 줌 레벨을 조정합니다. 값이 1일때는 CSS 픽셀과 기기종속적인 픽셀 간의 1:1 관계를 형성한다.
• minimum-scale : viewport의 최소 배율값, 기본값은 0.25이다.
• maximum-scale : viewport의 최대 배율값, 기본값은 1.6이다.
• user-scalable : 사용자의 확대/축소 기능을 설정, 기본값은 yes이다.

미디어 쿼리

접속하는 디바이스나 뷰포트에 따라 특정 css스타일을 사용하는 방법이다.

 

미디어 쿼리 문법

• @media 키워드를 사용해 특정 미디어에서 어떤 css를 적용할 것인지 지정함. 이때 그 특정 구간을 중단점(breakpoint)라고도 한다.

미디어 유형

기기명	설명
all	모든장치
print	인쇄 장치
screen	컴퓨터 화면 장치 또는 스마트 기기의 화면
tv	영상과 음성이 동시에 출력되는 장치
projection	프로젝터 장치
handheld	손에 들고다니는 소형 장치
speech	음성 출력 장치
aural	음성 합성 장치(화면을 읽어 소리로 출력해 주는 장치)
embossed	점자 인쇄 장치(화면을 읽어 종이에 점자를 찍어내는 장치)
tty	디스플레이 기능이 제한된 장치
braille	점자 표시 장치