CSS
1.[CSS] Object-fit
이미지나 비디오와 같은 대체 요소(replaced elements)의 크기와 비율을 컨테이너 내에서 조절하는 CSS 속성fill (기본값)이미지를 컨테이너에 맞게 늘리거나 줄임종횡비를 유지하지 않음이미지가 왜곡될 수 있음 contain이미지의 종횡비를 유지하면서 전체
2.[CSS] Gradient 속성
그라디언트는 두 가지 이상의 색상 사이에 부드러운 색상 전환을 만들 수 있는 스타일링 기능 CSS에서는 세 가지 주요 유형의 그라디언트를 지원선형 그라디언트 (Linear Gradient)방사형 그라디언트 (Radial Gradient)원추형 그라디언트 (Conic G
3.[CSS] CSS관련 참고할만한 팁들
업로드중..오늘은 CSS의 몇 가지 팁을 공유하려고 합니다. 학습자료 링크https://youtu.be/2IV08sP9m3U?si=tiDcCSeFmd-HmLj9CSS에서 패딩을 주는 일반적인 방법은 다음과 같음상대 패딩을 사용하면 코드를 더 간결하게 작성할 수
4.[CSS] 잘 알려지진 않았지만 유용한 CSS 속성들
업로드중..학습자료 : https://youtu.be/o1HzOJfgugE?si=5fWNFz749byroCMg설명: isolation: isolate; 속성은 요소가 새로운 스태킹 컨텍스트를 생성하도록 해줌.스태킹 컨텍스트는 요소의 z-index가 다른 요소와
5.[CSS] Grid 정리하기 (Flex 원툴 끝내기)
학습자료 : https://www.youtube.com/watch?v=nxi1EXmPHRsFlex1차원 레이아웃에 최적화되어 아이템들을 가로 또는 세로 방향으로 배치하는 데 유용함. wrap 속성으로 다단 레이아웃을 어느 정도 구현 가능하지만, Grid에 비해
6.[CSS] TailwindCSS 4.0 정리
학습자료 : https://youtu.be/2Q7x3LNZPJs?si=jNbM8-KaDp07or4M테일윈드 CSS 4.0 출시로 웹 개발자들은 더욱 향상된 성능과 유연성을 경험할 수 있게 되었음. 기존 버전의 문제였던 빌드 시간을 획기적으로 단축하여, 이제 개
7.[CSS] Tailwind활용 팁
학습자료 : https://youtu.be/H27N2PgtjUM?si=3tYjHj0C6V9LwWG0Tailwind CSS는 미리 정의된 유틸리티 클래스를 활용하여 빠르고 효율적으로 스타일링할 수 있도록 도와주는 강력한 도구. 하지만 때로는 Tailwind가 제
8.[css] flex 마스터하기
Flexbox는 1차원 레이아웃 시스템으로, UI 디자인의 유연성과 반응성을 극대화.컨테이너와 아이템 개념을 중심으로 다양한 속성을 통해 정렬, 크기 조절, 순서 변경 등 복잡한 레이아웃을 손쉽게 구현할 수 있음Flex 아이템들을 감싸는 부모 요소에 적용하여 Flexb
9.[css] js없이 아코디언 쉽게 구현하기
학습자료 : https://youtu.be/B_n4YONte5A?si=4yAlNs_HN0EKuf87CSS에서 height: auto로의 트랜지션은 오랫동안 골칫거리였다. 드롭다운이나 아코디언 UI를 만들 때 애니메이션 없이 갑자기 나타나거나 사라지는Elemen
10.[css] CSS 선택자 정리
CSS 선택자는 HTML 문서에서 스타일을 적용할 요소를 선택하는 데 사용. 다양한 선택자를 조합해서 특정 요소를 정확하게 선택하고 스타일을 지정할 수 있음.전체 선택자 \*문서 내의 모든 HTML 요소를 선택.태그 선택자 (Type Selector)특정 HTML 태그
11.[css] text balance, dark mode, width auto vs 100%
학습자료 : https://youtu.be/-st14lUQD3U?si=AoxGLb4rrr2S_PlU텍스트 줄 바꿈 속성. 제목 균형 조정에 사용.다양한 화면 크기에서 제목 줄 바꿈 시 단어 분리 현상 발생.브라우저가 제목 줄 바꿈 자동 조정.한 줄 제목은 유지
12.[css] 고급 CSS (skew, background-attachment, mask-image)
업로드중..요소를 지정된 각도만큼 기울여서 시각적인 왜곡 효과 생성. 주로 인터랙션 강조나 디자인 요소로 활용. transform 속성의 함수 중 하나좌표 평면 상에서 각 축을 기준으로 점들의 위치를 변환. skewX()X축을 따라 기울임, skewY() Y축을 따라
13.[CSS] 몇가지 팁들
업로드중..단색 그라데이션은 CSS에서 하나의 색상을 사용하여 은은한 시각적 효과를 만들 때 유용. linear-gradient() 함수를 활용하여 간단하게 구현할 수 있음이 코드는 흰색에서 시작하여 흰색으로 끝나는 선형 그라데이션을 만듬white그라데이션의 시작 색상
14.[css] box-shadow 이해하기
웹 페이지 요소에 입체감을 더하고 시각적인 포인트를 줄 수 있는 box-shadow 속성box-shadow 속성을 사용하면 HTML 요소를 감싸는 그림자 효과를 손쉽게 만들 수 있음.그림자는 요소의 주변이나 내부에 표현하여 깊이감을 부여하거나 강조하는 데 유용기본 구문