내부 요소 스크롤 위치 도달 시 부모 요소 스크롤 방지하기
·
Frontend/Styling
이 글에서는 화면 흔들림을 방지하고, 자연스러운 스크롤 경험을 제공하기 위한 방법을 설명합니다. 웹 페이지를 만들다 보면 종종 컴포넌트 내에 스크롤이 필요한 경우가 있습니다. 컴포넌트 안에서 스크롤을 최대로 내리면 부모 컴포넌트의 스크롤이 함께 움직이는 문제가 발생할 수 있습니다. 이를 방지하기 위해 HTML 및 Body 태그에 `overflow: hidden` 속성을 적용할 수 있지만, 이로 인해 스크롤바가 사라지면서 화면 크기가 변동되어 사용자에게 불편함을 줄 수 있습니다. 이 글에서는 이러한 문제를 해결하기 위한 방법을 소개합니다.  아래 코드는 리액트(React)에서 이 문제를 해결하기 위한 예제입니다. useEffect 훅을 사용하여 조건에 따라 바디의 패딩을 조정하여 화면 흔들림을 방지합니다...
협업하기 위한 CSS 컨벤션
·
Frontend/Styling
문제 정의CSS 협업을 하다 보면 다른 개발자가 작성한 스타일 코드를 보게 됩니다. 하지만, 사람마다 스타일을 정의하는 방식과 순서가 다르기 때문에 해당 스타일을 찾는 데 시간이 소요됩니다. 이는 작은 시간 차이처럼 보이지만, 프로젝트가 커지면 큰 시간 낭비로 이어질 수 있습니다. 따라서 CSS 컨벤션을 정하여 협업하는 개발자들 간의 혼란을 방지하고, 코드의 가독성과 유지 보수성을 향상해야 합니다. CSS 컨벤션CSS는 축약형으로 작성합니다.// Goodpadding: 0 20px;// Badpadding-left: 20px;padding-right: 20px;CSS in JS를 사용할 때는 paddingY: 20px, py: 20px와 같이 축약형을 사용하는 경우가 있습니다. 이렇게 하면 코드가 간결해..
유용한 Sass(SCSS)
·
Frontend/Styling
문법문자보간선택자나 속성은 일반 변수로 처리가 불가능합니다.이를 처리하려면, #{var_name}을 사용하면 코드의 어디든지 변수 값을 넣을 수 있습니다.// SCSS$font-family: "Roboto";@import url("/fonts/#{$font-family}");.header { font-family: #{$font-family};}=== Compile ===// CSS@import url("/fonts/Roboto");.header { font-family: Roboto;} 위 코드는 .header 클래스에 Roboto 폰트를 적용하는 코드입니다. font-family 속성은 일반 변수로 처리할 수 없기 때문에, #{var_name}을 사용하여 변수 값을 넣어줍니다. 가변 인수가변 인수..
Sass(SCSS) 문법
·
Frontend/Styling
🤔 SCSS의 핵심...이라고 생각하는 것3 중첩은 개인적인 기준입니다.저는 SCSS의 핵심은 중첩이라고 생각합니다. 보통 3 중첩 기준으로, MAX 4중첩으로 작성합니다.3중첩을3 중첩을 기준으로 하는 이유는 3 중첩을 지키지 않고 작성하다 보면 코드 길이가 엄청 늘어나고, 컴파일된 CSS에도 엄청나게 많이 중첩된 클래스를 볼 수 있습니다.4 중첩 이상 필요할 경우 아래와 같이 작성합니다.#wrap { .A .B { color: red; }}📄 SCSS 문법이번 글에서는 SCSS를 작성할 때, 기본적으로 많이 사용되는 문법을 위주로 써보겠습니다.UTF-8 설정코드 내에서 한글을 사용하려면 설정해야 합니다.@charset "UTF-8";상위 선택자&을 사용하면 부모 선택자를 참조(치환)할 수..
Sass(SCSS) 시작하기
·
Frontend/Styling
🤔 Sass(SCSS)란?"Sass"는 문서의 구조를 깔끔하고 효율적으로 코드를 작성할 수 있게 해주는 CSS 상위에 있는 메타언어입니다.🔎 Sass / SCSS 차이Sass와 SCSS의 핵심은 같지만 가장 큰 차이점은 {}(중괄호)와 ;(세미콜론)를 쓰고 안 쓰고 차이입니다.이 글에서는 SCSS로 작성될 예정입니다.// Sass#wrap color: red // SCSS#wrap { color: red;} 📝 설치하기SCSS를 설치하는 방법으로는 2가지가 있습니다.SCSS 컴파일 형식nested : 뎁스별로 구분해서 컴파일compact : 요소에 스타일이 속성을 한 줄씩 정렬해서 컴파일expanded : 요소에 모든 스타일을 한 줄에 컴파일compressed : 모든 요소를 공백 없이 컴파일..
끄적끄적 개발자
'Frontend/Styling' 카테고리의 글 목록