Keyword overview
null
The Code Card
CSS Backgrounds property
https://lshjju.tistory.com/829
CSS Backgrounds property
웹 페이지의 시각적 완성도를 결정하는 CSS 배경(Backgrounds) 속성에 대해 알아보겠습니다.배경 속성은 단순히 색상을 칠하는 것을 넘어 이미지를 배치하고, 반복시키고, 고정하는 등 다양한 디자
lshjju.tistory.com
CSS Gradients property
https://lshjju.tistory.com/828
CSS Gradients property
웹 페이지에 풍성한 색감과 깊이감을 더해주는 CSS 그라데이션(Gradients) 속성에 대해 알아보겠습니다.그라데이션은 별도의 이미지 파일 없이 CSS 코드만으로 두 개 이상의 색상이 부드럽게 섞이는
lshjju.tistory.com
CSS Backgrounds training
https://www.w3schools.com/css/css_background.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
CSS Gradients training
https://www.w3schools.com/css/css3_gradients.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
CSS gradient generator
https://lshjju.tistory.com/759
CSS gradient generator
몇 번의 클릭만으로 멋진 색상 그라데이션을 만들기https://cssgradient.io/ CSS Gradient – Generator, Maker, and BackgroundAs a free CSS gradient generator tool, this website lets you create a colorful gradient background for your websit
lshjju.tistory.com
Code training
09-1 배경색과 배경 범위 지정하기
배경색을 지정하는 background-color 속성
배경색의 적용 범위를 조절하는 background-clip 속성
배경 적용 범위 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/bg-clip.html
09-2 배경 이미지 지정하기
웹 요소에 배경 이미지를 넣는 background-image 속성
기본 배경 이미지 넣기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/bg-1.html
배경 이미지의 반복 방법을 지정하는 background-repeat 속성
배경 이미지의 위치를 조절하는 background-position 속성
키워드
백분율(%)
크기
불릿 대신 배경 이미지 사용하기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/bg-2.html
배경 이미지의 적용 범위를 조절하는 background-origin 속성
배경 이미지를 고정하는 background-attatchment 속성
배경 이미지 배치하고 고정하기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/bg-3.html
background 속성 하나로 배경 이미지 제어하기
배경 이미지 크기를 조절하는 background-size 속성
배경 이미지 크기 조절하기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/bg-4.html
실습 - 문서 전체에 배경 이미지 넣기
1단계 배경 이미지 스타일 추가하기
2단계 글자색 바꾸고 그림자 효과 주기
준비
https://github.com/lshjju/doit-hcj-new/blob/main/09/background.html
결과
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/background.html
09-3 그러데이션 효과로 배경 꾸미기
선형 그러데이션
방향
방향을 사용해 선형 그러데이션 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/linear-1.html
각도
각도를 사용해 선형 그러데이션 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/linear-1.html
색상 중지점
원형 그러데이션
모양
원형 그러데이션의 모양 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/radial-1.html
크기
위치
위치 키워드를 사용해 원형 그러데이션 만들기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/radial-3.html
색상 중지점
원형 그러데이션의 색상 중지점 지정하기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/radial-4.html
그러데이션을 사용한 패턴 만들기
그러데이션 반복하기
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/repeating.html
https://github.com/lshjju/doit-hcj-new/blob/main/09/results/pattern.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 |
| Box model (0) | 2025.11.06 |
| Text style (0) | 2025.11.06 |
| CSS basic (0) | 2025.11.06 |