본문 바로가기
Full-Stack/CSS

CSS

by IT것저것 2022. 9. 20.

CSS : html과 함께 웹 표준의 기본 개념이다
텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이요하여 디자인을 담당

Style : html 문서에서 자주 사용한는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것을 가리킨다

반응형 웹 디자인 : 사용자가 PC로 접속하든, 모바일로 접속하든 웹 브라우저의 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법


웹 브라우저의 Web Developer라는 확장 기능을 사용하면 스타일 개념을 쉽게 익힐 수 있다


- Web Developer를 사용해 사이트에서 스타일 비활성화하기
* css 탭에 있는 Disable all styles 선택하기
스타일 형식 알아보기
Css 소스에서 한 줄이 하나의 스타일에 해당하고, 조금 더 들여다보면 줄마다 형태가 비슷하다는 걸 알게 될 것이다
css 스타일의 형식은 다음과 같다

기본형 

선택자 { 속성 1: 속성값1; 속성2: 속성값2; }


맨 앞에 선택자는 스타일을 어느 태그에 적용할 것인지 알려 주는 것이고, 중괄호({}) 사이에는 스타일 정보를 넣습니다.
속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라고 하며, 세미콜론(;)으로 구분해서 스타일 규칙을 여러 개 지정할 수 있습니다

* 스타일 규칙은 세미콜론(;)으로 구분하여 중괄({}) 안에 나열한다

<p> 태그에 스타일 적용하기

p : 선택자
text-align : 텍스트 정렬 속성
Center : 값
color : 글자색 속성
blue : 값

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

스타일을 텍스트 단락에 적용할 것 -> 선택자를 p로 지정했다

스타일 시트
- 웹 문서 안에서는 스타일 규칙을 여러 개 사용한다
이런 스타일 규칙을 한눈에 확인하고 필요할 때마다 수정하기도 쉽도록 한군데 묶어 놓은 것

스타일 시트
- 브라우저 기본스타일 (웹 브라우저에 기본으로 만들어져 있음)
- 사용자 스타일 (사이트 제작자가 만듬) -> 인라인 스타일, 내부스타일, 외부 스타일


인라인 스타일
- 간단한 스타일 정보를 적용하는 경우에 사용한다

  • 스타일을 적용할 대상에 직접 표시하는 방법을 인라인 스타일이라고 합니다
  • 스타일을 적용하고 싶은 부분이 있다면 해당 태그에 style 속성을 사용해 style=“속성: 속성값;” 형태로 스타일을 바꿀 수 있습니다


내부 스타일 시트

* 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것을 내부 스타일 시트라고 합니다.
* 스타일 정보는 <head> 태그 안에서 정의하고 <style>과 </style> 태그 사이에 작성합니다.

외부 스타일 시트
- 여러 웹 문서에서 사용할 스타일을 별도 파일로 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라 하고 ***.css**라는 파일 확장자를 사용합니다.
- 외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않는다
그리고 이렇게 만든 외부 스타일 시트는 웹 문서에 연결해야 스타일이 문서에 적용된다
외부 스타일 시틀을 연결할 때 사용하는 태그는 <link> 태그이다

<link rel=“stylesheet” href=“외부 스타일 시트 파일 경로”>




전체 요소에 스타일을 적용하는 전체 선택자

전체 선택자는 스타일을 문서의 모든 요소에 적용할 때 사용합니다.
웹 브라우저의 기본 스타일을 초기화할 때 자주 사용합니다.
전체 선택자로는 다음과 같이 **별표(*)**를 사용합니다.

* { 속성: 값; ...... }

* {
      margin:0;
      padding:0;
    }




특정 요소에 스타일을 적용하는 타입 선택자

타입 선택자는 특정 태그를 사용한 모든 요소에 스타일을 적용합니다.

태그명 { 스타일 규칙 }


- 타입 선택자를 사용하여 모든 p 요소에 아래의 스타일을 적용해 보세요

font-style: italic;

 

  p {
        font-style: italic;
    }


특정 부분에 스타일 적용하는 클래스 선택자

