Dev/Style13 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. styled-components와 emotion에 대한 고찰 현재 근무 중인 곳에서 스타일 관련 라이브러리로 emotion을 사용하고 있다. (근데 또 styled-components도 일부 사용하고 있다.) 하지만 나는 이곳에 들어가기 전까지는 styled-components만 주로 사용했었기 때문에, 두 라이브러리의 차이점이 궁금했다. 왜냐하면 코드 상 크게 다른 점이 보이지 않았기 때문이었다. 동료 분께 질문했을 때 돌아온 답은 "emotion이 좀 더 가벼워서요~" 였었다. 그렇지만 다른 회사들 채용 공고 페이지에 적혀 있는 것을 보면, styled-component와 emotion을 각각 균등하게 사용하고 있는 것을 볼 수 있었다. 그래서 이 둘이 도대체 뭐가 다른 건지에 대해 알아보았다. 스타일 기능 및 문법 우선 전반적인 스타일 기능은 크게 다르지 않.. 2023. 8. 13. [HTML] input 자동완성 끄기 (autocomplete = 'off') input field에 자꾸 자동완성 창이 생기고 아무리 시크릿창으로 띄워도 없어지지 않았다. 사실 난 그냥 음~ 하고 넘어갔는데, 팀원 분이 없애달라고.. 하셔서... 찾아보았다. 생각보다 방법은 간단하다. 그냥 input 태그 안에 autocomplete을 off로 꺼주면 된다. 쏘 씸플. HTML attribute: autocomplete - HTML: HyperText Markup Language | MDN The HTML autocomplete attribute lets web developers specify what if any permission the user agent has to provide automated assistance in filling out form field valu.. 2023. 2. 1. 이전 1 2 3 4 다음
