웹 개발에서 요소에는 테두리(border) 색상과 외곽선(outline) 색상을 각각 지정할 수 있습니다. 두 속성의 가장 큰 차이점은 테두리와 달리 외곽선은 레이아웃 공간을 차지하지 않는다는 점입니다. 즉, 외곽선은 요소의 크기나 위치에 영향을 주지 않으면서 시각적으로 강조 효과를 낼 수 있습니다.CSS에서 border-color 속성은 요소의 테두리 색상을 설정하고, outline-color 속성은 외곽선 색상을 설정하는 데 사용됩니다.문법(Syntax)CSS border-color와 outline-color 속성의 기본 문법은
CSS의 text-decoration 속성은 선택한 요소의 텍스트에 다양한 장식 효과를 적용하는 데 사용됩니다. 밑줄(underline), 윗선(overline), 취소선(line-through) 등의 값을 지정할 수 있으며, text-decoration-line, text-decoration-color, text-decoration-style 세 가지 하위 속성을 한 번에 설정할 수 있는 축약형(shorthand) 속성입니다.기본 문법text-decoration 속성의 기본 문법은 다음과 같습니다.Selector { &
HTML에서 모든 링크(<a> 태그)는 브라우저의 기본 스타일에 따라 자동으로 밑줄이 표시됩니다. 하지만 디자인 의도에 따라서는 이 밑줄이 오히려 거슬리는 경우가 많습니다. 이럴 때 CSS의 text-decoration 속성을 사용하면 링크의 밑줄을 아주 간단하게 제거할 수 있습니다.text-decoration 속성이란?text-decoration 속성은 텍스트에 밑줄(underline), 윗줄(overline), 취소선(line-through) 같은 장식 선을 추가하거나 제거하는 데 사용되는 CSS 속성입니다. 이 값을
CSS의 text-transform 속성을 사용하면 요소에 포함된 텍스트의 대소문자 표기 방식을 손쉽게 제어할 수 있습니다. HTML 소스 코드는 그대로 둔 채 화면에 보이는 텍스트만 변환되므로, 검색 엔진 최적화(SEO)나 데이터 구조에는 영향을 주지 않으면서 시각적인 스타일만 바꿀 수 있다는 장점이 있습니다.text-transform 속성에 사용할 수 있는 값은 다음과 같습니다.capitalize — 각 단어의 첫 글자를 대문자로 표시합니다.lowercase — 모든 문자를 소문자로 변환합니다.uppercase — 모든 문자를
웹 페이지의 링크는 개발자의 요구 사항에 따라 자유롭게 스타일링할 수 있습니다. 다만 사용자가 일반 텍스트와 쉽게 구별할 수 있도록 링크에는 별도의 스타일을 적용하는 것이 좋습니다.브라우저는 링크의 상태(state)에 따라 각각 다른 기본 스타일을 적용합니다. 링크 상태별 기본 색상은 아래 표와 같습니다.링크 상태별 기본 색상링크 상태색상Active (활성)#EE0000Focus (포커스)Windows 및 Mac에서는 #5E9ED6 또는 이와 유사한 파란색 계열의 외곽선(outline),Linux에서는 #F07746 외곽선이 표시되
CSS의 font-style 속성은 요소의 텍스트에 normal(보통), italic(이탤릭), oblique(오블리크) 스타일을 지정할 때 사용합니다. 특히 oblique 값에는 각도(deg)를 함께 지정하여 기울기 각도를 세밀하게 조절할 수 있다는 점이 특징입니다.문법(Syntax)CSS font-style 속성의 기본 문법은 다음과 같습니다.Selector { font-style: /*값*/ }사용 가능한 주요 값은 다음과 같습니다.normal — 기울임 없는 일반적인 텍스트 스타일i
CSS를 사용하면 링크에 자유롭게 색상을 지정할 수 있습니다. color 속성은 요소 내 텍스트의 글자색을 설정하는 데 사용되며, 링크(<a> 태그)에도 동일하게 적용됩니다. 링크 상태를 나타내는 가상 클래스(의사 선택자)는 반드시 아래 순서대로 선언해야 하며, 이를 LVHA 순서라고 부릅니다. :link — 아직 방문하지 않은 링크 :visited — 한 번이라도 방문한 적이 있는 링크 :hover — 마우스 포인터를 올려놓은 상태의 링크 :active — 클릭하고 있는(누르는 중인) 링크 문법(Syntax) CS
CSS에서 아웃라인(outline)과 테두리(border)는 비슷해 보이지만 중요한 차이점이 있습니다. 두 속성의 특징을 정확히 이해하면 상황에 맞게 활용할 수 있습니다.아웃라인(Outline)의 특징아웃라인은 공간을 차지하지 않으며, 설정 시 테두리 바깥쪽에 표시됩니다. 주로 요소를 강조(highlight)하는 용도로 사용되며, 테두리와 달리 개별 면(top, right, bottom, left)마다 아웃라인을 따로 지정할 수 없다는 점이 특징입니다.테두리와 마찬가지로 아웃라인도 기본적으로는 표시되지 않습니다. 참고로 Firefo
CSS의 list-style-type, list-style-image, list-style-position 속성을 활용하면 순서 없는 목록(ul)과 순서 있는 목록(ol)의 스타일과 위치를 자유롭게 꾸밀 수 있습니다.문법(Syntax)CSS list-style 속성의 기본 문법은 다음과 같습니다.Selector { list-style: /*값*/ }예제 1: 순서 있는 목록(ol) 스타일 지정다음 예제는 순서 있는 목록에 로마자 대문자 번호를 적용하는 방법을 보여줍니다.<!DOCTYPE html>
HTML은 문서의 내용을 체계적으로 정리할 수 있도록 세 가지 유형의 목록(list)을 제공합니다.순서 없는 목록 <ul> — 항목 앞에 불릿(bullet) 기호가 붙으며, 항목 간에 특별한 순서가 없는 목록입니다.순서 있는 목록 <ol> — 숫자나 문자 등으로 항목에 순서를 부여하는 목록입니다.정의 목록 <dl> — 용어(<dt>)와 그에 대한 설명(<dd>)을 짝지어 표시하는 목록입니다.이 목록들은 서로 중첩(nesting)하여 사용할 수 있으며, CSS의 list-style
CSS를 활용하면 HTML 표(<table>)의 테두리, 여백, 셀 배치 등 다양한 스타일을 자유롭게 정의할 수 있습니다. 표를 꾸밀 때 자주 사용되는 대표적인 CSS 속성은 다음과 같습니다.표 스타일링에 사용되는 주요 CSS 속성border테두리 관련 속성으로, border-width(굵기), border-style(스타일), border-color(색상)를 한 번에 지정할 수 있습니다.border-collapse표의 셀들이 테두리를 공유할지(병합) 아니면 각각 분리된 테두리를 가질지 지정합니다. 값은 collapse
확장 가능한(scalable) 텍스트 크기를 만들려면 CSS에서 글꼴 크기(font-size)를 em 단위로 지정할 수 있습니다. 기본적으로 1em은 16px 또는 12pt에 해당하며, 그 값은 부모 요소의 글꼴 크기를 기준으로 상대적으로 계산됩니다.CSS font-size 속성 문법CSS font-size 속성의 기본 문법은 다음과 같습니다.Selector { font-size: /*값*/ }예제 1: div와 span 요소에 em 단위 적용하기다음 예제는 CSS font-size 속성을 em 단위로 설정하
CSS에서는 백분율(%)과 em 단위를 조합하여 요소의 font-size를 지정할 수 있습니다. 이 방식을 활용하면 브라우저마다 다르게 표시될 수 있는 글자 크기를 일관성 있게 유지할 수 있어, 서로 다른 브라우저 환경에서도 균일한 텍스트 크기를 구현하는 데 매우 유용합니다.기본 문법CSS의 font-size 속성은 다음과 같은 형식으로 작성합니다.Selector { font-size: /*값*/ }예제 1: body에 백분율, p와 span에 em 적용하기아래 예제는 body 요소에는 백분율을, p와 spa
CSS의 font-weight 속성은 요소 내 텍스트 문자의 굵기(boldness)를 지정하는 데 사용됩니다. 이 속성을 활용하면 일반 텍스트부터 매우 굵은 텍스트까지 다양한 두께를 표현할 수 있어, 문서의 위계 구조를 시각적으로 강조하는 데 유용합니다.문법(Syntax)CSS font-weight 속성의 기본 문법은 다음과 같습니다.Selector { font-weight: /*값*/ }font-weight에 사용할 수 있는 주요 값은 다음과 같습니다.normal – 기본 굵기 (400)bold – 굵게 (700)bolde
CSS의 background-repeat 속성은 배경 이미지가 요소 안에서 어떻게 반복될지를 정의하는 데 사용됩니다. 기본적으로 배경 이미지는 요소 전체를 채울 때까지 가로와 세로 방향으로 반복되며, 이 속성을 활용하면 반복 방향과 방식을 자유롭게 제어할 수 있습니다.기본 문법CSS background-repeat 속성의 문법은 다음과 같습니다.Selector { background-repeat: /*값*/ }주요 속성 값background-repeat 속성에 사용할 수 있는 대표적인 값들
CSS의 인접 형제 선택자(adjacent sibling selector)는 특정 요소 바로 뒤에 이어지는 형제 요소를 선택할 때 사용합니다. 여기서 중요한 점은, 선택되는 요소는 반드시 첫 번째 선택자에 해당하는 요소와 같은 부모를 공유하면서 그 바로 다음 순서에 위치해야 한다는 것입니다. 사이에 다른 요소가 끼어 있으면 더 이상 인접하지 않기 때문에 선택되지 않습니다.문법CSS 인접 형제 선택자의 기본 문법은 다음과 같습니다. 두 선택자 사이를 더하기 기호(+)로 연결합니다.element + element { &nbs
CSS text-indent 속성이란?CSS의 text-indent 속성은 블록 요소 안에서 텍스트 첫 번째 줄의 들여쓰기(indentation) 크기를 지정하는 속성입니다. 문단 시작 부분에 여백을 만들어 가독성을 높이고 싶을 때 유용하게 활용할 수 있으며, px·em·rem 같은 길이 단위와 퍼센트(%), 그리고 음수 값까지 다양한 방식으로 지정할 수 있습니다.문법(Syntax)CSS text-indent 속성의 기본 문법은 다음과 같습니다.Selector { text-indent: /*value*/ }양수 값을 지정하면
CSS word-spacing 속성이란?CSS의 word-spacing 속성은 요소 내부에서 단어와 단어 사이의 간격(어간)을 지정하는 데 사용됩니다. 텍스트 가독성을 높이거나 디자인 의도에 맞게 문장의 밀도를 조절할 때 유용하게 활용됩니다.기본 문법CSS word-spacing 속성의 기본 문법은 다음과 같습니다.Selector { word-spacing: /*값*/; }word-spacing 속성에 사용할 수 있는 주요 값은 다음과 같습니다.normal — 기본값으로, 해당 폰트에서 정의한 표준 단어 간격이 적용됩니다.길
CSS를 활용하면 웹 페이지의 링크를 자유롭게 꾸밀 수 있습니다. 텍스트에 색상을 입히거나 배경을 추가하고, 글자 크기를 조절하는 것은 물론, 애니메이션 효과까지 더해 시각적으로 매력적인 링크를 만들 수 있습니다.의사 클래스(Pseudo-class) 작성 순서링크 관련 의사 클래스가 정상적으로 동작하려면 반드시 아래 순서대로 선언해야 합니다.:link — 아직 방문하지 않은 링크:visited — 사용자가 이미 방문한 링크:hover — 마우스 커서를 올린 상태의 링크:active — 클릭되는 순간의 링크이 순서는 흔히 LVHA 규
CSS color 속성이란?CSS의 color 속성은 요소에 포함된 텍스트의 색상을 지정할 때 사용하는 기본적인 스타일 속성입니다. 이 속성 하나만으로도 웹 페이지의 가독성과 디자인 분위기를 크게 바꿀 수 있으며, 상속되기 때문에 부모 요소에 지정하면 자식 요소에도 그대로 적용됩니다.기본 문법CSS color 속성의 기본 문법은 다음과 같습니다.Selector { color: /*value*/ }color 속성에는 다양한 형식의 색상 값을 사용할 수 있습니다.색상 이름 키워드: red, blue, rebecc