본문 바로가기

전체 글46

[CSS] overflow 카드 UI를 하다보니 넘치는 텍스트를 말줄임으로 감싸거나 인기 상품의 경우 좌우로 넘어가는 스크롤을 만드는 등 곳곳에서 overflow의 역할이 있다는것을 알게 되었다. 이번 블로그 글에선 overflow의 속성값들과 관련 css 속성을 같이 살펴보려고 한다. 🤔 overflow overflow 속성이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너 높이 (height 또는 max-height)를 설정하거나, white-space를 nowrap으로 설정해야 합니다. * white-space 는 아래 관련 속성으로 더 자세히 살펴보겠습니다. visible overflow에 속성을 별도로 명시해주지 않을때 적용되는 기본 속성값입니다. visible은 다른 속성값들과는 다르게 주어진 공간보다 컨텐츠가 더 큰 경.. 2023. 3. 9.
[CSS]선택자 결합자, 가상(의사) 클래스, 가상(의사) 요소 이번 블로그 글은 선택자에 관한 내용을 정리해 보려한다. 지극히 내가 보기 위한 글이므로 기본선택자(클래스, 타입, 아이디, 전체) 를 제외한 그 외에 것들을 적어내려가보겠다 결합자 자손 선택자 ( ) 자손선택자는 내 밑의 모든 후손을 전역 선택할때 쓰는 선택자이다. 사용법은 조상과 자손 사이에 공백을 두면서 사용하면 된다. 자손 선택자는 바로 하위에 있는 자손을 선택하지 않아도 된다. 자식손자 자식손자 자식 선택자 ( > ) 자식선택자는 내 바로 밑의 자식을 선택할 때 쓰는 선택자이다. 자손선택자와는 다르게 바로 밑의 자식만 선택할 수 있으며 자식 이후 후손은 선택하지 않는다. 자식손자 자식손자 ✅ 자손과 자식 선택자의 가장 큰 차이점은 전역으로 선택할 수 있는지의 여부이다. 인접 형제 선택자 ( + .. 2023. 3. 5.
[HTML/CSS] 단위 공부 CSS를 접하다 보면 크기를 지정하는 단위를 많이 사용하게된다. 웹디자인을 할당시 주로 px(필셀) 단위와 폰트 크기를 결정하는 pt(포인트)를 주로 사용했는데 이런 단위는 '절대 길이 단위'로 인쇄할때 주로 이용되는 단위라고 한다. 다양한 디바이스가 존재하고 pc, 모바일, 태블릿 등 반응형 사이트에서 절대 길이 단위는 사용을 권장하지 않는다고 하는데.. 개발할땐 어떤 단위를 주로 사용해야 하는걸까? 🤔 절대 길이 단위 절대 길이 단위에는 cm, mm, in, pc, pt, px 등 다양한 단위가 있지만 주로 사용하는 px 만 살펴보겠습니다. px은 디바이스 화면에서 이미지를 표현하는 가장 작은 단위 입니다. 또한 고정된 값이라 직관적으로 쉽게 사용할 수 있다는 장점이 있습니다. 단, 개발시 px 사용.. 2023. 3. 4.
Git오류 - 현재 브랜치의 끝이 리모트 브랜치보다 뒤에 있으므로 업데이트가 거부되었습니다. 어제 기초 Git / GitHub를 진행하다가 변경된 파일을 커밋하려고 git push를 했더니 "현재 브랜치의 끝이 리모트 브랜치보다 뒤에 있으므로 업데이트가 거부되었습니다" 오류가 떴다. 구글링 등으로 찾아보니 앞으로도 이런 오류가 잦을수도 있다는 글들을 많이 보게 됐고 후에도 찾아볼 수 있도록 기록을 남겨두려고 한다! 오류 발생 원인 💻 (추측..) 오류 발생 원인은 정확한건 아니나 어제 GitHub 을 공부할겸 테스트로 git clone으로 다른 repository를 같은 폴더에 업로드 한 뒤 지웠었는데 그걸로 인해 .git에 있는 커밋 내역들이 GitHub에 원래 있던 것과 과정이 꼬이지 않았나 생각한다.. push를 하기 전에 pull을 했을때도 병합 관련 오류가 뜨다가 강제로 명령어를 입력해.. 2023. 3. 1.