<스타일을 쓰는 방법>

 

1. html 태그에 직접 스타일을 넣는다.

 

2. 이름을 불러 head사이에 아래와 같이 넣는다.

<style type="text/css">
선택{명령}
</style>


3. css파일을 따로 만들어 저장한 후 html에 링크시킨다.

<link rel="stylesheet" type="text/css" media="all" href="css/파일이름.css"/>

 


구조와 모양을 분리하여 html은 놔두고 css로 한번에 모양을 컨트롤하는게 나중에 수정에 용이하기때문에

스타일을 사용할때는 1번 방식보다 2나 3번 방식을 사용하는게 좋다.

 

2와 3번 방식으로 스타일을 사용하는 css 구조는 선택{명령} 으로 되어있다.

 

 



일단 많이 사용되는 기본 스타일속성을 알아보자. (이는 css구조에서 명령 부분에 해당된다.)

 

<글자관련속성>

 

*글자크기
{font-size:12px;}

 

*글자색상
{color:#333333;}

{color:#red;}
#색상코드 또는 red,blue,black등

 

*글자두께
{font-weight:bold;}

 

*서체지정

{font-family:Georgia, "Times New Roman", Times, serif; }

-조지아라는 서체를 찾아서 없으면 타임뉴로먼, 없으면 타임체, 없으면 쉐리프체 아무거나


 

*글자와 글자사이의 간격 조정
{letter-spacing:-1px;}

 

*글자높이 지정
{line-height:1.3;}

 

*글자정렬
{text-align:right;}
center-중앙,right-오른쪽,left-왼쪽

 

*글자꾸밈
{text-decoration:none;}
-underline(밑줄)
-none(밑줄삭제)

 

 

<기타속성>

 

*가로길이

{width:300px;}

 

*세로길이

{height:300px;}

 

*테두리지정- 선두께,선타입,선색상
{border:1px solid #666666;}
solid-실선, dashed-점선


*배경색
{background-color:#ededed;}


*박스모서리(이건 css3이다.)
{border-radius:10px 10px 10px 10px;}
-왼쪽위/오른쪽위/오른쪽아래/왼쪽아래


*박스안쪽 여유공백
{padding:10px; 20px; 5px; 10px;}
-위,오른쪽,아래,왼쪽


*박스바깥쪽 여유공백
{margin:10px; 20px; 5px; 10px;}
-위,오른쪽,아래,왼쪽

 

<이때 마진과 패딩 문법 쓰는 방법>

 

사방이 같을때
padding:20px;

 

위,아래/좌,우가 같을때
padding:20px 10px;

 

위/ 좌,우 / 아래
padding: 20px 10px 12px;

 

위/ 우/ 아래/ 좌 (시계방향)
padding: 20px 10px 12px 10px;


한 방향만 지정할때는 아래와 같이 사용하기도 한다. (margin 동일)
padding-top:10px;  =  padding:10px 0 0 0;
padding-right:10px;  =  padding:0 10px 0 0;
padding-left:10px;  =  padding:0 0 0 10px;
padding-bottom:10px; =  padding:0 0 10px 0;

 

왼쪽과 오른쪽 어느것을 사용해도 무방하다.

 

 

 


 

 

<스타일을 주기위해 선택하는 방법>


스타일을 줄때 이름을 먼저 지어준 후 이름을 불러 선택한다.

 

#은 아이디(id)를 부른다-객체이름
.은 클래스(class)를 부른다-반이름
태그는 그냥 직접부른다

 

세가지는 섞어 쓸 수 있으며
id는 페이지당 단 한번밖에 사용하지 못하기 때문에 보통 개발자들이 쓰도록 놔두고

일반적으로 클래스를 많이 사용한다.
id와 class는 이름이 같아도 상관없다. (개인의 이름과 반이름이 같을수도 있는것처럼...)

 

 

 

그럼 실제로 css가 어떻게 사용되는지 보자.

아래는 스타일을 두번째 방식으로 사용했다.

1. p라는 태그를 직접 불러 스타일을 주고,

2. 문장의 일부 스타일을 주고 싶은 부분에 인라인 태그인 span을 넣어
클래스네임을 임의로 부여한 후(ex1) 클래스를 불러 스타일을 준 경우이다.

 

 

 

그러면 아래와 같이 브라우저에서 보여진다.

 

 

 

 

위에서 스타일을 두가지 방식으로 적었는데,

 

{border:2px solid red; line-height:20px; font-size:13px;}

이렇게 한칸씩 띄면서 옆으로 길게 늘어쓰거나

 

{
font-size:16px;
color:blue;
font-weight:bold; 
}
하나의 스타일마다 밑으로 내려쓰는 방법이 있다.

어떤 방식을 사용해도 무방하나 보통 스타일이 많지 않을때는 옆으로, 스타일이 많아질때는 아래로 내려쓴다.
요새는 스타일이 많아지기 때문에 점점 내려쓰는 방식으로 많이 쓴다고...
하지만 뭐 본인이 쓰기 나름이다.

 

 


 

 

스타일은 보통 따로 지정하지 않으면 안에 들어가있는 하위 태그에 모두 같이 적용이 되지만 링크가 걸리는 a태그는 예외이다.

 

 


 

 

때문에 아래와 같이 a태그를 불러 따로 스타일을 지정해줘야 된다. (색상,언더라인 등)

 

 

 

 

 


 

 


<스타일을 주기위해 이름을 부르는 방법>

 

-부모를 부르고 한칸띄어 자식을 부를수있다.

 

 

.top1 {font-size:20px;}
.text_b .top1 {color:red;}

top1이라는 클래스를 바로 부르나 부모의 클래스네임인 text_b를 부르고

한칸띄어 top1이라는 클래스네임을 불러도 같다.


단, top1이라는 클래스네임이 여러개일때 top1만 부르면 모두 같은 스타일이 적용되므로 

어디부터 부를건지는 잘 생각해서 지정해줘야한다.

 

 

 

 

-할아버지 아들을 부르던 할아버지 아버지 아들을 부르던 같다.

 

 

.text_b2 li {color:blue;}
.text_b2 ol li {color:blue;}

 

 

 

-컴마를 사용해 두명을 함께 불러 스타일을 같이 적용시킬 수 있다.

 

 

.best, top1 {color:red;}

 

 


-붙여서 동급을 부를 수 있다.

 


dl 이면서 클래스 info 인것을 지칭

dl.info {}

 

call이라는 아이디를 가진 dl (한칸띄면 자손을 부름)이면서 info라는 클래스 이름을 가진 dt를 지칭
#call dl.info dt {}

div이면서 call 아이디면서 클래스이름 text_box1의 info라는 클래스 이름을 가진 dt를 지칭
div#call.text_box1 .info dt{}

 

 

 

 

*********  그럼 여기서 봤을 때 ************

 

 

p태그이면서 클래스네임이 text1 인것을 선택할때는 p.text1

p태그아래의 text1이라는 자손을 선택할때는 p .text1

이렇게 되는것이다.

 

스타일을 줘보면 아래와 같이 다르게 지정된다는 것을 알 수 있다.

이때 .text1 만 클래스 네임을 선택해서 불렀다면 우측 파란색과 빨간색 글씨인 부분이 함께 선택되는 것이다.

 

 

 

 

 

 
 
 
 

 

 

Posted by 두여자 Y&S

댓글을 달아 주세요

  1. CSS 중요한데 간과하고 넘어가기 쉽지요 !

    오래간만에 CSS 보네요. 한동안 열심히 스킨을 수정 했었는데 CSS 보니 다시 변경하고 싶은 생각이 많이 들어요.

    체계적으로 잘 정리되어 있어 보기 좋네요.

    즐거운 하루 되세요.

    2013.05.13 08:14 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 넵! 저도 요새 웹표준이란걸 기본부터 배우고 있어서 나중에 잊어버릴까봐 정리해두는 중이에요^^

      님도 좋은 하루되세요~~~

      2013.05.13 08:40 신고 [ ADDR : EDIT/ DEL ]
  2. 쪼랩

    css구조, 부모자식 부르는것 ㅋㅋ 정말 중요한것 같아요.. 이 부분을 완전히 익히고 다음으로 넘어가야겠어요.. 은근히 헷갈리네요.. 그런데.. 코딩할때..어떻게 하시나요? css 먼저 작업하시나요? 아니면 html코딩먼저 하시나요? 아니면 동시에 같이 하시나요? css를 하다보니 이건 동시에 같이 진행해야 할 것 같아서요.. 나중에 해도 될거 같기도 하구...

    2013.07.29 11:30 [ ADDR : EDIT/ DEL : REPLY ]
    • 보통 전체적인 구조를 생각하면서 html마크업부터 합니다.
      html구조를 잘짜야 나중에 조정하기가 쉬우니까요
      css는 그 이후의 문제고요~
      근데 물론 복잡해지면 부분부분 병행하면서 하겠지만요

      점심식사 맛있게 하세요^^

      2013.07.29 11:58 신고 [ ADDR : EDIT/ DEL ]
  3. 흠..

    물론 웹표준 진리이지만... 그래도 역시 정신차리고 보면 막코딩한 결과물만..ㅡㅡ;;

    2015.04.23 10:26 [ ADDR : EDIT/ DEL : REPLY ]
    • ㅎㅎ 사실 코딩은 이렇게 가나 저렇게 가나 같은 결과물이 나오는경우가 많아서 정석을 따르기가 쉽지않죠^^;
      잘 안되면 어떻게든 결과물을 창출하기위해 야매(?)로 그냥 해버리니까여 ㅋ

      2015.04.24 08:41 신고 [ ADDR : EDIT/ DEL ]