15일. CSS(6) - color, 이미지/배경 넣기

시작

Q. 초록색 내용이 많아도 footer가 밑에 있기를 바람 (내용이 있든 없든 저 파란색이 아래로 오게끔 하고 싶음) 

- 밑에 하얀 공백이 있으니, 파란색은 저 부분 높이 그대로 맨 아래로 + 나머지 초록색 채우기 

- 초록색에 flex-grow : 1 

 

html 가장 바깥쪽인 body에 display : flex; 

-> 근데 이러면 박스가 나 오른쪽으로 누워버림

-> 그래서 flex-flow: column nowrap;

 

초록에

- flex-grow: 1;

근데 초록이 늘어날 줄 알았는데 안 늘어남

 

이유는) 아래 하얀색이 여백이 아니기에

- 여백은 body가 저 아래 하얀색까지면 여백인데, 파란색까지라면 여백이 없는 것

  -> 그러니 초록이가 안늘어나는거

 

그래서 body에서 여백 만들어줘야함

- body에 height:100%; 했는데도 안늘어남 (난 늘어나는데 ㅠ)

-> html에 height:100%

    html이 여백 담당하는 부분이니 그런가보다. 

- 적는게 맞다!

 

body에다가는 100% 왜 주지? (위 실험했던 증거인가?) 

 

ㅡㅡㅡㅡ // 방 벽 만들기 끝 -> 벽지 바르기, 몰딩하기 등 해야함 

 

반응형 - 추후 배울 내용

 

[방 꾸미기] - 경계선, 배경색, 이미지, 여백 부여하기

 

기존 색 지워주고~

1. visual, footer에 같은 색 넣어주기

 

색깔 넣을 때 그동안은 그냥 red, blue 이렇게 했는데 

-> css에서 색깔 쓰는 방법은 

1) color keywords. 색깔 명명하기

- 근데 미묘한 차이나는건 이렇게 명명하기가 힘듦

2) RGB 3원색으로 쓴다. 

   색깔 3가지를 섞어 만드는데, 가중치가 다름. (16비트 2개, 8비트 for 한 색깔) -> 총 24비트. 그래서 24비트 칼라라고 함. 2의 24승을 표현 가능 (약 16만가지)

    ex)#ff 00 00 -> 완전한 빨간색

        #ff ff ff -> 검은색 ... 이 아니라! #00 00 00 이 답이다 ㅋㅋㅋㅋ (빛의 3원색이기에. 빛일수록 밖을수록 더 선명해짐.) #ff ff ff는 흰색

- 어두운 빨간색은 #01 

 

- 소문자, 대문자 상관없음

- 6개니까 줄여서 ff0033을 f03이라고도 가능

 

10진수로도 표현 가능

rgb (255, 0 , 0); -> 빨간색

- 256가지인데 0부터라 255

 

- 정수만 쓰면 정수만 써야지, 중간에 실수 금지

- 

 

잘 쓰면 고급스러워진다. 

요새 32비트 칼라가 들어가기도 8비트가 하나 더 추가된것

rgba

- 불투명도 포함된 것

 

 

 

*이건 웹 개발하며 우리가 쓸 일은 없을거라고 (잘 쓸 일 x) 

active border - 윈도우 테마 색을 따라가는. 

그냥 이런게 있기도 하구나~ 

---

background-color

backgorund-img

 

background 

 

// 벽칠 

 

-> 몰딩 작업 (방과 방 사이의 '선' 넣기)

border

4가지 방향 있다.

boder 10 쓰면 저기 연두색 부분이 10이 되는 것 (네방향)

- top만 주고 싶으면 border-top:10;

 

border-width

border-style (dashed ----- dot..... solid ㅡ dashdot -.-.-....)

border-color

-> 3개 한꺼번에 줄 수 있음

1.2 둘 다  border를 줄 수 있는데 (1번은 border-bottom, 2번은 border-top)

- 보통 '뒤따르는애'가 하게 해준다. (여기서는 2번이 border-top으로 주는거) 

 

 

흰색 줄 

1) 흰색 칠하기

2) 간격 두기 (여기서 이렇게 해봤다)

 

 

// 색깔, 경계선 칠하기 끝 -

-> 벽지 바르기

 

이 이미지를 넣어주려면~

별 하나 url이 star.png라고 하자

오른쪽에 붙는걸로

right방향으로 10px이면 세번째 그림의 별이 (왼쪽) 옆으로 더 가는 거  

 

-> right bottom 10px; 이렇게 해보기

 

위에 검정색깔 주었지만, 아래 이미지 줌으로서 -> 배경 흰색 + 이미지가 됨. 

선생님거

이거 넣은거 ㅜ 안 뜸 

-> 해결

원래 검정색을 넣어줬지만, 

아래 빨간색을 추가하하면 이렇게 빨간색이 이긴다.

★ 아래 아무 색깔을 안넣으면, 검은색이 아니라 하얀색이 뜸 -> 그래서 여기서 배경 다시 넣어야 한다는거~~! #313131;

 

 

 

이미지 넣기가 안 됨 ㅠㅠ 

 

이렇게 하면 문제점이 뭔지

종류들 실습

background-size 따로 

cover - 짤리는거? - 이미지를 늘려서 짤리더라도 다 채우는거

contain - 작아져도 '다' 안에다가 넣는거

---

 

overflow:scroll; 추가

이거 스크롤 오류 해결

개발자라면 이 2개 꼭 체크하세요~~ 

- 새로고침 안해도 결과 보이게 하는 것 같음.