CSS 관련요약 - 2

CSS Background(배경)

CSS 배경속성의 종류는 다음과 같다.

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

---

배경색(background-color)

"background-color" 속성을 통해서 html 요소의 배경색을 지정할 수 있다.

/*페이지의 배경색을 지정*/
body {
    background-color: tomato
}​

위의 코드는 페이지의 배경색을 적용한 모습이다.

여기서 background-color에 주어지는 속성값은 이전에 살펴본 "색상이름, 16진수값, RGB값 등"으로 할당할 수 있다.

 

뿐만 아니라 다른 html 요소의 배경색을 설정하는 것도 가능하다. 

/*각 html 요소에 대한 배경색을 지정*/
h1 {
   background-color: red;
}
p {
   background-color: gold;
}

---

투명도(opacity)

html 요소의 투명도를 지정할 때 사용할 수 있다.

이전에 살펴본 RGBA, HSLA 같은 색상값에서 사용한 알파배개변수와 동일하게

0.0(완전 투명) ~ 1.0(완전 불투명) 사이의 값을 사용할 수 있다.

div {
  background-color: green;
  opacity: 0.3;
}

주의! - opacity 속성을 사용해서 요소의 배경에 투명성을 추가하면 해당 요소가 담고 있는 모든 하위요소에도 동일하게 투명성이 상속된다. 즉, 해당속성을 사용한 요소내에 텍스트 요소가 존재하는 경우 투명성이 적용되어 텍스트를 읽기 어렵게 만들 수 있다.

 

또한 다음과 같이 opacity 속성을 사용하지 않고 RGBA를 사용해서 투명도를 주는 것도 가능하다.

 

---

배경이미지(background-image)

background-image 속성은 특정 html요소의 배경으로 사용할 이미지를 지정한다.

페이지 전체 배경이미지를 설정하는 경우 다음과 같이 작성할 수 있다.

body {
    background-image: url("desk.jpg");
}

위 코드를 실행한 결과

배경이미지를 선택할 때에는 페이지의 텍스트 요소들의 가독성을 헤치지 않는 범위에서 사용할 수 있도록 적절하게 선택해야 한다.

---

배경반복(background-repeat)

위에서 살펴본 background-image 속성은 기본적으로 해당 이미지를 가로 및 세로로 반복한다.

즉, 페이지에 비해서 작은 사이즈의 사진파일을 배경이미지로 사용하면 가로세로 방향으로 페이지 배경을 모두 채울 수 있도록

배경이미지의 배치가 이뤄진다.

 

여기서 background-repeat 속성을 이용하면 배경이미지가 원하는 방향으로만 반복되도록 구성할 수 있다.

이번 예시에서 사용할 배경이미지는 다음과 같다.

 

다음과 같은 이미지를 다음과 같이 코드를 작성하여 배경이미지를 작성한 경우 웹페이지의 배경이미지가 다음과 같이 나타난다.

body {
  background-image: url("gradient_bg.png");
}

위의 코드로 배경이미지를 설정하여 실행한 모습

즉, 가로세로 방향으로 페이지를 모두 채울 수 있도록 배경이미지가 구성된 것을 확인할 수 있다.

 

background-repeat 속성을 활용하여서 코드를 다음과 같이 작성한다면

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

위의 코드로 배경이미지를 설정하여 실행한 모습

다음과 같이 x축(가로) 방향으로만 이미지가 반복된 것을 확인할 수 있고

다음과 같이 코드를 작성한다면

 body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-y;
}

위의 코드로 배경이미지를 설정하여 실행한 모습

다음과 같이 y축(세로) 방향을오만 이미지가 반복된 것을 확인할 수 있다.

 

만약 배경이미지의 반복을 허용하고 싶지 않다면, 다음과 같이 코드를 작성하면 된다.

 body {
  background-image: url("gradient_bg.png");
  background-repeat: no-repeat;
}

---

배경위치(background-position)

"background-position" 속성을 사용하면 배경이미지의 위치를 지정할 수 있다.

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

다음과 같이 코드를 작성할 경우 배경이미지를 상단 모서리에 배치할 수 있다.

 

background-position에 사용할 수 있는 속성값의 종류는 다음과 같다.

• left top : 왼쪽상단
• left center : 왼쪽 중앙
• left buttom : 왼쪽 하단
• right top : 오른쪽 상단
• right center : 오른쪽 중앙
• right buttom : 오른쪽 하단
• center top : 중앙 상단
• center center : 정 중앙
• center bottom : 중앙 하단

또한 x, y좌표와 같은 형태로 다른 단위를 섞어서 사용하는 것도 가능하다.

 

---

배경첨부(background-attachment)