* 클래스 선택자는 클래스 이름을 사용해서 다른 선택자와 구별하는데, 이때 클래스 이름 앞에 **마침표(.)**를 반드시 붙여야 합니다.
* 클래스 선택자를 사용해 만든 스타일을 클래스 스타일이라고 하는데, 클래스 스타일은 여러 곳에 적용할 수 있습니다.
* 요소 하나에 클래스 스타일을 2개 이상 적용할 수도 있습니다. 공백으로 구분해서 스타일 이름을 적으면 됩니다.

.클래스명 { 스타일 규칙 }


Id 선택자 사용하기

특정 부분에 스타일을 한 번만 적용할 수 있는 id 선택자

- id 선택자는 웹 문서의 특정 부분을 선택해서 스타일을 지정할 때 사용합니다.
- # 기호를 사용합니다.
- id 선택자는 문서에서 한 번만 적용할 수 있습니다.

#아이디명 { 스타일 규칙 }



<div>에 id 속성을 추가하여 #container의 스타일을 적용해 보세요.

width: 500px; 
margin: 10px auto; 
padding: 10px;  
border: 1px solid #000; 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    #container {
      width: 500px;  /* 너비 */
      margin: 10px auto;  /* 바깥 여백 */
      padding: 10px;  /* 테두리와 내용 사이 여백 */ 
      border: 1px solid #000;  /* 테두리 */
    }    
  </style>
</head>
<body>
    <!--지시사항을 수행해보세요-->
  <div id="container">
    <h1>레드향</h1>
    <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
    <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
    <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
  </div>
</body>
</html>


그룹 선택자
같은 스타일 규칙을 사용하는 요소들을 묶어주는 그룹 선택자

선택자1, 선택자2 { 스타일 규칙 }

여러 선택자에서 같은 스타일 규칙을 사용하는 경우에 쉼표(,)로 구분해 여러 선택자를 나열한 후 스타일 규칙을 한 번만 정의하면 됩니다.


캐스케이딩 스타일 시트 알아보기
캐스케이딩의 의미
CSS에서 ‘C’는 **캐스케이딩(cascading)**의 줄임말이며 스타일 시트에서는 우선순위가 위에서 아래, 즉 계단식으로 적용된다는 의미로 사용합니다.

스타일 우선순위


중요도

- 사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일
적용 범위

- !important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일
작성 순서

- 중요도와 적용 범위가 같다면 그다음은 스타일을 정의한 소스 순서로 우선순위가 정해집니다.

스타일 상속

자식 요소(포함된 태그)에서 별도로 스타일을 지정하지 않으면 부모 요소(포함하는 태그)의 스타일 속성들이 자식 요소로 전달되는데, 이것을 스타일 상속이라고 합니다.

h1 요소의 타입 스타일 우선순위를 인라인 스타일보다 높게 만들어보세요 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    p {
      color:black;
    } 
    h1 {
        /* <!--지시사항을 수행해보세요--> */
      color: brown !important;
    } 
    p {
      color:blue;
    }
  </style>
</head>
<body>
			  <h1 style="color:green">레드향</h1>
  <p style="color:red;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로</p>
  <p>일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>    
</body>
</html>


소스 작성 순서는 어떠한가?
- 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어씁니다

글꼴 관련 스타일

글꼴을 지정하는 font-family 속성

font-family:<글꼴 이름> | [<글꼴 이름>, <글꼴 이름>]


글자 크기를 지정하는 font-size 속성

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

- 키워드를 사용하여 글자 크기 지정하기

xx-small < x-small < small < medium < large < x-large < xx-large

- 단위를 사용하여 글자 크기 지정하기
| 종류 | 설명 |
| ——– | ——– |
| em | 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율 값을 지정합니다 |
| rem | 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율 값을 지정합니다. |
| ex | 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율 값을 지정합니다. |
| px | 모니터의 1픽셀을 기준(1px)으로 한 후 비율 값을 지정합니다. |
| pt | 포인트라고 하며, 일반 문서에서 많이 사용합니다. |

  • 백분율을 사용하여 글자 크기 지정하기
  • 부모 요소의 글자 크기를 기준으로 계산하여 지정하는 방법입니다. 단, 백분율로 계산하려면 부모 요소의 글꼴 크기가 단위로 표현되어 있어야 합니다.


