[4주][3일][1~2th] HTML/CSS: CSS용어정리 및 실습

★ CSS 용어정리

letter-spacing: ☜ -1px 자간(글자간) 간격
word-spacing: ☜ 10px 단어간의 간격

 

font-style: italic  ☜ 이탤릭체

font-weight: bold; ☜ 굵은체로

font-variant: small-caps; ☜ 작은크기의 대문자로

 

text-decoration: underline; ☜ 글자에 밑줄긋기

text-transform: capitalize; ☜ 영어 단어의 첫글자를 대문자로

text-indent: 100px; ☜ (문장의 시작만) 들여쓰기. (%),(-)값도 가능

text-align: justify; ☜ 양끝맞춤

text-align: center; ☜ 가운데정렬

text-shadow: ☜ 1px 2px 2px #999; 글자에 그림자효과를 줌.

 

list-style-type: lower-alpha; {ol,li} 구조에서 1,2,3,4 번호매김을 a,b,c,d로 바꿈

 

셋트

width: 200px;
height: 30px;
background: #ff0;
overflow: hidden; ☜ 200x30px 크기의 상자 밖을 삐져나오는 글자들을 안보이게 함.

 

Before

 

After

 

셋트

white-space:nowrap;
text-overflow: ellipsis;

overflow: hidden;  ☜ 상자 숨겨지고 ...표시

  

#box3 p{
 white-space:nowrap;
 text-overflow: ellipsis;
 width: 200px;
 height: 30px;
 background: #ff0;
 overflow: hidden;
}

 

 

☆ 자식선택자 사용하기

 (1) 포함된 관계일 때 : {ol과 li}

 - .aa > li{} : 클래스 aa의 인접한 자식인 li만 적용해줌

CSS

.aa > li{
 color: #f00;
 border: 1px solid #00f;
}

HTML

<h4>요리법</h4>
  <ol class="aa">
   <li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
   <ol>
    <li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
    <li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
    <li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
    <li>고기를 다진 후 다진 파, 마늘, 소금, 깨소금, 후춧가루, 참기름을 넣고 고루 주물러 양념한다</li>
   </ol>
   <li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
   <ol>
    <li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
    <li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
    <li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
    <li>양념한 쇠고기를 조금씩 떼어 손바닥에 얹고 동글동글하게 굴려 직경 2Cm 정도의 완자를 빚는다</li>
   </ol>
   <li>완자를 밀가루에 굴려 얇게 묻히고, 푼 달걀을 씌운다  깍뚝 썬 빵조각을 완자에 골고루 묻힌다</li>
   <li>빵조각에 굴린 완자를 180도로 끓는 기름에 튀겨 내어 튀김망에 건져 기름을 뺀다</li>
  </ol>

 

Before

 

After

 

(2) 동등한(별개의) 관계일 때

 - h3+dl{} : h3과 dl은 동등한 형제관계이기 때문에 +를 붙여준다.

CSS

h3+dl{
 color: #f00;
 border: 1px solid #00f;
}

HTML

<h3>쇠고기완자 <span>튀김</span></h3>
  <dl>
   <dt>재료1</dt>
   <dd><span>쇠고기 200g,</span>  <span>다진 파 1큰술,</span>  <span>다진 마늘 1작은술,</span> <span>소금 1/2 작은술,</span> <span>깨소금 1작은술,</span> <span>참기름 1큰술,</span> <span>후춧가루 1/4 작은술,</span> <span>밀가루 1/4 컵,</span> <span>달걀 2개,</span> <span>식빵 2쪽,</span> <span>튀김기름</span></dd>
  </dl>
  <dl>
   <dt>재료2</dt>
   <dd><span>쇠고기 200g,</span>  <span>다진 파 1큰술,</span>  <span>다진 마늘 1작은술,</span> <span>소금 1/2 작은술,</span> <span>깨소금 1작은술,</span> <span>참기름 1큰술,</span> <span>후춧가루 1/4 작은술,</span> <span>밀가루 1/4 컵,</span> <span>달걀 2개,</span> <span>식빵 2쪽,</span> <span>튀김기름</span></dd>
  </dl>
  <hr />

 

 

  - h3 dl{}

 

  - h3+dl{}

 

 ☆ 전통 한과 차 만들기

body{
   font-family: "맑은 고딕";
  }
  ul{
/*    list-style-type: none; */
   width: 200px;
   color: #ff0;
   font-weight: bold;
  }
  li{
    padding: 10px 10px 10px 20px;
  }

CSS

li:FIRST-CHILD{ 
   background-color: brown; 
  } 
li:last-child{ 
   background-color: silver; 
  }
li:nth-child(3){
     background-color: #FFBB00; 
  } 
li:nth-child(4){ 
   background-color: #D941C5; 
  }

 

li:nth-child(odd){
   background-color: #5F00FF;
   }
li:nth-child(even){
   background-color: #3DB7CC;
   }