반응형 CSS22 HTML 이벤트 메일 — table 레이아웃 · 인라인 스타일 완전 정리 Web Development · Email HTMLHTML 이벤트 메일 —table 레이아웃 · 인라인 스타일왜 이메일은 아직도 table과 인라인 style만 쓰는가 style="background:#808080"> style="background:#fff; margin:0 auto;"> ... 메일 콘텐츠 ... 1 왜 이메일은 table 레이아웃?2026년에도 이메일 클라이언트(Outlook·Naver Mail·Gmail 일부)는 모던 CSS를 제대로 지원하지 않는다. flex·grid·position 등이 깨질 수 있어 1990년대 방식으로 작성하는 게 안전.※ Outlook은 여전히 Word 렌더링 엔진을 사용하기 때문에 모던 CSS 거의 불가. table+inline style이 호.. 2026. 5. 4. CSS Background — clip · origin · position 완전 정리 Web Development · CSS BackgroundCSS Background —clip · origin · position 완전 정리배경이 박스의 어디부터 시작하고 어디까지 그려지는가1 박스 모델 3영역CSS 박스는 border / padding / content 3개 영역으로 나뉜다. 배경이 어느 영역까지 적용되는지를 결정하는 게 background-clip / origin.┌──────────── border-box ────────────┐│ ┌──────── padding-box ────────┐ ││ │ ┌────── content-box ──────┐ │ ││ │ │ 실제 콘텐츠 │ │ ││ │ └─────────────────────────┘ │ ││ └──────────────────.. 2026. 5. 4. CSS display — block · inline · inline-block 완전 정리 Web Development · CSS DisplayCSS display —block · inline · inline-block 완전 정리박스 형태를 결정하는 가장 기본 속성 + 가로 메뉴 만들기#block img { display: block; } /* 인라인을 블록으로 */ nav ul li { display: inline-block; } /* 가로 메뉴 */1 3가지 핵심 display 값block한 줄 통째로다음 요소는 새 줄width/height OKdiv, p, h1, ul, sectioninline글자처럼 흐름 안같은 줄에 이어짐width/height 무시span, a, em, strong, imginline-block글자처럼 + 박스 속성같은 줄에 + width/height OK가로 메뉴·.. 2026. 5. 4. CSS box-shadow — 박스 그림자 완전 정리 Web Development · CSS EffectCSS box-shadow —박스 그림자 완전 정리카드 입체감을 만드는 한 줄 — 4개 값 + 1개 옵션.box1 { box-shadow: 2px -2px 5px 0px black; } .box2 { box-shadow: 5px 5px 15px 5px gray; }미세 그림자 중간 그림자 진한 그림자 inset 안쪽 큰 그림자1 5가지 값 — 순서대로box-shadow: x y blur spread color;위치의미예1번째x — 가로 (양수=오른쪽)5px2번째y — 세로 (양수=아래)5px3번째blur — 흐림 (선택)15px4번째spread — 그림자 크기 (선택)5px5번째color — 색 (선택)gray, rgba(0,0,0,0.3)2 inset .. 2026. 5. 4. 이전 1 2 3 4 ··· 6 다음 반응형