[Day1] CSS 1 - 개요, 스타일 적용 방법

[Day1] CSS 1 [11/9]

 

  1. CSS

     1) Cascading Style Sheets 약어

     2) html 문서의 스타일 지정하는데 사용되는 언어

         (html 문서에 요소가 표시되는 방법 )

      3) 많은 작업( 유지, 보수) 절약   

         예) 웹사이트 : 500 문서   파랑계열 -> 노랑계열

      4) 여러 웹 페이지의 스타일을 일괄적으로 관리할 수 있다.    

      5) 외부 스타일 시트( .css) 사용

          외부 자바스크립트 파일(.js) 사용

      6) 다양한 장치(기기) 및 화면 크기 디자인, 레이아웃 및 변경 등등 스타일 정의    

      7) html 요소 -> 화면 스타일 정의

                              인쇄(종이) 스타일 정의

                              또는 

                              기타 미디어에 표시되는 방식 정의 

   2. CSS 구문 형식

     sample.html 추가      

     

     스타일적용할 대상

     선택자

     selector           {

                적용할 스타일

                속성명:속성값;

                속성명:속성값;

                속성명:속성값;

                속성명:속성값;

     }

          

     3. CSS 적용하는 3가지 방법

          1) head >  style 태그 적용

              내부( internal ) CSS 적용방법

               - 해당 그 페이지만 스타일 적용.

               ex02.html

head)

<style>
   /* 
   body{
     background-color: red;
   }
   */
   
   /* 1. selector : 태그명 */
   h1{
      color: blue;
   }
   
   /* 2. 그룹화 선택자 */
   h1, h2, h3, h4, h5, h6{
      margin: 0;
      padding: 0;
   }   
</style>
<style>
   *{
      font-family: arial, verdana;
      color:black;
   }
   
   p{
      color:red;
      border:1px solid gray;
   }
   
   /* 3.  .클래스명 선택자 */
   .second{
      background-color: #e5e5e5;
      text-align: center;
   }
   
   .important{
     /* 텍스트 대문자로 변환 */
      text-transform: uppercase;
   }
   
   /* important 클래스 가진 요소 && div */
   div.important{
      /* <b></b>  bold 굵게 */
      /* 100 ~[400]~900 */
      font-weight: bold;
   }
   
   /* <p class="second important">
   p.second.important{
   
   }
   */
   
   p{
      color:green;
      
   }
</style>
</head>

body)

<h3>ex02.html - internal css 적용방법 예</h3>

<!-- h$*6>{Hello World} -->
<!-- internal css < inline css 우선 순위가 높다. -->
<h1 style="color:yellow;">Hello World</h1>
<h2 class="second">Hello World</h2>
<h3>Hello World</h3>
<h4 class="important">Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>

<p>
  <h1>Lorem ipsum dolor.</h1>
</p>


<!-- p*5>lorem7 -->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p class="second">Alias dolor provident rerum nisi? A quidem.</p>
<p class="important">Possimus rerum eveniet molestias maxime consectetur aliquam!</p>
<p>Eum tempore cupiditate id nam placeat aliquam!</p>
<p>Animi iste non quaerat reiciendis similique consequuntur.</p>


<!-- div*5>lorem5 -->
<div>Lorem ipsum dolor sit amet.</div>
<div class="second important">Eaque reiciendis veniam odio harum.</div>
<div>Reprehenderit ducimus deserunt ad laudantium.</div>
<div>Culpa libero qui eum quae.</div>
<div>Ex commodi aspernatur eligendi soluta.</div>

          2) 인라인( inline) CSS 적용방법

               시작태그   style 속성으로 css 적용하는 방법

               - 해당 그 요소만 스타일 적용.

<h1 style="color:yellow;">Hello World</h1>

           3)  외부(External) CSS 적용방법

               ????.css

               - 웹 사이트의 여러 페이지에게 스타일 적용하기 위한 방법.

               ex02_style.css   

@charset "UTF-8";

body{
	background-color: yellow;
}

html head

<link rel="stylesheet" href="ex02_style.css">