"background-attachment" 속성은 배경이미지를 스크롤 할지 고정할 지 여부를 결정할 때 사용한다.

(페이지의 나머지 부분과 함께 스크롤 되지 않는다.)

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

다음과 같이 작성한 경우 배경이미지가 스크롤여부에 관계없이 스크롤 되지 않고 화면에 고정되어서 그대로 나타난다.

 

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

다음과 같이 작성한 경우 배경이미지가 스크롤함에 따라서 페이지와 함께 스크롤 된다.

---

배경속기(Background Shorthand)

"background" 속성을 사용해서 지금까지 살펴본 요소들을 한번에 통합하는 것이 가능하다.

body {
  background-color: #ffffff;
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

이렇게 작성했던 코드를

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

이렇게 작성해도 같은 결과를 얻을 수 있다.

 

background 속성을 사용할 때 지켜야하는 속성값의 순서

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

위의 순서에서 특정 속성값이 빠져도 문제가 되지 않는다.

위의 순서를 지켜서 존재하는 속성값들을 적어주면 된다.

 

---

Border(테두리)

border 속성을 사용하면 요소 테두리의 스타일, 너비, 색상 등을 지정할 수 있다.

 

border-style

표시할 테두리의 종류를 지정하는 데 사용하는 속성

 

<사용할 수 있는 속성값의 종류>

• dotted - 점선 테두리(얇은 점선)
• dashed - 점선 테두리(두꺼운 점선)
• solid - 일반 선으로 이뤄진 테두리(두꺼운 직선)
• double - 2개의 직선으로 이뤄진 테두리
• groove-3D 그루브 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• ridge-3D 능선 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• inset-3D 삽입 테두리를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• outset-3D 시작 경계를 정의합니다. 효과는 테두리 색상 값에 따라 다릅니다.
• none - 경계가 없음
• hidden -숨겨진 테두리를 정의

<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>

<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>

<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>

</body>
</html>

위의 코드를 실행한 결과

---

border-width

요소의 테두리 너비를 지정

너비는 특정 크기 (px, pt, cm, em 등)로 설정하거나 세 가지 미리 정의 된 값 (thin, medium, thick) 중 하나를 사용하여 설정가능

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}

테두리 너비를 위의 코드로 설정하여 출력한 결과

 

특정 방향에 대한 너비

border-width 속성은 1 ~ 4개의 속성값을 가질 수 있다. (상단, 오른쪽, 하단, 왼쪽 순서)

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}

테두리 너비를 위의 코드로 설정하여 실행한 결과

여기서 주목할 점은 속성값을 2개만 할당할 경우 각각의 값에 대해서 상하, 좌우 이렇게 2개 단위로 해석됨을 기억하자

---

border-color

html 요소의 테두리 색상을 설정

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

 

특정방향에 대한 색상

특정방향에 대해서 너비를 설정할 수 있었던 것처럼 색상도 설정가능

border-color은 4가지 속성을 가질 수 있음(순서대로 상단, 오른쪽, 하단, 왼쪽)

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

 

다양한 색상값 형식을 이용한 색상지정

16진수, RGB, HSL 과 같은 다양한 색상형식을 이용하여 색상을 지정할 수 있음

p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}

p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}

p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}

---

Border Side 개별적용

다음과 같이 각 테두리를 지정하는 속성들이 존재(top, right, bottom, left)

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

위의 예시를 다음과 같이 줄여서 적는 것도 가능하다.

p {
  border-style: dotted solid;
}

 

border-style 속성은 속성값의 수에 따라서 다음과 같이 동작

1. 속성값이 4개 : 상단 - 오른쪽 - 하단 - 왼쪽
2. 속성값이 3개 : 상단 - 오른쪽 - 하단    (왼쪽은 오른쪽과 동일한 속성값을 사용)
3. 속성값이 2개 : 상단 - 오른쪽              (하단은 상단과 동일한  속성값을 사용)
4. 속성값이 1개 : 4개 방향모두 적용

다음과 같이 코드를 작성한 경우 실행결과를 확인하자

<!DOCTYPE html>
<html>
<head>
<style>
body {
  text-align: center;
}
/* Four values */
p.four {
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {
  border-style: dotted solid double;
}

/* Two values */
p.two {
  border-style: dotted solid;
}

/* One value */
p.one {
  border-style: dotted;
}
</style>
</head>
<body>

<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>

</body>
</html>

해당 규칙은 border-color 속성도 동일하게 적용된다.

---

border

코드를 단축하기 위한 목적으로 사용

 

<border 속성이 포함하는 속성>

• border-width
• border-style (필수!)
• border-color

p {
  border: 5px solid red;
}

 

특정 방향에 대해서만 속성을 줄여서 기술하는 것도 가능

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

---

border-radius

html 요소에 둥근 테두리를 생성

해당 속성의 속성값을 통해서 테두리의 곡률을 조정

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
}