이탤릭체로 글자를 표시하는 font-style 속성

font-style: normal | italic | oblique

글자 굵기를 지정하는 font-weight 속성

font-weight: normal | bold | bolder | lighter | 100 | 200 | … |800 | 900


웹 폰트 사용하기

@font-face {
    font-family: <글꼴 이름>;
    src: <글꼴 파일>[<글꼴 파일>, <글꼴 파일>, ......];
}



텍스트에 색상 지정하기 (1)

글자색을 지정하는 color 속성

color: <색상>

16진수로 표현하는 방법
#RRGGBB의 형식으로 6자리의 16진수로 표시하는 방법입니다.
hsl과 hsla로 표현하는 방법
hsl은 hue(색상), saturation(채도), lightness(명도)의 줄임말입니다. 그리고 hsla는 hsl에 alpha(불투명도)를 추가한 것을 의미합니다.
색상을 영문명으로 표현하는 방법
white, black, red와 같이 자주 사용하는 색상일 경우 색상 이름 그대로 사용하기도 합니다.

텍스트에 색상 지정하기 (2)

글자색을 지정하는 color 속성

rgb와 rgba로 표현하는 방법
rgb는 red, green, blue의 줄임말로 앞에서부터 차례대로 빨간색, 초록색, 파란색이 들어 있는 값을 나타냅니다. 그리고 rgba를 사용하면 rgb로 표현한 색상에 불투명도를 지정할 수도 있습니다.

텍스트 정렬하기
텍스트를 정렬하는 text-align 속성

text-align: start | end | left | right | center | justify |match-parent
종류 설명
start 현재 텍스트 줄의 시작 위치에 맞추어 문단을 정렬합니다.
end 현재 텍스트 줄의 끝 위치에 맞추어 문단을 정렬합니다.
left 왼쪽에 맞추어 문단을 정렬합니다.
right 오른쪽에 맞추어 문단을 정렬합니다.
center 가운데에 맞추어 문단을 정렬합니다.
justify 양쪽에 맞추어 문단을 정렬합니다.
match-parent 부모 요소를 따라 문단을 정렬합니다.


줄 간격 지정하기
줄 간격을 조정하는 line-height 속성

  • 줄 간격은 정확한 단위로 크기 값을 지정하거나 문단의 글자 크기를 기준으로 몇 배수인지 백분율로 지정할 수도 있습니다.


텍스트에 줄 표시하기
텍스트의 줄을 표시하거나 없애주는 text-decoration 속성
- text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시합니다

텍스트에 그림자 효과를 추가하는 text-shadow 속성

text-shadow: none | <가로 거리> <세로 거리> <번짐 정도> <색상>

- text-shadow의 속성값
종류 설명
<가로 거리> 텍스트부터 그림자까지의 가로 거리로 필수 속성입니다. 양숫값은 글자의 오른쪽, 음숫값은 글자의 왼쪽에 그림자를 만듭니다.
<세로 거리> 텍스트부터 그림자까지의 세로 거리로 필수 속성입니다. 양숫값은 글자의 아래쪽, 음숫값은 글자의 위쪽에 그림자를 만듭니다.
<번짐 정도> 그림자가 번지는 정도입니다. 양숫값을 사용하면 그림자가 모든 방향으로 퍼져 나가므로 그림자가 크게 표시됩니다. 반대로 음숫값은 그림자가 모든 방향으로 축소되어 보입니다. 기본값은 0입니다.
<색상> 그림자 색상을 지정합니다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있습니다. 기본값은 현재 글자색입니다.


글자 일부 또는 전체를 대문자로 바꾸기

텍스트의 대소 문자를 변환하는 text-transform 속성

* text-transform 속성은 텍스트를 대소 문자 또는 전각 문자로 변환합니다. 이 속성은 영문자에만 적용됩니다.


* text-transform의 속성값

