풀소유

플렉스박스 레이아웃이란 display 스타일 속성에 flex라고 설정하고 그 안에 콘텐츠 아이템을 배치한 것을 의미한다. 이때 플렉스 컨테이너는 콘텐츠 아이템의 inline과 block 성질을 완전히 무시한다. 어떤 HTML 요소에 display: flex;로 설정하면 해당 요소를 플렉스 컨테이너로 만들 수 있다. flex-direction 속성flex-direction 속성은 display 설정값이 flex일 때만 사용할 수 있다.flex-direction 설정값은 row와 row-reverse, column과 column-reverse 등 4가지가 있으며 기본값은 row이다.row는 왼쪽에서 오른쪽으로, row-reverse는 오른쪽에서 왼쪽으로, column은 위에서 아래로, column-rever..

CSS는 스타일 규칙이 "캐스케이드" 방식으로 적용된다. 캐스케이딩은 여러 스타일 규칙이 하나의 요소에 적용될 때, 어떤 규칙이 우선 적용될지를 결정하는 메커니즘이다. 이 메커니즘은 세 가지 주요 원칙을 따른다. 1. 스타일 시트의 출처(Origin)스타일 시트는 세 가지 출처에서 올 수 있다사용자 에이전트 스타일 시트(User Agent Style Sheet): 브라우저 기본 스타일 시트사용자 스타일 시트(User Style Sheet): 사용자가 정의한 스타일 시트저자 스타일 시트(Author Style Sheet): 웹 페이지의 작성자가 정의한 스타일 시트기본적으로, 우선순위는 다음과 같다. 사용자 에이전트 스타일 시트 저자 스타일 시트 사용자 스타일 시트 (사용자가 중요한 선언 !important..

웹 페이지를 구성하는 모든 요소는 상자(box) 형태로 표현된다. CSS의 상자 모델(Box Model)은 이 상자를 구성하는 요소와 그것이 웹 페이지에 어떻게 배치되는지를 이해하는 데 중요한 개념이다. CSS 상자 모델의 구성 요소CSS 상자 모델은 다음과 같은 네 가지 주요 구성 요소로 이루어져 있다콘텐츠(Content): 요소의 실제 내용이 들어가는 공간이다. 텍스트, 이미지, 동영상 등이 포함한다.패딩(Padding): 콘텐츠와 경계(Border) 사이의 간격이다. 패딩은 투명하며 콘텐츠 주위에 추가적인 공간을 제공한다경계(Border): 콘텐츠와 패딩 주위를 둘러싸는 테두리이다. 경계는 다양한 스타일과 색상으로 설정할 수 있다.마진(Margin): 요소의 경계와 다른 요소들 사이의 간격이다. 마..

em과 rem 단위CSS는 길이(length)를 표현할 때 픽셀 단위(px)를 사용한다. 하지만 픽셀 단위는 '몇 글자 정도의 길이'와 같은 텍스트의 표시 길이를 표현해야 할 때는 그리 적합하지 않다. 예로 '60픽셀'보다는 '문자 20개 정도의 길이'로 표현하는 것이 더 자연스럽다.따라서 CSS는 영문자 'M'의 발음 '엠'을 의미하는 em과 'root M'을 의미하는 rem이라는 단위를 제공한다. 이 단위들은 화면 크기에 따라 반응형 디자인을 구현할 때 유용하다.em 단위em 단위는 현재 요소의 폰트 크기에 상대적인 크기를 나타낸다. 예를 들어, 부모 요소의 폰트 크기가 16px이라면, 자식 요소에서 1em은 16px을 의미한다.상대적인 단위: 요소의 폰트 크기를 기준으로 크기를 계산한다.중첩 효과:..

CSS는 웹 페이지의 스타일을 정의할 때 다양한 방식으로 색상을 표현할 수 있다. 색상 모델과 함수, 불투명도(opacity), 그리고 Tailwind CSS와 같은 프레임워크에서 제공하는 색상 클래스 등을 이해하면 더욱 효과적으로 스타일을 지정할 수 있다. CSS 색상 모델CSS에서는 색상을 표현하는 여러 가지 방법을 지원한다. 주요 색상 모델로는 RGB와 HSL이 있다.RGB (Red, Green, Blue)RGB 색상 모델은 빛의 삼원색인 빨강-초록-파랑을 혼합하여 색상을 표현한다.16진수를 의미하는 # 기호 뒤에 #빨강초록파랑 방식으로 표현한다. 여기서 각각의 색상은 0~ff(즉, 0~255)까지 16진수 값 또는 0부터 1까지의 소수로 나타낼 수 있다.HSL (Hue, Saturation, Li..

Tailwind CSS테일윈드 CSS는 클래스 기반의 유틸리티 CSS 프레임워크이다. 개발자가 CSS를 작성하는 대신, 미리 정의된 클래스를 HTML에 적용하여 스타일을 지정할 수 있다. 이를 통해 스타일을 보다 모듈화 하고 유지보수하기 쉽게 만들 수 있다.테일윈드 CSS는 PostCSS 버전 8의 플러그인 형태로 동작한다.주요 특징유틸리티 클래스: 각 클래스는 하나의 CSS 속성을 담당한다.구성 가능성: 다양한 클래스를 조합하여 복잡한 스타일을 간단하게 구현할 수 있다.커스터마이징: 설정 파일을 통해 Tailwind를 프로젝트에 맞게 조정할 수 있다.Bootstrap과의 차이점 TailwindBootstrap접근 방식유틸리티 클래스 기반모든 스타일링을 작은 클래스 단위로 처리하여,필요한 스타일을 조합하..