CSS 1일차(tag)

CSS
* style태그 내에 *(에스크립트)를 통해 전체에 style을 적용할 수 있다.

text-decoration : none
 - list에 속한 text의 밑줄을 없애준다.
 - 속성값을 overline으로 줌으로서 윗줄긋기도 가능하다.

display : (attribute)
 - none, inline, block, inline-block등의 다양한 속성이 존재한다.
 - inline : text 크기만큼만 공간을 점유하고 줄바꿈을 하지 않는다.
 - block : 한줄을 점유하고 다음 태그는 무조건 줄바꿈이 적용된다.
 - inline-block : 두 속성의 특징을 가지고 있다. 줄비꿈을 하지 않고 동일한 라인에 내용 작성이 가능하며 inline에서 적용하지 못하는(width, height 등) 속성들을 변경/적용할 수 있다.

tag명[속성명]
 - 특정 태그의 해당 속성명을 통해서 style을 적용 할 수 있다
    -> 존재하지 않는 속성을 임의로 부여해서도 적용 가능하다.
    -> ex) <h1 asdf>h1 asdf속성 style 적용</h1>
             <style>h1[asdf] {background : yellow; color : red;}</style>

overflow : hidden
 - 하위 tag가 상위 tag의 범위를 넘어서지 못하게 해준다.

font-family
 - text editor에 있는 font style을 사용하면 된다.
 - 없는 font style을 사용하고 싶을 시에는 운영체제에(?) 다운로드를 받아야 한다.

Pseudo Class(수도 클래스)
 - 가상Class를 만들어 이벤트 설정을 할 수 있다.
        ( ?? - tag / id / class)
        ??:link {color : pink; text-decoration : none;}
         - 웹 문서에서 사용자가 방문하지 않았던 곳을 표시한다.
        ??:visited {color : blue;}
         - 웹 문서에서 사용자가 방문한 곳을 표시한다.
        ??:hover {text-decoration : overline; color : black;}
         - 웹 문서에서 사용자가 링크에 마우스 포인터를 올리는 순간을 나타낸다.
        ??:active {background : yellow;}
         - 웹 문서에서 사용자가 링크를 클릭하는 순간을 나타낸다.

border : (attribute)
 - dotted, solid, double 속성이 존재한다.

position : (attribute)
 - static, relative, fixed, absolute 속성이 존재한다
 - style에 top, bottom, left, right를 통해 해당 영역을 이동시킬 수 있다.
 - static : position속성을 별도 설정하지 않으면 기본으로 설정되는 값이며 위치변경 속성을 지원하지 않는다.
 - relative : 본인의 영역으로부터 위치변경 속성값 만큼 영역이동을 가능하게 한다.
 - fixed : 창의 크기변경 혹은 스크롤을 움직여도 항상 고정된 위치에 배치된다. (영역이동 가능)
 - absolute : 웹 문서의 흐름과 상관없이 전체 페이지를 기준으로 고정적인 위치에 배치한다.(영역이동 가능)