[4주][2일][1~2th] HTML/CSS: 외장CSS, 속성선택자

★ 오늘 배운 내용

  ▷ box-shadow : 1px 1px 1px 1px #666;

(1) x좌표

(2) y좌표

(3) 흐린 정도

(4) 확장(부드러운 정도의 모양이 뚜렷해진다)

(5) 색깔

 

 

☆ 실습(1) : 외장 CSS

  ▷ 외장CSS : 우리가 이제까지 한 것들은 내장CSS였으며, 외장CSS는 파일을 따로 만들어 불러오

                     는 형태이다.

 1. form.css

 

 

☆ 실습(2) : span(마크 효과) 적용

바디

<span style="background-color: #090; color: #fff;">4. 단 한가지</span>

 

결과

 

 

☆ 실습(3) : 외장CSS 실습

정답

  (1) cook.css

.line{
 border-bottom: 1px dashed #f00;
 color: #f00;
}
ul{
 list-style-type: none;
 border:1px dashed #f00;
 width:280px;
 margin-left:20px;
 padding:20px;
}
ul li{
 margin-left: -10px;
}
h3{
 background: #f03;
 margin-left: 20px;
 width: 300px;
 color: #fff;
 padding-left: 20px;
 padding-top: 10px;
 height: 40px;
}
body{
 font-family: "맑은 고딕";
}
ol{
 width:300px;
}

 

결과 화면

 

☆ 실습(4) : 속성선택자 활용하기

a[target="_blank"]{
   background: #ff0;
  }
/* a[title="중식조리기능사"]{
   background: #0f0;
  }
a[title^="조리"]{
   background: #0f0;
  }
a[title$="기능사"]{
    background: #00f;
   }*/
a[title*="중식"]{
    background: #0f0;
   }

^="조리" : "조리"로 시작하는 단어 찾아 적용

$="기능사 : "기능사"로 끝나는 단어 찾아 적용

*="중식" : "중식"이 포함된 단어 찾아 적용