본문 바로가기
front-end/CSS

CSS 총 정리(Ctrl+F로 검색하세요)

by 모두의 향연 2022. 3. 5.
728x90
반응형
  • 구문

css 구문형태

선택자
  • 요소 선택자
p {
  text-align: center; 
  color: red;
}
  • ID 선택자
#para1 {
  text-align: center; 
  color: red;
}
...
<p id="para1">Hello World!</p>

 

CSS 삽입하는 3가지 방법
  • 외부CSS: <head> 섹션 내 <link> 요소 내/.css 확장자로 저장/
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
  • 내부CSS: <head> 섹션 내 <style> 요소 내
<head>
<style>
body { 
  background-color: linen;
}
h1 {
  color: maroon;  margin-left: 40px;
}
</style>
</head>
  • 인라인CSS: 해당 요소에 style 속성을 추가
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
  • 외부 스타일 시트와 내부스타일 시트에서 색깔이 다 정의되어 있다면, 나중에 정의된 것이 색깔로 나옴

 

 

주석

/* 시작으로 */으로 끝냅니다.

/* This is a single-line comment */

 

색상

CSS/HTML은 140개의 표준 색상을 지원한다.

  • 배경색
<h1 style="background-color: blue;">Hello World</h1>
  • 글자색
<h1 style="color: blue;">Hello World</h1>
  • 테두리색
<h1 style="border: 2px solid blue;">Hello World</h1> /* 크기 굵기 색을 한번에*/
  • CSS색상값
<h1 style="background-color:rgb(255, 99, 71);"></h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);"></h1>
<h1 style="background-color:#ff6347;"></h1>
<h1 style="background-color:hsl(9, 100%, 64%);"></h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);"></h1>

 

배경
  • 색상
  • 투명도
 opacity: 0.3;
  • RGBA를 사용한 투명도
 background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
  • 배경이미지
 background-image: url("paper.gif");
  • 배경반복
background-image: url("gradient_bg.png");
background-repeat: repeat-x; 
-y축으로 반복: repeat-y
-반복없음: no-repeat
  • 배경첨부(배경 이미지가 스크롤되어야 하는지 또는 고정되어야 하는지를 지정)
  background-attachment: fixed;
  background-attachment: scroll;
  • 배경위치
 background-position: right top;(픽셀로 적어도 무방)
  • 배경속기(코드를 줄이기 위해 모든 배경 속성을 하나의 속성으로 지정)/
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}
/* 순서는 색상, 이미지, 반복, 첨부, 위치 순이다(색이반첨위) */

 

테두리
  • 테두리 스타일
dotted- 점선 테두리
dashed- 점선 테두리(살짝 긴 점선)
solid- 단색 테두리
double- 이중 테두리
groove- 3D 홈 테두리
ridge- 3D 융기된 테두리
inset- 3D 삽입 테두리
outset- 3D 아웃셋 테두리
none- 경계를 정의하지 않음
hidden- 숨겨진 테두리

  • 테두리 너비(위쪽 테두리, 오른쪽 테두리, 아래쪽 테두리 및 왼쪽 테두리-시계방향임)
 border-width: 25px 10px 4px 35px;
/* 너비는 특정 크기(px, pt, cm, em 등)로 설정하거나,  미리 정의된 세 가지 값(얇음, 중간 또는 두껍게) 중 하나를 사용하여 설정할 수 있습니다. */
  • 테두리 색상(상단 테두리, 오른쪽 테두리, 하단 테두리 및 왼쪽 테두리)
border-color: blue;
border-color: red green blue yellow;
border-color: #ff0000; /* 16진수 값(HEX) */
border-color: rgb(255, 0, 0); /* RGB */
border-color: hsl(0, 100%, 50%); /* HSL값 */
  • 테두리 측면
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
 border-style: dotted solid double dashed; /* 한 번에 설정 가능 */
  • 테두리 코드 줄이기
border: 5px solid red; /* 크기 스타일 색상 */
border-left: 6px solid red; /*  왼쪽 테두리 */
border-bottom: 6px solid red /*  하단 테두리 */
  • 둥근테두리
border-radius: 5px;

 

여백
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
margin: 25px 50px 75px 100px; /* 한 번에 마진 정하기 */
margin: 25px; /* 4개의 여백 한 번에 설정 */
margin: auto; /* 자동 */
  • 여백 상속
/* <p class="ex1"> 요소의 왼쪽 여백이 상위 요소(<div>)에서 상속 */
div {
  border: 1px solid red;  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}
  • 여백 축소
[마진붕괴] :  <h1> 요소의 아래쪽 여백은 50px이고 <h2> 요소의 위쪽 여백은 20px로 설정되어 있다. 상식적으로 <h1>과 <h2> 사이의 수직 여백은 총 70픽셀(50픽셀 + 20픽셀)이 되어야 한다. 그러나 여백 축소로 인해 실제 여백은 50px가 된다.

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

 

패딩
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
padding: 25px 50px 75px 100px;
padding: 25px 50px 75px; /* 상단 오른쪽+왼쪽 하단 */
padding: 25px 50px ; /* 상단+하단 오른쪽+왼쪽 */
padding: 25px; /* 모두 다 */
  • width와 padding의 딜레마(?)
 /* 여기서 너비는 300px입니다. 그러나 실제 너비는 350px(300px + 왼쪽 패딩 25px + 오른쪽 패딩 25px)입니다. */
width: 300px;
padding: 25px;

/* 패딩의 양에 관계없이 너비를 300px로 유지하려면 box-sizing 속성을 사용할 수 있습니다. 이렇게 하면 요소가 실제 너비를 유지합니다. 패딩을 늘리면 사용 가능한 콘텐츠 공간이 줄어듭니다. */
width: 300px;
padding: 25px;
box-sizing: border-box;

 

