2022.10.24.MON

코드스테이츠 Day3

1. HTML

• 웹 페이지의 구조, 뼈대 형성 : 가계도(트리) 구조
• < >,</> 태그를 이용한 마크업 언어
• self-closing tag : 닫는 태그 </> 필요 없음.
  ex) img, hr(수평선 그리기), input 등
• 자주 사용하는 태그 요소(element)
  ex) div, a, ul, ol, li, button, textarea 등
• 시맨틱 태그 : 이름과 속성을 정해놓은 태그
  ex) head, nav, section, main, article, aside, footer, strong 등
• block vs inline 태그
  -차지하는 자리 차이
  -block은 한 줄 전부 차지, inline은 content만큼만.
  -따라서, inline은 줄바꿈 없고, 너비, 높이 설정 불가.
• 연습문제 사이트
  https://www.w3schools.com/html/html_exercises.asp

2. CSS

• 웹 페이지의 스타일, 디자인 형성
• selector(선택자) + declaration(선언)
• html 문서에서 link 태그를 통해 css 문서 연결
• 박스 모델 (margin-border-padding-content)
  -여백과 테두리를 포함하는 box-sizing: border-box; 가 유용.
  밑에는 기본 스타일링 제거하고 초기화하는 코드.

    * {
    box-sizing: border-box;
    }
    body {
    	margin: 0;
        padding: 0;
        }

• 적용 우선 순위 : #id (고유) > .class (중복o) > element
• reference site
  https://www.w3schools.com/css/default.asp
  https://developer.mozilla.org/en-US/docs/Learn/CSS
• 연습문제 사이트
  https://www.w3schools.com/css/css_exercises.asp

<느낀 점>
워밍업이라며,, ㅋㅋㅋㅋㅋ
프론트엔드 찍먹 수준이었지만, 양이 꽤 되었다.
얕게 파서인지 내용이 엄청 어렵진 않았으나, 혼자서 설계하라고 하면 자신 없음.
슬슬 시작하는 기분이 든다.
같은 반 수강생들 몇몇은 벌써 스터디를 만드려고 얘기 중이다.
나도 스터디 해야겠지만 아직은 너무 극초반이라 일단 지켜보는 중,,

내일도 이어서 찍먹하고, 수요일엔 첫 페어 학습 및 과제!
떨린다.
무난히 잘 마치길~