![]()
프로젝트 초반에는 Tailwind CSS 사용에 익숙하지 않아 클래스가 과도하게 길어지고, 팀원마다 spacing 단위가 제각각이어서 UI의 일관성이 흔들리는 문제가 있었다. 특히 mt-[10px]처럼 임의의 px 단위가 섞이기 시작하며 가독성이 떨어지고 유지보수도 어려워지는 상황이 발생했었다. 이러한 문제를 해결하기 위해 팀에서 Tailwind CSS의 기본 원칙을 다시 정리하고 공통 규칙을 도입했으며, 아래는 Tailwind의 핵심 정리와 함께, 실제 프로젝트에서 팀이 합의한 spacing 규칙을 기록한 내용이다. ✍️🌿 🌟 Tailwind CSS 주요 개념 정리🔤 1) 타이포그래피(Typography)Tailwind는 rem 기반 스케일을 제공하여 일관된 텍스트 표현이 가능하다.test-xs..
![]()
시맨틱 태그란?HTML구조를 설계하는데 있어 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 도와주기 위해 만들어진 것을 말한다.시민틱 태그는 기존 HTML의 태그와 기능이 같은데, 시맨틱 태그는 단순 태그가 아닌, 태그의 의미를 부여해 웹사이트의 구조를 쉽게 파악할 수 있게 해준다.시맨틱 태그 종류시맨틱 태그의 종류는 다음과 같다.(이 외에도 사용가능한 100개 정도의 요소들이 존재한다.)태그 이름용도 설명영역 위쪽에서 로고나 제목, 메뉴 같은 걸 담고 있는 도입부사이트의 본격적인 내용으로 페이지에서 딱 한 번만 사용 가능영역 아래쪽에서 여러 가지 연락처나 관련 정보를 담고 있음하나의 완성된, 독립적인 내용을 나타내는 영역어떤 것의 일부분을 나타내는 영역이미지와, 이미지 설명을 담고 있..
![]()
CASCADING 이란?"폭포, 위에서 아래로 쏟아지는" 이라는 뜻을 가진 단어이다. 최종적으로 적용할 CSS 속성들을 결정할 때, 계단식 폭포처럼 CSS규칙을 순서에 따라 합쳐서 적용하는 걸 말한다. 한국어로는 "종속"이라고 번역하기도 한다.그리고 이 cascading은 CSS에서 가장 중요한 스타일 적용 규칙이기도 하다.CSS는 스타일을 적용할 규칙을 세우기 위해 CASCADING 규칙을 채택했다.CASCADING 은 다음과 같은 두가지의 원칙을 통해 어떤 요소에 스타일을 적용할지 결정한다.- 스타일 우선순위- 스타일 상속우선 스타일 우선순위에 대해 먼저 알아보자.1. 스타일 우선순위스타일 요소는 각각 우선순위를 가지고 있는데, 이 우선순위가 가장 높은 스타일이 적용되게 된다.이것을 "스타일 우선순위..
![]()
box-sizing 속성 기본적으로 요소에 크기를 지정하면 그 크기는 박스 모델에서 콘텐트 영역에 대한 크기이다. 여기서, box-sizing 속성의 기본 값은 content-box 이다. 예를 들어 아래 #box 요소의 실제 너비는 width + pading 좌 + 우 (100+ 20 + 20 = 140)이 된다. #box { margin : 10px; padding : 20px; width : 100px;} 만약, 좀 더 직관적으로 크기를 지정하고 싶으면, box-sizing의 속성을 바꿔주면 된다. 기본값인 content-box 대신에 border-box를 사용하면 된다. #box { margin : 10px; padding: 20px; width: 100px; box..
animation CSS- 애니메이션을 사용하면 요소를 한 스타일에서 다른 스타일로 점진적으로 변경할 수 있다. - CSS 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇가지 키 프레임 keyframes 을 지정해야한다. - 키프레임(keyframe)은 특정 시간에 요소의 스타일을 유지한다. animation 속성 값animation-name@keyframes 애니메이션의 이름을 지정합니다.animation-duration애니메이션이 한 주기를 완료하는 데 걸리는 시간을 지정합니다.animation-timing-functich애니메이션의 속도 곡선을 지정합니다.ex) linear, ease, ease-in ..animation-delay애니메이션 시작 지연을 지정합니다.animation-iterat..
Grid CSScolumn Gap 이랑 Row Gap을 합쳐서 써주면 gap: 00px; 으로 나타낼 수 있다. * grid-template-columns .container { grid-template-columns: 40px 50px auto 50px 40px;} 공백으로 구분된 값 목록으로 그리드의 열과 행을 정의한다. 값은 트랙 크기를 나타내고 그 사이의 공간은 grid line 격자선을 나타낸다. 40px50pxauto50px40px * repeat .container { grid-template-columns: repeat(5, 10px)} 10px10px10px10px10px * 1fr fr = fraction 1fr은 사용 가능한 공간의 1 부분이다. (사용 가능한 공간에 대한 비율..
![]()
미디어 쿼리 미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성중 하나입니다. 반응형 웹 디자인에서는 미디어 쿼리를 사용해 적용하는 스타일을 기기마다(화면 크기마다) 전환 할 수 있습니다. * 조건이 만족 될 때 스타일 적용하기 @media (조건) { 스타일 } @media (max-width: 1000px) { .video-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }} @media (max-width: 751px) and (max-width : 999px) { .video-grid { grid-template-columns: 1fr 1fr 1fr; ..
![]()
display 속성 ( block, inline, inline-block) display 속성은 요소가 차지하는 영역에 관한 정보를 나타냅니다. 각 속성에 따라 서로 다른 요소들이 배치되는 모습이 달라집니다.block block 특징 - 항상 줄바꿈이 발생합니다. - 가로폭(width)는 화면 전체를 차지합니다. - width, height, margin, padding 속성을 지정할 수 있습니다. - block요소 안에는 inline 요소를 포함할 수 있습니다. - 대표적인 block요소 -> , , , inline inline 특징 - 줄바꿈 없이 다른 요소들과 한 줄에 배치될 수 있습니다.- width, height를 지정할 수 없습니다. - inline 요소는 content의 너비만큼 가..