종류 설명
none 줄을 표시하지 않습니다.
capitalize 첫 번째 글자를 대문자로 변환합니다.
uppercase 모든 글자를 대문자로 변환합니다.
lowercase 모든 글자를 소문자로 변환합니다.
full-width 가능한 한 모든 문자를 전각 문자로 변환합니다.


글자 간격 조절하기

글자 간격을 조절하는 letter-spacing, word-spacing 속성

letter-spacing 속성은 글자와 글자 사이의 간격을 조절합니다.
word-spacing 속성은 단어와 단어 사이 간격을 조절합니다.
이 2가지 속성은 px, em과 같은 단위나 퍼센트(%)로 크깃값을 조절합니다.

 

목록 속성을 한꺼번에 표시하는 list-style 속성

  • list-style 속성을 사용하면 지금까지 설명한 list-style-type, list-style-image, liststyle-position 속성을 한꺼번에 표시할 수 있습니다.
ol {
    list-style: lower-alpha inside; /* 소문자 목록 만들고 들여쓰기 */
}

표 스타일 (1)

표 제목의 위치를 정해 주는 caption-side 속성

 

caption-side: top | bottom
  • 캡션은 기본적으로 표 위쪽에 표시되지만 caption-side 속성을 이용하면 표 아래쪽으로 옮길 수 있습니다.
  • caption-side의 속성값
  • | 종류 | 설명 |

| ——– | ——– |
| top | 캡션을 표 윗부분에 표시합니다. 기본값입니다. |
| bottom | 캡션을 표 아랫부분에 표시합니다. |

표에 테두리를 그려 주는 border 속성

  • 표 테두리는 border 속성을 사용하는데 표 바깥 테두리와 셀 테두리를 각각 지정합니다.

표 스타일 (2) 

셀 사이의 여백을 지정하는 border-spacing 속성

border-spacing: 수평거리 수직거리
  • border-spacing 속성값은 수평 거리의 값과 수직 거리의 값을 공백으로 구별해서 나타내는데, 두 값이 같다면 1개만 지정해도 됩니다.

표와 셀 테두리를 합쳐 주는 border-collapse 속성

  • <table> 태그와 <td> 태그에서 border 속성을 사용하면 셀과 셀 사이에 여백이 생기면서 두 줄로 표시됩니다. 이때 두 줄로 그냥 둘 것인지 아니면 합쳐서 하나로 표시할 것인지 결정하는 것이 border-collapse 속성입니다.
  • border-collapse의 속성값
  • | 종류 | 설명 |

| ——– | ——– |
| collapse | 표와 셀의 테두리를 합쳐 하나로 표시합니다. |
| separate | 표와 셀의 테두리를 따로 표시합니다. 기본값입니다. |

 

 

블록 레벨 요소 사용하기 

  • 블록 레벨 요소란 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킵니다.
  • 해당 요소의 너비가 100%라는 뜻으로 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다.
  • 블록 레벨 요소를 만드는 대표적인 태그로 <h1>, <div>, <p> 등이 있습니다.

 

ex) 오늘 이라는 단어를 accent 클래스 속성을 가지는 p 태그로 묶어보세요.

<div>내일 죽을 것처럼 <p class="accent">오늘</p>을 살고 </div>

 

인라인 레벨 요소

  • 인라인 레벨 요소는 한 줄을 차지하지 않습니다. 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있습니다.
  • 인라인 레벨 요소를 만드는 태그로 <span>, <img>, <strong> 등이 있습니다.

박스 모델의 기본 구성

박스 모델은 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 사이의 여백인 마진(margin) 등의 요소로 구성됩니다

박스 모델 너비 지정하기

콘텐츠 영역의 크기를 지정하는 width, height 속성

  • 박스 모델에서 콘텐츠 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용합니다.
  • width와 height의 속성값
  • | 종류 | 설명 |

| ——– | ——– |
| <크기> | 너비나 높이의 값을 px이나 em 단위로 지정합니다. |
| <백분율> | 박스 모델을 포함하는 부모 요소를 기준으로 너빗값이나 높잇값을 백분율(%)로 지정합니다. |
| auto | 박스 모델의 너빗값과 높잇값이 콘텐츠 양에 따라 자동으로 결정됩니다. 기본값입니다. |

 

 

 

