26일차

2024-01-15, 26일차

오늘 배운 내용

• img + tab
• w300 -> width: 300 / h300 -> height: 300;

[HTML]

• 관계

  • 부모/자식
  • 형/동생

• 태그

  • 인라인 계열
    • a : 링크
    • img : 이미지

• 블록 계열

  • 기본

    • div(구분, 적절한 태그가 생각나지 않을 때, 모르면 div, 블록 계열의 기본태그)
    • nav(내비게이션, 보통 메뉴 감쌀 때)
    • section(섹션)
    • article(아티클, 게시물)

  • 제목

    • h1, h2, h3, h4, h5, h6

  • 목록

    • ul, li : 순서 없는 목록
    • ol, li : 순서 있는 목록

[CSS]

• 노말라이즈

  • 해당 엘리먼트에 기본적으로 적용되어 있는 디자인을 없애서 다시 평범하게 만든다.
  • a, body, ul, li, ol, li, h1, h2, h3, h4, h5, h6 은 사용하기전에 노말라이즈 해야 한다.

• 선택자

  • 태그선택자 : div { ... }
  • 자식선택자 : div > a { ... }
  • 후손선태자 : div a { ... }
  • 클래스선택자 : .menu-item { ... }

• 기본 속성

  • width, height, font-size, font-weight, letter-spacing, color, background-color, margin-top, margin-left, padding-top, padding-left, border, border-radius

• 레이아웃 속성

  • display

    • none : 사라짐
    • inline-block, inline : 글자화
    • block : 블록화

  • float :

  • posetion :

• margin, padding

  • 각각 바깥쪽 여백, 안쪽 여백을 의미

• 사용법

  • box{ margin: 10px; padding: 20px }

• nth-child
  - :nth-child() 선택자는 인수를 사용하여 형제 요소 그룹 내에서 특정 요소를 식별하고 대상으로 지정하는 고유한 유형의 CSS 의사 클래스 선택자입니다. 다른 선택기와는 달리, 이 선택기는 패턴을 사용하여 형제 요소 집합 사이의 요소를 일치시킨다.

• 사용법
  - section > :nth-child(2n) {
  background-color: red;
  }

• html, body, block 요소의 가운데 정렬
  - 모든 보이는 엘리먼트의 부모는 body이고, 그의 부모는 html 이다.
  - margin-left / margin-right 를 auto로 설정.
  

• class
  - 별명이고, .class명 으로 사용한다.

  • 여러개를 표현 하려면 class="a b" 이런 식으로 표현함 "a,b"x

• id
  - id는 하나만 쓸 수 있고, #id 로 사용한다.
  

• border
  - 테두리임
  

• border-radius
  - 꼭짓점이 곡선으로 변함

  • 사용법 -> border-radius: 100px 10px 50px 10px;

• inherit (상속)
  - 부모의 속성중 몇개만 상속이 됨.

• 노멀라이즈

  • CSS Normalize는 가능한한 브라우저의 내장 스타일을 최대한 건들지 않는 선에서 브라우저 간에 상이한 부분만 스타일을 통일시켜 준다.