저번과 이어서 웹과 HTML&CSS를 공부하면서 중요하지만 그냥 흘려버릴 수 있는 개념들을 정리 해보겠습니다. 웹 개발 공부를 시작하면 HTML&CSS는 빨리 훑고 지나가는 경향이 있습니다. 하지만 나중에 웹페이지를 직접 만들 때 생각지도 못한 곳에서 오류가 발생해 시간낭비를 하게 되는 경우가 많습니다.
html, css 파트가 딱 그렇습니다. 왜 오류가나지? 왜 스타일이 안먹지?
이런 사소한 오류들로 고민하면 PTSD가 옵니다..

그래서!!

html, css의 사소한 개념들을 제대로 이해하고! 정리하고! 넘어가자!

HTML 핵심요소

블록 요소

• <p> - 문장을 의미하는 요소(Paragraph)
• <h> - 제목을 의미하는요소, 숫자가 작을수록 더 중요한 제목을 정의
• <ul> - 순서가 필요없는 목록의 집함을 의미(Unordered List)
• <li> - 목록 내 각 항목(List Item)

인라인 요소

• <img soruce=”” alt=””> - 이미지를 삽입하는 요수(image)
• <a href=”url” target=””></a> - 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소(Anchor)
  • target속성 _blank → 새탭에서 링크를 오픈
• <span> - 특별한 의미가 없이 구분하는 요소
• <br/> - 줄바꿈 요소(Break)
• <label> - 라벨 가능 요소(input)의 제목

인라인 & 블록요소 = Inline-block

• <input type=”test”> - 사용자가 데이터를 입력하는 요소
  • type=”” 속성 → 입력받을 데이터의 타입
    • checkbox - 사용자에게 체크 여부를 입력 받음
      • checked - 미리 체크박스 체크됨
    • radio - 사용자에게 체크 여부를 그룹에서 1개만 입력 받음, 그룹이 필수
      • name - 이름을 같게 설정하면 그룹 형성
  • value=”” 속성 → 미리 입력된 값(데이터)
  • placeholder=”” 속성 → 사용자가 입력할 값(데이터)의 힌트
  • disabled 속성 → 입력 요소 비활성화(화면에 보이긴 함)

테이블 요소(=table) - 표 요소, 행(row)과 열(column)의 집합

행이 먼저고 그다음이 열이 옴

• <tr> - 행(Row)을 지정하는 요소(Table Row)
• <td> - 열(Column)을 지정하는 요소(Table Data), 하나의 셀
  • colspan 속성 - 열을 몇 칸 확장할 것인지 의미(Column Span) 다만, html로는 테이블 잘 만들지 않음

전역 속성

• 전체 영역에서 모두 사용 가능한 속성
  • title 속성 - 요소의 정보나 설명을 지정, 해당 요소의 마우스를 올리면 조그맣게 보여줌
  • style 속성 - 요소에 적용할 스타일(CSS)을 지정
  • class 속성 - 요소를 지칭하는 중복 가능한 이름
  • id 속성 - 요소를 지칭하는 고유한 이름
  • data-”이름” 속성 - 요소에 데이터를 지정(요소에 특정한 데이터를 잠시 저장 for js)

CSS

기본 문법, 주석

선택자 {속성: 값; }

• 선택자 - 스타일을 적용할 대상(Selector)
• 속성 - 스타일의 종류(Property)
• 값 - 스타일의 값(Value)

선언 방식

• 내장 방식 - 의 내용으로 스타일을 작성
• 인라인 방식 - 요소의 style의 속성에 직접 스타일을 작성(너무 우선순위가 높음)
• 링크 방식 - 로 외부 CSS 문서를 가져와서 연결(병렬 방식)
• import 방식 - @import 규칙으로 CSS 문서 안에 또 다른 CSS 문서를 가져와 연결하는 방식(직렬 연결)

CSS 선택자

• 기본 선택자
  • 전체 선택자(Universal Selector): 모든 요소를 선택
    • * {}
  • 태그 선택자(Type Selector): 태그 이름으로 요소 선택
    • li {}
  • 클래스 선택자(Class Selector): class 속성의 값의 맞는 요소 선택
    • .class {}
  • 아이디 선택자(ID Selector): id 속성의 값의 맞는 요소 선택
    • #id {}

