Keyword overview
Web font
CSS color property
The Code Card
CSS font Property
https://lshjju.tistory.com/765
CSS font Property
웹 디자인의 시각적 언어이자 가독성의 핵심인 CSS 폰트(font) 속성에 대해 정리해 드리겠습니다.폰트 속성은 글꼴의 종류, 크기, 굵기 등을 제어하여 텍스트에 생명력을 불어넣는 역할을 합니다.1
lshjju.tistory.com
Web font
https://lshjju.tistory.com/766
Web font
**웹 폰트(Web Font)**란 사용자의 컴퓨터에 해당 서체 파일이 설치되어 있지 않아도, 웹 브라우저가 서버에서 폰트 파일을 자동으로 다운로드하여 화면에 보여주는 기술을 말합니다.쉽게 말해, 디
lshjju.tistory.com
구글 웹폰트 사용 방법
https://lshjju.tistory.com/677
구글 웹폰트 사용 방법
구글웹폰트 사용 방법구글웹폰트 서비스 유아이는 놀라울 정도로 자주 변경 됩니다.시간이 조금만 지나도 아래 매뉴얼과 유아이가 달라질 수 있습니다.그래도 얼추 맥락은 비슷하니까 센스있
lshjju.tistory.com
2025년 현재 가장 트렌디하고 실무 활용도가 높은 구글 웹폰트 10가지
https://lshjju.tistory.com/678
2025년 현재 가장 트렌디하고 실무 활용도가 높은 구글 웹폰트 10가지
UI 디자인을 시작할 때 어떤 폰트를 써야 할지 모르겠다면 가장 인기있는 폰트부터 시작해보는 것을 추천 합니다. 🇰🇷 한글 폰트 추천 (Top 5)한글 UI 디자인의 핵심은 **'가독성'**과 **'다양한 두
lshjju.tistory.com
Fonts Knoeledge - 타이포그래피 폰트 정보 자세히 알아보기
https://fonts.google.com/knowledge
Fonts Knowledge - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
font awesome 아이콘 폰트 사용하기
font awesome 아이콘 폰트 사용하기
코딩할 때 이미지 아이콘 보다 폰트 아이콘이 더 효율적인 경우가 많습니다.아이콘 폰트를 사용하는 간단한 방법을 알아봅니다. 순서CDN 코드 카피코드에 CDN 페이스트아이콘 서치아이콘 선택아
lshjju.tistory.com
font awesome 아이콘 활용하기 공식 문서
Font Awesome Docs
Official documentation for Font Awesome.
docs.fontawesome.com
CSS color property
CSS color property
웹 페이지의 분위기와 브랜드 이미지를 결정하는 가장 직관적인 속성인 CSS 색상(Color) 속성에 대해 알아보겠습니다.CSS에서 색상을 지정하는 방법은 아주 다양하며, 각 방법은 사용 목적에 따라
lshjju.tistory.com
CSS text style property
https://lshjju.tistory.com/767
CSS text style property
콘텐츠의 가독성과 분위기를 결정하는 CSS 텍스트 스타일 속성들에 대해 알아보겠습니다.텍스트 속성은 단순히 글자를 나열하는 것을 넘어, 문단의 흐름과 강조 사항을 정교하게 제어하는 역할
lshjju.tistory.com
CSS list-style property
https://lshjju.tistory.com/768
CSS list-style property
정보를 구조화하여 보여주는 CSS 리스트(list-style) 속성에 대해 알아보겠습니다.이 속성은 불릿(bullet)의 모양을 바꾸거나, 이미지를 사용하고, 번호의 위치를 조정하는 등 목록의 스타일을 결정합
lshjju.tistory.com
CSS list-style property example
CSS list-style property example
리스트스타일 코드 예제list-style-type는 순서 목록의 번호 스타일이나 순서 없는 목록의 불릿 스타일을 지정해주는 속성입니다. disc : 속이 찬 원형 블릿circle : 속이 빈 원형 블릿square : 속이찬 사
lshjju.tistory.com
CSS Tables property
https://lshjju.tistory.com/769
CSS Tables property
최신 레이아웃 시스템 이전부터 데이터를 구조화하는 데 사용된 CSS 테이블(Tables) 속성에 대해 알아보겠습니다.테이블 속성은 표의 가독성을 높이고, 테두리가 겹치는 방식이나 제목의 위치 등
lshjju.tistory.com
Code training
07-1 글꼴 관련 스타일
글꼴을 지정하는 font-family 속성
글자 크기를 지정하는 font-size 속성
절대 크기로 글자 크기 지정하기
절대 크기로 글자 크기 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/font.html
상대 크기로 글자 크기 지정하기
이탤릭체로 글자를 표시하는 font-style 속성
글자 굵기를 지정하는 font-weight 속성
글꼴 관련 스타일 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/tstyle.html
07-2 웹 폰트와 아이콘 폰트 사용하기
웹 폰트란
아이콘 폰트란
실습 - 구글 폰트 사용하기
1단계 구글 폰트 사이트에서 원하는 웹 폰트 찾기
2단계 웹 폰트 추가하기
3단계 CSS에 웹 폰트 적용하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/07/webfont.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/webfont.html
실습 - 아이콘 폰트 사용하기
1단계 준비 파일 살펴보기
2단계 폰트 어썸 CDN 연결하기
3단계 아이콘 폰트 사용하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/07/icon.html
결과https://github.com/lshjju/doit-hcj-new/blob/main/07/results/icon.html
07-3 텍스트 관련 스타일
글자색을 지정하는 color 속성
16진수로 표현하는 방법
hsl과 hsla로 표현하는 방법
색상을 영문 이름으로 표현하는 방법
rgb 와 rgba 로 표현하는 방법
실습 - 텍스트 색상 바꾸기
1단계 색상 이름을 사용해 글자색 변경하기
2단계 rgb/rgba 값 사용하기
3단계 색상표에서 색상 선택하기
4단계 투명도 조절하기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/07/color.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/color.html
텍스트를 정렬하는 text-align 속성
텍스트 정렬하기
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/text-align.html
줄 높이를 조정하는 line-height 속성
줄 높이 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/line-1.html
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/line-2.html
텍스트에 밑줄, 윗줄, 최소선을 표시하는 text-decoration 속성
텍스트에 밑줄 표시하기
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/text-decoration.html
텍스트에 그림자 효과를 추가하는 text-shadow 속성
텍스트에 그림자 효과 추가하기
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/text-shadow.html
텍스트의 대소 문자를 변환하는 text-transform 속성
글자 일부 또는 전체를 대문자로 바꾸기
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/text-transform.html
글자 간격을 조절하는 letter-spacing word-spacing 속성
07-4 목록 스타일
불릿 모양과 번호 스타일을 지정하는 list-style-type 속성
순서 없는 목록과 알파벳 대문자 목록 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/list-1.html
불릿 대신 이미지를 사용하는 list-style-image 속성
목록을 들여 쓰는 list-style-position 속성
목록 속성을 한꺼번에 표시하는 list-style 속성
07-5 표 스타일
표 제목의 위치를 정해 주는 caption-side 속성
표에 테두리를 그려 주는 border 속성
셀 사이의 여백을 지정하는 border-spacing 속성
표와 셀 테두리를 합쳐 주는 border-collapse 속성
표와 셀 테두리 합치기
https://github.com/lshjju/doit-hcj-new/blob/main/07/results/table-2.html
Copyright
이 포스팅의 깃허브코드와 강의 목차 저작권은 이지스퍼블리싱에 있습니다.
https://www.easyspub.co.kr/20_Menu/BookView/696/PUB
'Do it! CSS 웹 표준의 정석' 카테고리의 다른 글
| Flexbox layout (0) | 2025.11.06 |
|---|---|
| RWD and Media query (0) | 2025.11.06 |
| Image and Gradient (0) | 2025.11.06 |
| Box model (0) | 2025.11.06 |
| CSS basic (0) | 2025.11.06 |