Html&Css

HTML5+CSS3 #5

DGeon 2023. 2. 16. 18:13

p186-247

 

  • 네이밍의 공통 규칙
    • 시작 이름은 가급적 영문 소문자 권장
    • 두번째부터 숫자 문자 혼용 사용 가능
    • 공백은 절대 허용하지 않는다
    • 예약어가 있으면 되도록 예약어을 사용합니다(예약어를 첫 단에 붙여서 사용합니다)
  • 아이디 요소의 개념
    • HTML문서에서 같은 ID를 가진 요소를 두 개 이상 가질 수 없습니다.(유일성)
  • 클래스 요소의 개념
    • class스타일 시트에서 (.)구문을 쓰고 뒤에 클래스 이름을 입력
    • .class명 {}
    • 공통사항을 묶어서 스타일을 주기위해
  • 데이터 요소의 개념
    • data로 저장된 경우 js에서 value를 저장할수 있고 데이터를 읽습니다.
    • snake-case 형태로 저장합니다
    • 화면에 안보이게 글이나 추자 정보를 엘리멘트에 담아 놓을 수 있습니다.
  • 스타일 시트의 개념
    • 기본문법(선택자) 선언블록
      p{ color: red; padding: 5px}
      selector 속성 속성값    
        property property-value    
  • css적용 방법
    • 내부스타일 시트, 외부 스타일 시트, 인라인 스타일
      • 내부스타일시트는 head안에 들어가는 것
      • 외부 스타일 시트는 css파일을 따로 만들어서 관리하는 것 (추천)
      • 인라인스타일은 html선언과 동시에 스타일을 주는 것인데 우선순위가 제일 높다
    • cascading과 우선순위
      • 탑다운 방식을 가지고 있다
      • 디자인 속성이 하위 요서에 전달(상속)되는 의미에서 유래 되었다(안되는 것도 있음)
      • 우선순위 (인라인 → 내부 → 외부) 태그와 가까울 수록 우선순위가 높고 같이 선언 되어있다면 뒤쪽에 있는 태그가 우선순위가 높다
  • 하위 요소들의 선택방법
    • 선택자
      • class (.)
      • id (#)
      • p(태그)
  • 기본 시멘틱 태그
    • header
    • main
    • footer
    • nav
    • aside
    • section
    • article
    • address
  • font-size
  • 네이밍의 공통 규칙
    • 시작 이름은 가급적 영문 소문자 권장
    • 두번째부터 숫자 문자 혼용 사용 가능
    • 공백은 절대 허용하지 않는다
    • 예약어가 있으면 되도록 예약어을 사용합니다(예약어를 첫 단에 붙여서 사용합니다)
  • 아이디 요소의 개념
    • HTML문서에서 같은 ID를 가진 요소를 두 개 이상 가질 수 없습니다.(유일성)
  • 클래스 요소의 개념
    • class스타일 시트에서 (.)구문을 쓰고 뒤에 클래스 이름을 입력
    • .class명 {}
    • 공통사항을 묶어서 스타일을 주기위해
  • 데이터 요소의 개념
    • data로 저장된 경우 js에서 value를 저장할수 있고 데이터를 읽습니다.
    • snake-case 형태로 저장합니다
    • 화면에 안보이게 글이나 추자 정보를 엘리멘트에 담아 놓을 수 있습니다.
  • 스타일 시트의 개념
    • 기본문법(선택자) 선언블록
      p{ color: red; padding: 5px}
      selector 속성 속성값    
        property property-value    
  • css적용 방법
    • 내부스타일 시트, 외부 스타일 시트, 인라인 스타일
      • 내부스타일시트는 head안에 들어가는 것
      • 외부 스타일 시트는 css파일을 따로 만들어서 관리하는 것 (추천)
      • 인라인스타일은 html선언과 동시에 스타일을 주는 것인데 우선순위가 제일 높다
    • cascading과 우선순위
      • 탑다운 방식을 가지고 있다
      • 디자인 속성이 하위 요서에 전달(상속)되는 의미에서 유래 되었다(안되는 것도 있음)
      • 우선순위 (인라인 → 내부 → 외부) 태그와 가까울 수록 우선순위가 높고 같이 선언 되어있다면 뒤쪽에 있는 태그가 우선순위가 높다
        • 하위 요소들의 선택방법
          • 선택자
            • class (.)
            • id (#)
            • p(태그)
        • 기본 시멘틱 태그
          • header
          • main
          • footer
          • nav
          • aside
          • section
          • article
          • address
        • font-size
          • 하위 요소들의 선택방법
            • 선택자
              • class (.)
              • id (#)
              • p(태그)
          • 기본 시멘틱 태그
            • header
            • main
            • footer
            • nav
            • aside
            • section
            • article
            • address
          • font-size