라이즈랩 블로그

CSS (7)

CSS 마진 패딩 차이 - 박스모델부터 여백 방향, 축약 표기까지

CSS 박스모델(content, padding, border, margin)의 구조와 마진과 패딩의 차이, 언제 무엇을 써야 하는지 판단 기준, margin 축약 표기 순서까지 예제로 정리합니다.

CSS 상속의 개념과 상속되는 속성 목록(font-family, font-size, color 등), 그리고 a 태그의 색상, h1의 크기, button처럼 상속이 무시되는 예외 케이스까지 예제로 정리합니다.

한글 웹폰트 프리텐다드를 CDN으로 적용하는 방법부터 font-weight 굵기 단위, font-size, text-align 정렬, 행간 line-height 계산법, 자간 letter-spacing까지 CSS 텍스트 속성을 한 번에 정리합니다.

HTML의 형제 관계와 부모-자식 관계 구조를 예제로 비교하고, 공백으로 범위를 좁히는 CSS 자손 선택자 사용법까지 정리합니다. 레이아웃의 기본이 되는 HTML 구조 개념입니다.

CSS width와 height의 기본값 auto 개념, px로 크기를 고정할 때 생기는 문제, 그리고 피그마 시안의 width 1920px을 그대로 쓰면 가로 스크롤이 생기는 이유까지 예제로 정리합니다.

CSS로 배경색 넣는 법(background)과 테두리 만드는 법(border)을 정리합니다. 색상명과 HEX 코드 사용법, border 축약 속성의 순서, 실선·점선 스타일까지 예제로 배웁니다.

CSS가 무엇인지부터 인라인·내부·외부 스타일 시트 세 가지 작성 방식, 선택자·속성·값의 문법 구조, width·color·background·border 기본 속성까지 정리합니다.