본문 바로가기

HTML & CSS

CSS - 1

CSS는 HTML태그에 디자인을 넣어주는 것이다. 

 

CSS적용 하는 방법 3가지

 

 1.태그 style 속성에 직접사용

   html

      <h1 style="color : red;"> 제목1</h1>

    html  

-작성하기엔 편함 하지만 스타일이 많아지면 가독성이 떨어짐

-html 태그와 style이 같이 있어 유지보수 힘듦

   html

     

<h1 style="color : red; font-size: 30px; background-color: yellow; font-weight:bold;"> 제목1</h1>

    html  

 

2. style 태그

 html 파일 내에 CSS작성 방법

<style> 태그 사이에 CSS문법 사용 스타일 적용

 <style>
   h2{
     color:red;
   }
 </style>

-html구조와 디자인이 분리되지 않아 유지보수에 적합하지 않는다

 

3.CSS 파일에 작성

html파일에 적용하여 주기위해 연결해줘야함

<link href="style.css" rel="stylesheet" type="text/css"/>

 

CSS 문법

-태그이름으로 스타일적용(ex html: <a></a>)

a {
   color : blue;
   text-align : center;
}

 

-class name으로 스타일적용(ex html:<div class="hi"></div>)

.hi {
   color : blue;
}

 

-id로 스타일 적용(ex html : <div id="bye"><div>)

#bye {
   color : gray;
}

'HTML & CSS' 카테고리의 다른 글

HTML 부모태그와 자식태그  (0) 2023.02.17
CSS-inline/inline-block/block  (0) 2023.02.07
Img tag & background-image 차이  (0) 2023.02.07
CSS-2  (0) 2023.01.03
HTML 시작하기  (0) 2023.01.02