HTML_부스트코스

1. 태그

: 그 의미(semantic)에 맞춰서 사용해야 됨(링크, 이미지, 목록, 제목)

- 이유 :  스크립트 리더기, 검색엔진의 제대로 된 기능을 위해서

- html tag list

www.w3schools.com/TAGS/default.ASP

HTML Reference

- test : jsbin.com/?html,output

- 하위 태그 바로 쓰는 법 :  > 를 통해 표현 가능

<style>
    div > p {
        font-size:20px;
    }
</style>

 

 

2. HTML Layout 태그

: 레이아웃(HTML 화면을 구성하는 기본적인 모습)을 구성하는 태그

- div : pc에서는 header, footer, nav보다 주로 div를 씀

- header

- footer

- nav

- aside : 사이드 쪽에서 추가적인 것 표시

 

 

 

3. HTML 구조설계

: 화면을 계층적 구조로 하나씩 설계해야

(1) 상단/본문/네비게이션 등 큰 부분 분리 (ex> header, div, footer)

(2) 각 영역 내 내용의 구조 잡기(ex> 목록, 이미지, 문단) → 적절한 태그 선택

(참고 - 검색어 : HTML structure Design의 그림)

 

 

 

4. class와 id 속성

(1) class

- 하나의 HTML 문서 안에 중복해서 쓸 수 있음

- 비슷한 속성을 여러 개의 요소에 쓰고 싶을 때 (ex> CSS 스타일 적용)

- 하나의 태그에 여러 개의 다른 class를 공백 기준으로 나열 가능

 

(2) id

- 고유한 속성(오류는 나지 않지만 의도적으로 하나만 써야!!)

- 하나하나에 특별한 제어, 검색이 가능

 

(3) data-*

- 추가적인 데이터 정보 표현을 위해 사용하는 속성

- 화면에 안 보이게 글, 추가 정보를 엘리멘트에 담아놓을 수 있음

- javascript에서 data를 이용해 속성 값 호출 및 변경이 가능 : dataset.*

<article
    id = "example"
    data-columns = "3"
    data-index-number = "1234"
    data-parent = "car">

var article = documemnt.getElementById('example');
article.dataset.columns
article.dataset.indexNumber //대시는 camelCase로 변경
article.dataset.parent

- css에서도 접근이 가능 :

① attr 함수의 생성된 content 사용 : attr()을 통해 selected element의 속성을 style에 적용하는 것

② css의 속성 선택자로도 활용 가능

article::before{
    content: attr(data-parent);
}

article[data-columns='3']{
    width: 400px;
}

- 인터넷 익스플로러11+ 이전 버전들은 dataset을 지원하지 않으므로, getAttribute()를 통해 접근해야 됨

- 검색 크롤러가 데이터 속성의 값은 찾을 수 없음

(참고 : developer.mozilla.org/ko/docs/Learn/HTML/Howto/%EB%8D%B0%EC%9D%B4%ED%84%B0_%EC%86%8D%EC%84%B1_%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)

 

======================================================================

++CSS 방법론 <BEM 방식>

1. BEM이란?

Block, Elemnt, Modifier로 구성되게 클래스네임을 짓는 방식. 각각은 __와 --로 구분한다.

.block__navigation--modifier{
    property : value;
}

2. Block

: 재사용 가능한 기능적으로 독립된 페이지 컴포넌트

- block은 block를 감쌀 수 있음.

 

3. Element

: 블럭을 구성하는 단위. 자신이 속한 블럭 내에서만 의미를 가진다.

- 중첩이 가능함 but 중첩된다고 하위 엘리먼트로 취급하지는 않는다.

 

4. Modifier

: 블럭이나 엘리먼트의 속성. 각 블럭, 엘리먼트에 차이점을 부여

- boolean type

<ul class="tab">
    <li class = "tab__item tab__item--focused">탭1</li>
    <li class = "tab__item">탭2</li> <!--focused = false-->
</ul>

- key-value type

<div>
    <strong class = "title"> 일반 로그인 </string>
    <form class = "form-login form-login--theme-normal"> <!--key=theme, value=normal-->
        <input type="text" class="form-login__id"/>
        <input type="password" class="form-login__password"/>
    </form>
</div>

 

참고 : nykim.work/15

(웹이 익숙해진 뒤 다시 보자!!)