공부 기록일지📚

이전에도 최상단의 태그에(body) width값을 100vw로 주고 하위 태그들에는 100%값을 주는데 자꾸 가로 스크롤이 생겨서 해결했던 적이 있다. 오랜만에 다시 만들어보니 똑같은 이슈를 겪었고 이에 대한 해결 방법에 대해서 간단히 기록해놓고자 한다. 가로 세로 스크롤이 생기는 이유는 해당 요소의 크기가 부모 요소나 뷰포트(viewport)를 벗어나기 때문이다. 1. 전역 CSS 설정 시, 요소들의 box-sizing이 border-box인지 확인한다. 2. overflow: hidden을 설정한다. (가장 간단한 방법이지만 컨텐츠가 잘릴 수 있다.) => 가로 스크롤이니까 특정적으로는 overflow-x: hidden 3. 최상위 태그에 width 가 아니라 max-width나 max-height ..

반응형 모바일 뷰 기준은 아이폰 5로 하자 크롬에서 F12 혹은 ctrl + shift + i 단축키를 누르면 개발자 도구를 열 수 있는데, 우리가 흔히 말하는 반응형 웹뷰를 확인해볼 수 있다. 여러 디바이스크기를 제공하는데 이 중에서 폰 사이즈를 확인할 때, 아이폰5를 기준으로 모바일 뷰를 확인해보는 게 좋은데 그 이유는 모바일 뷰 중에 가장 작은 디바이스 사이즈이기 때문이다. 디바이스가 목록에 없다면 추가해주면 된다. 참고로 아이폰 5의 가로 사이즈는 320px인데 갤럭시 폴드의 경우 260px까지 간다니..확인요망 => min-width가 320px로 잡혀야 한다. 브라우저에서 제공하는 default css를 없애주고 기본 세팅하기 margin이나 padding 혹은 기본 스타일링이 브라우저마다 제..

문제상황classnames 라이브러리를 활용하여 동적인 클래스 명을 부여해서 컴포넌트 마다 다른 폰트 컬러를 적용하려고 하니 css먹지 않았다. 이유를 알 수 없어서 오타가 난건지 확인을 여러번 했고 디버깅도 했는데 원인을 찾을 수가 없었다.(당연하다 CSS는 디버깅이 어렵다.) 컴파일 순서때문인지 혹은 값을 내려주는 컴포넌트에서 변수명을 틀린 것인지 전부 다 확인해봤으나 문제를 찾을 수가 없었다. 🤯원인지금은 해결해서 알게된 사실이지만 개발자 도구에서 내가 classNames함수(classnames 라이브러리 제공 함수)를 통해 부여한 동적인 클래스 값이 해싱되지 않았다면 지금 해당 컴포넌트의 모듈 scss가 아니라 단순 css 클래스명이 부여된 것이라 CSS가 인식이 안된 것 같다. 문제였던 코드//..

CSS 전처리기가 태어난 배경 CSS의 불필요한 선택자의 과용과 연산 기능 한계, 구문의 부재 등의 고질적인 문제를 개선하기 위해 CSS 전처리기가 등작했습니다. 어찌됐든 웹 표준은 CSS만 이해할 수 있기 때문입니다. CSS Preprocessor(전처리기) 란? Sass(SCSS), Less, Stylus 를 들어보셨나요. 위 종류들은 CSS 전(예비)처리기 입니다. CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 CSS로 동작하지만 우리는 CSS의 불편함을 확장 기능으로 상쇄할 수 있습니다. (Sass는 CSS의 확장이라고 생각하면 됩니다.) 어떻게 사용할까? 전처리기로 직접 웹에서 동작시킬 수는 없습니다. 우선 전처리기로 코드를 작성합니다. 전처리기는 CSS문법과 굉장히 유사 선택자의 중첩(n..

해당 포스팅은 맨 요즘 IT의 [역사로 알아보는 CSS가 어려워진 이유]를 기반으로 요약 정리되어 있습니다. 선택자(Selector)와 선언(Declarations) 둘을 합쳐서 CSS Ruleset 이라고 부른다. strong { color: red; text-decoration: underline } CSS Rule이 가지고 있는 고유의 명시도(specificity)에 따라서 우선순위가 다르게 적용을 할 수 있도록 설계되어 있다. 아래는 명시도에 관한 내용이다. https://css-tricks.com/a-specificity-battle/ A Specificity Battle! (and other trickery) | CSS-Tricks The following is a guest adventure..

1. 미디어 쿼리란(media-query)? 뷰포트의 너비에 따라 웹 사이트트의 스타일 시트를 수정할 수 있다. (뷰포트 너비 외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다.) @media screen and (max-width:500px){ //스크린의 viewport 너비가 500px 이하일 경우 //적용시킬 스타일 시트 } 미디어 쿼리 예시 index.html 박스입니다 박스1 박스2 style.css * { box-sizing: border-box; } .box { height: 200px; background: blue; color: white; padding: 30px; } /* 600px이상일 때에는 파란색 이하일 때에는 빨간색 */ @media screen and (max-w..

Position 포지션(position)과 top / left / bottom / right 4가지 속성은 한 세트로 생각하면 좋다. top / left / bottom / right 4속성은 해당 방향 기준으로 요소의 좌표값을 변경한다. static(기본값) - 요소를 문서상 원래 있어야 하는 위치에 배치한다(기본 HTML요소 위치 상태라고 생각하면 됨). -> top/ left/ bottom/ right 적용 불가 relative - 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다. -> 4가지 속성 적용 가능, 방향 속성을 지정하지 않고 position: relative 만 해주면 static의 위치와 같다.(차이점은 원래 위치를 기준으로 새 위치를 4가지 속성을 통해 지정해줄 수 있다는 ..

단위 1-1. 절대 단위 🚕 px(픽셀) :대표적으로 픽셀(pixel, 화소)가 있으며 px로 단위로 작성하고 화면을 구성하는 가장 기본이 되는 단위이다. 모든 디지털화면은 수많은 작은 네모들로 구성되어 있으며 이 네모 한 칸을 1px로 부른다. 🚕 pt(포인트) :인쇄를 위한 단위, 1pt = 1/72 inch (인쇄를 위한 단위이기 때문에 웹에서는 잘 사용하지 않음) 1-2. 상대 단위(외부 요인에 영향을 받아서 상대적으로 값을 받는 것) 전제: 상대 단위는 기준이 되는 요소가 있어야 한다. 🚕 %(퍼센트) :부모 요소의 해당 속성 값에 비례하여 지정한 비율의 값을 적용한다. 🚕 em :스타일 지정 요소의 font-size 속성 값에 비례하여 결정한다. 퍼센트와 다른 점은 스타일이 지정된 당사자 요소..