[CSS] CSS의 모든 것 - (1) CSS, Selector,Background, Border, Margin

• CSS
• CSS Selector
• How To Add CSS
• CSS Comments
• CSS Background
• CSS Border
• CSS Margin

CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 스타일에 사용하는 언어이다.

 

CSS는 웹 페이지의 디자인 뿐만 아니라 레이아웃, 다양한 스크린 사이즈에 따른 화면에 변화 등을 모두 조절할 수 있다.

 

CSS를 사용하면 HTML만을 사용하는 것보다 훨씬 간편해진다.  CSS를 통해 수많은 웹 페이지들의 레이아웃을 한번에 컨트롤 할 수 있기 때문이다.

 

CSS Syntax

 

출처 : https://www.w3schools.com/css/css_syntax.asp

Selector : 스타일을 적용할 HTML 요소를 가리킨다.

Declaration : 하나 이상의 선언이 포함된다. 여러개의 선언들은 세미콜론(;)을 이용해 구분한다.

                  선언들은 각각의 이름, 값을 가진다.

 

---

CSS Selectors

CSS Selector를 사용하여 스타일을 적용한 HTML 요소를 선택한다.

 

CSS Selector는 5가지 카테고리로 구분된다.

• Simple Selector : name, id, class를 이용해 element를 선택
• Combinator Selector : element 간의 특별한 관계를 기반으로 선택
• Pseudo-class Selector : 특정한 상태를 기반으로 element를 선택
• Pseudo-element Selector : element의 일부분을 선택해 스타일을 적용
• Attribute Selector : 속성이나 속성의 값을 기반으로 element를 선택

 

1. Simple Selector

CSS element selector : element의 이름을 기반으로 선택

p {
    text-align:center;
    color:red;
}    

CSS id selector : HTML 요소의 ID 속성을 이용하여 선택

id 속성을 이용해 요소를 선택할 때는, #를 이용하여 id를 지정한다.

#para1 {
  text-align: center;
  color: red;
}

CSS class selector : class 속성을 이용하여 선택

class 속성을 이용해 선택할 때는, 온점(.)을 이용하여 지정한다.

.center {
  text-align: center;
  color: red;
}

또한 특정 요소만 class의 영향을 받도록 지정할 수 있다.

아래는 class 명이 'center'인 <p>태그만 지정한 것이다.

p.center {
  text-align: center;
  color: red;
}

CSS universal selector : 페이지내의 모든 요소들을 선택

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

CSS groping selector : 같은 스타일을 적용한 요소들끼리 묶어 한번에 표현 할 수 있다.

이 경우, h1,h2,p 모두 가운데 정렬과 글자색은 red가 된다.

h1, h2, p {
  text-align: center;
  color: red;
}

---

2. Combinator Selector

Combinator Selector는 선택자간 관계를 사용해 선택한다. 아래의 네가지 관계가 존재한다.

 

• 하위 선택자 (공백)
• 자식 선택자 (>)
• 인접 형제 선택자 (+)
• 일반 형제 선택자 (~)

1) 하위 선택자(공백) 

 

ex) div 태그 아래(내부)에 있는, p태그를 모두 선택한다.

div p {
  background-color: yellow;
}

2) 자식 선택자 (>)

 

특정 요소의 자식 요소를 선택

div > p {
  background-color: yellow;
}

HTML 코드가 아래와 같다면, <div> 태그 내에 있는 Paragraph 1,2,4는 div의 자식이기때문에 배경색이 노란색으로 되고, <div> 안에 있지 않은 Paragraph 5,6은 스타일이 지정되지 않는다.

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

 

3) 인접 형제 선택자 (+)

 

+ 선택자는 특정 태그 바로 뒤에 오는 태그를 지정할 때 사용된다.

div + p {
  background-color: yellow;
}

아래의 경우에는 <div>바로 뒤에 나오는 Paragraph 3과 Paragraph7 단 두개만 선택된다.

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

 

