본문 바로가기

전체 글290

[CSS 핵심강좌] 8. 미디어 쿼리 미디어 쿼리는 CSS3의 기능 중 하나로, 다양한 기기와 화면 크기에 따라 적절한 스타일을 적용할 수 있게 합니다. 이 강좌에서는 미디어 쿼리의 기본 개념과 사용 방법에 대해 알아보겠습니다. 미디어 쿼리의 기본 구조 미디어 쿼리는 @media 규칙을 사용하여 작성됩니다. 기본 구조는 다음과 같습니다. @media 미디어 유형 and (조건) { /* 조건에 맞는 스타일 작성 */ } 미디어 유형 미디어 유형을 지정하여 해당 유형에만 스타일을 적용할 수 있습니다. 주요 미디어 유형은 다음과 같습니다. all: 모든 미디어 유형에 적용 screen: 컴퓨터 화면, 태블릿, 스마트폰 등의 화면에 적용 print: 인쇄용 스타일 적용 예시: @media print { body { font-size: 12pt; .. 2023. 3. 5.
[CSS 핵심강좌] 7. 전환과 애니메이션 CSS3를 이용하면 웹 페이지에 전환(transition)과 애니메이션(animation) 효과를 적용할 수 있습니다. 이 강좌에서는 전환과 애니메이션의 기본 개념과 사용 방법에 대해 알아보겠습니다. 전환 (Transition) 전환은 요소의 속성이 변경될 때, 그 변경을 부드럽게 표현할 수 있는 효과입니다. 주로 마우스 호버와 같은 상호작용에 사용됩니다. 전환 속성 transition-property: 전환 효과를 적용할 속성을 지정합니다. transition-duration: 전환 효과의 지속 시간을 설정합니다. transition-timing-function: 전환 효과의 가속도를 설정합니다. (linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier.. 2023. 3. 5.
[CSS 핵심강좌] 6. Grid CSS Grid는 웹 페이지의 레이아웃을 구성하기 위한 2차원 격자 시스템입니다. Grid를 사용하면 열과 행을 쉽게 조절할 수 있으며, 복잡한 레이아웃을 효율적으로 구현할 수 있습니다. 이 강좌에서는 Grid의 기본 개념과 사용 방법에 대해 알아보겠습니다. Grid 컨테이너 Grid를 사용하려면 먼저 Grid 컨테이너를 설정해야 합니다. Grid 컨테이너는 display: grid 속성을 적용한 요소입니다. Grid 컨테이너 내부의 직계 자식 요소들을 Grid 아이템이라고 합니다. .container { display: grid; } Grid 템플릿 Grid 템플릿을 사용하여 격자의 행과 열의 크기를 설정할 수 있습니다. grid-template-columns: 열의 크기를 설정합니다. grid-tem.. 2023. 3. 5.
[CSS 핵심강좌] 5. Flexbox CSS Flexbox는 요소들을 일차원적인 열 또는 행으로 배치하고, 공간을 쉽게 조절할 수 있는 레이아웃 기법입니다. 이 강좌에서는 Flexbox의 기본 개념과 사용 방법에 대해 알아보겠습니다. Flex 컨테이너 Flexbox를 사용하려면 먼저 Flex 컨테이너를 설정해야 합니다. Flex 컨테이너는 display: flex 또는 display: inline-flex 속성을 적용한 요소입니다. Flex 컨테이너 내부의 직계 자식 요소들을 Flex 아이템이라고 합니다. .container { display: flex; } 주 축과 교차 축 Flexbox에서는 주 축(main axis)과 교차 축(cross axis)이라는 개념이 중요합니다. 주 축은 Flex 아이템들이 나열되는 방향을 결정하고, 교차 축.. 2023. 3. 4.
[CSS 핵심강좌] 4. 레이아웃 웹 페이지 레이아웃은 페이지의 구조와 요소들의 배치를 결정합니다. CSS를 이용하여 다양한 레이아웃을 구현할 수 있습니다. 이 강좌에서는 주요 레이아웃 기법에 대해 알아보겠습니다. 정적 레이아웃 (Static Layout) 정적 레이아웃은 웹 페이지의 요소들을 고정된 크기와 위치에 배치합니다. 주로 position: static과 position: relative를 사용하여 구현합니다. .box { position: static; width: 200px; height: 200px; } 고정 레이아웃 (Fixed Layout) 고정 레이아웃은 웹 페이지의 요소들을 뷰포트에 상대적인 고정된 위치에 배치합니다. 스크롤이 발생해도 요소의 위치가 변하지 않습니다. 주로 position: fixed를 사용하여 구현.. 2023. 3. 4.
[CSS 핵심강좌] 3. 박스모델 CSS Box Model은 HTML 요소에 대해 생성되는 사각형 상자를 설명하는 웹 디자인에서 근본적인 개념입니다. 각 상자는 콘텐츠, 패딩, 테두리 및 마진으로 구성됩니다. 콘텐츠(Content): 실제 요소 콘텐츠(텍스트, 이미지 등)가 들어가는 영역입니다. 패딩(Padding): 콘텐츠를 감싸며 콘텐츠와 경계 사이의 공간을 제공합니다. 패딩은 투명하며 padding 속성을 사용하여 지정할 수 있습니다. 테두리(Border): 패딩을 감싸며 border-width, border-style 및 border-color 속성을 사용하여 스타일을 지정할 수 있습니다. 마진(Margin): 테두리를 감싸며 상자와 다른 요소 간의 공간을 제공합니다. margin 속성을 사용하여 지정할 수 있습니다. CSS Bo.. 2023. 3. 4.
반응형

티스토리툴바