CSS 알아보기 (1)

가은·2022년 7월 13일
CSS
0

HTML과 CSS

목록 보기
3/8

📍CSS

Cascading Style Sheet : 위에서 아래로 흐르는 스타일 시트

▪️ 스타일 간의 충돌을 막기 위한 방법의 두 가지 원칙
1. 스타일 우선순위 : 스타일 규칙의 중요도, 적용 범위에 따라 우선순위를 결정한다.
2. 스타일 상속 : 태그들의 포함 관계에 따라 부모 요소의 스타일을 자식 요소로, 위에서 아래로 전달한다.

▪️ 스타일 우선 순위
✔️ Importance 중요도
1. 사용자 스타일 시트 : 시스템을 통해 만들어진 설정 기능
2. 제작자가 만든 스타일 중 !important가 붙은 스타일
3. 제작자가 만든 일반 스타일
4. 기본적인 브라우저 스타일 시트
✔️ Specificity 적용 범위
1. inline 스타일
2. id 스타일
3. class 스타일
4. tag 스타일
✔️ Source Order 소스 순서
소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

스타일 상속
▪️ 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.
▪️ 글자 색 등은 상속이 되지만 부모 요소에 배경 이미지나 배경 색이 있으면 상속되지 않는다.
▪️ 스타일끼리 충돌이 생길 경우, 우선순위에서 '명시도'나 '소스 순서' 등에 따른 해결책을 마련한다.

📍Style Sheet

📌 내부 스타일 시트

▪️ 웹 문서 안에서 사용할 스타일을 문서 안에서 정리한 것이다.
▪️ head 태그 사이에, title 태그 밑에 정의한다.
▪️ style 태그 안에 작성한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>제목</title>
    <style>
        section {
            width: 500px;
            padding: 15px;
        }
     </style>
</head>

📌 외부 스타일 시트

▪️ 사용할 스타일을 별도 파일로 저장하는데, 따로 저장해놓은 스타일 정보를 '외부 스타일 시트'라고 하고 확장자는 '.css' 이다.
▪️ 외부 스타일 시트를 연결할 때에는 style 태그 없이 link 태그를 사용하여 외부 스타일 시트 파일을 연결한다.

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="외부 스타일 파일 경로">
</head>

📌 인라인 스타일

▪️ 간단한 스타일 정보를 스타일 적용 대상에 직접 표시하는 방법이다.
▪️ 해당 태그에 style 속성을 사용하여 style = "속성:속성 값;" 형태로 나타낸다.

✏️주요 선택자

전체 선택자 : 모든 요소에 스타일 적용하기
▪️ 기본 스타일을 초기화 할 때 사용한다.

* {
	margin: 0; padding: 0;
}

태그 선택자 : 특정 태그를 사용한 요소에 스타일 적용하기
▪️ 웹 문서의 모든 특정 요소들한테 스타일을 정한다.
▪️ 태그는 태그 자체를 가르키고, 요소는 태그가 적용된 것을 가리킨다.

p {
	font-size: 12px;
}

클래스 선택자 : 특정 부분에 스타일 적용하기
▪️ 특정 부분에만 스타일을 적용할 때 사용한다.
▪️ 태그 이름과 겹치면 안되고, 스타일 클래스 이름 앞에 마침표(.)를 찍어야한다.
▪️ 텍스트 일부에만 클래스 스타일을 적용할 때 span 태그를 사용하여 적용할 스타일을 묶고 그 안에 지정한다.
▪️ 둘 이상의 클래스 스타일을 적용할 땐 공백으로 구분하여 두 개의 스타일을 적는다.

<style>
.bluetext {
    color: blue;
}
</style>

<h2 class="bluetext">내용</h2>

id 선택자 : 특정 부분에 스타일 적용하기
▪️ 클래스 선택자와 사용법은 같지만 마침표(.) 대신 #기호를 사용한다.
▪️ id 선택자는 문서 내에서 한번만 적용이 가능하다.
▪️ 주로 문서의 레이아웃과 관련된 스타일을 지정하거나, 자바스크립트 웹 요소 구별을 위해 사용된다.

<style>
   #container {
       width: 600px;
       padding: 15px; /*테두리와 내용사이 여백*/
       border: 1px solid gray; /*테두리 스타일*/
   }
</style>

<div id="container">내용</div>

그룹 선택자 : 둘 이상 요소에 같은 스타일 적용하기
▪️ 여러 선택자에 같은 스타일이 사용된 경우 쉼표로 구분해 여러 선택자를 내열한 후 스타일은 한번만 정의한다.

h1, h2 {
	text-align: center;
}

✏️ 텍스트 관련 스타일

글꼴 관련 스타일

font-family 속성 : 글꼴 지정하기
▪️ 웹 문서에서 사용할 글꼴을 지정할 때 사용한다.
▪️ 웹 문서에서 글꼴을 지정할 때는 지정한 글꼴이 없는 경우에 대비해 세번째 글꼴까지 지정한다.
▪️ 상속이 되기 때문에 body 태그 스타일에서 정의하면 문서 안의 모든 요소에 대해 적용된다.
▪️ 다른 글꼴 사용 시 태그 스타일이나 클래스 스타일을 이용하여 해당 요소에서 다른 글꼴을 정의한다,

@font-face 속성 : 웹 폰트 사용하기
▪️ 웹 폰트란 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 시키는 방식이다.
1. @import로 시작하는 소스 복사
2. 복사한 소스를 웹 문서의 style 태그에 붙여 넣기
3. 사용하고 싶은 요소에 글꼴 이름 사용

