[UI/UX]패스트캠퍼스 챌린지 39일차 - css background

 

오늘은 39일차 룰루!

벌써 40일차가 내일이라니 두근,,,

퇴근하고 역시 집에오면 기진맥진,,

 

헬스장 끊고 회사에 운동지원금 신청할려고 영수증 깜빡해서 다시 갔다왔따-!

다이어트 다시 시작.......!

 

회사에서 요즘 웹디자인쪽 거의 안하고

인쇄물쪽만 하고있다 ^_^

근데 난 인쇄물도 레이아웃을 잡는 면에선 넘 재밌다

포토샵 잔뜩 뿌리는거만 빼면 말이다 하하하하하

 

 

---

css중에 배경이미지 넣는 것을 배웠다.

 

BACKGROUND 넣는 법 및 용어

1. http://heropy.blog로 접속해서  개발자 도구(f12)를 열고 왼쪽 하단에 선택 메뉴를 눌른다.
2. 로고 부분을 선택한다.
3. 오른쪽에 로고 이미지 주소를 우클릭해 open in new tab을 클릭한다.
4. 페이지를 열고 위쪽에 있는 코드를 복사한다.
5. background-image코드를 입력하고 url에 아까 복사한 주소를 큰따옴표 사이에 입력한다.
6. 백그라운드 이미지의 사이즈는 backgroud-size로 조절
7. 백그라운드의 반복은 background-repeat으로 조절 가능
 *기본이 repeat이고 반복안할려면 no-repeat으로 막을 수 있다.
8. 이미지의 위치 변경은 background-position으로 변경 가능
 *기본값은 left top;(왼쪽상단, 기본값), center; , center right;등등 변경가능 
**css속성에는 기본값이 들어가져있다, 많은 곳에서

 

---

 

 

BACKGROUND 실습..!

 

 

아주 간단한 에이치티에메르

 

html 코드
<div class="container">
<div class="item">apple</div>
</div>

 

 

 

 

겁나게 긴 css코드 ㅋㅋ

css코드

.container .item{
 width:200px;
 heignt:100px;
 margin:10px;
 padding:20px;
 border-radius :10px;
 background-color:blue;
 background-image: url( );
background-size: 100px;
background-repeat: no-repeat;
 background-position: center-right;
}

 

+)이거보다 내가 응용해서 더 많은 코드들을 만들었는데

코드펜에서 복붙이 안된다능..ㅇㅅㅇ..

 

어제 내가 배운대로 child로 구분지어서 하나는 반복 하나는 비반복으로 해봤다.

그나저나 여백은 왜 안생기눈거..ㅠㅠ

 

결과물 쨔란..-!

그럼 일케 귀여운 하프물범이가 나온다 ㅎㅎ

그나저나 왜 여백 안되는지 의문..ㅠ.ㅠ...

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.