4) 일반 형제 선택자(~)

div ~ p {
  background-color: yellow;
}

이 경우에는 <div>다음에 나오는 모든 p 태그들을 선택한다. 그래서 Paragraph3과 Paragraph4가 선택된다.

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

---

3. Pseudo-class Selector

Pseudo-class 는 요소의 특정한 상태에 스타일을 지정할 때 사용된다.

마우스를 올려 놓으면 스타일이 바뀌거나, 방문했던 링크의 색은 다르게 표시하거나, focus되었을 때의 스타일을 다르게 게 할때 등에 사용된다.

 

Syntax

selector:pseudo-class {
  property: value;
}

Pseudo-class 는 CSS 클래스들과 결합하여 사용가능하다.

 

아래는 'highlight'라는 클래스를 가진 <a> 태그내의 링크에 마우스를 올리면(hover)색이 변하는 예시이다.

a.highlight:hover {
  color: #ff0000;
}

div 태그에도 동일한 동작을 구현할 수 있다. 역시 마우스를 div 영역에 올려두면 색이 변한다.

div:hover {
  background-color: blue;
}

<div> 태그 위로 마우스를 가져가면 설명과 도구 설명과 같이 <p>요소를 보여지게 할 수도 있다.

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

마우스를 빨간 글씨위로 올리면, 아래의 노란 박스가 보인다.

 

---

4. Pseudo-element Selector 

Pseudo-element Selector는 요소의 특정한 부분에만 스타일을 적용할 때 사용된다.

예를 들어, 첫번째 글자만 대문자로 나타내거나, 첫번째 줄에만 스타일 적용하거나 하는 등의 일을 할때 사용된다.

 

Syntax

selector::pseudo-element {
  property: value;
}

 

::first-line pseudo-element는 텍스트의 첫번째 줄에 특별한 스타일을 지정할 때 사용된다.

아래의 코드는 p 태그 내의 첫번째 줄을 모두 대문자로 표시하고, 크기는 작게 지정한다.

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Note: ::first-line은 오직 블록 단위 요소에만 적용된다!

 

이외에도 수많은 Pseudo Element들이 존재한다. 다른 element들이 궁금하다면 이곳에서 확인하자.

---

4. Attribute Selector 

Attribute Selector 는 특정한 속성이나 속성의 값에 스타일을 지정할 때 사용된다.

 

아래의 코드는, <a> 태그 중, <target> 속성을 갖는에 적용되는 스타일이다.

a[target] {
  background-color: yellow;
}

 

아래와 같이 사용할 수도 있다. [속성~="값"] 형식으로 사용하고,

아래는 title속성이 'flower'인 element들에 스타일을 적용한다.

[title~="flower"] {
  border: 5px solid yellow;
}

 이외에도 [attribute |= value] , [attribute ^= value] 등 사양한 attribute selector 가 존재한다. 자세한 내용은 이곳을 참고하자.

 

---

 

How To Add CSS

CSS를 추가하는 방법은 세가지가 있다. 

• 외부 CSS
• 내부 CSS
• Inline CSS

1. 외부 CSS

외부 스타일 시트를 이용하면, 우리는 단 하나의 파일만으로 전체 웹 페이지를 바꿀수 있다.

이를 사용하기 위해선, <head>태그 내에, <link> 태그를 포함하여 스타일 시트 파일을 추가해야한다.

<head>
<link rel="stylesheet" href="mystyle.css">
</head>

외부 스타일시트는 어떤 에디터를 사용하던 상관없지만, 확장자는 반드시 .css 이어야한다.

 

2. 내부 CSS

내부 CSS는 하나의 HTML 페이지가 다른 스타일을 가지고 있는 경우 사용한다.

<style> 를 사용하여 CSS를 이용한다.

 

3. Inline CSS

inline CSS는 하나의 요소에 대해 스타일을 정의할때 사용된다.

시작태그에 style 속성을 추가하여 사용한다.

 

 