• 복합 선택자

  • 일치 선택자(Basic Combinator): 특정 선택자를 동시에 만족하는 요소 선택

    • span.orange {} - (태그를 먼저 적어야 함)

  • 자식 선택자(Child Combinator): 특정 자식 요소 선택

    • ul > .orange {} - (뒤에서 부터 읽으면 편함)

  • 하위 선택자(Descendant Combinator): 특정 선택자의 하위 요소의 선택자 선택

    • div .orage {} - (조상 요소 div의 클래스가 orage인 선택자)

  • 인접 형제 선택자(Adjacent Sibling Combinator): 특정 선택자의 다음 형제 요소의 하나를 선택

    • .orage + li {} - (li 태그 중 클래스가 orage인 선택자의 다음 선택자가 해당됨)

  • 일반 형제 선택자(General Sibling Combinator): 특정 선택자의 다음 형제 요소 모두를 선택

    • .orage ~ li {} -(li 태그 중 클래스가 orange인 선택자 다음 모든 선택자가 해당됨)

• 가상 클래스 선택자(:)

  • 가상 클래스 선택자 1 (Pseudo-Classes):

    • hover - 특정 선택자 요소에 마우스 커서가 올라가 있는 동안 선택

      • button: hover {}

    • active - 특정 요소에 마우스를 클릭하고 있는 동안 선택

      • box: active {}

    • focus - 특정 요소가 포커스되면 선택

      • input: focus {} cf) tabindex 속성 - focus가 될 수 있는 요소를 만들 수 있음(focus = -1)
        

  • 가상 클래스 선택자 2 (Pseudo-Classes):

    • first child - 특정 선택자의 형제 요소 중 첫째라면 선택

      • .fruits span: first-child {} - ()

    • last child - 특정 선택자의 형제 요소 중 막내라면 선택

      • .fruits h3: last-child {}

    • nth child - 특정 선택자의 형제 요소 중 (n)째라면 선택

      • .fruits *:nth-child(2) {}

        cf) .fruits *:nth-child(2n) {} - n은 0부터 시작, 짝수번째 요소 선택

    • not - 부정선택자: 특정 선택자가 아닌 요소 선택(Negation)

      • .fruits *:not(span) {}

  • 가상 요소(인라인) 선택자(Pseudo-Elements):

    • 특정 선택자 요소의 내부 앞에 내용을 삽입

      • .box::before { content: “앞” } - before라는 가상의 요소를 만들어서 box 요소 내부 앞에 삽입

  • 가상 요소 선택자(Pseudo-Elements)

    • 특정 선택자 요소의 내부 뒤에 내용을 삽입

      • .box::after { content: “뒤!”} - (가상 요소 선택자 만들때 content 속성을 반드시 입력해야 함)

• 속성 선택자(Attribute) ATTR(대괄호)

  • 특정 속성을 포함한 요소 선택

    • [disabled] {} - 특정 상태의 요소를 선택할 수 있음

    • [type=”password”] {} - 원하는 타입의 요소를 선택할 수 있음

• 스타일 상속

  • 스타일을 지정할 때 선택한 요소의 자식 요소에더 해당 스타일이 적용됨

  • 글자/문자 관련 속성들은 대부분 상속됨!

  • 강제상속

    • 실제 상속되지 않는 CSS 속성을 강제로 상속시킴

    • inherit - 부모 요소의 CSS 속성을 상속받음

• 선택자 우선순위

  • 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언이 CSS 속성을 우선 적용할지 결정하는 방법

    1. 점수가 높은 선언이 우선!

    2. 점수가 같으면, 가장 마지막 해석된 선언이 우선!

  • 점수(명시도)

    • !important - 9999점
    • 인라인 선언 - 1000점
    • id 선택자 - 100점
    • class 선택자 - 10점
    • 태그 선택자 - 1점
    • 전체 선택자 - 0점
    • 상속 - X