반응형 none4 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 text-transform — 대소문자 변환 완전 정리 Web Development · CSS TextCSS text-transform —대소문자 변환 완전 정리소문자 그대로 적어도 화면에서는 자동으로 대문자로.trans1 { text-transform: uppercase; } .trans2 { text-transform: capitalize; }html → uppercasecss → uppercasejavascript → capitalizeDESIGN → lowercase1 4가지 값값변환예none (기본)변환 없음html → htmluppercase모두 대문자html → HTMLlowercase모두 소문자HTML → htmlcapitalize각 단어 첫 글자만 대문자hello world → Hello World2 데이터는 그대로, 화면만 변경핵심: HTM.. 2026. 5. 3. CSS text-decoration — 밑줄 · 취소선 완전 정리 Web Development · CSS TextCSS text-decoration —밑줄 · 취소선 · 윗줄 완전 정리링크 밑줄 제거하고 가격에 취소선 긋기a { text-decoration: none; } /* 밑줄 없앰 */ .edited { text-decoration: line-through; } /* 취소선 */underline — 기본 밑줄99,000원 79,000원 — 가격 할인 표시overline — 윗줄 (희소)밑줄 없는 링크 — text-decoration: none스타일링된 밑줄 — underline wavy red1 5가지 값값효과용도none장식 없음링크 밑줄 제거underline밑줄 (기본 a)강조·링크 표시overline윗줄특수 강조 (희소)line-through취소선할인 가격·.. 2026. 5. 3. CSS list-style-type — 불릿 모양 바꾸기 완전 정리 Web Development · CSS ListCSS list-style-type —불릿 모양 바꾸기 완전 정리기본 점에서 사각형·원·없애기까지시작 분석할 코드.sqbullet { list-style-type: square; } .nobullet { list-style-type: none; }square:회사소개도서자료실none:회사소개도서자료실1 list-style-type 값 종류값모양용도disc (기본)● 채운 원일반 ulcircle○ 빈 원2단계 중첩 자동square■ 채운 사각3단계 중첩 자동none없음네비게이션 메뉴decimal1. 2. 3.ol 기본upper-romanI. II. III.책 챕터lower-alphaa. b. c.하위 항목korean-hangul-formal일. 이. 삼.한국어.. 2026. 5. 3. 이전 1 다음 반응형