[2023 신입부원 기초 스터디] 박민규 #3주차 - 기초부터 화악시일히이잉

float 속성 

- none : 기본값으로 요소를 띄우지 않음

- left : 웹페이지의 왼쪽에 띄움                 <---

- right : 웹페이지의 오른쪽에 띄움           <---   이렇게 두개를 가장 많이 씀

- inherit : 부모 요소로부터 상속받음

- initial : 기본값으로 설정함

 

Clear 속성

clear를 통해 float 속성의 영향에서 벗어날 수 있다.

 

Position 속성

position 속성은 HTML요소를 배치하는 방법을 지정함.

- static : 아무것도 하지 않은 기본 상태

- relative : static 위치에서 상대적인 위치를 변경

- absolute : 일반적인 흐름을 따르지 않고, position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다.

       (절대적인 위치 설정)

- fixed : absolute와 마찬가지로 일반적인 흐름을 따르지 않고, 절대적인 위치를 갖는다. 하지만 스크롤을 내려도 그 위치가 고정되어 있다는 차이점이 있다.

- sticky : static과 같이 일반적인 흐름을 따라가다가 스크롤이 임계점에 이르게 되면 fixed처럼 고정된다.

 

위치속성

- top

- bottom

- left

- right

 

관련속성

- z-index : 어느 객체가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정

 

배경 이미지 스타일

- background-color

{ 키워드 값 }

background-color:  red;

{ 16진수 값 } 

background-color: bbff00;

{ RGB 값 }

background-color: rgb(255, 255, 128);

{ 특별 키워드 값 }

background-color: currentcolor;

{ 전역 값 }

background-color: inherit;

- background-image

background-image: url("파일 위치");

background-repeat: no-repeat;  이미지파일이 반복되어서 이어지지않음

                                repeat-x;     이미지파일이 x축 방향으로 반복되어 이어짐

                                repeat-y;     이지미파일이 y축 방향으로 반복되어 이어짐

background-position-x: 이미지파일의 x축 위치를 정함    

                                  y: 이미지파일의 y축 위치를 정함

background-position: (top/bottom) (right/left); 보통은 이렇게 한번에 입력함

- background-attachment

background-attachment: scroll; 선택한 요소와 함께 움직임(내용을 스크롤해도 배경이미지 그대로)

background-attachment: fixed; 움직이지 않음. (스크롤하면 배경이미지가 내려가는 느낌)

background-attachment: local; 선택한 요소와 함께 움직임(내용을 스크롤하면 배경이미지도 함께 스크롤 됨)

background-attachment: initial; 기본값으로 설정

background-attachment: inherit; 부모 요소의 속성값을 가짐

- background-size

background-size: contain; 이미지가 잘리거나 찌그러지지 않는 내에서 가장 큰 사이즈로 설정.

background-size: cover; 이미지가 찌그러지지 않는 내에서(사진 비율이 변화됨) 가장 큰 사이즈로 설정. (가장 많이 사용)

background-size: auto; 배경 이미지의 원본 크기를 유지

 

선형 그라데이션

{Linear}

background: linear-gradient(1색상, 2색상); 1색상이 위, 2색상이 아래로 그라데이션을 이룸

background: linear-gradient(to right, 1색상, 2색상); 1색상이 좌, 2색상이 우로 그라데이션을 이룸

background: linear-gradient(to top, 1색상, 2색상); 1색상이 아래, 2색상이 위로 그라데이션을 이룸

background: linear-gradient(to top right, 1색상, 2색상); 1색상이 좌 아래, 2색상이 우 위로 사선형의 그라데이션을 이룸

background: linear-gradient(45deg, 1색상, 2색상); 1색상과 2색상이 각도가 45도로 그라데이션을 이룸

background: linear-gradient(to right, 1색상 50%, 2색상 70%, 3색상 100%); 각각의 색상의 영역 차지비율을 정할 수 있음

{Radial}

background: radial-gradient(1색상, 2색상); 1색상이 중앙, 2색상이 바깥으로 둥글게 그라데이션을 이룸

