CSS 기법들

알면 좋은 것들

• 일반적으로 footer태그 영역안의 링크들은 nav로 하지않는다.
• section태그에는 반드시 h1~h6태그들이 포함되어야한다.
• inline구조엔 패딩의 위쪽이 안먹음(inline-block ㄱㄱ)
• 공백 대신  
• 이미지 스프라이트 기법 (CSS background-position 속성 이용)

background-image를 확대하고 줄여도 가운데 고정시키기

header { background: url(../img/header_bg.jpg) repeat-x center top; }

 

말풍선(화살표)

-추가

 

li왼쪽에 circle bullet

li {
    position: relative;
    padding-left: 8px;
    box-sizing: border-box;
}

li:before: {
    content:''";
    width3px;
    height3px;
    border-radius:50%;
    position: absolute;
    left: 0;
    top: 8px
}

 

a태그에 마우스 hover하면 밑줄이 왼쪽에서 오른쪽으로 생기는 효과만들기

a { position: relative; }
a:after{
    content:'';
    position: absolute;
    display: inline-block;
    width: 0%;
    height: 1px;
    background-color: #25aad0;
    bottom: 0;
    left: 0;
    transition: all 0.2s ease-out;
}

li:hover a:after {
    width: 100%;
}

 

한줄효과

li {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

 

두줄이상효과 (벤더 프리픽스 필요)

li {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    max-height: 40px
}

 

폰트어썸 가상요소로 사용하기

※ 폰트어썸 사이트에 가서 F12 -> Select 누른 후 아이콘 클릭해보면 가상요소 코드 나옵니다.

.twitter::before {
    content: "\f099";
    font-family: "Font Awesome";
}

 

a태그로 아이콘 링크 만들기

a에 backgournd: url( )를 줘서 아이콘을 클릭하게 만들 수 있다. (IR기법으로 대체텍스트 삽입)

style은 display block으로 바꿔주고, width값과 height값을 주어서 크기 조절

 

텍스트 은은하게 하는 방법

text-shadow: 0 1px 1px rgba(0,0,0,.25),
             0 1px 25px rgba(0,0,0,.75);

 

박스 주변에 은은한 그림자 내는법

box-shadow: 0 0 20px rgba(0,0,0,.2);

 

반투명한 어두운 배경 깔아서 배경 위에 있는 글자 잘 보이게 하기

배경을 설정한 태그{ position: relative; }
배경을 설정한 태그::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.3);
}

// 문자열에 z-index를 주면 끝

 

반응형 유튜브 동영상(기본 비율 16:9)

유튜브영상 - 우클릭 -소스코드 복사 - 붙혀넣기 이렇게 게시된 유튜브영상은 반응형작업을 따로 처리해줘야한다.

유튜브영상은 기본 비율이 16:9임으로 화면이 축소되어도 항상 16:9 비율을 유지해야한다.

*padding, margin 속성에다가 %단위를 쓰면 상위 요소의 가로너비에 영향을 받는다.

.video{ max-width: 500px; }
.video .video-ratio {
    height: 0;
    padding-top: 56.25%;
    position: relative;
}

.video .video-ratio iframe(유튜브 소스코드) {
    position: absolute;
    top:0; left:0;
    width: 100%;
    height: 100%;
}

 

반응형 이미지

div { width : 400px; }
div img { max-width: 100%; }

 

position 가운데 정렬

top:50%;
transform: translateY(-50%);
Text-align:center;

 

display: none, opacity: 0, visibility: hidden 차이점

display: none	영역사라짐, 이벤트X, tab focusX
visibility:hidden	영역있음, 이벤트X, tab focusX, 뒤에있는 요소 클릭가능
opacity: 0	영역있음, 이벤트O ,tab focusO, 뒤에있는 요소클릭 불가능

 

사진 흐릿하게 느낌 주는법

.section--visual::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.3);
}

 

IR기법

/* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */

.ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}

 

/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때 */

.ir_wa {display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;}

 

/* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */

.ir_su {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}

 

github 스타일의 input

.input--text{
   height: 34px;
   padding: 0 12px;
   border: 1px solid #ddd;
   border-radius: 5px;
   box-sizing: border-box;
   outline: none;
   box-shadow: inset 0 1px 12px rgba(0, 0, 0, 0.075);
   font-size: 16px;
}

/* placeholder 글자 좀더 흐리게 vendor Prefix */
.input--text::-webkit-input-placeholder { color: #cacaca }
.input--text::-ms-input-placeholder { color: #cacaca }
.input--text::-moz-input-placeholder { color: #cacaca }

.input--text:focus{
    border-color: #51a7e8;
    box-shadow: 0 0 5px rgba(81, 167, 232, 0.5),
    inset 0 1px 12px rgba(0, 0, 0, 0.075);
 }