pm1122dev의 비밀노트

배경색 및 글자색 지정하기! 본문

css3

배경색 및 글자색 지정하기!

pm1122Dev 2017. 1. 12. 11:14
728x90
반응형


오늘은 배경색 넣는 방법에 대해서 알아보겠습니다. html5가 뼈대라고 하면 css3는 옷이고 jqeury,javascript 는 움직임을 주는거라고 생각하시면 될 것 같습니다. 


일단 스타일을 주기 위해서는 <head>부분에 style을 넣어줘야합니다. 또 다른 방법으로는 css파일을 작성해서 <link rel="stylesheet" type="text/css" href="css파일의 위치"> 보통은 이런식의 방식으


로 사용합니다. css가 많을 경우는 css파일을 만들어서 작업해주시면 됩니다.  



<head>

<style>

이 안에서 스타일을 작성해주면 됩니다. 

</style>

</head>


예제

안녕하세요

사용방법


안녕하세요


위에서 보시는 것과 같이 배경색은 background{여기안에 색을 지정해주시면 됩니다. } 그리고 글자색과 같은경우는 color{배경색과 마찬가지로 여기에 색상값을 지정해주시면 됩니다.}


사용방법에 대해 부가설명을 드리면 일단 스타일을 주려면 여러가지 방법이 있습니다. class나 id값을 주거나 아니면 dom구조를 이용해서 찾아가는 방법 등 있습니다. 


1. class 와 id를 사용하는 방법은 직접 class="", id="" 값을 넣어서 하면 됩니다. 여기에서 알아두셔야할점은 id값은 하나고 class값은 같은 값을 여러곳에 주셔도 된다는 점입니다. 


class의 이용같은 경우는 같은 스타일을 주려면 그 class값을 지정해서 class값만 넣어주면 다 같은 class가 지정되도록 되어있습니다. 


  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

2. div 안에 ul에 스타일 적용하는 방법


div ul 이렇게 주셔도 되고 .pr .br 이렇게 적용하셔도 됩니다. 여기서 중요한 점은 .pr .br로 할경우 만일 위에 class가 br인 ul에만 클래스가 적용되고 div안에 있는 ul 전체에 스타일을 적용싶은 경우는


div ul 이렇게 작업을 해주시면 됩니다.  각각 따로 선택하는 형제, 부모, 자식 등 css 선택자가 있는데 그거는 다음번 포스팅에서 다루겠습니다. 감사합니다. 

728x90
반응형

'css3' 카테고리의 다른 글

[CSS] Font-Awesome 사용하기  (0) 2017.02.19
border, margin, padding, width, height 적용하기!  (0) 2017.01.13
Comments