본문 바로가기
728x90

분류 전체보기530

[CSS] transition 속성 종류 Transition 사용법 속성 값이 변할 때 부드럽게 전환할 수 있도록 도와주는 것transition 속성은 요소가 새 스타일로 바뀌는 속도, 시간 및 방법을 제어 transition-property: 어떤 속성을 애니메이션할 것인지를 지정합니다.transition-duration: 애니메이션이 걸리는 시간을 설정합니다.transition-timing-function: 애니메이션 속도를 제어하는 함수입니다. 애니메이션이 진행되는 동안의 속도 변화를 정의합니다.transition-delay: 애니메이션이 시작되기 전의 지연 시간을 설정합니다. 1. transition-property .box { transition-property: background-color, width;}transition-pro.. 2024. 6. 30.
css : keyframes 남들과 다른 웹사이트 만들기 첫번째 웹사이트에 애니메이션 효과를 어떻게 줄까? | css : keyframes 남들과 다른 웹사이트 만들기 첫번째 (youtube.com) 전체를 의미하는 섹션 하나 추가해주기.우선 전체 섹션에다가 색깔(이미지) 입혀줌백그라운드 이미지의 url 을 들고오게끔 함. 그냥 이미지와 달리background 이미지는안에 내용이 있어야 보여진다. 인위적으로 높이를 줘서 섹션이 보이도록 하기 그러면 배경화면 이미지가 보이게 된다.근데 틈이 있어서 살짝 거슬림= body 태그의 기본 스타일 때문.- 이걸 지워주면 된다.이미지 하나만으로 스크롤이 안되기 때문에 body 자체 사이즈를 늘려줌.배경화면 이미지를 가만히 있게 만들고 싶은 경우,fixed 스타일을 뒤에다가 주면 된다.= 이미지 고정시키기. - 스크롤 안 따라감... 2024. 6. 30.
[CSS] Transform&Transition 2탄 CSS 강의 Ep11_2 - Transform&Transition 2탄 | Transition | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요? (youtube.com)transition에 대해 살펴보기전환이라는 의미. 가로 세로 200px인 div 태그마우스가 hover 됐을 때 가로세로 200px 을 가로세로 400px 로 변경하고 싶은 경우, transition을 사용하면 스무스하게 변형이 가능해진다.사용하는 방법 - transition 속성 이용하기transition-property= 속성 설정 transition이 실행될 때 타이밍 나타내기  단축 속성 사용하기transition 실습하기 box1에 마우스를 올렸을 때 사이즈를 200px 로 하기.transition을 적용할 경우bo.. 2024. 6. 29.
[CSS] Transform&Transition 1탄 CSS 강의 Ep11_1 - Transform&Transition 1탄 | Transform | 웹 개발 입문 | 함께 웹 개발에 입문해 보는건 어떨까요? (youtube.com)Tansformtransform 사용 방법X 축으로 div 태그 20px 이동. 특수한 함수를 통해서 다양한 효과 나타낼 수 있음.다양한 효과 skew 함수 = 지정한 각도만큼 왜곡.실습 예시기본 세팅.- 박스 지정스타일링.translate 실습X 축으로 20px 이동한 거 확인 가능.좌측으로 이동하고 싶은 경우 음수 - 를 붙여서 적용시켜주면 됨.이렇게 넣어주면 한 꺼번에 X 좌표, Y 좌표 이동을 할 수 있다.scale 실습scale 안에는 숫자를 넣어주면 됨.2를 넣어줬을 경우,가로가 2 배가 된다.한 50% 줄이고 싶은 .. 2024. 6. 29.
[CSS] img 에 display: block 을 쓰는 이유 이미지의 위치가 이상할 때 display:block 적용또는 이미지 하단에 여백이 생길 때 사용 이미지 태그 ()는 기본적으로 인라인 요소처럼 동작display: block;을 사용하면 이미지를 블록 요소로 변환하여 이러한 여백을 제거할 수 있다.= 블록 요소는 자신만의 줄을 차지하므로, 이러한 여백이 제거.display: block;을 추가하면 여백이 사라지는 이유는 다음과 같습니다:인라인 요소의 기본 특성 때문에 여백이 발생합니다.display: block;을 사용하면 이미지가 블록 요소로 변환되어, 상하 여백이 제거됩니다.결과적으로 이미지가 상단에 정확히 맞게 배치됩니다.reset.css기본설정/* CSS - 기본 설정 */* { margin: 0; padding: 0; box-sizing: .. 2024. 6. 28.
[CSS] transform의 사용 transform transform 속성은 요소를 2D 또는 3D 공간에서 변형하는 데 사용됨.transform 기능은 다음과 같습니다translate(): 요소를 이동시킵니다.rotate(): 요소를 회전시킵니다.scale(): 요소의 크기를 조절합니다.skew(): 요소를 기울입니다.matrix(): 위의 변형을 결합하여 변형합니다.사용 예시 transform: translateY(-50%);transform: translateY(-50%);는 요소를 수직으로 가운데 정렬하는 데 사용됨. 이를 위해 position: absolute; 또는 position: fixed;를 함께 사용하여 기준 위치를 설정한 후,top: 50%;와 함께 사용된다. 요소가 부모 요소의 높이의 50% 지점에 위치한 후,자기 .. 2024. 6. 27.
728x90

티스토리툴바