CSS

프로젝트 초반에는 Tailwind CSS 사용에 익숙하지 않아 클래스가 과도하게 길어지고, 팀원마다 spacing 단위가 제각각이어서 UI의 일관성이 흔들리는 문제가 있었다. 특히 mt-[10px]처럼 임의의 px 단위가 섞이기 시작하며 가독성이 떨어지고 유지보수도 어려워지는 상황이 발생했었다. 이러한 문제를 해결하기 위해 팀에서 Tailwind CSS의 기본 원칙을 다시 정리하고 공통 규칙을 도입했으며, 아래는 Tailwind의 핵심 정리와 함께, 실제 프로젝트에서 팀이 합의한 spacing 규칙을 기록한 내용이다. ✍️🌿 🌟 Tailwind CSS 주요 개념 정리🔤 1) 타이포그래피(Typography)Tailwind는 rem 기반 스케일을 제공하여 일관된 텍스트 표현이 가능하다.test-xs..

CASCADING 이란?"폭포, 위에서 아래로 쏟아지는" 이라는 뜻을 가진 단어이다. 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS규칙을 순서에 따라 합쳐서 적용하는 걸 말한다. 한국어로는 "종속"이라고 번역하기도 한다.그리고 이 cascading은 CSS에서 가장 중요한 스타일 적용 규칙이기도 하다.CSS는 스타일을 적용할 규칙을 세우기 위해 CASCADING 규칙을 채택했다.CASCADING 은 다음과 같은 두가지의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다.- 스타일 우선순위- 스타일 상속우선 스타일 우선순위에 대해 먼저 알아보자.1. 스타일 우선순위스타일 요소는 각각 우선순위를 가지고 있는데, 이 우선순위가 가장 높은 스타일이 적용되게 된다.이것을 "스타일 우선순위..

display 속성 ( block, inline, inline-block) display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다. 각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다.block block 특징  - 항상 줄바꿈이 발생합니다. - 가로폭(width)는 화면 전체를 차지합니다. - width, height, margin, padding 속성을 지정할 수 있습니다. - block요소 안에는 inline 요소를 포함할 수 있습니다. - 대표적인 block요소 -> , , ,  inline inline 특징 - 줄바꿈 없이 다른 요소들과 한 줄에 배치될 수 있습니다.- width, height를 지정할 수 없습니다. - inline 요소는 content의 너비만큼 가..

브라우저의 렌더링 원리 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(webkit)이나 게코(Gecko)등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML,CSS,Javascript로 렌더링할 때 CRP라는 프로세스를 사용하며 다음 단계들로 이루어진다. 1. HTML를 파싱 후 , DOM 트리를 구축한다. 2. CSS를 파싱 후 , CSSOM 트리를 구축한다. 3. javascript를 실행한다. * 주의할 점 ! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단 된다. 4. DOM과 CSSOM을 조합해 렌더 트리를 구축한다. * 주의할 점 ! display: none 속성과 같이 화면에서 보이지도 않고, 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다. 5. 뷰포트 기반으로 ..

index.html 코드 YouTube (eng) MY RECORDS 좋아하는 LP 소개, 자주 가는 레코드샵, 나의 음악 취향 조회수 15만회 2년전 #LP #레코드샵 #musicismylife 4.7천 공유 저장 Report KYURIN 규린 구독자 11.5만명 구독 UpNext 2021 KYEJEOL LIVE of BIG Naughty KYEJEOL LIVE 조회수 15만회 [LENIVERSE] EP.18 LE CAFÉ 2편 LE SSERAFIM 조회수 27만회 [playlist] 빈티지 러브 (Vintage Love) 리플레이LEEPLAY 조회수 9.8만회 style.css 코드 :root{ /* Color */ --white-color: #fff; --black-color: #140a00; --..

UpNext 화면 구성 전 코드 /* UpNext */ .UpNext { padding: 0 var(--padding); } .UpNext ul{ padding: 0 var(--padding); } .UpNext > .title { font-size: var(--font-medium); color: var(--grey-dark-color); margin-bottom: calc(var(--padding) / 2); } .UpNext .item { display: flex; padding: 10px; margin-top: var(--padding); } .UpNext .item .img { flex: 1 1 35%; } .UpNext .item .img img{ width: 100%; } .UpNext .i..

channel 화면 구성 전 코드 .info .channel { display: flex; justify-content:flex-start; border-top: 1px solid var(--grey-light-color); border-bottom: 1px solid var(--grey-light-color); } .info .channel .metadata { display: flex; align-items: center; } .info .channel .metadata img { width: var(--avatar-size); height: var(--avatar-size); border-radius: 50%; } .info .channel .metadata .info { display: flex;..

actions 화면 구성 전 모습 코드 .actions { display: flex; justify-content: space-around; padding: var(--padding) 0; } .actions button { display: flex; flex-direction: column; font-size: var(--font-small); background-color: var(--white-color); color: var(--grey-dark-color); } .actions button i { margin: 0 auto; margin-bottom: calc(var(--padding)/2); font-size: 20px; } .actions button i.active { color:var(-..