html 웹 개발 기초 css 태그 스타일 주는 방법 세가지

css 태그 스타일 주는 방법 세가지

 

1. 직접 태그 옆에 쓰기

<div style="color:red;">안녕하세요</div>

 

2. 스타일 태그로 속  어떤 것을 선택해서 어떤 속성으로 얼만큼(값)을 줄건지 쓰기

선택자{

속성:값;

  }

 

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

 

3. html 에 css 파일 링크 가져오기

<link rel="stylesheet" href="./가나다라.css">

 

div {

   color : blue;

   font-weight : 900;      글자의 두께

   font-size : 200px ;     글자의 크기

   text-align : center;     텍스트 정렬(가운데)

   text-decoration : underline; 글자 밑줄

   text-decoration : line-through; 글자 가운데 줄

   text-decoration : overline; 글자 위에 줄

   background-color : green; 배경 컬러

   letter-spacing : 10px; 글자 간격

   text-shadow : 2px 1px red; 글자 그림자 (그림자 위치가 앞에 있는 픽셀은 오른쪽으로 얼마나, 뒤픽셀은 밑으로 얼마나                                                                   이동할건지)

    width:400px; div(줄)의 너비(길이)

    height:400px; div(줄)의 너비(높이)

 

 

줄에 마우스 올리면 글자색깔이 변하게하는 것

div:hover {

    color:red;

  }

 

div가 여러개일 경우 구분

1) div에 id값 주기

<style>

   #ca {

 

2) 클래스 주기 

   .ca {

 

id는 고유값이기 때문에 중복 이름이 있을 수 없음

class는 그룹 -> class에 해당하면 중복되게 스타일 줄 수 있음

 

스타일이 중복되면 아래쪽에 있는게 적용되어서 보여진다.

 

#test {

   color:blue;

   border:2px solid;  div 테두리에 실선

   border-color:black; 테두리 색깔

}

.test {

color:green;

boder:2px doted; div 테두리에 점선

border-radius:10px; 모서리 굴곡주기

margin-top: 40px; div상자 바깥 위에 여백주기

margin-bottom: 40px; div상자 바깥 아래에 여백주기

margin-right: 40px; div상자 바깥 오른쪽에 여백주기

padding-top :40px; div상자 안쪽 위에 여백 주기

padding-bottom :40px; div상자 안쪽 아래에 여백 주기

padding-left :40px; div상자 안쪽 왼쪽에 여백 주기

}

 

마진을 한번에 주는 방법

margin:20px 50px 30px 40px;  (위, 오른쪽, 아래, 왼쪽)

 

안쪽 여백 한 번에 주는 방법

padding: 50px 10px 20px 100px (위, 오른쪽, 아래, 왼쪽)