치춘짱베리굿나이스

scroll-snap 웹앱 등지에서 스크롤을 넘기다 보면 특정 컴포넌트에서 자석같이 멈추는 느낌의 스크롤을 볼 수 있다 위의 이미지에서도 중간즈음까지 스크롤을 넘기면 자동으로 컴포넌트의 왼쪽에 맞춰서 착 달라붙는 것을 볼 수 있다 임의로 자석 스크롤, 쫀쫀 스크롤이라고 부르고 있었는데 CSS에서의 정식 명칭은 scroll-snap이었다 (이하 위와 같은 동작을 ‘스냅’ 이라고 부르도록 하겠다) 이 모션을 위한 총 3개의 스크롤 관련 CSS 속성이 존재하는데, 하나는 부모 컨테이너에 적용하고, 두 개는 스크롤이 스냅되길 원하는 자식 박스에 적용하면 된다 세 개의 속성들 scroll-snap-type (부모) scroll-snap-type: [ x | y | block | inline | both] [ ma..

두 태그를 묶은 이유는 내가 헷갈려서 white-space 공백 문자를 어떻게 처리할지에 대한 속성이다 '안녕하세요. 이것은 치춘 블로그 (blog.chichoon.com) 입니다.\n만나서 반갑습니다. 이것은 white-space 처리용 예문입니다.\n이것은 white-space 처리용 예문입니다.' 예문은 다음과 같다 normal white-space: normal; 연속으로 나타나는 공백 (여러 개의 공백) 을 하나로 합친다 개행 문자도 다른 공백 문자와 동일하게 처리한다 줄이 너무 길어 넘칠 경우, 자동으로 줄바꿈한다 nowrap white-space: nowrap; 연속으로 나타나는 공백을 하나로 합친다 줄 바꿈은 에서만 이루어진다 자동 줄바꿈이 이루어지지 않는다 pre white-space: ..

헐 https://stackoverflow.com/questions/72148525/tailwindcss-3-classes-doesnt-override-previous-classes 위와 같은 경우에 px-0과 px-3은 같은 priority를 갖기 때문에 px-3이 px-0을 덮어씌우지 않는다 당연히 클래스명은 오른쪽에 있는 것이 왼쪽에 있는 것을 덮어씌우는 줄 알았는데! 전혀 아니었다 디자인 시스템에서 테일윈드를 쓰면서 클래스명을 덮어씌워야 하는 경우가 종종 생기는데, 당연히 우측에 배치된 클래스명이 좌측의 클래스명을 덮어씌울 줄 알았지만 형제 관계의 클래스는 서로 우선순위가 동일하기 때문에 스타일시트 상의 순서에만 영향을 받는다고 한다 이것 때문에 팀원이랑 씨름을 했는데 위와 같은 사실을 알게 되고..

Semantic하게~ 개요 Semantic? 사전적으로는 ‘의미론적인, 의미의’ 라는 뜻이다 그렇다면 Semantic HTML 이라는 건 의미론적 HTML 이라는 뜻이 되겠다 단어만 보면 괜히 어렵고 뭔 말인지 모르겠고 그렇다 의미론적 HTML? 이런 페이지를 HTML로 한번 구성해 보자 페이지 제목 로그아웃 소제목 본문 본문 본문 리스트1 리스트2 리스트3 copyright by chichoon 박스는 div로, 문자열은 span으로 처리하다 보면 위와 같은 문서가 나올 것이다 완전 div 투성이다! 물론 div로 모든 코드를 구성할 수는 있지만, 내용물을 보기 전까진 각각이 무슨 역할을 하는지 알기도 힘들다 글자가 들어가는 곳도 전부 span으로 처리해 놓았다? 제목, 소제목, 본문 전부 span이다..

HTML과 XML 비교하기 익숙한 HTML과 조금 생소한 (사실 안드로이드 할 때 조금 했었던…) XML을 비교하며 각각의 특성을 알아볼라구 한다 HTML 하이? 이것은 테스트이다 작은 프론트엔드 개발자들아 Hyper Text Markup Language 가장 최신 버전은 HTML5이다 데이터의 표현에 주 목적을 두고 있다 웹 페이지 및 웹 응용 프로그램의 구조를 손쉽게 정의하기 위한 마크업 언어이다 어느 데이터가 어느 위치에 들어갈지를 정의했다고 생각하면 쉽다 페이지를 표현하기 위해 사전 정의된 태그 세트가 있고, 각 태그별로 의미도 이미 정의되어 있다 (정적) 따라서 이미 정의된 태그 내에서만 사용해야 한다 브라우저들은 이 태그들을 읽어 해독하고, 이에 맞춰서 페이지를 표현한다 간단한 작성 오류 (태..

::before, ::after 가상 선택자는 실제 html에선 존재하지 않는 속성으로, CSS에서 임의로 생성시켜준다 그 중에서도 ::before과 ::after은 현재 요소의 내용 앞, 뒤에 CSS에 의해 생성되는 자식 요소이며, content 속성과 함께 사용한다 ::before h1::before { content: "10살에 곰을 잡은 "; color: blue; } 토끼공듀 분명 h1의 내용은 "토끼공듀" 밖에 없었는데 앞에 내용이 추가되었다 이처럼 ::before 선택자는 특정 요소의 내용 앞에 추가적인 내용을 더해준다 ::after h1::after { content: "Lv.9999"; // 텍스트에 linear gradient 적용 코드 } 토끼공듀 지금보니까 원본은 2000레벨이고 닉..

CSS 선택자 asdasd 1 // 스타일이 적용됨 2 // 스타일이 적용됨 3 // 스타일이 적용됨 4 // 스타일이 적용됨 asdasd 5 // 스타일이 적용됨 6 // 스타일이 적용됨 7 // 스타일이 적용됨 asdasd aaa 아무런 선택자도 사용하지 않았을 때의 모습 예시이다 자식 선택자 > body > div { background-color: colors.$BLACK; } asdasd 1 // 스타일이 적용됨 2 // 스타일이 적용됨 3 // 스타일이 적용됨 4 // 스타일이 적용됨 asdasd 5 // 스타일이 적용됨 6 // 스타일이 적용됨 7 // 스타일이 적용됨 asdasd aaa > 기호로 이어진 두 선택자가 서로 부모자식 관계여야 함 첫 번째로 명시된 선택자의 자식 요소 중 두 번..

미디어 쿼리 미디어 쿼리란? 현재 브라우저 또는 장치 환경이 프로그래머가 정의한 규칙에 부합할 때 특정 css를 적용하도록 해주는 구문 특히 반응형 웹을 만들고자 할 때 화면 크기에 따라 서로 다른 css 스타일을 적용하기 위해 많이 사용한다 미디어 쿼리 기본 @media media-type and (media-feature-rule) { /* CSS rules go here */ } 구성 요소 @media 미디어 쿼리의 시작 부분 media-type 미디어 유형 all, print, screen, speech 네 가지 중 하나를 지정할 수 있다 all: 모든 장치에 적용 (기본값) print: 인쇄 결과물 및 출력 미리보기 화면에 적용 screen: 화면에 적용 speech: 음성합성장치에 적용 논리합..