05. CSS 기초

Daily Coding from A to Z

codingdaddy 2022. 12. 27. 09:51

1. HTML 부모-자식 구조 살펴보기
<aside> 👉 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받지요!
- 빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하겠죠!
- 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다.
- 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐답니다!
</aside>
1. CSS 기초
- CSS는 어떻게 사용하나요?mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
- </aside>
- <aside> 👉 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다.
- 모든 CSS들을 다 알 수는 없겠죠~~ 오늘 쓰는 것만 알아도 굿! 나머지는 검색해서 쓰시면 된답니다~!사이즈 width height간격 margin padding
- </aside>
- 폰트 font-size font-weight font-family color
- <aside> 👉 배경관련 background-color background-image background-size

06. 자주 쓰이는 CSS 연습하기 (1)