라이즈랩 블로그

전체 아티클 (11)

디자인 트렌드 리서치 방법 - 자료 수집부터 키워드 도출, 기회 영역 매트릭스까지

"트렌디하게 해주세요"라는 모호한 요구를 디자인 근거로 바꾸는 트렌드 리서치의 전 과정을 정리합니다. 트렌드와 유행의 차이, 자료 수집처와 출처 표기, 무드보드 키워드 도출, 기회 영역 매트릭스와 혁신 테마 작성법까지 다룹니다.

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 기본 속성까지 정리합니다.

링크, 문단, 줄바꿈, 이미지, 목록부터 header·main·footer 같은 시맨틱 레이아웃 태그와 주석까지, 실무에서 자주 쓰이는 HTML 태그를 예제와 함께 정리합니다.

HTML이 무엇인지부터 개발자도구로 구조 관찰하기, 기본 코드의 head와 body, 태그·요소·속성·값의 구성까지 기초 개념을 정리합니다.

Visual Studio Code 설치, 필수 확장 프로그램 6종, 한국어 설정, 색 테마, 폴더 열기와 HTML 문서 생성까지 한 번에 정리합니다.