본문 바로가기

CSS4

position의 속성 및 특징 (실제 사이트 예시) CSS 코드를 작성할 때 자주 사용하는 속성들 중 `position`이라는 속성이 있습니다. position은 문서 상에 요소를 배치하는 방법을 설정할 때 사용하며, 매우 다양한 속성값을 가지고 있습니다. static static은 position 속성의 기본 값으로, 요소를 일반적인 문서의 흐름에 따라 배치합니다. 이 때 일반적인 문서의 흐름이란, 우리가 문서를 읽고 작성할 때의 순서인 왼쪽에서 오른쪽, 위에서 아래쪽으로 쌓이는 것을 의미합니다. position이 static인 상태에서는 아무리 offset 값을 줘도 변화가 일어나지 않고, z-index 값 또한 적용되지 않습니다. relative position이 relative인 상태에서는 static과 자기 자신을 기준으로 top, right, .. 2024. 1. 5.

CSS는 왜 이름이 CSS일까? 기술 면접 공부를 하던 중, 어떤 개발자 분이 남기신 글이 인상 깊었습니다. CSS를 활용하는 법에 대해 알고 있는 것도 중요하지만, CSS가 왜 CSS인지도 알고 있는 개발자였으면 좋겠다는 글이었습니다. 프론트엔드 개발을 하면서 필수적으로 사용하는 기술이 CSS이고, CSS를 정말 많이 다루고 있지만 정작 CSS의 이름이 왜 CSS인지에 대해서는 한 번도 생각해 본 적이 없었기에 찾아서 공부해보았습니다. CSS는 뭘까? CSS는 웹 페이지를 꾸미려고 작성하는 코드이며, 프로그래밍 언어나 마크업 언어가 아닌 Style sheet 언어입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 것인데, 예를 들면 HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍.. 2024. 1. 2.

[CSS] body 윗부분 빈 칸 없애는 법 CSS 작업을 하던 중, 상단 네비게이터 부분의 윗부분이 창 상단과 떨어지는 문제가 있었다. const HeadWrap = styled.div` ... top: 0; ... `; top을 0으로 주면 위에 붙게 할 수 있다. 생각보다 간단한 문제였다. 2022. 10. 1.

[CSS] 클릭 이벤트가 있으면 커서 모양 바꾸기 개인 포트폴리오 사이트를 만든 후 코드 리뷰 과정에서 클릭 이벤트가 있는 부분 위에 마우스가 올라가면 커서 모양이 바뀌면 더 좋을 것 같다는 피드백을 받았다. 아무래도 커서 모양이 그대로 유지되다 보니, 그 부분을 클릭했을 때 외부 링크로 연결된다는 것을 잘 모를 수 있겠다는 생각이 들었다. 리액트로 작업해서 CSS에는 styled-components를 사용했는데, 그냥 CSS에도 적용되는 것인지는 잘 모르겠다. const Menu = styled.p` ... &:hover { cursor: pointer; } `; 위와 같이 추가해주면, 메뉴 스타일을 지정해준 컴포넌트 위에 마우스 호버시 커서 모양이 손가락 모양으로 바뀐다! 2022. 10. 1.

이전 1 다음

티스토리툴바