높이와 너비
-auto : 기본값
-length : px, cm 등의 높이/너비를 정의
-% : 포함하는 블록의 높이/너비를 백분율로 정의합니다.
-initial : 높이/너비를 기본값으로 설정합니다.
-inherit : 높이/너비는 부모 값에서 상속됩니다.

 

상자모델

CSS상자모델

  • 요소의 총 너비
전체 요소 너비 = 너비 + 왼쪽 패딩 + 오른쪽 패딩 + 왼쪽 테두리 + 오른쪽 테두리 + 왼쪽 여백 + 오른쪽 여백
전체 요소 높이 = 높이 + 상단 패딩 + 하단 패딩 + 상단 테두리 + 하단 테두리 + 상단 여백 + 하단 여백

 

외각선(border밖)

  • 외각선 스타일
p.dotted {
outline-style: dotted;
}
dotted- 점선 윤곽을 정의합니다.
dashed- 점선 윤곽을 정의합니다.
solid- 실선을 정의합니다.
double- 이중 윤곽선 정의
groove- 3D 홈이 있는 윤곽을 정의합니다.
ridge- 3D 융기된 윤곽을 정의합니다
.inset- 3D 삽입 윤곽을 정의합니다.
outset- 3D 아웃셋 아웃라인 정의
none- 윤곽을 정의하지 않음
hidden- 숨겨진 윤곽선 정의

  • 외각선 너비
-얇은(일반적으로 1px)
-중간(일반적으로 3px)
-두꺼운(일반적으로 5px)
-특정 크기(px, pt, cm, em 등)

outline-width: thin;
outline-width: medium;
outline-width: thick;
outline-width: 4px;​​
  • 외각선 색상
outline-color: red;
outline-color: #ff0000; /*16진수 값*/
outline-color: rgb(255, 0, 0); /*RGB 값*/
outline-color: hsl(0, 100%, 50%); /*HSL 값*/
  • 외각선 속기
outline-width
outline-style(필수의)
outline-color

p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
  • 아웃라인 오프셋(윤곽선과 요소의 테두리 사이에 공간을 추가합니다)
p {
margin: 30px; 
border: 1px solid black; 
outline: 1px solid red; 
outline-offset: 15px;
}

 

 

텍스트
  • 색상
color: blue;
  • 정렬
-text-align: center;
-text-align: left;
-text-align: right;
- text-align: justify; /* 각 줄은 모든 줄의 너비가 동일하고 왼쪽 및 오른쪽 여백이 직선이 되도록 늘어남 */
-text-align-last: right; /* 텍스트 마지막 정렬 */
-vertical-align: baseline; text-top; text-bottom; sub; super;
  • 텍스트 방향
원래글자: [This is the default text direction.]
direction: rtl; (right to left로 오른쪽에서 왼쪽으로 읽는다는 뜻) [This is right-to-left text direction.]
unicode-bidi: bidi-override; [This is right-to-left text direction.]
  • 텍스트 장식

text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
text-decoration: overline underline; /* 한 번에 두 개 지정 가능 */
text-decoration-color: red; /* 색상 */
text-decoration-style: solid; /* 스타일 */
text-decoration-thickness: 5px; /* 두께 */
[속기] text-decoration: underline red double 5px; (위치/색상/스타일/두께)

※작은팁: HTML의 모든 링크는 기본적으로 밑줄이 그어집니다. 링크에 밑줄이 없는 스타일이 지정되는 경우가 있습니다. 다음 text-decoration: none;과 같이 링크에서 밑줄을 제거하는 데 사용됩니다.
  • 텍스트 변환
text-transform: uppercase; //대문자로
text-transform: lowercase; //소문자로
text-transform: capitalize; //첫글자만 대문자
  • 텍스트 간격
-text-indent //텍스트 들여쓰기
-letter-spacing //'문자' 간격
-line-height //라인 높이
-word-spacing//'단어' 간격
-white-space //공백
  • 택스트 그림자
text-shadow: 2px 2px 5px red; //가로 세로 흐림 색깔

 

글꼴
font-family: "Lucida Console", "Courier New", monospace;
  • 글꼴 스타일
font-style: normal; //기본
font-style: italic; //기울임
font-style: oblique; //기울임(italic과 유사하지만 덜 지원됨) 
  • 글꼴 두께
font-weight: normal
font-weight: bold;
  • 글꼴 변형
font-variant: normal;
font-variant: small-caps;
  • 글꼴 크기
font-size: 40px;
font-size: 1.875em; //1em의 기본 크기는 16px입니다.
font-size: 100%;
[반응형 글꼴] <h1 style="font-size:10vw">Hello World</h1>
  • 글꼴 속기
font: italic small-caps bold 12px/30px Georgia, serif;
font-style | font-variant | font-weight | font-size/line-height | font-family
단, font-size값 font-family은 필수

 

 

아이콘(https://www.w3schools.com/icons/icons_reference.asp)
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous">
</script>

<i class="fas fa-cloud"></i>

 

링크
a:link- 방문하지 않은 정상적인 링크
a:visited- 사용자가 방문한 링크
a:hover- 사용자가 마우스를 가져가면 링크
a:active- 클릭하는 순간 링크

a:hover는 반드시:link 및 a:visited 뒤에 와야 합니다
a:active는 반드시:hover 다음에 와야 합니다.

[버튼]
a:link, a:visited {
  background-color: #f44336; 
  color: white;
  padding: 14px 25px;  
  text-align: center;  
  text-decoration: none; 
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}​

 

728x90
반응형
저작자표시 비영리 변경금지

티스토리툴바