웹 제작 엘리먼트와 선택자사용

상위엘리먼트와 하위엘리먼트를 부르는 명칭

<!-- body를 기준으로 section은 자식엘리먼트이다. -->
<!-- section을 기준으로 body는 부모엘리먼트이다. -->
<section>
<!-- body를 기준으로 div은 후손엘리먼트이다. -->
<!-- body를 기준으로 div은 조상엘리먼트이다. -->
  <div></div>
  <!-- div를 기준으로 article은 인접동생엘리먼트이다. -->
  <!-- article을 기준으로 div는 형엘리먼트이다. -->
  <article></article>
  <!-- 인접해있는 동생엘리먼트 외에는 그냥 동생엘리먼트라고 부른다. -->
  <!-- div와 article은 형제관계이다. -->
</section>

상위엘리먼트와 하위엘리먼트를 부르는 명칭

상위 엘리먼트와 하위 엘리먼트 형태

• border → 선 속성
  ex) border: 선두께 선형태 선색상;
  border: 1px solid red;
  ※border 사용 시 주의사항※

1. 속성값을 작성할 때 ,(콤마)사용 금지
2. 너비, 높이가 0이여도 나타난다. 태그에 선 속성을 사용했는데도 나오지 않는다면
   선택자에 문제가 있거나, html구조에 문제가 있는것이다.

• 상위엘리먼트와 하위엘리먼트는 항상 겹쳐서 구현된다.

• 형제 엘리먼트는 겹쳐서 나오지 않는다.
  (형 엘리먼트가 끝나고 인접동생 엘리먼트가 구현된다. 절대 겹쳐서 나오지 않는다.)

  상위엘리먼트와 하위엘리먼트 형태

부모 엘리먼트를 넘어갈 때 처리 방법(overflow)

• h태그 → 제목 태그 h1 ~ h6까지 사용
  h1 → 로고에 사용
  (기본적으로 여백값을 가지고 있다) → 추후 개념 추가설명
  lorem2 → 아무 문자나 생성 2
  글자가 배경 바깥으로 나갈 때 overflow: hidden; 을 사용하면 아래와 같이 변경 된다.
  overflow: hidden; 사용 시 배경 바깥으로 나가는 문구는 감춰준다.

  부모 엘리먼트를 넘어갈 때 처리 방법(overflow)

상속되는 텍스트 속성

1. 텍스트 속성은 적용한 태그부터 가장 아래쪽에 있는 후손 엘리먼트까지 상속되어 적용된다.
2. 텍스트 속성을 사용할 때는 텍스트요소를 감싸고 있는 엘리먼트에 사용하는 것이 좋다.
   상속되는 텍스트 속성

자식선택자와 후손선택자

인접동생선택자는 → +
선택자가 필요한 이유
자식선택자 → >
후손선택자 → 띄어쓰기
→ 후손만 선택하는것이 아닌 자식부터 후손까지 선택
자식선택자와 후손선택자

클래스 선택자

※ 한번에 여러개 만드는 방법

• $ → 1~n까지 순서대로 생성
  ex)

  div{div$}*7  → <div>div-1</div> ~ <div>div-7</div> 

까지 생성

• 중간에 젠코딩을 수정하게되면 emmet이 안된다.
  ctrl + x(잘라내기) , ctrl + v(붙여넣기) 후 다시 tap눌러준다.
  emmet(tap) : 자동완성
• class 선택자 용도는 같은 태그끼리 구별하거나 그룹화 시켜주기 위해서 사용된다.
• html에도 속성과 속성값이 존재한다.
  ex) <여는태그 속성="속성값"></닫는태그>
• . → 클래스 선택자
  ex) .html 속성값 {내용}
  클래스 선택자

class 선택자 그룹화

• 위 이미지에서 div- 1, 3, 4, 5번은 red라는 클래스로 그룹화를 만들어 준 것이다.
  (띄어쓰기를 하면 div-1과 red라는 2개의 클래스로 만들어진다.)
• css에서 red라는 클래스를 가진 속성들은 한꺼번에 속성이 적용 된다.

※ 클래스 사용 시 주의할 점
calss 선택자 그룹화