박스 모델의 크기를 계산하는 box-sizing 속성

  • box-sizing은 박스 모델의 너비와 높이를 어떻게 결정할 것인지에 따라 border-box와 content-box 중에서 선택할 수 있습니다.
  • box-sizing의 속성값
  • | 종류 | 설명 |

| ——– | ——– |
| border-box | 테두리까지 포함해서 너빗값을 지정합니다. |
| content-box | 콘텐츠 영역만 너빗값을 지정합니다. 기본값입니다. |

 

 

박스 모델에 그림자 효과 주기

박스 모델에 그림자 효과를 주는 box-shadow 속성

box-shadow: <수평 거리> <수직 거리> <흐림 정도> <번짐 정도> <색상> inset
  • box-shadow의 속성값
  • | 종류 | 설명 |

| ——– | ——– |
| <수평 거리> | 그림자가 가로로 얼마나 떨어져 있는지를 나타냅니다. 양숫값은 요소의 오른쪽에, 음숫값은 요소의 왼쪽에 그림자를 만듭니다. 필수 속성입니다. |
| <수직 거리> | 그림자가 세로로 얼마나 떨어져 있는지를 나타냅니다. 양숫값은 요소의 아래쪽에, 음숫값은 요소의 위쪽에 그림자를 만듭니다. 필수 속성입니다. |
| <흐림 정도> | 이 값을 생략하면 0을 기본값으로 하여 진한 그림자를 표시합니다. 이 값이 커질수록 부드러운 그림자를 표시하며, 음숫값은 사용할 수 없습니다. |
| <번짐 정도> | 양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 박스보다 그림자가 크게 표시됩니다. 반대로 음숫값은 모든 방향으로 그림자가 축소되어 보입니다. 기본값은 0입니다. |
| <색상> | 한 가지만 지정할 수도 있고, 공백으로 구분해서 여러 개의 색상을 지정할 수도 있습니다. 기본값은 현재 검은색입니다. |
| inset | 이 키워드를 함께 표시하면 안쪽 그림자로 그립니다. |

 

박스 모델의 테두리 스타일 지정하기

테두리 스타일을 지정하는 border-style 속성

  • border-style의 속성값
  • | 종류 | 설명 |

| ——– | ——– |
| none | 테두리가 없습니다. 기본값입니다. |
| hidden | 테두리를 감춥니다. 표에서 border-collapse: collapse일 경우 다른 테두리도 표시되지 않습니다. |
| solid | 테두리를 실선으로 표시합니다. |
| dotted | 테두리를 점선으로 표시합니다. |
| dashed | 테두리를 짧은 직선으로 표시합니다. |
| double | 테두리를 이중선으로 표시합니다. 두 선 사이의 간격이 border-width값이 됩니다. |
| groove | 테두리를 창에 조각한 것처럼 표시합니다. 홈이 파인 듯 입체 느낌이 납니다. |
| inset | 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에 박혀 있는 것처럼 표시되고, 표에서 border-collapse: collapse일 경우 groove와 똑같이 표시됩니다. |
| outset | 표에서 border-collapse: seperate일 경우 전체 박스 테두리가 창에서 튀어나온 것처럼 표시되고, 표에서 border-collapse: collapse일 경우 ridge와 똑같이 표시됩니다. |
| ridge | 테두리를 창에서 튀어나온 것처럼 표시합니다. |

 

 

박스 모델의 테두리 두께 지정하기

테두리 두께를 지정하는 border-width 속성

border-width: <크기> | thin | medium | thick
Copy
  • 만일 테두리 두께를 4개 방향 모두 다르게 지정하고 싶다면 border-top-width, border-right-width…처럼 border와 width 사이에 상하좌우 방향을 넣고 하이픈(-)으로 연결합니다

 

'Full-Stack > CSS' 카테고리의 다른 글

CSS  (0) 2022.08.05

관련글

티스토리툴바