728x90 > 프로그래밍 언어/CSS29 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. VW단위를 사용해 보았습니다. CSS VW단위를 사용해 보았습니다. (youtube.com)줄이면서 같이 줄어드는거= 일반 rem 보다 쓸만하다. 이미지 같은건 % 넣으면 줄어들지만텍스트는 그렇지 않음. 텍스트까지 같이 줄어들게 하려면 vw 로 제작하기. rem 으로 작업하기. vw 로 제작하면이미지도 커지고 텍스트도 커짐. vw 공식: 현재 해상도 ( 기준 해상도 ) 1920 을 기준으로 작업을 할 것. ( 그때 그때 달라짐 ) 100vw 는 사용자 기기의 가로크기 만큼.with 의 100%와 같은 의미이렇게 계산. 나누기 1920 도 해야함. 반응형할 때미디어쿼리 자체가 필요 없게 된다. vw 를 사용하게 되면그래서 주석처리함.단점: 특정 구간에서 너무 작아보이고,특정 구간에서 너무 커보인다. 그래서 그 때는 따로 미디어 쿼.. 2024. 6. 15. 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky 입문자를 위한 CSS 기초 강의 #12 position 2편, fixed sticky (youtube.com) fixed예제포지션 fixed 부여 나머지 속성도 부여해줌.왼쪽과 위쪽에서 50px 떨어져 있는 것 확인 가능.stickysticky 적용sticky 는 일반적인 문서 흐름에 따라 배치함.저 위치가 자기 자리인 것.스크롤 되는 상위 요소에 대해서 오프셋을 적용근데 적용 안한 것처럼 보여짐.- 스크롤 이동이 이뤄질 때 그 속성을 발휘. 세부사항 top 수정문서 배치에는 정상적으로 위치해있는 걸 확인 가능스크롤 이동이 되다가 박스가 위에 붙어짐.top:0그리고 스크롤 내려도 고정이 됨.다시 스크롤 내리지말고 올라가게되면원래 문서 흐름대로 그 위치로 다시 되돌아감. 속성을 바꿔봄.bottom : 0스.. 2024. 5. 13. CSS 변수 사용법 5가지 중 1편 - root CSS3 - 104 [ css variables ] CSS 변수 사용법 5가지 중 1편 - 기본사용법 (youtube.com)기본 사용법동일 색깔동일 radius아이콘 색상 겹침 많음변수 안쓴 상태변수 써주기최상위에 변수 생성하기루트 선택자 사용파란색 = primary color = 변수 명색 지정해당 색상 필요한 곳에 변수명 사용한꺼번에 색 바꾸기 가능radius 도 지정변수명 만드는 규칙반드시 하이픈 2개로 시작ie 에서 먹통- 어차피 지원종료 2024. 5. 9. 이전 1 2 3 4 5 다음 728x90