p.round1 {
  border: 2px solid red;
  border-radius: 5px;
}

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

</body>
</html>

 

---

margin(여백)

html 요소의 여백공간에 대한 설정

CSS를 통해 html 요소의 각 방향별 여백을 완벽하게 통제할 수 있음

margin은 요소의 바깥여백을 의미함

 

개별적으로 여백을 설정

• margin-top
• margin-right
• margin-bottom
• margin-left

모든 margin 속성이 가질 수 있는 값

• auto : 웹 브라우져가 여백을 계산
• length : px, pt, cm 등의 여백을 지정
• % - 포함요소 너비의 여백을 %로 지정
• inherit : 여백에 대한 값을 상위요소로부터 상속되도록 지정
• (속성값으로 음수가 사용될 수 있음)

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

위의 코드를 다음과 같이 줄여서 작성할 수 있음

p {
  margin: 100px 150px 100px 80px;
}

 

margin 속성은 속성값의 수에 따라 다음과 같이 동작

1. 속성값이 4개 : 상단 - 우측 - 하단 - 좌측
2. 속성값이 3개 : 상단 - 우측 - 하단   (좌측은 우측과 동일한 속성값 사용)
3. 속성값이 2개 : 상단 - 우측             (하단은 상단과 동일한 속성값 사용)
4. 속성값이 1개 : 모든 방향(상단, 우측, 하단, 좌측)

 

---

속성값 auto

html 요소를 가로선상에서 중앙에 오도록 설정

요소가 지정된 크기를 차지하고 남는 공간을 좌우 공간에 동일하게 할당

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

---

속성값 inherit

상위요소가 가진 margin 값을 상속

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>

상위요소 <div>가 가진 margin-left값이 하위요소 <p>의 margin-left로 상속됨

---

여백축소

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

다음과 같이 코드가 작성된 경우 h1과 h2요소가 연속으로 사용되었을 때 두 요소사이의 간격은

50px+20px = 70px가 될 것이라고 생각하지만 실제로는 50px가 두 요소 사이의 간격이 된다.

즉, 두 요소가 연속으로 쓰일 때 상단 및 하단여백은 둘 중에 더 큰 값으로 설정된다.

결과적으로 예상과 달리 여백이 축소되므로 이를 여백축소라고 부른다.

(이는 좌측, 우측 여백 사이에서는 일어나지 않는다.)

---

padding

정의된 테두리(Border)내에서 요소 내용 주위에 공간을 형성(요소 내부여백)

CSS를 통해서 Padding을 완전히 제어할 수 있음

 

개별적으로 Padding을 설정

• padding-top
• padding-right
• padding-bottom
• padding-left

모든 padding 속성이 가질 수 있는 속성값

• length : px, pt, cm 등의 Padding을 지정
• % - 포함요소 너비의 Padding을 %로 지정
• inherit : Padding에 대한 값을 상위요소로부터 상속되도록 지정
• (속성값으로 음수가 사용될 수 없음)

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

위의 코드를 다음과 같이 줄여서 기술할 수 있음

div {
  padding: 50px 30px 50px 80px;
}

padding 속성은 속성값의 수에 따라 다음과 같이 동작

1. 속성값이 4개 : 상단 - 우측 - 하단 - 좌측
2. 속성값이 3개 : 상단 - 우측 - 하단   (좌측은 우측과 동일한 속성값 사용)
3. 속성값이 2개 : 상단 - 우측             (하단은 상단과 동일한 속성값 사용)
4. 속성값이 1개 : 모든 방향(상단, 우측, 하단, 좌측)

 

Padding과 요소의 Width

width 속성 : 요소내용 영역의 너비(width)를 지정, 내용영역은 요소의 Padding, Border 및 내부의 margin

따라서, 요소에 지정된 너비가 있으면 해당 요소에 추가된 Padding이 요소의 총 너비에 추가됨

(지정한 너비를 넘어서 영역이 나타나게 되는 바람직하지 않은 상황이 발생하기 때문)

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>
</html>

다음과 같이 두번째 div에 대해서 width를 첫번째와 동일하게 300px로 설정했지만 두번째 div에서 추가로 정의한 padding에 대한 25px값 때문에 가로너비가 width 속성으로 지정한 값을 넘은 300px가 된 것을 확인할 수 있다.

 

이러한 현상을 막고 싶다면 다음과 같이 box-sizing 속성을 활용하여 padding에 관계없이 width로 설정한 너비를 유지할 수 있다.

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

---