[4주][4일][1~2th] HTML/CSS:

★ 용어정리

CSS

p:FIRST-LETTER{} ☜ 첫글자만 바뀜

p:FIRST-LINE{} ☜ 첫줄만 바뀜

float: left; ☜ 왼쪽 정렬

border-radius: 50%; ☜ 모서리 둥글게

 

list-style-type: none; ☜ 그림과 같이 없애줌

#categoryBox h1 { border-bottom:solid 1px silver; } ☜ 그림과 같이 카테고리 밑에 밑줄 그어줌

h2:before{ content: "내용"} ☜ h2 전에 내용 붙이기

h2:after{ content: "내용"} ☜ h2 뒤에 내용 붙이기

 

HTML

<colgroup>...<col> : 열 그룹 지정하기

<tr> : 선 긋기. 선에 약간 그림자 있음.

 

 

☆ 실습(1) : colgroup-col에 색깔 적용하기

1. 바디 안에 colgroup을 만들어 표의 열에 색깔을 다르게 주고자 했다.

    첫번째 col에는 span을 적용해서 열을 2번 건너뛰었고, 두번째 col에 class를 적용했으니, 네번째

    열에 스타일이 적용될 것이다.

(테이블 안에 위치)

 

클래스에 꾸미기 적용

.aa{

background: #FFD9FA;

}

 

결과

 

☆ 실습(2) - 첫글자에 스타일 적용하기

/* 첫 번째 글자  */
  p:FIRST-LETTER{
  font-size: 30px;
  display:block;
  margin:20px;
  float: left;
  }

비포

 

에프터

 

 

☆ 실습(3) : before, after 선택자(CSS)

CSS

h2:before{
 content: "진짜 맛있는" url(images2/bul1.gif)
}
h2:after{
 content: url(images2/bul2.gif)"요리법"
}

url로 그림을 넣어줄 수도 있다. 그림으로 쌍 따옴표를 넣었다.

 

원본

 

before, after 적용시

 

 

☆ 실습(4) - 텍스트에 블록 씌우기

다음과 같은 CSS를 적용해준다.

클래스 bbsMenu의 a태그는 글자, 즉 라인으로 이루어져 있으므로 display:block으로 박스화 시켜줘야 한다. 그래야 width값을 조정해서 배경을 지정할 때 오른쪽 가장자리를 맞출 수 있다.

.bbsMenu a{
    display:block;
    width:100px;
    }
    .bbsMenu li{
    padding:1px;
    }
    .bbsMenu a[title^="자유"]{
    background-color: #f00;
    color:#fff;
    }
    .bbsMenu a[title*="회원"]{
    background-color: #00f;
    color:#fff;
    }
    .bbsMenu a[title$="레시피"]{
    background-color: #47C83E;
    color:#fff;
    }

 

결과