display 속성은 웹 페이지의 레이아웃에 필수적입니다. display 속성은 요소가 주변 요소와 관련하여 표시되는 방식을 결정합니다. 이 CSS 속성에는 여러 값이 있습니다. 가장 많이 사용되는 값은 inline입니다. , block 및 inline-block . 이 기사에서는 이 세 가지 CSS 표시 값의 구현과 차이점에 대해 설명합니다. 구문 display의 CSS 값을 구현하는 구문은 다음과 같습니다. 디스플레이:값; 이 기사에서 세 가지 값은 인라인, 블록 및 인라인 블록이므로 구문은 다음과 같습니다. 디스플
아이콘은 사용자가 응용 프로그램에서 수행할 수 있는 작업을 설명하는 데 적합합니다. 쉽게 사용할 수 있는 여러 아이콘 라이브러리가 있습니다. 다음은 많은 것 중 몇 가지입니다. 글꼴 어썸 – https://fontawesome.com/ 플래티콘 – https://www.flaticon.com/ 머티리얼 디자인 아이콘 – https://material.io/resources/icons/ 위에서 언급한 것보다 확실히 더 많지만 이 가이드의 목표는 프로젝트에 위의 라이브러리 중 하나를 활용하고 스타일을 제어하도록 대상을 지정
CSS Flexbox Model은 기존 CSS Box Model을 개선하기 위해 만들어졌습니다. Flexbox 모델은 여전히 상자 모델의 주요 요소(여백, 패딩, 테두리 및 콘텐츠)를 포함하지만 공간을 컨테이너/부모의 자식으로 가장 잘 채울 수 있는 유연성을 제공합니다. 이 튜토리얼은 flexbox 모듈을 좀 더 잘 이해하는 데 도움이 되어 사이트를 더 반응적으로 만들기 시작할 수 있습니다. 다음은 기본 flexbox 모델 데모를 위한 시작 코드입니다. flexbox에 대해 이야기할 때 따라해 보세요! <!DO
이 CSS 자습서에서는 텍스트를 가운데에 맞추고 요소를 차단하는 방법을 살펴보겠습니다. 레이아웃에서 요소를 가로 및 세로로 가운데에 맞추는 데 사용할 수 있는 몇 가지 트릭이 있습니다. 텍스트 요소 가운데 정렬 더 큰 요소 내에서 텍스트를 가운데 정렬하려면 text-align: center;를 사용하세요. 아래와 같이: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport conte
CSS의 border-image 속성은 처음에는 생각을 정리하는 데 약간 까다롭습니다. 이 기사에서는 border-image 속성이 무엇인지, 어떻게 사용하는지, 다른 브라우저에서 사용할 때의 특성에 대해 설명합니다. CSS 교육의 이 시점에서 우리는 border 속성이 무엇인지 알아야 합니다. 새로 고침하려면 속기를 사용하여 요소 주위에 테두리를 지정하는 속성입니다. 다음과 같은 구조를 가지고 있습니다: border: 2px /*width*/ dashed /*style*/ green;
고정 바닥글은 고정 바닥글과 혼동되어서는 안 됩니다. 고정 바닥글은 바닥글이 항상 화면 하단(콘텐츠가 페이지를 채우지 않는 경우)에 고정되거나 웹페이지 콘텐츠 하단에 고정되는 패턴입니다. . 고정 바닥글은 사용자가 페이지를 스크롤할 때 화면 하단에 유지됩니다. 다음 코드 편집기 예제는 차이점을 구별합니다. 고정 바닥글: <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=vi
<span> 요소는 <div>와 유사한 일반 HTML 요소입니다. . 기억하시겠지만 div는 주로 웹페이지 레이아웃에 사용되는 일반 컨테이너이며 블록이기 때문에 가능한 한 많은 공간을 차지합니다. 요소. 스팬은 인라인 요소. 필요한 만큼만 공간을 차지하며 주로 무언가를 강조하는 데 사용됩니다. 다음은 각각의 시각적 표현입니다. Divs 대 스팬 * { box-sizing:border-box; 글꼴 크기:1.4rem; 글꼴 패밀리:고정 폭; } .div-style { 배경:보라색; 색상:블랜치다
CSS 속성 object-fit은 요소가 포함된 컨테이너의 너비와 높이 내로 요소의 크기를 조정합니다. 배경 이미지는 이 속성을 사용하는 개발자가 접하게 되는 가장 일반적인 요소입니다. 개체 맞춤 속성에 대해 가능한 값은 5가지입니다. 다양한 값을 설명하기 위한 예시로 이미지를 사용하겠습니다. 개체 맞춤:포함 – 포함을 사용하면 컨테이너(이 경우 이미지)에 들어가는 요소의 종횡비가 유지됩니다. 비율이 일치하지 않으면 비율이 일치하지 않는 양쪽에 막대가 표시됩니다(와이드스크린 비디오가 출시되었을 때와 구형 TV에서는 화면
스크롤바 및 사용자 경험 사용자는 이제 웹사이트를 탐색할 때 특정 경험에 익숙해졌습니다. 예를 들어, 사이트의 왼쪽 상단 모서리에 있는 비즈니스 로고가 홈페이지로 연결될 것이라고 예상할 수 있습니다. 하지만 그렇지 않다면 어떻게 될까요? 해당 사이트의 모든 것이 반대한 경우 무엇을 할 것이라고 생각했습니까? 스크롤바가 존재했지만 마우스의 스크롤 버튼을 움직이거나 기기의 트랙패드에서 손가락을 끌 때 아무 일도 일어나지 않았다고 상상해 보세요. . 끔찍한 사용자 경험으로 간주됩니다. . 좋은 사용자 경험을 만들거나 깨뜨리는
CSS 기초를 배울 때 우리는 상자 모델, 페이지에서 구성 요소를 배치하는 방법, 글꼴 패밀리 및 글꼴 크기와 같은 디자인 시스템 요소에 초점을 맞추는 경향이 있습니다. 페이지에서 글꼴이 어떻게 보이는지 더 자세히 알아보려면 글꼴 커닝, 문자 간격 및 단어 간격 속성을 살펴봐야 합니다. 이러한 세부 사항은 웹 사이트를 평균에서 전문가로 만들 것입니다. 글꼴 커닝 글꼴 커닝은 두 개의 개별 문자 사이의 간격을 결정하는 방법입니다. 잘 커닝된 것으로 간주되는 글꼴은 글자 사이의 간격이 더 균일하기 때문에 시각적으로 더 매력적입니
CSS에서 이미지를 자르는 방법에는 여러 가지가 있습니다. 그러나 이들 중 가장 간단하고 효과적인 것은 다음과 같습니다. 객체 맞춤 사용: object-fit: cover 사용 시 , 우리는 쉽게 이미지를 자르고 여전히 사진의 종횡비를 유지할 수 있습니다. object-fit를 사용할 수 있습니다. object-position 와 함께 CSS에서 이미지를 자르려면 object-fit 를 설정해 보십시오. 이미지의 속성을 none으로 설정 그런 다음 object-position: 50% 50%를 설정합니다. . 이렇게 하면 이
텍스트 들여쓰기 속성으로 알려진 CSS 들여쓰기 속성은 학교에서 작성한 에세이나 논문의 모든 단락 첫 줄에 있는 표준 들여쓰기와 유사합니다. 논문을 작성할 때 단락의 첫 줄을 들여쓰는 것처럼 모든 텍스트 블록의 첫 줄을 들여씁니다. 아래 코드 편집기는 픽셀(px) 단위로 텍스트 들여쓰기를 만드는 방법을 보여줍니다. <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8 /> <meta name=vi
줄바꿈을 사용하지 않고도 HTML 요소에 줄 바꿈을 추가할 수 있습니다. <br> 유사 요소를 사용하여. 의사 요소는 요소의 특정 부분에 스타일을 지정하는 데 사용됩니다. 여기서는 ::after를 사용하여 HTML 요소의 스타일을 지정하여 줄 바꿈을 추가합니다. <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initia
오버레이는 사용자가 취해야 하는 다음 작업의 올바른 방향으로 사용자를 안내하기 위해 웹사이트에서 사용되는 효과입니다. 올바른 사용은 긍정적인 사용자 경험을 제공하여 사용자를 웹사이트에 계속 머물게 할 수 있습니다. 오버레이를 만드는 방법에는 여러 가지가 있습니다. 정답은 없습니다. 귀하의 사이트와 귀하가 필요로 하는 것에 가장 적합한 방법을 선택하는 것이 중요합니다. 이 가이드에서는 이미지 위로 마우스를 가져갈 때 원하는 오버레이 효과를 얻기 위해 기본 HTML 및 CSS(자바스크립트 없음)를 사용하는 데 중점을 둘 것입
HTML과 CSS를 사용하여 마크업을 작성하는 방법을 처음 배우기 시작했을 때 실제로 상자 모델에서 여백과 패딩의 차이점에 대해 생각하는 데 시간이 걸렸습니다. 이 기사에서 나는 마침내 이 둘을 어떻게 구별할 수 있었는지 공유할 것입니다. 여백과 패딩에 대해 이야기할 때 CSS 상자 모델이 어떻게 작동하는지 검토하는 것이 가장 좋습니다. 상자 모델(웹 사이트의 구성 요소를 담는 컨테이너)을 액자에 넣은 그림으로 생각하십시오. 콘텐츠 그림 그 자체입니다. 우리가 컨테이너에 넣고 싶은 것입니다. 그것을 둘러싸고 있는 것
!중요 규칙은 웹 페이지의 스타일을 재정의하는 데 사용됩니다. 솔직히 말해서, 당신이해서는 안 되는 이유가 더 많습니다. !중요한 규칙을 사용해야 하는 이유를 사용하십시오. 어떻게 사용되는지 그리고 왜 드물게만 사용해야 하는지 논의해 보겠습니다. 사용자 에이전트 스타일시트 재정의 CSS를 작성할 때 주어진 스타일시트를 덮어써야 하는 경우가 있습니다. 부트스트랩과 같은 CSS 프레임워크를 사용하여 프로젝트를 시작하고 실행하는 경우 프레임워크에 내장된 스타일을 사용자 정의할 수 있습니다. <!DOCTYPE html>
CSS Flexbox 및 CSS Grid 세대의 코더 및 프로그래머로서 우리는 CSS Clearfix를 자주 고려하지 않습니다. CSS Flexbox와 Grid는 float를 사용하는 것보다 요소의 위치를 조금 더 잘(좀 더 쉽게!) 해결합니다. 그럼에도 불구하고 float를 사용하는 레거시 코드로 작업하고 코드베이스를 보다 현대적으로 처리하도록 전환할 시간이나 돈이 없는 소수의 경우에 대해 우리 모두는 여전히 이것을 알고 있어야 합니다. 이 기사에서 우리는 clearfix 핵을 탐구하고 clearfix 솔루션의 새로
오늘날 드롭다운 메뉴는 대부분의 최신 웹사이트에서 흔히 볼 수 있는 기능입니다. 이 메뉴를 사용하면 사용자가 웹사이트에서 원하는 콘텐츠를 쉽게 찾을 수 있도록 보다 맞춤화된 탐색 기능을 만들 수 있습니다. HTML 외에 CSS를 사용하여 사용자가 드롭다운의 메뉴 레이블 위로 마우스를 가져갈 때만 콘텐츠를 표시하는 드롭다운 메뉴를 만들 수 있습니다. 이 자습서에서는 CSS에서 드롭다운 메뉴를 만드는 방법을 예제와 함께 설명합니다. 이 튜토리얼을 읽고 나면 자신만의 드롭다운 메뉴를 만드는 데 필요한 도구와 코드를 갖게 될 것
웹 페이지의 텍스트 스타일을 지정하는 것은 웹 디자인의 중요한 부분입니다. 예를 들어 헤더가 특정 글꼴로 나타나도록 하거나 페이지의 모든 텍스트가 serif를 사용하도록 할 수 있습니다. 폰트. 바로 여기에서 CSS font-family 속성이 필요합니다. CSS font-family 속성을 사용하면 웹 페이지의 텍스트 스타일을 지정하는 데 사용할 하나 이상의 글꼴 패밀리를 지정할 수 있습니다. 이 자습서에서는 예제를 참조하여 CSS font-family 속성의 기본 사항과 속성을 사용하여 웹 페이지의 텍스트 스타일을 지
웹사이트를 디자인할 때 종종 특정 방식으로 보이고 싶은 버튼이 있을 것입니다. 예를 들어, 버튼에 대한 사용자의 관심을 끌기 위해 다른 페이지 요소와 다른 배경색을 가진 버튼을 원할 수 있습니다. 개발자는 CSS를 사용하여 스타일이 지정된 버튼을 만들 수 있습니다. CSS를 사용하면 무엇보다도 버튼의 색상, 텍스트 크기, 테두리, 너비 및 높이를 변경할 수 있습니다. 이 자습서에서는 여러 CSS 속성을 사용하여 HTML 버튼의 스타일을 지정하는 방법을 예제와 함께 설명합니다. 이 튜토리얼을 읽으면 CSS를 사용하여 버튼을