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

CSS에서 정말 유용한 calc() 함수에 대해 이야기해볼게요. 레이아웃을 디자인할 때 고정된 단위만으로는 유연한 디자인을 구현하기 어려운 경우가 많잖아요? 이럴 때 calc() 함수가 큰 도움이 된답니다. 이 함수는 CSS에서 수치 계산을 가능하게 해주고, 다양한 단위를 혼합해서 사용할 수 있어요.calc() 함수의 기본 문법property: calc(expression);여기서 expression은 수학적 표현식으로, 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)을 사용할 수 있어요. 단, 곱셈과 나눗셈은 calc() 함수 내에서 사용할 수 없고, 단위가 서로 다를 경우에는 사용할 수 없으니 주의해 주세요!예제 1: 너비와 여백을 조합한 레이아웃먼저, calc() 함수를 사용해서 요소의 너비를 설..

HTML&CSS 2024. 9. 23. 12:51

CSS 파일의 크기를 줄이고 로딩 시간을 최적화하는 방법 웹사이트의 로딩 속도는 사용자 경험에 중요한 요소입니다. 느린 로딩 속도는 사용자의 이탈을 유발하며, 이는 사이트의 SEO에도 부정적인 영향을 미칩니다. CSS는 웹사이트의 디자인을 결정하는 핵심 요소로, 효과적인 CSS 최적화는 웹사이트의 로딩 속도를 크게 향상시킬 수 있습니다. 이 포스트에서는 CSS 최적화 방법에 대해 알아봅니다. 1. 불필요한 CSS 제거 웹페이지에 사용되지 않는 CSS는 불필요한 로딩 시간을 유발합니다. 따라서 사용되지 않는 CSS를 찾아 제거하는 것이 중요합니다. 사용되지 않는 CSS를 찾는 방법 중 하나는 Chrome 개발자 도구의 Coverage 탭을 이용하는 것입니다. Hello World! 위 예시에서 .unuse..

HTML&CSS 2024. 1. 10. 18:05

ul li 가로 메뉴 만들기 - 뉴 기본 구조 설정 과 를 활용하여 메뉴 구조를 잡습니다. 기본적인 스타일링과 마우스 이벤트에 대한 초기 설정을 합니다. - 서브메뉴 디자인과 애니메이션 추가 서브메뉴를 감싸는 요소를 추가하여 위치와 스타일을 지정합니다. CSS의 opacity와 visibility 속성을 활용하여 서브메뉴를 부드럽게 나타내고 사라지게 합니다. 마우스 오버 시 fadeIn 애니메이션을, 사라질 때 fadeOut 애니메이션을 적용합니다. - 메뉴 아이템 선택 및 효과 추가 JavaScript를 사용하여 메뉴 아이템을 클릭할 때 선택된 상태를 관리합니다. 선택된 메뉴 아이템 및 서브메뉴에 색상 및 텍스트 효과를 추가합니다. Website Title Home Services Web Design ..

HTML&CSS 2024. 1. 8. 16:32

이번 포스팅에서는 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