이아임의 블로그

text-decoration속성을 통해서 밑줄, 취소선, 윗줄 주기

text-decoration속성은 CSS를 사용해 텍스트에 밑줄, 윗줄 또는 취소선(가운데선)등을 사용하는 방법입니다. 
text-decoration 속성을 사용할 경우 이와 같은 스타일 구현이 가능합니다. 
이 속성은 다음과 같은 값을 지정할 수 있습니다.

text-decoration : underline(밑줄)
text-decoration : overline(윗줄)
text-decoration : line-through(취소선)
text-decoration : none(숨기기)

a링크를 걸때 밑줄이 있을 경우 밑줄을 제거하려면
a{
    text-decoration: none;
}
을 하게 되면 밑줄이 없어진다.

<ul>과 <li>로 테이블을 대체할수 있다.

하지만 요즘 다시 웹표준으로 <table>을 많이 사용하기 때문에 간단하게 어떻게 사용하는지
알아보고 가도록 한다.

<ul>과 <li>는 style 속성이 제일 중요하다.

div { width: 300px; border: 1px solid #000000; border-top: none; border-right: none; } 
div ul { clear: left; margin: 0; padding: 0; list-style-type: none; position: relative; border-top: 1px solid red; display: inline-block; } 
div ul li { box-sizing: border-box; width: 100px; float: left; text-align: center; margin: 0; padding: 2px 1px; position: relative; border-right: 1px solid red; }

div는 table 을 나타내고, ul은 tr로, li는 td를 나타낸다.

div의 사이즈를 정해주고 ul의 list-style-type을 none을 줘야지 ul의 특성인 ●로 뜨는 리스트를 방지할수 있다.
그리고 display: inline-block을 줌으로써 ul이 이어지게 설정을 했다.

li는 margin과 padding에 의해서 표가 깨지는걸 방지하기 위해 width에 포함시키려고 box-sizing을 사용,
float를 left를 줌으로써 list 특유의 아래로 들어가는 설정을 방지했다.

예제를 보도록 하겠다.

http://hyoseung930.cafe24.com/bolg_poster/ul_li_table_test_page.php

구글 웹폰트는 이미 만들어진 다양한 웹폰트를 제공해준다.
모두 무료이며 어디서든 어떻게든 가져다 쓸수 있다.

https://fonts.google.com/

위 사이트는 영어 전용 웹폰트를 지원해주는 사이트이다.
500개 이상의 웹폰트가 존재하며, 역시나 무료이다.

하지만 한글이 들어간 웹폰트를 찾는다면
https://fonts.google.com/earlyaccess

간혹 width에 padding과 margin을 사용하게 되면 width 따로 padding과 margin이 따로 적용되어서
원하는 사이즈가 나오지 않을 때가 있다.
그럴 때에는 width와 padding, margin을 합치는 css를 이용하면 된다.

box-sizing: border-box;

위 아래 자간 설정은
line-height: 10px;

좌 우 자간 설정은
letter-spacing: 10px;

소숫점 단위까지 설정이 가능하며 눈에 뛰는 단위는 0.1 단위까지다.

@font-face{
    font-family: "font_name";
    src: local("?"), url("/font/font_name.woff") format("woff");
}

font-family는 html, body 같은 곳에서 사용될 폰트명을 지정해주는 것이다.

src의 경우는 local() 일 경우 local에서 현재 사용중인 폰트가 있는지 체크해주는 역할, 없을 경우
url로 넘어가 서버에 올라가 있는 폰트를 가져온다. format은 폰트의 글꼴 형식을 설정해주는 곳이다.

만약 다른 서버의 폰트를 사용하고 싶다면

url("http://font_server/font/fint_name.woff") 이런 형식으로 사용하면 되지만
서버에서 외부에서 자원을 사용하게 설정을 안하면 오류가 난다.

Host 설정 부분에 
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
을 추가해주면 오류를 해결할수 있다.

이미지가 3개 기준

HTML

<div id="main_slide">
    <div class="wrap">
        <div id="slider">
            <div>
                <img src="">
                <img src="">
                <img src="">
            </div>
        </div>
    </div>
</div>

CSS

@keyframes slidy {
    0% { left: 0px; }
    20% { left: 0px; }
    30% { left: -100%; }
    50% { left: -100%; }
    60% { left: -200%; }
    80% { left: -200%; }
    100% { left: 0px; }
}

#main_slide {width: 100%;}
#main_slide > div.wrap > div#slider {overflow: hidden; position: relative;}
div#slider > div > img {width: 33.333333333333333333333333%; float: left;}
div#slider > div { 
    position: relative;
    width: 300%;
    margin: 0;
    top:0;
    left: 0;
    text-align: left;
    font-size: 0;
    -webkit-animation: 20s slidy ease-in-out infinite;
    animation: 20s slidy ease-in-out infinite;
}

.nav{ 
    height: 100px;

    /* Old browsers */ 
    background: #3a9dce !important;

    /* FF3.6-15 */ 
    background: -moz-linear-gradient(top, #3a9dce 3%, #246585 100%) !important;

    /* Chrome10-25,Safari5.1-6 */ 
    background: -webkit-linear-gradient(top, #3a9dce 3%,#246585 100%) !important;

    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
    background: linear-gradient(to bottom, #3a9dce 3%,#246585 100%) !important;

    /* IE6-9 */ 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a9dce', endColorstr='#246585',GradientType=0 ) !important;
}