[TIL] 멋사 프론트엔드 스쿨 (3일차:CSS)

• alt + w : 드래그 된 텍스트 밖에 p태그 만들어줌

• 코드 예시 : ul>li{menu$}*4 →

 <ul>
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
 </ul>

• CSS 형식:

  selector(선택자) {

  property(속성) : value(값)

  }
  

• css 파일 안에 css 포함하는 법은

  이렇게 하는 방법이 있음

• class는 중첩해서 사용할 수 있다. 반면 id는 중첩해서 사용할 수 없다.

  class name을 연속으로 쓸 때 바로 옆에 한칸 띠고 작성
  

• page 내 class는 여러개 존재해도 된다. 반면 id는 하나만 존재함.

• 가상요소 선택자(::)랑 가상클래스 선택자(:)랑 구분하기

  : 가상요소 선택자는 콜론이 두개 가상클래스 선택자는 콜론이 한개,

  어떨 때 쓰는지도 구분. 가상요소 선택자는 after나 before 뒤에 주로 사용
  

** 블록요소(block element)

• 상자를 만들기 위한 요소들

• 최대 가로 너비를 사용함

• 요소들이 수직으로 쌓임

• 크기 지정 가능( 가로, 세로 )

• 블록요소 안에 블록요소와 인라인요소를 모두 포함 가능

• 상하좌우 마진 & 패딩 가질 수 있음

  ex)

  1. <h1~h6>

     인라인요소 (inline element)

     글자를 만들기 위한 요소들

     요소들이 수평으로 쌓임

     가로, 세로 값을 가질 수 없다.

     인라인요소 안에는 블록요소 포함 할 수 없음

     상하 마진 불가능, 좌우 마진 가능, 상하좌우 패딩 가능(직접해보기)

     ex)

     • 인라인(inline)요소, 블럭(block)요소

     안에

     태그가 들어갔다! → 틀린거

     인라인요소 안에 블럭요소를 넣을 수 없다.

     • , : 이미지 밑에 캡션(글자,설명)을 달아주기 위한 요소 안에 1.태그와 2.을 넣어줌
     • : 순서대로 정의된 목록, 제목, 설명

     • 	: 표만들기, 행 배치, 각 셀 배치, 헤더 배치 순 → border를 모든 요소에 줬을 경우, 줄이 두줄로 겹침. table요소에 border-collapse: collapse; 를 주면 겹치는 것 없이 한줄의 테이블 만들어짐.