웹개발 종합반 1주차

단축키 모음

• 코드정렬
  - Windows: Ctrl + Alt + L
  • macOS: option + command + L
• 주석
  • Windows: Ctrl + /
  • macOS: command + /

CSS 기초

• 1) HTML 부모-자식 구조 살펴보기 👉 html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받지요! - 빨간색 div 안에, 초록색/파란색 div가 들어있습니다. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/파란 div도 모두 함께 이동하겠죠! - 즉, 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리입니다. - 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀐답니다!

• 2) CSS 기초
  • CSS는 어떻게 사용하나요? 👉 ~ 안에 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다. mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
  • 모든 CSS들을 다 알 수는 없겠죠~~ 오늘 쓰는 것만 알아도 굿!
    나머지는 검색해서 쓰시면 된답니다~!

    <aside>
    👉 배경관련
    background-color
    background-image
    background-size
    
    사이즈
    width
    height
    
    폰트
    font-size
    font-weight
    font-family
    color
    
    간격
    margin
    padding
    
    </aside>

자주 쓰이는 CSS 연습하기

• 1) 자주 쓰이는 CSS 연습하기 👉 [연습할 것들] h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding
• 2) 폰트 변경하기
  구글 웹폰트 link 태그를 복사해서 ~ 사이에, CSS를 복사해서 사이에 넣습니다.