💻 diary 실습
https://github.com/yoonmallang22/HTML-CSS/tree/main/practice%F0%9F%92%BB/diary
다이어리 웹 사이트를 만들었다! 실습하면서 공부한 것들 적용해보는게 진짜 공부가 많이 되는 것 같다👍🏻 언제 어떤 태그, CSS를 써야할지 아는 느낌이 좋다ㅎㅎ
🎨 미디어쿼리 @media
미디어 유형
all: 기본값. 모든 장치를 대상으로 한다print: 인쇄 결과물 및 출력 미리보기 화면에 표시한다screen: 모니터나 스크린이 있는 디바이스를 의미한다speech: 음성 합성장치 대상이다
미디어 특성
width: 스크롤바를 포함한 뷰포트의 너비- min-width, max-width 최소 최대 너비
height: 뷰포트의 높이- min-height, max-height 최소 최대 높이
orientaition: 뷰포트의 방향portrait: 세로,landscape가로
aspect-ratio: 뷰포트의 가로세로비resolution: 출력장치의 픽셀 밀도 - 단위dppx(Device pixel ratio)
논리연산자
and: 조건을 모두 만족하는 경우에만 스타일을 적용한다not: 조건을 반전하는 경우 스타일을 적용한다- 반드시 미디어 유형을 지정해야 한다
,(쉼표): 조건중 하나라도 만족하는 경우 스타일을 적용한다only: 미디어쿼리를 지원 하는 브라우저에서만 작동하게 한다- 반드시 미디어 유형을 지정해야 한다
🎨 CSS 특강_2
by. 빔 캠프 이종찬님
코드 품질: 코드 변화에 따라 유연하게 변하는 CSS
클래스 이름을 콘텐츠에 따라 정하면 다른 콘텐츠로 변경했을 때 맞지 않는다
어떤 콘텐츠가 들어와도 무난할 수 있도록 클래스 이름 "일반화"
ex) wrapper, card
웹을 만들어낸다는 것(수정 가능)은 제품, 포스터 디자인(수정 불가능)과 다르다
∴ 유지보수가 정말 중요!!
이번에는 fox를 넣었지만 어떤 콘텐츠가 어떻게 들어갈지 모른다
변화에 얼마나 잘 반응할 수 있느냐
"방탄웹", 어떤 콘텐츠가 꽂혀도 유지될 수 있도록 한다
안전한 설계, 방어적인 코드가 기본!
💡 body에 background-color/background-image가 깔리는게 아님!!
body {
background-image: url(../images/bg.png);
}body -> display: block, height: auto가 초기값
body의 실제영역(브라우저 전체 아님🙅♀️)에만 깔린다면 나머지 영역에 깔 수 있는 방법이 없다
html도 마찬가지
∴ body 너머의 영역, 즉 전체 캔버스 영역으로 background-color/background-image를 보낸다
그런데 html에background-color/background-image를 주면 html이 그 역할을 하고 body는 일반적인 하나의 요소가 되지만 관례적으로 body에 주는게 맞다
기준은 그대로 body의 실제 영역을 따르고 있어서 background-position를 주면 위치가 맞지 않고 background-size를 주면 경계면이 보일 수밖에 없다
background-attachment: fixed;를 하면 기준이 더 이상 body가 아니라 뷰포트가 된다
(참고 https://youtu.be/H7teKNwV-Bk)
💡 background-image는 인쇄에 안나옴
책 추천
<CSS 설계 가이드>
SMACSS
과제를 저번 시간에 배운대로 열심히 잘 만들어놓고 index.html 상위로 두면서 경로를 수정 안해서 background-image가 안나온 채로 과제를 제출했다ㅠㅠ
코드 잘 짜도 안나오면 의미 없다!😇 이렇게 또 배운거라고 생각해야지..!!
앞으로는 꼼꼼하게 잘 확인하자 메모메모🖍
