본문 바로가기

IT/css32

css 그리드(grid) CSS Grid는 웹 디자인을 혁신적으로 바꾸는 기술 중 하나로, 웹 페이지의 레이아웃을 효과적으로 관리하고 표현하는 데 사용됩니다. 이 기사에서는 CSS Grid의 핵심 개념과 활용 방법을 자세히 알아보겠습니다. 1. CSS Grid 소개 CSS Grid는 웹 디자인에서 레이아웃을 구성하는 데 사용되는 강력한 도구입니다. 그리드 시스템을 사용하여 웹 페이지의 구성 요소를 배치하고 정렬할 수 있습니다. 2. 그리드 컨테이너와 그리드 아이템 CSS Grid를 사용하려면 먼저 그리드 컨테이너와 그리드 아이템을 정의해야 합니다. 그리드 컨테이너는 그리드 아이템을 포함하는 부모 요소이며, 그리드 아이템은 레이아웃을 형성하는 개별 요소입니다. .container { display: grid; /* 그리드 컨테이너.. 2023. 9. 3.
CSS 애니메이션(Animation) CSS 애니메이션은 웹 페이지의 요소를 부드럽게 움직이거나 변형시키는 기술로, 사용자 경험을 향상시키고 웹 페이지를 더 매력적으로 만듭니다. 예를 들어, 다음은 간단한 CSS 애니메이션의 예시입니다. 이 예시에서는 버튼에 마우스를 올리면 배경색이 서서히 변하는 애니메이션을 만들어보겠습니다. /* CSS 코드 */ .button { width: 150px; height: 40px; background-color: #3498db; color: #fff; text-align: center; line-height: 40px; cursor: pointer; transition: background-color 0.3s ease; } .button:hover { background-color: #2980b9; } 이.. 2023. 9. 2.
CSS 미디어 쿼리 (Media Query) 미디어 쿼리(Media Query)는 CSS의 기능 중 하나로, 화면의 크기, 장치의 방향, 해상도 등과 같은 미디어에 대한 쿼리를 수행하여 스타일을 적용할 수 있습니다. 미디어 쿼리를 사용하면 각 디바이스에 최적화된 디자인을 적용하거나, 반응형 웹 디자인을 구현하는 데에 유용합니다. 예를 들어, 모바일 디바이스에서는 화면이 작아지므로 폰트 크기를 줄이거나 레이아웃을 바꾸는 등의 스타일을 적용할 수 있습니다. 미디어 쿼리는 @media 규칙으로 시작하며, screen, print, speech와 같은 미디어 유형에 따라 규칙을 정의할 수 있습니다. 또한, and, not, only와 같은 논리 연산자를 사용하여 조건을 결합할 수 있습니다. 사용법 /* 768px 이하일 때 */ @media screen .. 2023. 3. 30.
부트스트랩(Bootstrap)이란? 부트스트랩(Bootstrap)은 Twitter에서 개발된 오픈소스 프론트엔드 프레임워크입니다. 웹사이트 및 웹 애플리케이션 개발을 빠르고 쉽게 할 수 있도록 도와줍니다. 부트스트랩은 HTML, CSS 및 JavaScript를 사용하여 웹사이트 및 웹 애플리케이션을 개발하는데 필요한 다양한 구성요소와 도구를 제공합니다. 이를테면, 버튼, 폼, 타이포그래피, 네비게이션, 모달, 알림 등을 간단한 클래스를 이용해 빠르게 구현할 수 있습니다. 또한, 반응형 웹 디자인을 지원하여 모바일 기기에서도 적합한 레이아웃으로 웹사이트를 표시할 수 있습니다. 부트스트랩은 다양한 테마와 플러그인도 제공하므로, 개발자는 웹사이트의 디자인과 기능을 확장하거나 변경하기 쉽습니다. 또한, 부트스트랩은 대부분의 최신 브라우저와 호환되.. 2023. 3. 30.
flex-basis, flex-grow, flex-shrink 속성 flex-basis 속성은 주축의 방향을 기준으로 요소들의 크기를 조절할 수 있습니다. flex-grow 속성은 남은 공간이 있을 때 요소들을 비율에 따라 크기를 조절할 수 있습니다. flex-shrink 속성은 요소들이 전체 사이즈를 넘어가는 사이즈를 가질 때 비율에 따라 크기를 줄일 수 있습니다. flex-basis 주축이 row라서 가로크기가 조절됩니다. 주축이 column라서 세로크기가 조절됩니다. flex-grow flex-grow를 전체 요소에 적용해서 비율이 동일하게 적용됩니다. 하나의 요소에 개별적으로 적용할 수 있습니다. flex-shrink 전체 사이즈와 요소들의 사이즈가 작거나 동일하다면 작동하지 않습니다. 요소들의 사이즈가 더 커야 요소를 선택해서 줄일 수 있습니다. flex 적용 .. 2023. 3. 27.
align-content & align-self 속성 align-content와 align-self 속성은 flex-wrap 속성을 사용했을 때 교차 축의 방향에 따라서 행 간격이나 열 간격을 조절할 수 있습니다. align-content 속성은 모든 요소들의 간격을, align-self 속성은 요소들 각각의 간격을 정렬 시킬 수 있습니다. flex-direction이 row면 주축이 좌측에서 우측 교차축이 상단에서 하단이고 flex-direction이 column이면 주축이 상단에서 하단 교차축이 좌측에서 우측입니다. 적용 전 align content 적용 align self 적용 2023. 3. 26.
css align-items 속성 css align-items 속성은 교차 축을 기준으로 요소들이 정렬됩니다. 교차 축은 주축의 방향에 따라서 결정이 되며 기본적으로 주축은 좌측에서 우측 방향 교차 축은 상단에서 하단 방향으로 설정되어 있습니다. 교차 축 상단에서 하단 기준 flex-direction 속성의 값이 row 이므로 주축은 좌측에서 우측이고 교차 축은 상단에서 하단입니다. align-items 속성은 교차축을 기준으로 작동하며 flex-start 값은 시작점으로 정렬해주는 기능이기 때문에 상단에 위치하게 됩니다. flex-direction 속성의 값이 row 이므로 주축은 좌측에서 우측이고 교차 축은 상단에서 하단입니다. align-items 속성은 교차축을 기준으로 작동하며 flex-end 값은 끝점으로 정렬해주는 기능이기 .. 2023. 3. 25.
css flex-warp 속성 css flex-wrap 속성은 주축의 방향에 따라서 교차 축을 기준으로 요소들을 정렬하는 방법입니다. 주축의 방향은 flex-direction 속성으로 변경할 수 있습니다. 주축(MAIN AXIS)이 기본적으로 가로방향이고 교차 축(CROSS AXIS)이 세로방향입니다. 주축을 세로 방향으로 변경하면 교차축이 가로 방향으로 되고 주축을 가로 방향으로 변경하면 교차 축이 세로 방향이 됩니다. 주축 가로 방향 교차 축 세로 방향 요소들을 열 방향으로 정렬시켜 줍니다. 주축 세로 방향 교차 축 가로 방향 요소들을 행 방향으로 정렬시켜 줍니다. 마무리 justify-content 값에 따라서 다양하게 정렬할 수 있고 wrap-reverse를 주면 반대방향으로 정렬이 됩니다. 2023. 3. 24.

티스토리툴바