[HTML & CSS] 엘리먼트 / 텍스트속성 / 선택자 / 젠코딩 / class

[엘리먼트]

• 엘리먼트는 열린태그, 닫힌태그를 모두 합쳐서 말하는 것이다. ex) <div></div>
• html의 구조는 트리구조형식으로 가지치기하듯 아래로 뻗치는 형식이다.
• html 아래에는 head와 body로 나누어진다.
• body 아래에는 div, section 등 태그 요소로 나누어진다.
• 여기서 body는 부모(상위) 엘리먼트, 그 아래 div나 section은 자식(하위) 엘리먼트라고 칭한다.

 

예시) <section>
             <div></div>
             <nav></nav>
         </section>

 

• section을 기준으로 body는 부모 엘리먼트이다.
• body를 기준으로 section은 자식 엘리먼트이다.
• body를 기준으로 div는 후손 엘리먼트이다.
• div를 기준으로 body는 조상 엘리먼트이다.
• nav를 기준으로 div는 형 엘리먼트이다.
• div를 기준으로 nav는 인접동생 엘리먼트이다.

 

[텍스트 속성]

• 텍스트 속성은 텍스트를 커스텀하는 속성이다.
• 텍스트 속성을 엘리먼트에 적용하면 하위 엘리먼트까지 모두 상속된다.
• 텍스트 속성은 텍스트를 작성한 엘리먼트에 직접 적용해야한다.
• div아래 span을 html에서 작성하고, css에서 div 속성을 적용하면 하위의 span까지 속성이 적용된다.
• 텍스트 속성 중 font-size는 글자 크기이며, 브라우저마다 차이가 있을 순 있지만 기본값은 16px이다.
• 텍스트 속성 중 font-wieght는 글자 두께이며, 사용할 수 있는 두께는 다르고 기본 폰트일 때는 구글에 나와있는 100 ~ 900까지 수치를 전부 사용할 수 없다. 레귤러와 볼드만 쓸 수 있다.
• 텍스트 속성 중 letter-spacing은 글자와 글자 사이의 여백인 자간을 뜻하며, 디자인마다 자간이 다른 경우가 많기 때문에 코딩할 때 자세히 확인해야한다.

See the Pen 텍스트 속성 by psm817 (@psm817) on CodePen.

 

 

[선택자]

예시) <section>
             <div>텍스트1</div>
         </section>
         <div>텍스트2</div>

 

• 예시와 같은 짜여진 html에 텍스트 속성을 주기위해 css를 작성할 때 div 속성값을 적용하면 '텍스트1' 과 '텍스트2'가 엘리먼트 관계에 상관없이 모두 적용된다.
• 예시에서 '텍스트1'만 속성값을 적용시키려면 선택자를 이용해야 한다.
• 선택자는 특정 엘리먼트에 코드를 적용시키기 위해 사용한다.
• section안에 div에만 적용시키기 위해선 css에서 section > div로 작성한다.

See the Pen 선택자 by psm817 (@psm817) on CodePen.

 

 

[인접동생 선택자]

예시) <section>
             <span>텍스트1</span>
             <span>텍스트2</span>
             <span>텍스트3</span>
         </section>

 

• 예시는 body를 기준으로 section 아래에 span 후손 엘리먼트들이 있다.
• span는 서로 형, 인접동생 엘리먼트 관계이다.
• css에서 3개의 span 중 '텍스트3'에만 속성을 적용하고 싶다면 > 선택자와 함께 + 를 붙혀 사용한다.
• section > span + span + span { color: red; } 와 같이 작성하면 '텍스트3'에만 빨간색 텍스트가 적용된다. 

See the Pen 인접동생 선택자 by psm817 (@psm817) on CodePen.

 

 

[젠 코딩]

• html에도 선택자를 사용하여 태그를 자동 완성할 수 있다. (젠코딩)
• section>span{텍스트$}*2를 작성하고 Tab를 누르면 <section><span>텍스트1</span><span>텍스트2</span></section>이 완성되지만 가독성을 위한 코딩 배치는 본인이 직접 수정 해야한다.
• 여기서 *2는 span 태그를 2개 생성하고 텍스트$에서 $는 1부터 차례로 만들고자 하는 갯수만큼 숫자를 생성한다는 뜻이다.
• 젠코딩에 class를 포함하려면 .를 작성하면 된다.
• div.color.background*3를 작성 후 Tab를 누르면 <div class="color background"></div>와 같이 2개의 class 속성을 가진 태그가 3개 생성된다.
• 젠코딩에 인접동생 엘리먼트를 포함하려면 +를 작성하면 된다.

예시) div.inline-block-box.color-1+div.color-2+div.inline-block-box.color-3를 작성 후 Tab를 누르면

<div class="container">
    <div class="inline-block-box color-1">텍스트</div>
    <div class="color-2">텍스트</div>
    <div class="inline-block-box color-3">텍스트</div>
</div> 와 같이 자동완성된다.

 

 

[class 선택자]

• class는 태그에 별명을 붙혀주는 속성이다.
• 작성 방법은 <태그 class="별명"></태그>와 같은 형식으로 작성한다.
• class에 오는 속성값(별명)에는 숫자가 가장 먼저 올 수 없다.
• css에서 해당 class 선택할 때 .를 앞에 먼저 쓴다. ex) .div { color: red;}

See the Pen class 선택자 by psm817 (@psm817) on CodePen.

 

 

[복습]

See the Pen 3일차 복습 by psm817 (@psm817) on CodePen.