본문 바로가기
728x90

Frontend/Css3

[TIL] CSS - display : fixed 서론 프로젝트 D-3... 웬만한 기능들은 이제 구현이 되고있는 중입니다... 가장 쉬운 메인페이지 구현이면서 오늘에서야 완성을 해버렸....습니다...😭 사실... 100%완성은 아니구... NavBar 반응형까지 완성했으니까 다했다고 해주세요... 문제점 NavBar를 밑으로 내리고 싶은데 무슨 짓을 해도 안내려갑니다... display : flex를 써도 안되고... margin을 주자니 컴퓨터 해상도에 따라 크기가 다르기에 문제가 됩니다... 해결법 ( display : fixed ) 의외로 정말 간단했습니다... css에 display : fixed; 한 후 bottom : 0;을 주면 viewport bottom에 고정이 되게 됩니다... 마치며... 2022. 11. 22.
[TIL] CSS - Transition(애니메이션) Transition이란? CSS 트랜지션은 시작 지점과 끝 지점을 서로 연결을 해 주는데 중간 과정을 부드럽게 만들어 주는 역할을 합니다. CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다. CSS, JavaScript, Class 활용의 차이 공용 HTML 웹 퍼블리싱 왕초보 시작반 웹개발 플러스 1) CSS .button { padding: .. 2022. 11. 14.
[CSS] Media Query @media @media를 사용 기본적인 문법 @media (조건) { 스타일 } 조건에 맞춰 스타일 변경 max-width : 조건 이하까지 스타일준 css로 변경 min-width : 조건 이상까지 스타일준 css로 변경 See the Pen Untitled by chaaaniii (@chaaaniii) on CodePen. 2022. 9. 13.
728x90