프로그래밍기초/HTML CSS

[HTML/CSS] 기초 2

임동까스 2020. 12. 3. 10:21

  • block 요소의 너비 : 너비를 지정하지 않는 한, 최대한 늘어난다.

  • block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다.

  • block 요소의 줄사용 : 한 줄을 무!조!건 혼자 쓴다.(세로모드)

  • inline-block 요소의 너비 : 너비를 지정하지 않는 한, 최소한으로 줄어든다.

  • inline-block 요소의 높이 : 높이를 지정하지 않는 한, 최소한으로 줄어든다.

  • inline-block 요소의 줄사용 : 가능하면 최대한 한줄을 여럿이서 쓴다.

  • div, section, nav, article의 기본 display 속성값은 block 이다.

    • Css

      • inline에서는 width,height,padding,margin 이 작동하지 않음
      • div:nth-child(n){} 몇번째인가 3n 3의 배수 div 이면서 누군가의 번째 자식
      • section > :nth-child(7n+2) section의 자식중 2칸 띄고 7칸 마다?
      • text-decoration:none; 밑줄없애기

    • HTML

      • 관계
        • 부모/자식
        • 형/동생
      • 태그
        • 인라인 계열
        • span(div에서 display만 inline인 태그, 인라인 계열의 기본 태그)
        • a : 링크
        • img : 이미지
      • 블록 계열
        • 기본
          • div(구분, 적절한 태그가 생각나지 않을 때, 모르면 div, 블록 계열의 기본태그)
          • nav(내비게이션, 보통 메뉴 감쌀 때)
          • section(섹션)
          • article(아티클, 게시물)
          • spen(아무 효과 없음 a와 같은 속성)
          • a(링크 걸기)
        • 제목
          • h1, h2, h3, h4, h5, h6
        • 목록
          • ul, li : 순서 없는 목록
          • ol, li : 순서 있는 목록
      • inline-grid 는 빈 공간이 없음

    • 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 : ??
        • position : ???
      • . 은 클래스 찾기, #은 id 찾기
      • calc(100% / 3) 계산 함수