Y&S 두 여자의 말랑말랑 생활공감

구조와 모양을 분리하여 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;}
-위,오른쪽,아래,왼쪽

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

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

#은 아이디(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 만 클래스 네임을 선택해서 불렀다면 우측 파란색과 빨간색 글씨인 부분이 함께 선택되는 것이다.