만약, 서로 다른 스타일 시트(외부, 내부 등)에서 동일한 요소가 중복해서 정의된다면, 가장 마지막으로 읽은 스타일이 적용된다.

 

예를 들어 외부 스타일 시트에서는, <h1>의 색을 '남색'으로 정의하고, 내부 스타일 시트에서는 '오렌지'색으로 정의했다고 하자. 그때 아래와 같이 코드가 작성되었다면, <h1> 태그는 '오렌지 색'으로 나타난다.

반대로 <link>가 <style> 뒤에 쓰였다면, <h1> 태그는 '남색'으로 나타난다.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
  color: orange;
}
</style>
</head>

 

또한, HTML 요소에 대해 두개 이상의 스타일이 지정된 경우, 아래과 같은 우선순위로 스타일이 지정된다.

1. 인라인 스타일

2. 외부 및 내부 스타일

3. 브라우저 기본값

 

 

---

CSS Comments

Syntax

/* Css comment use like this */

 

---

CSS Backgrounds

CSS의 Background 속성에 대해 알아보자.

 

1) background-color :  배경의 색을 지정

body {
  background-color: lightblue;
}

 

opacity 를 통해, 배경색의 불투명도를 지정할 수 있다. 0.0 ~ 1.0의 값을 선택할 수 있다.

아래와 같이 두가지 방법으로 불투명도를 설정할 수 있다.

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

div {
  background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}

2) background-image : 배경 이미지를 지정

body {
  background-image: url("paper.gif");
}

3) background-repeat : 이미지를 수직 혹은 수평으로 반복.

background-repeat: repeat-x;은 수평으로 이미지가 반복된다.

background-repeat: repeat-y;는 수직으로 반복.

background-repeat: no-repeat;은 반복되지 않고, 딱 한번만 보여진다.

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

 

4) background-position : 배경 이미지의 위치를 특정한다.

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

5) background-attachment : 이미지를 스크롤할 지, 고정할지 지정

 background-attachment: fixed; 를 사용하면, 페이지를 아래로 스크롤 하더라도 이미지는 계속 고정된 위치에 있다.

 background-attachment: scroll;을 사용하면, 페이지가 아래로 스크롤 되며 이미지도 보이지 않는다.

 

6) background : Background 속성 간단하게 이용하기

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

이렇게 한번에 background 속성을 한번에 작성할 수 있다. 아래와 같은 속성을 사용 가능하다.

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

---

CSS Borders

1) border-style

border-style에는 여러 종류가 있다. 

 

• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

출처 :  https://www.w3schools.com/css/css_border.asp

 

2) border-width

px, pt, cm, em 등의 사이즈 단위를 사용하여 크기를 지정할 수 있다. 미리 지정된 값을 사용할 수도 있다. thin, medium, thick

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

출처 :  https://www.w3schools.com/css/css_border_width.asp

 

위, 오른쪽, 아래, 왼쪽의 너비를 각각 지정해줄 수도 있다.

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

 

3) border-color

border-color은 아래와 같은 표현으로 나타낼 수 있다.

• name - specify a color name, like "red"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
• transparent

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

위, 오른쪽, 아래, 왼쪽 테두리의 색을 각각 지정해줄 수도 있다.

 

4) border-radius

테두리를 둥글게 만들어줄수 있다.

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

5) border

border 속성을 한번에 지정해줄 수 있다.

p {
  border: 5px solid red;
}

아래와 같은 속성을 적용할 수 있다.

• border-width
• border-style (required)
• border-color

---

CSS Margins

Margin은 요소 주변의 간격과 테두리 밖의 간격을 조절하는데 사용된다.

 

각각 개별 속성에 대해 간격을 지정할 수 있다.

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

margin 속성에 값을 지정하는 방법은 네가지가 있다.

• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element

아래와 같이 한번에 값을 지정할 수 있다.

p {
  margin: 25px 50px 75px 100px;
}

 

---

이 글은 w3school을 참고해 작성하였습니다.