반응형 border-radius4 외부 CSS 연결 · border 스타일 — link · solid · dotted · double 완전 정리 Web Development · CSS Border외부 CSS 연결 + border 스타일 —link · solid · dotted · double · radiusCSS 파일을 분리하는 법, 그리고 박스에 다양한 테두리·둥근 모서리 적용시작 오늘 분석할 코드이번 코드는 두 가지를 한 번에 보여준다. ① 외부 CSS 파일 연결(), ② article마다 다른 border 스타일로 박스 꾸미기. 같은 article이라도 id로 따로따로 디자인을 적용할 수 있다.실제 출력 미리보기 — 3가지 border 스타일활달한 강아지#pet1: solid + radius 10온순한 강아지#pet2: dotted + radius 20사납지만 복종적#pet3: double + 대각선 radius용어 용어 정리외부 CSS 파.. 2026. 5. 4. 외부 CSS와 float 레이아웃 — 2단·3단 구조 완전 정리 Web Development · CSS Layout외부 CSS와 float 레이아웃 —2단·3단 구조 완전 정리link 외부 CSS 연결, float·clear로 만드는 헤더-본문-사이드바-푸터 구조시작 이 포스팅에서 다루는 것HTML 페이지를 만들 때 가장 먼저 마주치는 두 가지 문제가 있다. (1) CSS를 어디에 둘 것인가 — head 안에 직접? 아니면 별도 .css 파일로 분리? (2) 화면을 어떻게 나눌 것인가 — 헤더/본문/사이드바/푸터 같은 영역을 어떤 방식으로 배치할 것인가? 이 글에서는 외부 CSS 연결법과 float 기반 2단/3단 레이아웃 만드는 법, 그리고 박스에 테두리·라운드를 적용하는 방법까지 한번에 정리한다.학습 흐름: 외부 CSS 연결 → 2단 레이아웃 → 3단 레이아웃 →.. 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. CSS Border — 테두리 스타일·색상·단축 완전 정리 Web Development · CSS BorderCSS Border —테두리 스타일·색상·단축 완전 정리박스의 외곽선을 만드는 모든 방법/* 분리 작성 */ .box1 { border-style: solid; border-width: 5px; border-color: red; } /* 단축 — 한 줄로 */ .box2 { border: 3px dotted black; } /* 한쪽만 */ h1 { border-bottom: 3px solid #ccc; }solid dotted dashed double groove ridge1 Border 3가지 속성속성역할값border-style선 종류solid·dotted·dashed·double·noneborder-width선 굵기1px·2px·thin·medium.. 2026. 5. 4. 이전 1 다음 반응형