[CSS] 프로퍼티

컬러(Color)

색상 표현 - 정의된 색상 이름 또는 RGB, HEX, HSL, RGBA, HSLA 값으로 표현 가능

<h1 style="background-color:rgb(255, 99, 71);">Hello World</h1>
<h1 style="background-color:#ff6347;">Hello World</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">Hello World</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">Hello World</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">Hello World</h1>

 

배경색 프로퍼티 "background-color"

<h1 style="background-color: red;">Hello World</h1>

 

텍스트 컬러 프로퍼티 "color"

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

 

테두리 프로퍼티 "border"

<h1 style="border:2px solid red;">Hello World</h1>

 

배경(Background)

배경색 프로퍼티 "background-color"

<h1 style="background-color: red;">Hello World</h1>

 

배경 투명도 "opacity"

h1 { 
  background-color: red;
  opacity: 0.3;
}

※ opacity를 조절하면 h1 엘리먼트에 속한 텍스트의 투명도도 같이 적용 된다. 배경의 투명도만을 조절 하고 싶을 떄는 "background-color: rgba(255, 0, 0, 0.5);" 와 같이 background-color 프로퍼티의 rgba 알파값을 조절하여 사용한다.

 

배경 이미지 프로퍼티 "background-image"

body {
  background-image: url("https://blog.kakaocdn.net/dn/Gzm9c/btq2hY04CcE/sNNM8my5CiwXKWsJh1N1y0/img.jpg");
}

 

배경 이미지 반복 프로퍼티 "background-repeat"

body {
  background-image: url("https://blog.kakaocdn.net/dn/Gzm9c/btq2hY04CcE/sNNM8my5CiwXKWsJh1N1y0/img.jpg");
  background-repeat: repeat-x;
}

※ repeat-x는 이미지를 가로 방향으로 반복하라는 뜻이다. 세로방향으로 반복하기 위해선 repeat-y를 사용한다. 만일 가로 세로 모두 반복을 원한다면 "background-repeat: repeat-x repeat-y;"와 같이 두 값 모두 적용한다. 만일 배경화면의 반복을 원하지 않는다면 "no-repeat" 값을 적용 한다.

 

배경 이미지의 위치 "background-position"

body {
  background-image: url("https://blog.kakaocdn.net/dn/Gzm9c/btq2hY04CcE/sNNM8my5CiwXKWsJh1N1y0/img.jpg");
  background-position: right top;
  background-repeat: no-repeat;
}

 

배경 이미지 스크롤 or 고정 프로퍼티 "background-attachment"

body {
  background-image: url("https://blog.kakaocdn.net/dn/Gzm9c/btq2hY04CcE/sNNM8my5CiwXKWsJh1N1y0/img.jpg");
  background-position: right top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

※ background-attachment 프로퍼티의 값으로 "scroll", "fixed" 두 가지가 있다. scroll을 적용하면 화면 스크롤에 따라 배경 이미지가 같이 스크롤 되고, fixed는 화면이 스크롤 되더라도 항상 고정된 위치에 배경이미지가 위치 한다.

 

배경 이미지 사이즈 프로퍼티 "background-size"

body {
  background-image: url("https://blog.kakaocdn.net/dn/Gzm9c/btq2hY04CcE/sNNM8my5CiwXKWsJh1N1y0/img.jpg");
  background-repeat: no-repeat;
  background-size: auto;
}

body {
  background-image: url("https://blog.kakaocdn.net/dn/Gzm9c/btq2hY04CcE/sNNM8my5CiwXKWsJh1N1y0/img.jpg");
  background-repeat: no-repeat;
  background-size: 300px 100px;
}

※ 사이즈 프로퍼티 테스트 페이지 : www.w3schools.com/cssref/playit.asp?filename=playcss_background-size

 

배경 이미지 프로퍼티 줄여쓰기

body {
  background: #ffffff url("someimg.jpg") no-repeat right top fixed;
}

 

테두리(border)

테두리 프로퍼티 "border"

border: border-width border-style border-color

• border-width : 보더의 선 두깨 결정. 기본 "medium"
• border-style : 선 스타일 결정. 기본 "none"
• border-color : 보더 색상 결정. 기본 텍스트 컬러와 동일.

h1 {
  border-width: 3px;
  border-style: solid;
  border-color: coral;
}

h2 {
  border: 4px dotted blue;
}

 

테두리 이미지 프로퍼티 "border-image"

#borderimg {
  border-image: url(border.png) 30 round;
}

 

리스트

리스트 엘리먼트 마커 이미지 지정 "list-style-image"

ul {
  list-style-image: url('리스트-구분자-이미지.jpg')
}

<ul>
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
</ul>

 

리스트 엘리먼트 마커의 위치 지정 "list-style-position"

ul.a {
  list-style-position: outside;
}

<h2>list-style-position: outside (default):</h2>
<ul class="a">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
</ul>

ul.b {
  list-style-position: inside;
}

<h2>list-style-position: inside:</h2>
<ul class="b">
  <li>element 1</li>
  <li>element 2</li>
  <li>element 3</li>
</ul>

 

 

리스트 엘리먼트 마커의 모양 지정 "list-style-type"

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

list-style-type의 value 참조 :  developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

 

리스트 프로퍼티 줄여 쓰기 "list-style"

ul {
  list-style: square inside url("sqpurple.gif");
}