[프론트엔드] 6. CSS 개요

[ 1 ] CSS

: 선택자{속상:값;}

• 선택자 : CSS를 적용할 대상.
• 속성 : CSS 종류.
• 값 : CSS 값.

  예시 )

  span{
     color: lightgreen;
     font-size: 100px;
     margin: 10px 20px 30px 20px;
  }

[ 2 ] CSS 선언

내장 방식

: HTML 파일 내에 <style></style> 의 내용으로서 CSS 작성.

인라인 방식

: 요소 내에 style 속성을 이용하여 CSS 작성.

링크 방식

: 외부 문서로 CSS를 작성 후 <link />를 이용하여 연결.

@import 방식

: 링크 방식으로 main CSS파일을 HTML로 연결하고, 또다른 세부적인 CSS 파일은 @import 규칙을 이용하여 main CSS파일로 연결.

[ 3 ] CSS 상속

: 부모 요소의 CSS가 하위 요소에게도 적용되는 것을 말한다.
: 대부분의 글자나 문자 관련 속성들은 상속된다.

강제 상속
: 상속 되지 않는 것을 강제로 상속 하게 하는 것을 의미한다.
: inherit

예시 )

<div class="parent">
 <div class="child">
 </div>
</div>

.parent {
   width: 200px;
   height: 200px;
   background-color: purple;
}
.child {
   width: 50px;
   height: inherit;
   background-color: orange;
}