css

#과 .의 차이

#은 id
.은 class

after, before

요소의 앞과 뒤에 컨텐츠를 달고, 그 스타일을 지정할 수 있음

.cls1 .subcls{prop:value;prop:value;}
.cls1 .subcls:after{content:'';prop:value;prop:value;}
.cls1 .subcls:before{content:'';prop:value;prop:value;}

position

static

디폴트로 설정된 상태, 왼쪽에서 오른쪽, 위에서 아래로 표시됨

relative

static 상태에서 좌표를 추가로 (top, left, right, bottom) 값을 추가로 제공할 수 있음

absolute

position:relative 속성을 가지고 있는 부모를 기준으로 이동

fixed

스크롤에 상관없이 포지션이 특정위치에 고정됨

display

none

태그내용이 보이지 않게 함(영역도 차지하지 않음)

block

가로길이가 100%이며 한줄을 온전히 차지함

inline

줄바꿈되지 않음

inline-block

block과 inline의 중간형태, 줄바꿈이 되지 않지만, 크기 지정가능

overflow

visible

지정된 width, height를 넘어서는 컨텐츠를 모두 보여줌 스크롤이 표시되지 않는다

hidden

width나 height를 넘어서는 부분은 가려짐 스크롤이 표시되지 않는다

auto

내용이 모두 보여진다. 필요에 따라 스크롤이 자동으로 표시됨

scroll

내용이 모두 보여진다. 스크롤이 항상 표시됨

checked

태그가 checkbox 또는 radio 타입의 input 태그일때 check 표시되면 스타일이 적용됨

텍스트를 한줄만 표시하고 잘리는 부분이 있다면 … 표시

.bar {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* new css */
    max-width: 100%;
}

DIV로 원 그리기

#circle {
  position: relative;
  background-color: #09f;
  margin: 20px auto;
  width: 400px;
  height: 400px;
  border-radius: 200px;
}
<div id="circle"></div>:

반응형 스타일

width에 따라 다른 스타일을 적용할 수 있도록 함

/* width가 768보다 큰 경우 적용 */
@media screen and (min-width:768px){
}

문서의 특정위치로 이동

window.scrollTo(500, 0);

특정 ID의 포지션값

location.hash = $target.offset().top