CSS에서는 background 속성을 사용하여 요소의 배경을 자유롭게 꾸밀 수 있습니다. 이 속성 하나로 배경색, 배경 이미지, 반복 방식, 위치 등 다양한 배경 관련 값을 한 번에 설정할 수 있습니다.background 속성으로 설정할 수 있는 값background-color – 요소의 배경색 지정background-image – 배경으로 사용할 이미지 지정background-repeat – 배경 이미지의 반복 여부 및 방식 지정background-position – 배경 이미지의 위치 지정background-clip – 배경이
CSS에서 display: inline은 블록(block) 방식과 달리 요소가 새로운 줄에서 시작하지 않고 같은 줄에 이어서 배치되며, 콘텐츠가 차지하는 만큼의 너비만 사용하는 표시 방식입니다. 대표적인 인라인 요소로는 <span>, <a>, <strong> 등이 있습니다.이번 글에서는 CSS의 display: inline 속성값을 실제 예제를 통해 어떻게 구현하는지 자세히 알아보겠습니다.예제 1: display: none과 display: inline 비교아래 예제에서는 숨김 처리되는 문단(disp
웹 개발을 하다 보면 특정 요소를 화면에서 완전히 감춰야 하는 경우가 자주 있습니다. 이럴 때 사용하는 것이 바로 CSS의 display: none 속성값입니다. 이 값이 적용된 요소는 화면에서 사라질 뿐만 아니라, 레이아웃에서 차지하던 공간까지 함께 제거됩니다.참고로 visibility: hidden과 혼동하기 쉬운데, visibility: hidden은 요소를 보이지 않게 할 뿐 원래 차지하던 공간은 그대로 유지된다는 점이 다릅니다. 요소를 완전히 제거하고 싶다면 display: none을 사용하세요.예제 1: 문단(p) 요소
CSS의 display 속성은 웹 페이지에서 요소가 어떻게 렌더링될지 결정하는 핵심 속성입니다. 이 속성을 활용하면 요소를 블록 또는 인라인 형태로 배치하거나, 플렉스·그리드 컨테이너로 변환하고, 심지어 화면에서 완전히 숨기는 것까지 가능합니다.아래 표는 display 속성에서 자주 사용되는 주요 값들을 정리한 것입니다.display 속성의 주요 값번호속성 값 및 설명1inline요소를 인라인 요소로 표시합니다. 텍스트 흐름 안에서 줄바꿈 없이 배치됩니다.2block요소를 블록 요소로 표시합니다. 항상 새로운 줄에서 시작하며 전체
CSS에서 표(table)에 테두리를 추가하려면 border 속성을 사용합니다. border 속성은 표 전체뿐 아니라 개별 셀(th, td)에도 적용할 수 있어, 원하는 디자인에 맞게 유연하게 활용할 수 있습니다.border 속성의 기본 구조border 속성은 아래 세 가지 값을 한 번에 지정할 수 있습니다.테두리 두께(border-width): 예) 2px, 5px테두리 스타일(border-style): 예) dashed(점선), solid(실선), dotted(점선)테두리 색상(border-color): 예) orange, gr
CSS 상대 위치 지정이란?상대 위치 지정(relative positioning)은 요소를 자신의 원래 위치를 기준으로 이동시키는 CSS 배치 방식입니다. 요소는 문서의 일반적인 흐름(normal flow)에서 차지하던 공간을 그대로 유지한 채, 그 위치로부터 상대적인 오프셋이 적용됩니다.상대 위치를 적용하려면 position: relative 속성을 사용합니다. 이후 top, right, bottom, left 속성을 함께 지정하면 원래 위치를 기준으로 요소가 원하는 방향으로 이동합니다.주요 특징요소가 원래 차지하던 공간은 그대로
웹 페이지에서 텍스트 들여쓰기를 적용하려면 CSS의 text-indent 속성을 사용하면 됩니다. 이 속성은 문단의 첫 번째 줄만 들여쓰기할 때 사용되며, px, em, % 등 다양한 단위로 들여쓰기 크기를 지정할 수 있습니다.text-indent 기본 문법selector { text-indent: 값; }값에는 픽셀(px), 배수 단위(em), 퍼센트(%) 등을 사용할 수 있으며, 음수 값을 지정하면 내어쓰기(들여쓰기 반대) 효과도 낼 수 있습니다.예제 1: px 단위로 들여쓰기다음은 30px 만큼 첫 줄을 들여쓰기하는 예제입
CSS에서 배경색을 설정하려면 background-color 속성을 사용합니다. 이 속성은 특정 요소에 적용할 수도 있고, body 태그에 직접 인라인 스타일로 지정하여 페이지 전체의 배경색을 변경할 수도 있습니다.배경색 값은 색상 이름(red, orange 등), HEX 코드(#ff0000), RGB 값(rgb(255, 0, 0)) 등 다양한 형식으로 지정할 수 있습니다.예제 1 – 특정 요소에 배경색 적용하기클래스 선택자를 사용해 특정 문단에만 배경색을 지정하는 예제입니다.<!DOCTYPE html> <html&
CSS의 배경 반복(Background Repeat)은 웹 페이지에서 배경 이미지가 어떤 방식으로 반복되어 표시될지를 설정하는 기능입니다. 이를 위해 background-repeat 속성을 사용하며, 사용 가능한 속성 값은 다음과 같습니다.background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;속성 값 설명repeat – 기본값으로, 배경 이미지를 가로와 세로 방향 모두 반복합니다.repeat-x – 배경 이미지를 가로 방향으로만 반복합니다.repeat-y – 배
웹 페이지에서 배경 이미지의 위치를 조절하고 싶다면 background-position 속성을 사용하면 됩니다. 이 속성은 배경 이미지가 표시되기 시작하는 위치, 즉 시작 지점을 지정하는 역할을 합니다.background-position 속성은 키워드(left, right, top, bottom, center)뿐만 아니라 백분율(%)이나 픽셀(px) 값으로도 지정할 수 있어 매우 유연하게 활용할 수 있습니다.예제 1: 키워드로 위치 지정하기아래 예제에서는 left center 값을 사용하여 배경 이미지를 화면 왼쪽 중앙에 배치합니다
CSS3 멀티 컬럼 레이아웃에서 열 규칙(column rule)은 여러 개의 열 사이에 표시되는 구분선을 의미합니다. 이 구분선을 설정하려면 단축 속성인 column-rule 속성을 사용하면 되며, 이를 통해 아래의 세 가지 하위 속성을 한 번에 지정할 수 있습니다.column-rule-width : 열 사이 구분선의 두께 설정 column-rule-style : 열 사이 구분선의 스타일 설정 column-rule-color : 열 사이 구분선의 색상 설정column-rule 기본 문법column-rule 속성의 값은 다음과 같이
CSS의 translate() 함수는 요소를 수평(X축)과 수직(Y축) 방향으로 이동시켜 화면상의 위치를 다시 배치하는 데 사용되는 2D 변형(transform) 함수입니다. 마진이나 포지셔닝처럼 레이아웃 구조를 변경하지 않고도 요소를 자유롭게 움직일 수 있어, 애니메이션·호버 효과·툴팁 정렬 등 다양한 상황에서 널리 활용됩니다. 기본 문법 transform: translate(tx, ty); tx — X축(가로) 이동 거리: 양수면 오른쪽, 음수면 왼쪽으로 이동합니다. ty — Y축(세로) 이동 거리: 양수면 아래쪽, 음수면
CSS 절대 위치란 무엇인가?절대 위치 지정(absolute positioning)은 CSS에서 요소를 자유롭게 배치할 수 있게 해주는 강력한 기법입니다. position: absolute;가 적용된 요소는 일반 문서 흐름(normal flow)에서 완전히 벗어나며, 가장 가까운 위치 지정된(positioned) 조상 요소를 기준으로 배치됩니다.여기서 위치 지정된 조상이란 position 속성값이 relative, absolute, fixed, 또는 sticky로 설정된 조상 요소를 의미합니다. 만약 위치 지정된 조상 요소가 존재하
CSS에서 목록의 스타일 유형을 변경하려면 list-style-type 속성을 사용합니다. 이 속성을 활용하면 순서 없는 목록(ul)의 불릿 모양이나 순서 있는 목록(ol)의 번호 형식을 자유롭게 지정할 수 있습니다.주요 list-style-type 값disc – 기본값으로 채워진 원형 불릿circle – 빈 원형 불릿square – 사각형 불릿decimal – 1, 2, 3… 형식의 숫자lower-roman / upper-roman – 로마자 소문자(i, ii, iii) 또는 대문자(I, II, III)lower-alpha / u
CSS 절대 단위(Absolute Units)란?CSS에서 절대 길이 단위는 단위들 사이의 관계가 고정되어 있는 값을 의미합니다. 출력 매체(화면 크기, 용지 크기 등)가 이미 확정되어 있거나 물리적 크기가 중요한 경우에 주로 사용됩니다. 대표적인 절대 길이 단위는 다음과 같습니다.번호단위 및 설명1cm센티미터(centimeters)2mm밀리미터(millimeters)3in인치(inches), 1in = 96px = 2.54cm4px *픽셀(pixels), 1px = 1in의 1/965pt포인트(points), 1pt = 1in의
CSS의 list-style-position 속성은 목록 항목(list-item) 앞에 표시되는 마커(불릿)의 위치를 지정하는 데 사용됩니다. 이 속성을 활용하면 목록 기호를 텍스트 블록의 바깥쪽에 배치할지, 안쪽에 배치할지 간단하게 조절할 수 있습니다.list-style-position 속성의 주요 값outside (기본값): 마커가 콘텐츠 흐름 바깥쪽에 위치하며, 일반적인 들여쓰기 형태의 목록으로 표시됩니다.inside: 마커가 콘텐츠 흐름 안쪽에 위치하며, 텍스트와 나란히 배치되어 들여쓰기 없이 표시됩니다.예제다음 예제는 두
웹 페이지에서 기본 불릿(bullet)이나 숫자 대신 이미지를 목록 마커로 사용하고 싶다면, CSS의 list-style-image 속성을 활용하면 됩니다. 이 속성은 <ul>과 <ol> 모두에 적용할 수 있어, 순서 없는 목록과 순서 있는 목록 모두에서 원하는 이미지를 마커로 표시할 수 있습니다.기본 문법list-style-image: url(이미지 경로);예제다음 예제는 ul 목록과 ol 목록에 각각 동일한 이미지를 마커로 적용한 사례입니다.<!DOCTYPE html> <html> &l
웹 페이지에서 텍스트의 가독성을 높이려면 줄 높이(행간) 조절이 필수적입니다. CSS에서는 line-height 속성을 사용하여 텍스트 줄 사이의 간격을 손쉽게 설정할 수 있습니다.line-height 속성 값line-height 속성에 사용할 수 있는 값은 다음과 같습니다.line-height: normal|number|length|initial|inherit;normal – 브라우저 기본값으로, 일반적인 줄 높이를 적용합니다.number – 숫자 값(예: 1.9)을 지정하면 현재 글꼴 크기에 해당 배수만큼 줄 높이가 설정됩니다.
웹 페이지에서 하이퍼링크는 기본적으로 파란색 텍스트에 밑줄이 그어진 형태로 표시됩니다. 이러한 기본 스타일은 때때로 디자인 의도와 맞지 않을 수 있는데, CSS의 text-decoration 속성을 none으로 설정하면 손쉽게 밑줄을 제거할 수 있습니다.기본 예제아래 코드는 a:link(방문하지 않은 링크)와 a:visited(방문한 링크) 상태에서 모두 밑줄을 제거하는 예제입니다.<!DOCTYPE html> <html> <head> <style> a:link { &n
CSS로 링크에 스타일을 적용하려면 먼저 링크가 가질 수 있는 네 가지 상태를 이해해야 합니다. 바로 link(기본 링크), visited(방문한 링크), hover(마우스 오버), active(클릭 중인 링크)입니다. 앵커(<a>) 요소의 가상 클래스(pseudo-class)를 활용하면 각 상태별로 링크를 자유롭게 꾸밀 수 있습니다.링크 상태별 가상 클래스a:link — 아직 방문하지 않은 기본 링크a:visited — 사용자가 이미 방문한 링크a:hover — 마우스 커서를 올렸을 때의 링크a:active — 클릭하고