css_study_d1

인라인 스타일 사용하기 |

인라인 스타일

간단한 스타일 정보를 적용하는 경우에 사용합니다.

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

내부 스타일 시트 사용하기 |

내부 스타일 시트

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

외부 스타일 시트 사용하기(CSS 파일) |

외부 스타일 시트

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

여러 웹 문서에서 사용할 스타일을 별도 파일로 따로 저장해 놓은 스타일 정보를 외부 스타일 시트라 하고 ***.css**라는 파일 확장자를 사용합니다.
외부 스타일 시트 파일에 스타일을 작성할 때는 <style> 태그를 사용하지 않습니다.

전체 선택자 사용하기 |

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

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

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

타입 선택자 사용하기 |

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

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

태그명 { 스타일 규칙 }

클래스 선택자 사용하기 |

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

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

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

id 선택자 사용하기 |

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

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

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

그룹 선택자 |

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

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

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

캐스케이딩 스타일 시트 알아보기 |

캐스케이딩의 의미

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

스타일 우선순위

중요도

사용자 스타일 > 제작자 스타일 > 브라우저 기본 스타일

적용 범위

!important > 인라인 스타일 > id 스타일 > 클래스 스타일 > 타입 스타일

작성 순서

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

스타일 상속

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

글꼴 관련 스타일 |

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

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

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

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

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

단위를 사용하여 글자 크기 지정하기
| 종류 | 설명 |

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

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

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

font-style: normal | italic | oblique
Copy

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

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

웹 폰트 사용하기 |

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

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

글자색을 지정하는 color 속성

color: <색상>
Copy

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
Copy

종류설명

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

줄 간격 지정하기 |

줄 간격을 조절하는 line-height 속성

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

텍스트를 세로로 가운데 정렬하기 |

line-height의 속성값을 height 속성값과 똑같이 추가하면 텍스트를 세로로 가운데 정렬할 수 있습니다.

텍스트에 줄 표시하기 |

텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

text-decoration 속성은 텍스트에 밑줄을 긋거나 취소선을 표시합니다.

텍스트에 그림자 효과 추가하기 |

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

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

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-type 속성

list-style-type 속성을 사용하여 불릿의 모양이나 번호 스타일을 지정할 수 있습니다.
목록 스타일의 속성값
| 종류 | 설명 | 예시 |

불릿 대신 이미지 사용하기 |

불릿 대신 이미지를 사용하는 list-style-image 속성

list-style-image: <url(이미지 파일 경로)> | none
Copy

list-style-image 속성을 이용하면 불릿을 원하는 이미지로 바꿀 수 있습니다.

목록 들여쓰기 |

목록을 들여 쓰는 list-style-position 속성

list-style-position: inside | outside;
Copy

list-style-position 속성을 사용하면 불릿이나 번호의 위치를 들여 쓸 수 있습니다.
list-style-position의 속성값
| 종류 | 설명 |

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

목록 속성을 한꺼번에 표시하는 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
Copy

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

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

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

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

표 스타일 (2) |

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

border-spacing: 수평거리 수직거리
Copy

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

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

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

<출처 & 공부한 사이트>

https://academy.elice.io/courses/7739/info

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 | 엘리스

한 권으로 끝내는 웹 기본 교과서

academy.elice.io

'학부생나부랭이 > _web_programing' 카테고리의 다른 글

css_study_d3_정리 (0)	2022.01.14
css_study_d2_정리 (0)	2022.01.07
혼자 끄적여 본 html (0)	2022.01.03
html_study_d2_정리 (0)	2022.01.03
html_study_d1_정리 (0)	2021.12.30

css_study_d1_정리

인라인 스타일 사용하기 |

인라인 스타일

내부 스타일 시트 사용하기 |

내부 스타일 시트

외부 스타일 시트 사용하기(CSS 파일) |

외부 스타일 시트

전체 선택자 사용하기 |

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

타입 선택자 사용하기 |

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

클래스 선택자 사용하기 |

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

id 선택자 사용하기 |

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

그룹 선택자 |

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

캐스케이딩 스타일 시트 알아보기 |

캐스케이딩의 의미

스타일 우선순위

스타일 상속

글꼴 관련 스타일 |

웹 폰트 사용하기 |

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

글자색을 지정하는 color 속성

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

글자색을 지정하는 color 속성

텍스트 정렬하기 |

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

줄 간격 지정하기 |

줄 간격을 조절하는 line-height 속성

텍스트를 세로로 가운데 정렬하기 |

텍스트에 줄 표시하기 |

텍스트의 줄을 표시하거나 없애 주는 text-decoration 속성

텍스트에 그림자 효과 추가하기 |

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

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

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

글자 간격 조절하기 |

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

순서 없는 목록과 알파벳 대문자 목록 지정하기 |

불릿 모양과 번호 스타일을 지정하는 list-style-type 속성

불릿 대신 이미지 사용하기 |

불릿 대신 이미지를 사용하는 list-style-image 속성

목록 들여쓰기 |

목록을 들여 쓰는 list-style-position 속성

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

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

표 스타일 (1) |

표 스타일 (2) |

'학부생나부랭이 > _web_programing' 카테고리의 다른 글

관련글

댓글

티스토리툴바