혼자 적어보는 노트

display: inline속성의 특징을 다시 알아보면서 의문점이 생겼다. inline요소는 text요소이기 때문에 width, height를 따로 지정할 수 없다, 그리고, 좌우 margin은 적용이 되지만 상하 margin은 적용이 안된다. 그럼 inline 요소는 padding top, bottom이 적용되는건가? 프로젝트 할 때 span에 padding적용이 잘 안되서 block으로 바꿨었던 기억도 있었고, 상하 margin, padding이 전부 안된다고 했던 글들이 봐왔어서 그 텍스트만 기억하고 안된다고 생각하고 있었었다. 그런데 갑자기 상하 padding이 된다는 글을 보게 되었고 확인하기로 했다. inline inline + padding 이렇게만 보면 padding-top만 적용되지 않는..

부모에 padding값이 있을 경우 자식요소도 부모의 padding 안에 갇혀버리게 되어서 레이아웃을 구현할 때 wrapper를 나누어서 구현한 적이 많다. 위와 같이 레이아웃 전체를 padding으로 감싸고 어떠한 한 자식만 padding 바깥으로 늘리고 싶을 때 가 있는데 그럴 땐 아래와 같이 처리하면 된다. parent { width: 500px; height: 500px; padding: 0 20px; } child { margin-left: -20px; margin-right: -20px } * 바로 직속 자식요소에서만 반영이 된다.

1. not 선택자 활용 ul li:not(:first-of-type){ margin-left: 20px; } 2. 형제 선택자 활용 ul li + li { padding-left: 10px; }

SASS 내장 모듈 Sass 공식문서 @use 를 사용하여 로드할 수 있는 built-in 기능이다. sass의 모듈 시스템이 도입되기 전에는 해당 기능들을 전역적으로 사용할 수 있었고 지금 또한 하위 호환성을 위해 계속 사용할 수 있지만 새롭게 시스템이 도입한 만큼 전역으로 사용하던 방식과 @use로 사용하는 규칙 또한 알아둬야 할 듯하다. Sass의 내장 모듈들은 아래와 같다. sass:color sass:list sass:map sass:string sass:math sass:meta sass:selector sass: color color.adjust($color, $lightness) 해당 컬러를 해당 값 만큼 명도를 줄이거나 높일 수 있다. /* darken($color, $amount); *..

SCSS는 브라우저에서 동작할 수 없기 때문에 표준 CSS로 변환을 해주어야 한다. 보통 Create React App 환경에서 SCSS를 사용했기 때문에 간단하게 설치 후 사용했지만 그냥 HTML파일만 달랑 있는 상태에서 하려니 난감했다. 물론 전역으로 node-sass 설치 후 명령어를 통해 컴파일 하는 방법도 있었지만 저장 시 바로 빌드되고 새로고침 없이 브라우저 창에서 확인하기를 원했다. webpack 설정은 조금 복잡하지만 Parcel은 간단하게 설정 할 수 있다. 1. Parcel 전역 설치 npm install -g parcel-bundler 2. Sass 설치 npm install --save-dev node-sass 3. Sass 파일 연결 4. 실행 parcel index.html

Grid 말은 들어봤지만 직접 사용해본 적은 한 번도 없었어서 강의를 들으면서 정리를 해보기로 했다 📑 Grid의 용어 Grid Container Grid의 전체 영역 Grid Item Grid 컨테이너의 자식 요소들 Grid Track Grid의 행 또는 열 Grid cell Grid의 한 칸을 의미, 가상의 틀 Grid Line Cell을 구분하는 선 Grid Number Grid 라인의 각 번호 Grid gap Cell 사이의 간격 Grid Container Grid를 적용하는 Grid의 전체 영역으로 display: grid; 를 사용하여 설정 가능. * inline-grid 컨테이너의 특성을 inline요소로 변경 수평으로 쌓이는 구조로 변경 가능. 📌 container에서 지정할 수 있는 속성..

간단한 애니메이션들은 css의 transition을 사용하게 되는데 border에 애니메이션을 넣을 경우 예상처럼 되지 않는다. input { display: block; width: 100%; padding: 1em; margin-top: 1em; border-bottom: 1px solid #ddd; transition: all ease 0.5s; } input:focus { border-bottom: 2px solid #3844bd; } 위처럼 같이 transition을 사용하여 border-bottom: 1px solid #ddd 에서 border-bottom: 2px solid #3844bd 로 변경 할 경우 자연스럽게 border가 2px로 되면서 색상이 변경되는 것을 예상하였지만 컬러는 자연..

youtube의 영상 링크를 가지고 와서 사용할 때 height의 비율과 맞게 width 100%로 지정하는 법 /* HTML */ /* CSS */ .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }