CSS에서 요소의 위치 지정 방식을 fixed(고정)로 설정하면 해당 요소는 사용자의 뷰포트(viewport)를 기준으로 배치됩니다. fixed로 지정된 요소는 페이지를 스크롤해도 화면상에서 움직이지 않으며, CSS 위치 속성인 left, right, top, bottom을 사용해 원하는 위치에 배치할 수 있습니다.이러한 특성 덕분에 fixed 포지셔닝은 상단 내비게이션 바, 플로팅 버튼, 사이드 광고 배너처럼 항상 화면에 고정되어 있어야 하는 UI 요소를 만들 때 널리 활용됩니다.예제 1: 기본적인 fixed 위치 지정다음은 CS
CSS 높이(height)와 너비(width) 속성이란? CSS에서 height 속성과 width 속성은 각각 요소의 세로(높이)와 가로(너비) 크기를 지정할 때 사용합니다. 이 두 속성은 px, %, em 등 다양한 단위를 지원하며, 웹 페이지 레이아웃을 구성하는 데 있어 가장 기본이 되는 속성입니다. 또한 max-height, max-width, min-height, min-width 속성을 함께 사용하면 요소가 늘어나거나 줄어들 수 있는 크기의 상한선과 하한선을 설정할 수 있습니다. 기본 문법 CSS height와 width
CSS의 margin 속성은 선택한 요소의 테두리(border) 바깥쪽에 여백 영역을 설정하는 데 사용됩니다. 이 속성은 margin-top, margin-right, margin-bottom, margin-left 네 가지 개별 속성을 한 번에 지정할 수 있는 단축(shorthand) 속성입니다.문법(Syntax)CSS margin 속성의 기본 문법은 다음과 같습니다.Selector { margin: /*값*/ }margin 값은 한 개부터 네 개까지 지정할 수 있으며, 개수에 따라 적용 방향이 달라집니다.값 1개: 네 방
CSS의 margin(마진) 속성은 요소 바깥쪽 여백, 즉 요소와 다른 요소 사이의 간격을 지정하는 속성입니다. 이 속성은 margin-top, margin-right, margin-bottom, margin-left 네 가지 개별 속성을 한 번에 설정할 수 있는 축약형(shorthand)이며, 물론 특정 면만 따로 지정하는 것도 가능합니다. 기본 문법 CSS margin 속성의 기본 문법은 다음과 같습니다. Selector { margin: /*값*/; } margin 값 작성 규칙
CSS의 background-attachment 속성은 페이지가 뷰포트(viewport)를 기준으로 스크롤될 때 배경 이미지가 어떻게 움직일지를 지정하는 속성입니다. 이 속성은 scroll, fixed, local 세 가지 값을 가질 수 있으며, 각 값에 따라 배경 이미지의 고정 방식이 달라집니다.기본 문법CSS background-attachment 속성의 기본 문법은 다음과 같습니다.선택자 { background-attachment: /*값*/; }속성값 설명scroll: 기본값으로,
CSS의 background-position 속성은 배경 이미지가 요소 내에서 어느 위치에 표시될지를 결정합니다. 원점(기준점)을 기준으로 배경 이미지의 초기 위치를 지정하며, 하나 이상의 배경 이미지에 각각 다른 위치 값을 적용할 수도 있습니다.문법(Syntax)CSS background-position 속성의 기본 문법은 다음과 같습니다.Selector { background-position: /*값*/; }이 속성에는 키워드(top, bottom, left, right, center)
CSS는 HTML 문서 안에서 <style> 태그를 통해 직접 선언하는 방식으로 내장할 수 있습니다. 이렇게 작성된 스타일 시트를 내부 스타일 시트(Internal Stylesheet)라고 부릅니다.내부 스타일 시트는 외부 CSS 파일을 별도로 불러올 필요가 없기 때문에 웹페이지의 초기 로딩 속도를 단축할 수 있다는 장점이 있습니다. 또한 HTML 문서 안에서 동적으로 스타일을 정의할 수 있어 유연성이 높습니다.다만 주의할 점도 있습니다. 내부 CSS는 브라우저 캐시에 저장되지 않기 때문에, 페이지를 요청할 때마다 스타일
CSS에서는 외부 스타일시트를 HTML 문서에 연결하여 사용할 수 있습니다. 이 방식을 활용하면 CSS 코드를 별도의 파일로 분리해 관리할 수 있어 유지보수가 훨씬 쉬워지고, 브라우저가 스타일시트를 캐싱할 수 있기 때문에 페이지 로딩 속도도 함께 개선됩니다.외부 CSS 파일은 문서의 <head> 태그 안에 <link> 태그를 작성하여 지정합니다.기본 문법외부 CSS 파일을 포함하는 기본 문법은 다음과 같습니다.<link rel="stylesheet" href="#location&
CSS 가상 클래스(Pseudo-class)는 HTML 요소 자체에 직접 적용하는 대신 CSS 클래스와 결합하여 사용하면 훨씬 더 정교하고 선택적인 스타일링이 가능합니다. 예를 들어 같은 클래스를 공유하는 여러 요소 중에서도 언어 속성(lang)이나 형제 요소 사이에서의 순서 같은 특정 조건을 만족하는 요소만 골라 스타일을 지정할 수 있습니다. 예제 1: :lang() 가상 클래스와 클래스 결합 다음은 CSS 가상 클래스와 CSS 클래스를 결합한 첫 번째 예제입니다. 각 div 요소에 지정된 lang 속성 값에 따라 국기처럼 보이는
CSS의 border-collapse 속성은 <table> 요소의 테두리를 인접 셀끼리 공유할지, 아니면 각각 분리해서 표시할지를 지정하는 속성입니다. 이 속성은 separate(분리)와 collapse(축소) 두 가지 값을 가질 수 있습니다.기본 문법CSS border-collapse 속성의 기본 문법은 다음과 같습니다.Selector { border-collapse: /*값*/ }아래 예제들을 통해 border-collapse 속성의 실제 동작을 확인해 보겠습니다.예제 1:
CSS의 background-image 속성은 선택한 요소의 배경으로 이미지를 지정할 때 사용합니다. 이 속성을 활용하면 텍스트나 콘텐츠 뒤에 원하는 이미지를 배치하여 시각적으로 풍부한 웹 페이지를 만들 수 있습니다.기본 문법CSS background-image 속성의 기본 문법은 다음과 같습니다.Selector { background-image: /*값*/ }아래 예제들을 통해 CSS background-image 속성의 실제 사용 방법을 살펴보겠습니다.예제 1: 요소에 배경 이미지 적용하기<!DOCTYPE html&
CSS의 outline(아웃라인) 약식(shorthand) 속성은 요소 테두리 바깥쪽에 특정 스타일(필수 값), 두께, 색상을 지정한 선을 그릴 때 사용합니다. 흥미로운 점은 border 속성과 달리 outline은 요소의 실제 크기(width/height 계산)에 포함되지 않는다는 것입니다. 즉, 레이아웃에 영향을 주지 않고 시각적인 강조 효과만 추가할 수 있습니다. 문법(Syntax) CSS outline 약식 속성의 기본 문법은 다음과 같습니다. Selector { outline: /*값*/ } 약식 속
하이퍼링크를 클릭하거나 키보드로 포커스를 이동하면 기본적으로 링크 주변에 점선(outline)이 나타납니다. 이는 브라우저의 기본 동작으로, 사용자가 현재 어떤 요소에 포커스가 있는지 시각적으로 알려주는 접근성 기능입니다. 하지만 디자인상 이 점선이 거슬린다면 CSS의 outline 속성을 활용해 손쉽게 제거할 수 있습니다.해결 방법링크 요소와 활성(active) 상태, 포커스(focus) 상태의 outline 속성을 none으로 선언하면 됩니다.a, a:active, a:focus { outline: none; }예제 코드
웹 페이지에 기본 마우스 커서 대신 원하는 이미지를 커서로 사용하고 싶다면 CSS의 cursor 속성을 활용하면 됩니다. 커스텀 커서 이미지는 확장자별로 지원 브라우저가 다른데, .cur 파일은 인터넷 익스플로러(IE)에서, .gif와 .png 파일은 Chrome, Firefox, Safari 등 주요 모던 브라우저에서 지원됩니다.적용 방법은 간단합니다. cursor 속성에 url() 함수로 커서 이미지 파일의 경로를 지정하고, 쉼표(,) 뒤에 auto, default, pointer 같은 일반 커서 값을 함께 작성해 주면 됩니다.
CSS의 display 속성에 inline-block 값을 사용하면 요소가 콘텐츠의 실제 너비 또는 지정된 너비 중 더 큰 값을 기준으로 렌더링됩니다. 또한 부모 요소의 가로 공간이 모두 찰 때까지 줄 바꿈을 강제하지 않기 때문에, 인라인처럼 나란히 배치되면서 동시에 블록 수준의 크기 조절이 가능한 하이브리드 방식의 표시 방법입니다.이러한 특성 덕분에 inline-block은 내비게이션 메뉴, 카드 레이아웃, 버튼 그룹 등 요소를 가로로 정렬하면서 각 요소의 width와 height를 자유롭게 설정해야 할 때 매우 유용하게 활용됩니
CSS 상대 위치 지정(relative)이란?CSS에서 요소의 position 속성을 relative(상대)로 지정하면, 해당 요소는 일반적인 문서 흐름(normal flow)에 따라 평소와 같이 렌더링됩니다. 다만 position 값이 relative인 요소는 CSS 위치 지정 속성인 left, right, top, bottom을 사용해 원래 자신의 위치를 기준으로 이동시킬 수 있습니다.여기서 중요한 점은, relative로 이동한 요소가 원래 차지하던 공간은 그대로 유지된다는 사실입니다. 따라서 주변 요소들은 해당 요소가 이동하
CSS의 background 단축 속성(shorthand property)은 요소의 배경을 한 번에 정의할 수 있도록 도와주는 강력한 속성입니다. 이 단축 속성 하나만 사용해도 background-color(배경색), background-image(배경 이미지), background-repeat(반복 여부), background-position(위치), background-clip(클리핑 범위), background-size(크기), background-origin(기준점), background-attachment(고정 방식) 등
CSS는 웹 페이지의 글꼴 스타일을 결정하는 데 핵심적인 역할을 합니다. CSS 글꼴(font) 속성을 활용하면 font-family, font-size, font-weight, font-kerning 등 다양한 요소를 자유롭게 조절할 수 있습니다.특히 font 속성은 font-style, font-variant, font-weight, font-size/line-height, font-family를 한 번에 지정할 수 있는 축약형(shorthand)입니다. 여기에 더해 text-decoration, text-shadow, text
CSS 글꼴(font) 속성을 활용하면 웹 페이지의 텍스트 모양을 자유롭게 꾸밀 수 있습니다. 아래에서 소개하는 속성들을 사용하면 글꼴 종류, 크기, 굵기, 기울임 등 다양한 텍스트 스타일을 손쉽게 적용할 수 있습니다.주요 CSS 글꼴 속성font-family요소에 적용할 글꼴(서체)을 지정하는 속성입니다.font-kerning문자 간격을 균일하게 조정하여 가독성을 높이는 데 사용됩니다. 단, 이 속성은 글꼴마다 지원 여부가 다르다는 점에 유의해야 합니다.font-size글꼴의 크기를 지정합니다.font-stretch일부 글꼴은 c
CSS의 font-family 속성은 선택한 요소에 특정 글꼴을 적용할 때 사용합니다. 브라우저마다 지원하는 글꼴이 다르기 때문에, 하나의 글꼴만 지정하기보다는 여러 개의 대체 글꼴(fallback font)을 함께 명시하여 웹 안전(web-safe) 글꼴을 구성하는 것이 좋습니다. 이렇게 하면 어떤 브라우저나 운영체제에서도 의도한 스타일에 가깝게 화면이 표시됩니다.참고로, 글꼴 이름에 공백이 포함된 경우(예: Segoe Print)에는 반드시 따옴표로 묶어야 하며, 마지막에는 serif, sans-serif, monospace 같