기록하며 성장하기

매번 익숙한 position: absolute;만 사용하다가 가끔 fixed를 사용할일이 생기면 생각없이 사용하는것 같아서 마음에 걸렸다. 다시 개념정리를 정리해보자! 📌 position position은 요소의 위치를 정해줄 수 있는 속성이다. static을 제외한 나머지 type들은 사용시 z-index 레벨이 생성된다. 📌 position : static position의 default type. 태그 순서대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. 📌 position : relative static과 동일한 위치로 보이지만 z-index가 생성되어 floating된 상태. top, left, right, bottom 옵션을 주면 위치가 변화하지만, 다른 요소에 영향을 주지 않는다. (원래 있던 ..

CSS에서 말줄임 처리를 하는 두 가지 방법. 아래 코드는 mixin으로 만들어서 사용한 예시. 상황에 맞게 사용할 것. 📌 한 줄로 보이는 텍스트를 말줄임표 처리할때는 [ truncate ] @mixin truncate() { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 📌 여러 줄로 보이는 텍스트를 말줄임표 처리할때는 [ line-clamp ] @mixin line-clamp($line) { display: -webkit-box; -webkit-line-clamp: $line; -webkit-box-orient: vertical; overflow: hidden; } 자꾸 쓰다보면 익숙해질테니 불안해하지말고 기록하자!🔥

생소했던 내용이라 강의를 두 번 듣고, 여러번 머릿속으로 복기한 다음 글로도 정리해본다. 👀 반응형에서 이미지 종횡 비율 맞추기 (1:1 비율 이미지 만들기) 1. % 와 px의 개념은 다르다. 2. width의 100%는 명확하지만, height의 100%는 부모에 명확한 px값이 없다면 명확하지 않아진다. 3. 반응형 제작 시 width는 100%를 주면 디바이스에 따라 px 사이즈가 변화하지만, 세로는 안된다. 4. padding 과 margin 의 % 기준은 width 를 따른다. 5. 따라서 반응형에서 정사각형 이미지를 만들기 위해 padding을 사용한다. .img-parent { width: 100%; height: 0; padding-bottom: 100%; img { display: bl..

가볍게 생각하고 넘겼다가 쓸 때마다 헷갈렸던 개념들은 주제별로 찾아보고 풀어서 다시 정리해두기. 강의를 들으면서 block과 inline-block의 구분, display : none;과 visibillity : hidden;의 구분이 헷갈려서 정리해본다. Q. inline-block은 왜 써야할까? 그냥 block으로 만들면 안되나? A. display 기본적인 속성을 잘 구분해보자 display : block; div, p, h, li 태그 등이 기본적으로 block 속성을 가지고 있다. 각 요소마다 한 줄을 모두 차지한다. 크기, 여백과 관련한 속성을 모두 가질 수 있다. display : inline; span, strong, a 태그 등이 기본적으로 inline 속성을 가지고 있다. 각 태그 내..