오늘은 다섯번째 날이다. 클론코딩을 할 때 몰랐던 내용도 꽤 배웠던 날인것 같다.
margin, padding 초기화
브라우저 종류가 여러개인데 이 들은 기본 margin과 padding이 다르기 때문에, 이 두개를 초기화 해주고 시작하는 것이 좋다.
이미지 넣기
background-image로 배경화면을 넣을 수 있다.
방법
화면설정
기본형태는 이미지를 반복시켜 화면을 꽉 채운다.
이것을 없애려면 background-repeat을 no-repeat로 바꿔주면 그 이미지만나타낸다.
이미지 위치 이동
background-position
이거는 사이드플젝때 해본것이다. px을 설정해서 위치를 이동 시킬 수 있다.
이미지 사이즈
여기선 새로운 단위가 나온다. 바로 vw, vh 이 사이즈 단위는 모니터 사이즈가 변경되어도 항상 같은 사이즈가 유지된다.
반응형 디자인(휴대폰 테블릿 pc화면 호환)때 많이 사용되는 단위다.
참고로 반응형 웹디자인에 가장 많이 사용되는 것은 %로, 이것이 기본 단위이다.
vw는 viewprort width, vh는 viewport height이다.
auto: 현재 컨텐츠에 맞추어 자동으로 조정됨
근데 만약 width나 height를 100%이상으로 주면 상위태그의 크기를 벗어나게 된다. 
width에 120%를 줬다.
div테두리를 벗어나가는 것을 볼 수 있다.
이런 실수를 없애기 위해 max-width and height를 활용하면 된다.
max-width and height : 이걸 100%해주면 부모태그를 벗어나지 않게 도와준다
결과
우선순위
태그에서 우선순위는 자식태그가 가진다.
자식 태그의 id인 id-heading태그의 색이 실행된것을 볼 수있다.
이걸이용해서 부모가 가지는 요소들을 전체적으로 디자인 한 다음 세부적인 자식태그들만 특정하여 수정 할 수있다.
여러 선택자들의 우선순위
id선택자 > 클래스선택자 > 태그선택자 < 전체선택자
id선택자의 색이 정해진 것을 볼 수 있다.
최고우선순위 부여
또한 css가 길어지면 우선순위가 헷갈려 지금 내가하는 디자인을 최고우선순위로 만들고 싶은데 뭐가 우선순위인지 찾지 못할 수 있다.
이때 사용할 수 있는 것이 important이다.
"!important"를 해주면된다.
우선순위가 id에서 class선택자로 바뀌어 class선택자의 색이 정해진 것을 볼 수 있다.
inline style
css가 아닌 html에 바로 디자인을 줄 수 있는 방법인데 그리 추천하진 않는다.
google font
폰트를 사용하고 싶으면 해당 폰트를 사용자의 컴퓨터에서 가지고 있어야한다. 하지만 이를 해결하기위해 뭽폰트를 사용할 수 있다.
웹폰트: 어떤 기긱로 접속해도 같은 글꼴을 보여줄 때 사용함
인터넷 주소로 사용하기 때문에..
사용방법
- 구글 웹폰트에서 폰트를 선택해 가져온다
.
사진과 같은 것을 복사해서 css에 옮겨준다.
2.폰트를 적용해준다.
import는 가져온 것일 뿐이지 적용은 따로 해줘야한다.
결과
display속성
inline과 block을 바꿀수 있다. display 속성을 사용하면된다.
block은 크기를 정해주면 그 크기만큼 박스가 지정되는 것이고 줄바꿈이 일어남
inline은 글자크기만큼만 박스가 형성된다. 줄바꿈 없음
이두개를 섞은것이
inline-block
정해진 크기만큼 박스가 형성(block)되고, 줄바꿈은 없음(inline)
세로인 메뉴를 가로로 박스크기 변경없이 만들고 싶을 때 사용
none
이 속성을 지정한 태그는 사라진다. 줄바꿈도 사라짐
마우스를 올렸을때 드롭다운 하는 시스템을 만들고 싶다고 하면 이걸로 숨겼다가 마우스 올리면 보이게 설정을 할 수있다. (보이게 하는 설정은 따로 필요)
float
배치를 정하는 속성으로 화면의 제일 끝으로 보내는 특성이다. left와 right만 있다.
한줄에 여러 요소를 배치하고 싶을때는 모든 요소를 float처리 해주어야한다. 그렇지 않으면 여러줄이 됨
다른 태그가 float이 걸린 태그를 인식못해서 곂친다.
이렇게
원래 그림=
이렇게 여러 속성들을 배웠다.
여러문제를 풀어보면서 익히긴 했지만 역시 실제로 무언가를 만들어보면서 필요할때 찾아서 쓸때 기억에 더 오래남을 것같다.
빨리 프로젝트를 진행하고 싶은 마음만 계속 생긴는 것 같다.
