bboks.net™

Style sheet 점과 샤프 본문

Web/HTML

Style sheet 점과 샤프

bboks.net 2012. 12. 7. 13:53

css는 웹페이지를 손쉽게 작성하고 수정하는데 아주 긴요한 프로그래밍 언어입니다.
스타일은 가장 친숙한 워드나 한글에서도 찾아볼 수 있습니다. 워드에서 제목을 정하고 그 제목에 스타일을 적용하면 그 스타일은 다른 제목에도 사용할 수가 있습니다. 이 스타일에 대해서 잘 알아두면 다른 프로그램에서도 이해하기 쉽습니다. 문서를 만드는데 스타일을 사용하지 않는 프로그램이 없을 정도입니다. 그만큼 편리하기 때문이죠.

  1. 태그(Tag) : 이것은 html 태그에 대해서 스타일을 재설정하는 것입니다. 예를 들어 제목을 정할때 h1태그를 사용하는데 이것을 사용하면 이 태그로 정해진 크기의 글씨로 나오게 됩니다. 이것에 대해서 색상을 수정하거나 크기를 변경하고자 한다면 h1태그에대해서 설정을 해줍니다. 앞에 클래스스타일이나 아이디스타일과는
    달리 아무것도 안붙입니다. html태그의 모든 태그에 대해서 스타일을 설정할 수가 있습니다.

  2. 클래스(Class) : 이것은 태그 스타일이 아닌 html의 모든 요소에 대해서 스타일을 정합니다. 예를 들면 caption을 넣을 경우 이 이름을 사용하여 클래스를 정합니다. 그러면 웹페이지의 모든 caption은 이 설정대로 표현됩니다. 코드작성시 앞에 . 점을 찍습니다.

  3. 아이디(id) : 아이디의 앞에 샤프(#)를 붙입니다. 이것은 위의 클래스 스타일과는 달리 설정을 하면 어떤 특정한 한 부분에 대해서만 적용을 할 수가 있습니다. 그러니 웹페이지의 한부분에 사용되는 것인 container라든가 content라든가 sidebar라든가 하는 부분에 대해서 설정을 하는 것입니다.

  4. 복합(Compound) : 위에서 말한 것 중에서 이미 적용된 스타일을 수정하여 다른 스타일을 적용하고자 할때 사용합니다. 예를 들어 아이디스타일 안에 h1태그를 다르게 설정하고 싶은 경우 복합스타일을 사용합니다. 예를 들어 container안의 h1태그를 다르게 하고 싶을때 이 스타일을 적용하는데 #container .h1~ 이런 식으로 스타일을 설정하게 됩니다.

페이지 제작할때 제일 처음으로 만드는 것이 body태그이고 그다음이 div태그입니다. body는 페이지 전체이고 네이게이션바나 본문인 content나 sidebar, footer는 div태그를 사용합니다. 이 태그는 가상의 박스라고 생각하면됩니다. 이 안에 이미지가 들어가고 글내용이 들어갑니다.


ul태그는 목록을 만들기 위해 사용합니다. 주로 네이베이션바를 만들때 많이 사용하는데요. 이태그 안에 li태그로 상세 항목을 사용합니다.
 
기본적인 내용을 작성해보면..

<body>
<div id="nav">
    <ul>
        <li><a href="home.htm">Home</a></li>
        <li><a href="products.htm">Products</a></li>
        <li><a href="services.htm">Services</a></li>
        <li><a href="about.htm">About Us</a></li>
    </ul>
</div>
</body>


위 내용에 대해서 스타일을 적용을 하면..

<style type="text/css">
#nav ul {
    list-style: none;         /* nav아이디의 ul태그에 대해서 앞에 작은 네모인 목록마크를 없애줍니다. */
}
#nav ul li {
    text-align: center;       /* li 태그에 대해서 설정해줍니다. */
    float: left;                 
    line-height: 46px;
}
#nav ul li a {               /* 하이퍼링크인 a태그에 대해서 설정합니다. */
    padding: 0 20px;
    display: block;
    padding: 0 15px 0 0;
    margin-right:5px;
    font-size:1.5em;
    text-align: center;
}
#nav ul li a:link, #nav ul li a:visited {      /* 하이퍼링크에서 이미 방문했을 경우 색상을 정합니다. */
    color: #000;
    text-decoration: none;
}
#nav ul li a:hover, #nav ul li a:active {       /* 하이퍼링크에 마우스를 올렸을 경우와 사용중인 경우 설정 */
    color: #F0F;
    text-decoration: none;
}
</style>

위 스타일의 내용을 보면 거의가 복합 스타일을 적용합니다.  그만큼 사용빈도가 많습니다.


[출처] style sheet 점과 샤프...펌

'Web/HTML' Related Articles more