디자인도 하고요, 이것도 해요

이번 포스팅에서는 CSS를 사용하여 텍스트가 "..."으로 처리하는 방법에 대해 알아보겠습니다. 특히, white-space, overflow, 그리고 text-overflow 속성을 활용하여 간단하고 효과적으로 처리할 수 있습니다. - 텍스트 한줄로 '...' 처리 여러 줄로 이루어진 텍스트가 이곳에 들어갑니다. 넘치는 부분은 생략 기호로 표시되며 최대 두 줄까지 표시됩니다. 여러 줄로 이루어진 텍스트가 이곳에 들어갑니다. 넘치는 부분은 생략 기호로 표시되며 최대 두 줄까지 표시됩니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..

HTML&CSS 2024. 1. 8. 15:39

1. 기본 레이아웃 Two Column Layout Home About Contact Section 1 This is the first section of the layout. Section 2 This is the second section of the layout. © 2023 Two Column Layout

HTML&CSS 2024. 1. 7. 14:12

1. CSS Grid Level 2 소개 CSS Grid Level 2는 그리드 레이아웃을 위한 업그레이드된 버전으로, 다양한 레이아웃 설계를 더욱 간편하게 만듭니다. 기존의 CSS Grid보다 더 많은 기능과 제어를 제공합니다. /* 그리드 템플릿 열 및 행 설정 */ .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 20px; } 2. Subgrid 사용하기 Subgrid는 부모 그리드 컨테이너의 그리드 행 및 열 크기를 자식 그리드에 적용할 수 있게 해줍니다. 이로써 중첩된 그리드를 더욱 효율적으로 다룰 수 있습니다. /* 부모 그리드의 크기를 자식 그리드에 적용 ..

HTML&CSS 2024. 1. 7. 13:31

1. 색상 대비 색상 대비는 시각 장애를 가진 사용자가 텍스트를 읽는 데 중요한 역할을 합니다. WCAG(Web Content Accessibility Guidelines)에 따르면, 텍스트와 배경 간의 최소 대비 비율은 4.5:1이어야 해요. /* 예제 */ body { color: #444; /* 텍스트 색상 */ background-color: #fff; /* 배경 색상 */ } 2. 키보드 초점 표시 키보드 사용자를 위해 키보드 초점(focus) 스타일을 명확하게 표시해야 합니다. outline 속성을 이용해서 표시할 수 있어요. /* 예제 */ a:focus { outline: 2px solid #f90; /* 초점 색상 */ } 3. 대체 텍스트 이미지가 로딩되지 않거나, 스크린 리더를 사용하..

HTML&CSS 2024. 1. 7. 13:13

이번 포스팅에서는 CSS에서 스타일이 어떻게 상속되고 우선순위가 결정되는지에 대해 알아보겠습니다. 1. 상속(Inheritance) 상속은 부모 요소에서 자식 요소로 스타일이 전달되는 과정을 말합니다. 모든 속성이 상속되는 것은 아니며, 각 속성마다 상속 여부가 정의되어 있습니다. 일반적으로 텍스트 관련 속성(예: font-family, color, font-size)은 상속됩니다. .parent { font-family: 'Arial', sans-serif; color: blue; } .child { /* font-family은 상속됨 */ } .another-child { /* color는 상속됨 */ } 2. 우선순위(Priority) 스타일 우선순위는 여러 규칙이 충돌할 때 어떤 규칙이 적용되는지..

HTML&CSS 2023. 12. 27. 10:06

CSS Blend Mode는 여러 이미지나 요소들을 혼합하여 새로운 시각적 효과를 만들 수 있는 강력한 도구 중 하나입니다. 이번 포스팅에서는 CSS Blend Mode를 활용하여 다양한 이미지 효과를 만드는 방법에 대해 알아보겠습니다. 기본 개념 이해하기 Blend Mode는 두 요소를 섞을 때 적용되며, background-blend-mode 속성을 사용하여 설정할 수 있습니다. 기본적으로 normal이 적용되어 있으며, 이 외에도 여러 가지 모드가 있습니다. 사용할 이미지 1. HTML 구조 먼저, HTML 구조를 정의해봅시다. 2. CSS 스타일 이제 CSS를 사용하여 이미지와 효과를 적용하는 스타일을 정의합니다. - screen /* styles.css */ .blend-container { w..

HTML&CSS 2023. 12. 26. 13:48

웹 디자인에서 요소를 배치하고 정렬하는 데에는 여러 가지 방법이 있습니다. 그 중에서도 Float와 Grid는 각각의 특성을 가지고 있어 다양한 상황에서 사용됩니다. 이번 포스팅에서는 Float와 Grid를 사용하여 간단한 그리드 시스템을 구현하는 방법에 대해 알아보겠습니다. Float를 이용한 그리드 시스템 Float는 예전부터 사용되어온 방법 중 하나로, 요소를 좌우로 띄우는 속성입니다. 그러나 몇 가지 문제점이 있어 유지보수가 어려워지고 레이아웃이 복잡해질 수 있습니다. - HTML 구조 1 2 3 CSS 스타일 .container { width: 100%; } .box { width: 30%; /* 각 박스의 너비 설정 */ float: left; /* 왼쪽으로 띄우기 */ margin: 0 3%..

HTML&CSS 2023. 12. 26. 11:06

SVG(Scalable Vector Graphics)는 XML 기반의 벡터 그래픽 포맷으로, 해상도에 상관없이 확대 또는 축소해도 깨지지 않는 이미지를 만들 수 있습니다. SVG는 텍스트 기반으로 작성되며, CSS와 함께 사용하여 스타일링할 수 있습니다. SVG(Scalable Vector Graphics)를 이용하여 웹페이지에 동적이고 아름다운 그래픽을 추가하는 방법을 알아봅시다. 이 블로그 포스팅에서는 초보자도 쉽게 따라 할 수 있는 다양한 SVG 예제를 제공하고, 각 예제에 대한 세부적인 설명을 포함할 것입니다. 1. SVG 파일 삽입하기 SVG 파일을 웹페이지에 삽입하기 위해서는 태그나 CSS의 background-image 속성을 사용할 수 있습니다. 예를 들어, 다음과 같이 태그를 사용하여 S..

HTML&CSS 2023. 12. 23. 09:54