<style>
    @import url('폰트 소스 붙여넣기');
    .폰트이름 {
        font-family: '폰트이름', 돋움;
    }
    p {
        font-size: 30px
    }
</style>

<p class="폰트이름">웹 폰트 사용법</p>

▪️ 직접 업로드한 웹 폰트 적용법

<style>
	@font-face {
    	font-family: 글꼴 이름;
        src: url(글꼴 파일 경로) format(파일유형);
    }
</style>
/* 속성 지정 시 사용자 시스템에서 먼저 찾고 없다면 eot,woff,ttf 파일 순으로 적용 */

폰트 사이즈 설정하기

속성 값설명
<절대크기>브라우저에서 지정한 글자 크기
xx-small, x-small, small, medium, large, x-large, xx-large 값으로 사용한다.
<상대크기>부모 요소의 font-size를 기준으로 더 크게 표시하거나 작게 표시
larger, smaller 값으로 사용한다.
<크기>브라우저와 상관없이 글자 크기를 직접 지정한다.
<백분율>부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해 표시한다.
(% 기호와 함께 표기)

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

표시 단위설명
em해당 글꼴의 대문자 M의 너비를 기준으로 크기 조절
exx-height, 해당 글꼴의 소문자 x의 높이를 기준으로 크기 조절
px모니터에 따른 상대적 크기
pt일반 문서에서 사용하는 단위

▪️ px 단위 사용은 폰트 크기가 고정되기 때문에 모바일 기기로 볼 때도 같은 크기로 화면에 표시되어 모바일 기기 접속까지 고려한다면 em 단위를 활용하는 것이 좋다.

font-weight 속성 : 글자 굵기 지정하기
▪️ bold, lighter, bloder : 굵게, 원래 굵기보다 더 가늘게, 원래 굵기보다 더 굵게
▪️ 100 ~ 900 사이의 수치로도 값을 정할 수 있다.
(400 : normal, 700 : bold)

font-variant 속성 : 작은 대문자로 표시하기
▪️ 소문자 크기에 맞추어 대문자를 작게 표시한다.
▪️ normal, small-caps 속성 값이 있다.

font-style 속성 : 글자 스타일 지정하기
▪️ italic, oblique : 이탤릭체로 표시

텍스트 스타일

color 속성 : 글자색 지정하기

text-decoration 속성 : 텍스트에 줄 표시하기 / 없애기
▪️ none : 변환 X
▪️ capitalize : 시작하는 첫 번째 글자만 대문자로 변환
▪️ uppercase : 모든 글자를 대문자로 변환
▪️ lowercase : 모든 글자를 소문자로 변환
▪️ full-width : 가능한 모든 문자를 전각 문자로 변환

text-shadow 속성 : 텍스트에 그림자 효과 추가하기
▪️ none | <가로거리> <세로거리> <번짐정도> <색상>

white-space 속성 : 공백 처리하기
▪️ normal : 여러 개의 공백을 하나로 표시
▪️ nowrap : 여러 개의 공백을 하나로 표시하고 줄 바꿈 X
▪️ pre : 여러 개의 공백을 그대로 표시하고 줄 바꿈 X
▪️ pre-line : 여러 개의 공백을 하나로 표시하고 자동 줄 바꿈
▪️ pre-wrap : 여러 개의 공백을 그대로 표시하고 자동 줄 바꿈

letter-spacing / word-spacing 속성 : 텍스트 간격 조절하기
▪️ letter-spacing : 낱글자 사이 간격
▪️ word-spacing : 단어와 단어 간격, 자간 조절

문단 스타일

direction 속성 : 글자 쓰기 방향 지정하기
▪️ ltr : left to right , 기본값
▪️ rtl : right to left

text-align 속성 : 텍스트 정렬하기
▪️ start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬
▪️ end : 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬
▪️ left : 왼쪽 정렬
▪️ right : 오른쪽 정렬
▪️ center : 가운데 정렬
▪️ justify : 양쪽 정렬
▪️ match-parent : 부모 요소 따라 정렬

text-justify / text-indent / line-height / text- overflow 속성
▪️ text-justify : 정렬 시 공백 조절하기
text-justify: auto | none | inter-word (단어 사이 공백 조절) | distribute (인접 글자 사이의 공백 동일)

▪️ text-indent : 텍스트 들여쓰기
text-indent: <크기> (단위와 함께 크기 지정) | <백분율> (부모 요소의 너비 기준으로 상대적 크기 지정)

▪️ line-height : 줄 간격 조절하기
line-height: normal | <숫자> | <크기> | <백분율> | inherit

▪️ text-overflow : 넘치는 텍스트 표기하기
text-overflow: clip (넘치는 텍스트는 자름) | ellipsis (말 줄임표를 이용해 잘린 텍스트 표시)
✔️text-overflow 속성은 해당 요소에서 overflow 속성 값이 hidden 이거나 scroll, auto 이면서 white-space:nowrap 속성을 함께 사용한 경우에만 적용된다.

목록 스타일

list-style-type 속성 : 목록의 불릿과 번호 스타일 지정하기

list-style-image 속성 : 불릿 대신 이미지 넣기

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

list-style-position 속성 : 목록에 들여 쓰는 효과 내기
▪️ inside : 불릿이나 숫자를 안쪽으로 들여 쓴다.
▪️ outside : 불릿이나 숫자를 밖으로 내어 쓴다. 기본 값

list-style 속성 : 목록 속성 한꺼번에 표시하기

profile
가은
일이 재밌게 진행 되겠는걸?
이전 포스트

HTML5 시맨틱 태그와 멀티미디어

다음 포스트

CSS 알아보기 (2)

0개의 댓글