akjfal

1. HTML&&CSS 기초 - 2 본문

boostcourse/웹 UI개발

1. HTML&&CSS 기초 - 2

akjfal 2021. 1. 15. 01:23

강의를 들으면서 중요하다 생각한부분과 연관되어서 생각한부분을 작성했습니다.

강의 보러가기

콘텐츠 모델 : 규칙들을 그룹화 시켜놓은것, 각각 태그는 1~n개 에 속해있음

  • METADATA : 콘텐츠의 스타일 동작을 설정하거나 다른 문서와의 관계등을 포함
    • base, link, meta, script, style, title : 헤드태그에 들어가는 것들이 많다.
  • FLOW : 대부분의 태그 → 문서내의 흐름에 의해 배치되는것들 → 일부 메타데이터만 빠짐
  • SECTIONING : 헤딩과 푸터의 범위를 정하는 요소
    • article, aside, nav, section
  • HEADING : 섹션의 헤더 → 제목들
  • PHRASING : 텍스트를 꾸며주는 요소들
  • EMBEDDED : 내부 컨텐츠를 표현 : audio...
  • INTERACTIVE : 사용자와 상호작용 → form요소들

시멘틱 마크업 : 의미론적 마크업으로 의미가 들어가있는 태그들 잘 사용할 CSS것

  • article : 본문의 주내용
  • aside : 내용 이외 사이드
  • figcaption : figure태그의 설명을 정의
  • figure : 그림등 독립적인 콘텐츠
  • footer : 바닥글
  • header : 머릿글
  • main : 텍스트의 일부를 강조
  • nav : 현재 문서중 지금이나 다른 페이지로의 링크를 보여주는 구문 생성
  • section : 문서의 구역을 정의
  • time : 특정 시간이나 날짜

block&inline level

  • block level : 한줄에 하나의 요소 표시 → div, h1~, p, il, li, table등
  • inline level : 한 줄에 여러개 요소 표시가능 → span, I, img, em, strong 등 → 자식으로 블록 불가
  • a는 예외로 인라인이지만 블록을 자식으로 가질 수 있음

CSS

  • h1 { color: yellow; font-size: 2em;}
    • 선택자(selector) : h1
    • 속성(property) : color
    • 값(value) : yellow
    • 선언(declaration) : proper + value
    • 선언부(declaration block) : { ... }
    • 규칙(rule set) : h1 { ... }
    • html 속성(attribute) : / css 속성(property)
  • 주석 : /* ... */
  • 적용방식
    • inline : <p style="color: gray;">
    • internal : <head>태그 속에 <style> ... </style>로 넣어줌 → 많은 페이지에 스타일을 적용시키기위해서는 모든 페이지마다 헤드에 넣어줘야한다.
    • External : 외부파일을 사용해 재사용이 가능하다, 관리 용이 및 용량 작음 <link href="..." rel="stylesheet">
    • \@import : 외부 파일을 사용 → 성능이 좋지않다.
  • 선택자
    • 요소선택자 = 태그선택자 → grouping
      • h1, h2, ...
      • 전체 선택자 : * { }
      • 선언 : h1{...}
      • 선택자&선언 h1, h2....{...}
    • class선택자
      • <style> .html color: purple </style> ... <p class="html">
      • 다중 class : <p class="foo bar">
    • id선택자
      • .을 #으로 class를 id로
    • 선택자 조합
      • 요소와 클래스의 조함 : p.bar → p속성면서 bar클래스 여야한다
      • 다중 클래스 : .foo.bar → "foo bar"에만 적용된다
      • 아이디와 클래스조합 : .foo#bar
    • 속성 선택자
      • 단순 속성으로 선택 : <style> p[class], p[class][id] </style>→ class, id가 있는 모든곳에 속성 적용
      • [class~="bar"] : 공백 구분한 ".."값이 들어가있으면 된다.
      • [class^="bar"] : "..."로 시작하는 값이면 충분하다. 단 시작이여야하기때문에 ";;; ..."이면 안된다.
      • [class$="bar"] : "..."로 끝나야한다 ^와 반대다
      • [class*="bar"] : 들어간 모든곳에서 적용됨
  • 부모와 자식
    • 자손 선택자 : div span{...} → 손자도 전부 선택됨
    • 자식 선택자 : div > span{...}
    • 인접 형제 선택자 : div + span{...} → 형제요소와 아래 형제 요소에 적용
    • 틸트 형제 선택자 : div ~ span{...} 특정 요소의 모든 형제를 선택하여 스타일 적용
  • 가상 클래스 : 미리 정의해 놓은 상황에 적용이되도록 약속되어있는 보이지 않는 클래스 : :pseudo-class :active
    • :first-child, :last-child
    • :link - 링크이지만 아직 방문안함
    • :visited : 링크이면서 방문한 요소
    • :focus : 입력 포커스를 갖고있는 요소 → tab키로 했을때
    • :hover : 마우스 포인터가 위치해있는 요소에 적용
    • :active : 사용자 입력에 의해 활성화된 요소
  • 가상 요소
    • :before : 가장 앞에 요소를 삽입
    • :after : 가장 뒤에 요소를 삽입
      • before와 after는 둘다 content 필요 p:before { color: red; content: "..."}
    • :first-line : 요소의 첫줄에 있는 텍스트 → 화면에 나타난 줄을 기준으로 적용됨
    • :first-letter : 블록 레벨요소의 첫번째 문자 → 첫번째 글자만 스타일 규칠 적용
  • 구체성(명시도)
    • 0, 0, 0, 0 → 계산시 좌측 값부터 비교
    • 0, 1, 0, 0 → 선택자에 있는 모든 id 속성값
    • 0, 0, 1, 0 → 선택자에 있는 모든 class, 기타속성, 가상클래스
    • 0, 0, 0, 1 → 선택자에 있는 모든 요소, 가상 요소
    • 전체 선택자는 영향 x
    • 인라인 스타일 : 1, 0, 0, 0을 갖고있음
    • !important : 별도의 구체성은 없지만 모든것을 무시하고 우선순위임
  • 상속 → 상속된 값에는 아무런 구체성을 갖지 못한다. 0,0,0,0조차 없어서 전체선택자에도 밀린다 → 전체가없다면 적용은 된다.
    • box model속성들은 상속 안된다 → margin, padding, background, border
  • cascading : css가 어떤 방식으로 적용이 되는지를 정한 규칙
    • 중요도, 출처 → 구체성 → 선언
    • 5등 - 사용자 에이전트 스타일 : 브라우저에서 기본적으로 제공한 스타일
    • 4등 - 사용자 스타일 : 일반 유저가 직접 css 를 만들어서 본인 브라우저에 설정을 해놓은 것 → 지원하지 않는 경우가 많음
    • 3등 - 제작자 스타일 : 개발자가 적용해놓은것
    • 2등 - 제작자 중요 스타일
    • 1등 - 사용자 중요 스타일

'boostcourse > 웹 UI개발' 카테고리의 다른 글

1. HTML&&CSS 기초 - 3  (0) 2021.01.15
1. HTML&&CSS 기초 - 1  (0) 2021.01.14
'boostcourse/웹 UI개발' Related Articles more
Comments