background: radial-gradient(1색상, 2색상, 3색상, 4색상); 여러 색상을 적용 가능

background: radial-gradient(circle at 10% 50%,1색상, 2색상); 이미지의 원점이 x축의 10%, y축의 50%로 이동한다. 

 

가상클래스 (html요소가 특정 상태일 때를 명시해서 스타일을 주는 것을 가상클래스 또는 의사클래스라고 한다.)

- a:link  a태그 속 부분을 대상으로 함

- a:visited  a태그 속 방문했던 부분을 대상으로 함

- a:hover  a태그 속 마우스 커서가 올라가 있는 부분을 대상으로 함

- fieldset:hover  마우스 커서가 올라가 있는 fieldset 배경을 대상으로 함

- a:active  a태그 속 클릭을 하고있는 부분을 대상으로 함

 

가상 요소 (html요소의 특정 부분만을 선택할 때 사용)

대표적인 CSS가상 요소

p::first-letter  p태그 속 텍스트의 첫 글자를 대상으로 함

p::first-line  p태그 속 텍스트의 첫 라인을 대상으로 함

p::before  p태그 속 특정 요소 컨텐츠 바로 앞에 다른 요소를 삽입할 때 사용

p:: after  p태그 속 특정 요소 컨텐츠 바로 뒤에 다른 요소를 삽입할 때 사용

p::selection  p태그 속 해당요소에서 사용자가 선택한 부분만을 선택할 때 사용

 

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

ex)

{ x축으로 20px 이동 }

transform: translateX(20px);

{ y축으로 40px 이동 }

transform: translateY(40px);

{ x축으로 20px, y축으로 40px 이동 }

transform: translate(20px, 40px);

transform함수

- translate(tx, ty) : 지정한 크기만큼 x축, y축으로 이동

- translateX(tx) : 지정한 크기만큼 x축으로 이동

- translateY(ty) : 지정한 크기만큼 y축으로 이동

 

- scale(sx, sy) : 지정한 크기만큼 x축과 y축으로 확대/축소 함

- scaleX(sx) : 지정한 크기만큼 x축으로 확대/축소 함

- scaleY(sy) : 지정한 크기만큼 y축으로 확대/축소 함

 

- rotate(각도) : 지정한 각도만큼 회전함( + 시계방향,  - 반시계방향)

- rotateX(각도) : x축을 기준으로 회전함,

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

- rotateZ(각도) : z축을 기준으로 회전함.

 

- skew(ax, ay) : 지정한 각도만큼 x축과 y축으로 왜곡

- skew(ax) : 지정한 각도만큼 x축으로 왜곡

- skew(ay) : 지정한 크기만큼 y축으로 왜곡

 

Transition

전환이라는 뜻으로 CSS에서 속성값이 변할 때 더욱더 부드럽게 전환할 수 있도록 도와주는 역할

- transition-property : 어떤 속성에 트렌지션 효과를 줄 것인지 지정

   - transition-property: <속성1>, <속성2>; 와 같이 지정할 수 있음

- transition-duration : 트렌지션 효과가 진행되는 시간을 지정

- transition-delay : 지정한 초 만큼 기다렸다가 실행

- transition-timing-function : 트렌지션의 효과진행 시작과 끝의 속도를 지정하는 것

  -transition-timing-function: linear;  트렌지션의 시작과 끝의 속도가 일정

  -transition-timing-function: ease-in;  천천히 시작했다가 끝날 때 쯤 빨라짐

  -transition-timing-function: ease-out;  빠르게 시작했다가 끝날 때 쯤 느려짐

 

Animation (CSS 스타일 변화를 부드럽게 해줌, @keyframes으로 애니메이션 사용)

Animation 속성

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

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

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

- animation-play-state : 애니메이션 정지/시작 제어가능

- animation-timing-function : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값을 적용받을지 지정 가능

- animation-fill-mode : 애니메이션의 시작 전이나 끝나고 난 후 어떤값을 적용할 지 지정 가능

- animation : 모든 애니메이션 속성 설정 가능

 

반응형 웹 사이트

 

미디어 쿼리