CSS: 배경 색상&이미지 삽입(0412)

오늘은 이미지 배경에 색상을 넣고 이미지 삽입하는 법을 배웠다

배운 내용을 표로 정리해보면서 복습해보았다!

 

---

1. 태그 정리

속성	설명
background-color	배경 색상 지정
background-image	배경 이미지 삽입
background-repeat	이미지 반복
background-positon	이미지 위치
list-style-type	리스트 모양 바꾸기
list-style-image	리스트 사진으로 바꾸기

이걸 웹꾸미기에 적응해보도록 하겠다.

 

---

2. 배경 색상 지정&이미지 삽입

결과

코드 풀이

위의 코드에 대해 자세히 알아보도록 하겠다!

먼저 웹 전체를 꾸미기 위해서는 스타일 안에 body 태그를 이용해야 한다.

background-color

background-color태그를 이용하여 배경색을 추가해주었다.

background-image

background-image를 사용하여 웹페이지에 이미지를 추가 해주었다 

여기서 주의 할점!! ※이미지는 같은 파일에 저장해주어야 한다

만약 다른 파일에 있을 때는 어떻게 해야하는지 맨 마지막에 쓰도록 하겠다

 

background-repeat: no-repeat;

그리고 background-repeat: no-repeat; 을 할 때는 꼭 no-repeat으로 하는 것이 좋다

만약 그냥 repeat으로 하게된다면

repeat

이렇게 똑같은 사진이 반복적으로 나오는 것이다

background-position: center top

background-position에 center top을 넣어 사진을 가운데로 고정 시켜 주었다

 

그 후 다른 문구에다가도 배경색을 넣어 주었다

내한성의 낙엽관목 텍스트의 색을 아이디 선택자를 이용하여 색을 넣어주었다.

 

---

2. 리스트 모양 바꾸기

2-1) 리스트 모양 정사각형으로 바꾸기

list-style-type: square;

스타일 안에 위의 코드를 넣어 정사각형 리스트 모양으로 바꾸어 주었다

 

2-2) 리스트 모양안에 사진 넣기

list-style-image: url("파일이름.jpg")

위의 코드를 넣어 리스트 모양안에 이미지를 넣어주었다.

이미지 크기는 15정도가 적당한 것 같다.

 

---

3. 이미지 경로  (다른 파일에 사진 있을때)

1. 절대 경로

절대 경로는 파일 또는 리소스의 전체 경로를 지정하는 방식이다.

이 경로는 웹 사이트의 루트 디렉토리(웹 서버의 루트 디렉토리)부터 시작하여 목표 파일까지의 경로를 나타낸다.

C:/day_0414/파일이름.jpg
https://www.example.com/images/pic.jpg

 

2. 상대 경로 

상대 경로는 현재 문서 또는 리소스가 있는 위치를 기준으로 경로를 지정하는 방식이다.

상대 경로는 웹 페이지 내에서 파일 및 디렉토리 간의 상대적인 위치를 나타낸다.

images/pic.jpg (현재 디렉토리 내의 "images" 디렉토리에 있는 "pic.jpg" 파일)
../images/pic.jpg (상위 디렉토리 내의 "images" 디렉토리에 있는 "pic.jpg" 파일)

 

경로
절대경로	c:∖∖day_0414∖∖파일이름.jpg
상대경로	web/파일이름.jpg or  ..∖파일이름

 

4. 과제

마지막은 과제이다 

선생님이 주신 트리 카드사진과 이모티콘 무료받기 사진 2장을 받아 만들었다
배경에는 사진을 하나만 넣을 수 있어서

이모티콘 무료받기는 이미지 삽입으로 넣어야 된다!!

그리고 나머지는 글자는 노랑색과 하양색으로 바꿔주었다

---

배운건 여기까지 !!