개발/HTML.CSS (11) 썸네일형 리스트형 [CSS] fixed로 navBar 상단 고정시키기 지난 포스팅에서도 언급했듯이, absolute, fixed는 전후에 있는 요소와 상호작용을 하지 않는다. 아래 예시를 보면 알 수 있듯이 navBar가 독립해버린다. HTML 삽입 미리보기할 수 없는 소스 그래서 다음과 같이 width를 부모 요소와 맞춰줘야 한다. HTML 삽입 미리보기할 수 없는 소스 [CSS] linear-gradient 예제와 함께 알아보자 CSS 의 linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다. 함수의 결과 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 이를 사용할 수 있다. 즉, background-color 또는 color 와 같은 속성에는 사용할 수 없다. 사용법 linear-gradient() 함수 사용법은 다음과 같다. 1 linear-gradient(방향_또는_각도, 색상_그리고_정지점1, 색상_그리고_정지점2, ... 색상_그리고_정지점n); 방향 또는 각도 미리 정의된 키워드로 표현한 그라디언트 진행 방향, 또는 진행 각도를 첫 번째 인자로 전달한다. 이는 선택사항이나, 지정하지 않을 경우 'to bottom'이 기본값으로 적용된.. [CSS] 애니메이션, 트랜지션, 트랜스폼의 차이 뜬금없지만 프론트엔드 개발자이지만 CSS를 잘 다루지 못하는 상태로 취업해서 밑바닥부터 구르고 있다. 통장 잔고를 보면 눈가가 뜨거워진다. 애니메이션, 트랜지션, 트랜스폼의 차이. 매번 단편적으로 보고 넘어가버리니 다시 보면 헷갈려서 정리해 보려고 한다. CSS의 Animation, Transition 및 Transform은 모두 웹 페이지에서 요소를 시각적으로 개선하기 위해 사용되는 CSS 속성이다. 애니메이션 (Animation) CSS3에서 새롭게 추가된 기능으로, 특정 요소에 대해 애니메이션 효과를 부여하는 방법이다. 요소에 복잡한 시각적 변화를 부여하는 데 사용되며, 일반적으로 사용자가 상호작용하지 않아도 자동으로 실행한다. @keyframes 규칙을 사용하여 정의하며, 시작 상태와 끝 상태를 .. [CSS] Position에 대해 알아보자 position은 다섯가지로 분류된다. 1. static 2. relative 3. absolute 4. fixed 5. stickty static position 속성을 지정하지 않았을 때 기본값으로 적용되는 값이다. 요소들은 문서의 일반적인 흐름에 따라 배치된다. top, bottom, left, right 속성을 사용할 수 없다. relative 요소가 '원래 위치에 있을 때'의 상하좌우로 부터 얼마나 떨어지게 할지를 지정할 수 있다. top, bottom, left, right 속성을 사용할 수 있다. absolute 요소의 위치를 상위 요소 중 position 속성이 static이 아닌 가장 가까운 요소를 기준으로 이동시킨다. 만약 상위 요소 중 position 속성이 static이 아닌 요소가.. [CSS] 푸터 하단에 고정시키기 HTML 삽입 미리보기할 수 없는 소스 웹에서 흔히 나오는 방법으로 부모 요소에 position: relative;를 주고 자식 요소에 position: absolute;를 주면 absolute 특성상 부모를 무시하게 되므로 부모요소 내용이 많아질 경우에도 굳건히 자리를 지킨다. 해결방법 1 HTML 삽입 미리보기할 수 없는 소스 작은 화면에서 보면 하단에 잘 붙어있는 것처럼 보이지만, 함정이 있다. 해결방법 2 HTML 삽입 미리보기할 수 없는 소스 위에서 제시한 코드는 푸터가 스크롤을 맨 아래로 내렸을 때에 최하단에 존재하게 하는 코드이다. 모바일 화면을 만들려면 약간의 수정이 필요하다. 푸터를 화면의 하단에 고정시켜야 하기 때문이다. HTML 삽입 미리보기할 수 없는 소스 이런 식으로 wrapper.. CSS transform CSS transform - 엘리먼트를 마음대로 변형하는 속성이다. 위치를 옮길 때 회전시킬때 크기 확대 축소 박스 비틀기 등 CSS transition 기초 참조 : https://www.youtube.com/watch?v=Zp-n49r9TCA 예를 들어 hover하면 색이 변하는 박스를 만든다면 기본 상태 element가 있고 css로 :hover 효과로 다른 색을 지정할 수 있다. 이때 두가지 선택지가 있다. 1. 직접적인 엘리먼트에 transition 넣기 -> hover할때 안할때 모두 자연스럽게 색이 변함 2. hover 이벤트에 transiton 넣기 -> 마우스를 올릴때만 자연스럽게 색이 변함, 뗄 때에는 바로 띡하고 색이 돌아옴 마우스를 올리고 1초뒤에 transition이 일어난다. 마찬가지로 1. transition과 원상복구가 자연스러우려면 직접적 요소에 delay를 주어야함 2. 원상복구는 그냥 냉정하게 처리되려면 이벤트에 delay주기.. CSS fadein fadeout Animation 속성을 이용하여, 사라지는 효과를 가지고자 한다. FadeIn: 서서히 생기는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } @keyframes fadein { /* 효과를 동작시간 동안 0 ~ 1까지 */ from { opacity: 0; } to { opacity: 1; } } @keyframes를 이용하여 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정 from을 시작으로 to로 변화하는 과정을 만들 수 있다. FadeOut: 서서히 사라지는 효과 .box { /* animation : 효과(@keyframes 이름) 동작시간 */ animation: fadein 3s; } .. 이전 1 2 다음
