CSS의 height 속성은 이미지의 높이를 지정할 때 사용합니다. 이 속성에는 픽셀(px)처럼 고정된 길이 단위나 백분율(%) 값을 사용할 수 있으며, 백분율(%)로 지정할 경우 이미지가 포함된 부모 요소(박스)를 기준으로 높이가 계산됩니다.예제아래 코드를 실행하면 이미지의 높이를 직접 설정해 볼 수 있습니다.<html> <head> </head> <body> <img styl
HTML 테이블을 스타일링할 때 border-collapse 속성은 셀 테두리가 서로 어떻게 표시될지를 결정하는 핵심 요소입니다. 이 속성은 크게 collapse(병합)와 separate(분리) 두 가지 값을 가지며, 각각 테이블의 외관을 완전히 다르게 만듭니다. collapse와 separate의 차이점 separate 값은 각 셀의 테두리를 독립적으로 유지합니다. 즉, 인접한 셀 사이에 간격이 생기고, 각 셀이 자신만의 테두리를 가지게 됩니다. 반면 collapse 값은 인접한 셀들의 테두리를 하나로 병합하여 깔끔하고 일체감 있
CSS의 padding-left 속성은 요소의 왼쪽 안쪽 여백(패딩)을 지정합니다. 이 속성은 요소의 내용과 왼쪽 테두리 사이의 간격을 조절하며, 값으로는 길이 단위(px, em, pt 등) 또는 백분율(%)을 사용할 수 있습니다.사용 가능한 값길이(length) : px, pt, cm, em 같은 고정 단위로 왼쪽 패딩을 설정합니다.백분율(%) : 부모 요소(컨테이닝 블록)의 너비를 기준으로 왼쪽 패딩을 설정합니다.예제 <html> <head> <
CSS에서 list-style 속성은 목록과 관련된 여러 개별 속성들을 하나로 묶어주는 단축 속성(shorthand)입니다. 이 속성을 사용하면 list-style-type, list-style-position, list-style-image 등의 목록 관련 속성들을 별도로 작성하지 않고, 단 하나의 표현식으로 모두 지정할 수 있습니다.list-style 속성의 구성 요소list-style 단축 속성은 다음 세 가지 하위 속성을 포함합니다.list-style-type: 불릿(bullet)의 모양을 지정합니다. 예를 들어 square
CSS의 marker-offset 속성은 목록에서 마커(불릿 기호)와 해당 마커에 연결된 텍스트 사이의 거리를 지정하는 데 사용됩니다. 이 속성을 활용하면 목록 항목의 불릿과 본문 텍스트 사이의 간격을 원하는 만큼 넓히거나 좁힐 수 있습니다. 사용 예제 다음 예제는 list-style과 함께 marker-offset 속성을 적용하여 마커와 텍스트 사이의 간격을 2em으로 설정한 모습입니다. <html> <head> </head> <body> <ul
HTML5 자리 표시자(Placeholder) 속성이란?HTML5에는 placeholder(자리 표시자)라는 새로운 속성이 도입되었습니다. 이 속성은 <input>과 <textarea> 요소에 사용할 수 있으며, 사용자가 해당 필드에 어떤 값을 입력해야 하는지 미리 힌트를 보여주는 역할을 합니다.다음은 자리 표시자가 실제로 어떻게 표시되는지 보여주는 예시입니다. 이메일 입력란에 나타나는 email@example.com이 바로 자리 표시자입니다.기본 사용 예제아래 코드를 실행하면 placeholder 속성이 어떻
웹 페이지에서 <div> 요소를 화면 가운데에 배치하는 것은 레이아웃 작업에서 매우 자주 사용되는 기법입니다. 정렬 방식은 크게 두 가지로 나눌 수 있습니다. 하나는 HTML의 align 속성을 직접 사용하는 방법이고, 다른 하나는 CSS를 활용하는 방법입니다. CSS 방식이 구조와 스타일을 분리할 수 있어 더 권장되는 방식입니다. 방법 1: HTML의 align 속성 사용하기 가장 간단한 방법은 <div> 태그에 align=center 속성을 추가하는 것입니다. <html> <head>
DOCTYPE 태그 없이 SAP BSP 애플리케이션에서 CSS3 활용하기SAP BSP(Business Server Pages) 애플리케이션을 개발하다 보면 기존 코드를 수정하지 않고 DOCTYPE 태그를 추가해야 하는 상황이 발생할 수 있습니다. 이럴 때 웹 서버 설정, jQuery, 또는 다른 UI 라이브러리를 활용하는 방법을 고려해 볼 수 있습니다.웹 서버 및 UI 라이브러리 활용 방법BSP 애플리케이션의 소스 코드를 직접 변경하지 않고도 DOCTYPE 태그를 적용하는 가장 간단한 방법은 웹 서버 단에서 처리하거나 jQuery와
개요SAPUI5에서 테이블의 특정 행(row)에 CSS 속성을 지정해야 하는 경우가 종종 있습니다. 이럴 때는 테이블에 미리 정의되어 있는 CSS 클래스(sapMListTbl 등)와 함께 사용자 정의 클래스(custom class)를 조합하여 스타일을 적용할 수 있습니다.사용자 정의 CSS 클래스 작성 예시아래와 같이 테이블의 기본 CSS 선택자 뒤에 원하는 클래스 이름을 붙여 스타일을 정의하면, 해당 클래스가 적용된 행의 셀에만 스타일이 반영됩니다..sapMListTbl .<your class name> {
웹 페이지를 인쇄할 때 버튼, 광고, 내비게이션 메뉴처럼 화면에는 필요하지만 종이에는 불필요한 요소가 있을 수 있습니다. 이런 요소들은 CSS의 @media print 미디어 쿼리를 활용하면 간단하게 숨길 수 있습니다.1. 인쇄용 CSS 스타일 작성하기먼저 <style> 태그 안에 @media print 규칙을 추가하고, 숨기고 싶은 요소에 display: none 속성을 지정합니다.<style> @media print { .noprint { display: none; } } <
CSS로 단순한 아티클 레이아웃 이상의 복잡한 웹사이트 레이아웃을 스타일링하다 보면 코드가 순식간에 엉망이 되기 쉽습니다. 그 결과 다양한 레이아웃 문제가 발생하곤 하죠. 가장 흔히 겪는 CSS 레이아웃 문제는 다음과 같습니다. 요소가 서로 겹치는 현상 (대체로 overflow 문제) 요소가 무너지거나 붕괴하는 현상 (대체로 margin 문제) 불필요한 여백 발생 (원인은 매우 다양함) 이런 레이아웃 문제를 즉시 시각적으로 파악하는 아주 간단한 방법이 있습니다. 바로 CSS의 전체 선택자(universal selector)
CSS는 단순히 텍스트 색상이나 레이아웃을 지정하는 도구를 넘어, 그 자체로 강력한 시각 표현 수단으로 발전해 왔습니다. 아래 예제는 자바스크립트 한 줄 없이 오직 순수 CSS만으로 구현한 셔터(shutter) 애니메이션 효과입니다.어떻게 가능할까?이러한 효과는 겉보기에는 복잡해 보이지만, 사실 CSS의 핵심 기능들이 조합된 결과입니다.가상 요소(Pseudo-elements): ::before, ::after를 활용해 추가적인 DOM 요소 없이 시각적 레이어를 만들어냅니다.트랜지션(Transition): 상태 변화에 따라 부드럽고
제가 가장 자주 받는 CSS 질문 중 하나가 바로 CSS에서 background와 background-color는 어떻게 다른가요?입니다. 이것이 헷갈리는 이유는 많은 개발자들이 요소에 배경색을 지정할 때 두 속성을 마치 동일한 것처럼 섞어서 사용하는 모습을 흔히 볼 수 있기 때문입니다. 그러나 두 속성은 전혀 다릅니다. background(-color가 붙지 않은) 속성은 하나의 선언만으로 요소의 모든 배경 관련 속성을 한 번에 설정할 수 있습니다. 예를 들어 배경색과 한 번만 표시되는(no-repeat) 이미지, 그리고 이미지
이 튜토리얼에서는 CSS의 animation 속성을 사용하여 이미지를 끊임없이 회전시키는 방법을 단계별로 알아봅니다.1단계: HTML 마크업 준비하기먼저 이미지와 몇 가지 속성이 포함된 HTML 마크업이 필요합니다.<img src=[InstallDir_ChannelDir]{$UploadDir}/202203/2022033109325250.png class=rotate linear infinite width=150 height=150 />작성한 이미지는 아래와 같이 화면에 나타납니다.2단계: 유틸리티 클래스 이
CSS로 요소를 가운데 정렬하는 일은 생각보다 훨씬 어려워 보입니다. 특히 수평과 수직을 동시에 정렬해야 할 때 더욱 그렇죠. 이번 글에서는 최신 CSS 기법과 함께 약간 구식이지만 여전히 유용한 기법까지 모두 소개하겠습니다. 텍스트 요소 수평 가운데 정렬 텍스트를 수평으로 가운데 정렬하는 것은 아주 간단합니다. text-align 속성에 center 값을 지정하면 됩니다. h1 { text-align: center; } 위 코드는 모든 텍스트 요소에 적용됩니다. 블록 요소(텍스트 외) 수평 가운데 정렬 텍스트가 아닌 요소를 수
CSS 주석이란 무엇인가요? CSS 스타일시트 안에는 자신 또는 팀원들을 위해 코드를 간단히 설명(문서화)하는 주석을 작성할 수 있습니다. CSS에서 주석을 작성하려면 다음과 같은 문법을 사용합니다: /* 이것은 CSS 주석입니다 */ /* */ 형식은 CSS에서 주석을 작성할 수 있는 유일한 방법이기 때문에, 한 줄 주석과 여러 줄 주석 모두에 동일하게 사용됩니다. /* 이것은 여러 줄로 작성된 CSS 주석입니다. 블록 주석이라고도 부릅니다. */ 코드 주석 처리 예시 다음은 주석 문법을 활용해
CSS Flexbox에서 이미지가 가로로 늘어나는 현상 방지하는 방법 CSS Flexbox 레이아웃에서 이미지가 부모 컨테이너 너비만큼 가로로 늘어나는 문제를 막는 방법을 소개합니다. Flexbox에는 의외로 당황스러운 기본 동작이 하나 있습니다. 바로 이미지가 부모 컨테이너의 전체 너비만큼 가로 방향으로 늘어나는 것입니다. 예를 들어 flex-direction: column이 적용된 부모 요소(플렉스 컨테이너) 안에 자식 요소(플렉스 아이템)로 이미지가 있다면, 이미지의 원래 높이는 그대로 유지되지만 너비는 부모 컨테이너만큼 늘어
드롭캡(Drop Cap)은 텍스트 블록의 첫 번째 글자를 가리킵니다. 주로 문서의 첫 단락(리드 문단)에 사용되며, 지금 읽고 계신 이 문단처럼 나머지 텍스트와 구별되도록 스타일링해 시선을 사로잡습니다. 드롭캡은 타이포그래퍼와 비주얼 디자이너가 독자의 시선을 원하는 지점으로 정확히 이끌기 위해 활용하는 강력한 시각적 장치입니다. 드롭캡을 디자인하는 정해진 방법은 없습니다. 가장 널리 쓰이는 방식은 본문과 동일한 서체를 사용하되 첫 글자의 크기를 눈에 띄게 키우고, 경우에 따라 굵게(bold) 처리하는 것입니다. 이 글의 첫 단락 드
타이포그래피에는 다양한 강조 기법이 있으며, 그중 가장 널리 쓰이는 것이 바로 이탤릭체와 볼드체입니다. 이탤릭과 볼드는 원래 서체 디자인의 변형 형태로, 각각 다른 방식으로 텍스트에 시각적 강조 효과를 줍니다. 이 글에서는 타이포그래피에서 이탤릭체와 볼드체를 언제 사용해야 하는지, 그리고 하나의 문서 안에서 두 가지를 함께 사용해도 괜찮은지 자세히 알아보겠습니다. 이 글의 대부분 텍스트는 일반 굵기(regular)의 Alegreya 서체로 작성되었습니다. 참고로 CSS에서 font-weight 속성의 기본값은 400(regular)
타입 스케일(type scale)은 제품 속에서 균형 잡히고 조화로운 구성을 만들기 위해 다양한 텍스트 요소를 표현할 때 사용하는, 신중하게 선별된 글꼴 크기의 모음입니다. 자체 타입 스케일의 동일한 글꼴 크기를 일관되게 사용하면 디자인에 자연스럽게 통일성이 생기고, 위계와 우선순위가 뒤죽박죽인 제품을 만들 가능성을 크게 줄일 수 있습니다. 타입 스케일은 타이포그래픽 스케일(typographic scale)이라고도 불립니다. 제약이 일관성을 만든다 원리적으로 타입 스케일은 간격(spacing) 스케일이나 색상 팔레트와 같은 방식으