1-2) 글로 적는 웹개발 공부 - 웹표준과 HTML 마크업, CSS

---

- 웹표준이란 구조 / 표현 및 동작 / 동작 및 제어 의 분리다.

- <h1> <div> <span> 이런 것들을 요소(element) 라고 한다.

- 강조를 나타내는 요소들은 <em> 과 <string> 등 이 있다.

- 아이콘 등을 나타낼 때 쓰는 요소는 <i> 요소다.

- 마크업을 할때는 최대한 의미에 맞게 해야한다.

- 요소는 블록레벨(block-level) 과 인라인레벨(inline-level) 요소로 나뉜다.

- 블록레벨 요소는 컨테이너다. 레이아웃을 담당한다.

- 인라인레벨 요소는 컨텐츠(글자)다.

- 블록레벨의 가장 대표적인 요소로 구역을 의미하는 요소는 <div>다.

- 인라인레벨의 대표적인 요소로 특별히 의미가 없지만 많이 사용되는 요소는 <span> 요소다.

---

- #id , #wrap 등은 id선택자 이다.

- .box , .shadow , .list_movie 등은 class선택자 이다.

- ul>li 에서 '>' 는 자식선택자 이다.

- ul li 에서 ' '(한칸 띄어쓰기)는 자손선택자 이다.

- ':' 는 가상클래스선택자 이다.

- :hover 는 해당 요소에 마우스오버 했을때 적용된다.

- '::' 은 가상요소선택자다.

- ::before / ::after 는 해당요소의 가장 첫번째, 마지막번째 자식요소가 된다. 그리고 인라인레벨요소이다.

- 블록레벨요소는 width , height 를 지정하여 크기를 줄 수 있다.

- 인라인레벨요소는 크기를 지정할 수 없다. 다만 인라인레벨 요소중 대체되는요소들은 크기를 지정할 수 있다. 

  만약 <a> 요소 등 인라인레벨 요소에 크기를 주고 싶으면 display 속성을 block 으로 변경해야 한다.

- 구체성 관련 공부를 해보자.

- 글자의 색상을 지정하는 css 의 속성은 color 속성이다.

- 글자의 크기를 지정할때는 font-size 속성을 작성한다.

- 글자의 두께를 지정할때는 font-weight 속성을 작성한다.

-  font-family 속성의 마지막에는 반드시 대표 family 를 지정한다. (영어로는 Generic family names 라고 한다.)

- 대표 family 중에 삐침이 있는 폰트를 serif 라고 한다.

- 대표 family 중에 삐침이 없는 폰트를 sans-serif 라고 한다.

- font 나 text 관련 속성들은 자손요소들로 상속 된다.

- class 는 한 페이지에 여러개 있어도 되고, 한 요소에 여러개를 지정할 수도 있다. ex) <li class='btn delete'></li>

- 외부 css 를 HTML 에 적용하기 위해는 <link> 요소를 연결한다.

- 뒷배경색을 적용하는 속성은 background-color 이다.

- 뒷배경이미지를 적용하는 속성은 background-image 이다.

- 뒷배경이미지의 반복을 적용하는 속성은 background-reapeat 이다.

- 뒷배경이미지의 위치를 지정하는 속성은 background-position 이다.

- 뒷배경이미지의 크기를 지정하는 속성은 background-size 이다.

- 글자들의 정렬을 위한 속성은 text-align 이다.

- 글자들이 부모를 기준으로 가운데 정렬 되게 하려면 text-align 속성의 값을 center 로 준다.

- 블록레벨안에 글자가 한 줄 이 있고, 그 글자들을 가운데 정렬하기 위해서는 블록레벨의 height 속성의 값과 

  line-height 속성의 값을 같게 써주면 된다.

- 부모로부터 벗어난 자식들을 처리하는 속성은 overflow 이다.

- 부모에서 벗어난 자식들을 숨기려면 속성값에 hidden을 준다.

- 글자 들여쓰기는 text-indent 속성이다.

- css 의 변화값을 부드럽게 처리하기 위해서는 transition 속성을 적용한다.

- 투평한 뒷배경색을 적용하기 위해 rgba() 속성값을 이용한다.

- 요소 전체가 (반)투명하기 위해서는 opacity 속성을 이용한다.

- 요소에 그림자를 적용하기 위해서는 box-shadow 속성을 이용한다.

- 클릭했을때를 적용하는 가상클래스는 active 이다.

- 박스의 끝을 둥글게 처리하기 위해서 border-radius 속성을 이용한다.

- 브라우저를 기준으로 어떤 요소를 위치지정하기 위해서는 position 속성의 값을 fixed 로 지정한다.

- 박스모델이란 width, hieght, border, padding, margin 의 값을 전부 더한 값이다.

- border, padding, margin 은 각각 top, right, bottom, left 가 있다.

- 브라우저 기준으로 수평, 수직 가운데 정렬하기 위해서는 position 을 fixed 로 지정하고, left 를 50%,

   top 을 50% 로 지정한뒤, margin-left 를(width의 절반), margin-top 을(height의 절반) 으로 지정하면 된다.

   (음수값으로 지정)

- 마크업에는 글자(콘텐츠) 가 존재하나, css 를 적용할때는 글자가 아닌, 이미지가 보여지게 하는 방법을 

  바로 IR(Image Replacement) 이라고 한다. 

  적용방법은 text-indent 속성을 -9999px 로 지정하고 overflow 속성을 hidden 으로 지정한다.

- 한 이미지를 나눠서 여러 요소에 적용하는 방법을 IS(Image Sprite) 기법이라고 한다. 

   이 경우 background-position 을 적절하게 지정하면 된다.

- 블록레벨요소들을 수평 레이아웃으로 개발하려면 display 속성의 값을 inline-block 으로 지정하거나,

  둘째, float 속성의 값을 left or right 로 지정하면 된다.

- float 속성을 지정하여 수평 레이아웃을 만들면 부모의 높이는 0 이다. 이를 해결하려면 

    1. 부모의 height 값을 적절하게 지정한다.

    2. 부모요소에 overflow:hidden 을 지정한다.

    3. 마지막 자식요소에 블록레벨을 추가하고 clear:both 속성을 지정한다.

- display 속성의 값을 inline-block 으로 지정하면 블록레벨요소의 장점(width, height 지정가능)과 

  인라인레벨의 장점(수평으로 레이아웃 가능)이 둘 다 적용된다. 단 글자로 취급되기 때문에 빈공백 만큼

  띄어지는 것을 주의해야 한다.

---