2025.03.10 ~ 03.11

CSS

CSS 개요

CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 디자인을 정의하는 스타일시트 언어

• 컨텐츠의 레이아웃, 색상, 글꼴, 간격 등의 시각적 표현을 제어
• 웹 페이지의 여러가지 스타일을 중앙 집중식으로 관리할 수 있어 효율적이며, 유지 관리가 쉬워진다.

style, stylesheet

style

HTML 태그의 style 속성(attribute)에 CSS 코드를 작성한 것이다. 해당 태그에만 스타일이 적용

stylesheet

HTML 문서에서 CSS 파일을 외부 파일로 분리하여 사용

• HTML 문서에서 스타일을 관리하기 쉽고, 중복 스타일을 제거할 수 있어 보다 효율적
• 다양한 선택자를 사용하여 스타일을 적용
• 내부 스타일 시트 방식과 외부 스타일 시트 방식으로 작성

내부 스타일 시트

CSS 코드를 HTML 문서 내부에 포함하여 작성하는 방식

• html 안 head 부분에 주로 작성

외부 스타일 시트

CSS 코드를 HTML 문서에서 분리하여 작성

• css 파일 작성
• HTML 문서의 head 태그 안에서 link 태그를 사용하여 style.css 파일 연결

인라인

HTML 요소의 style 속성(attribute)을 사용하여 CSS 코드를 적용하는 방식

• 하나의 HTML 요소에만 스타일을 적용하므로, 다른 HTML 요소에는 동일한 스타일이 적용되지 않음
• 내용이 많지 않은 작은 요소에 대해서만 사용하는 것이 좋다

CSS 선택자

선택자의 종류

태그 선택자 < 클래스 선택자 < 아이디 선택자 < 인라인 선택자 < !important 순서로 우선순위

전체 선택자

모든 요소를 선택, 문서 전체에 CSS 스타일을 적용

• {
  margin: 0;
  padding: 0;
  }

태그 선택자

특정 태그 요소를 선택

p{
color: red;
}

클래스 선택자

특정 클래스를 가진 요소를 선택, 여러 요소에서 동시에 사용 가능

.some-class {
font-size: 1.2em;
}

ID 선택자

특정 ID를 가진 요소를 선택, 한 페이지에서 하나의 요소에만 적용 가능

#some-id{
border: 1px solid black;
}

자식 선택자

부모 요소 바로 아래 자식 요소를 선택

.parent > .child{
color: blue;
}

후손(하위) 선택자

조상 요소의 하위 자손 요소 선택

.ancestor .descendant{
font-weight: bold;
}

인접 형제 선택자

요소1 바로 뒤에 나오는 요소2를 선택

h2 + p{
font-style: italic;
}

일반 형제 선택자

요소1 다음에 나오는 요소2를 선택

h2 ~ p{
font-size: 1.2em;
}

글꼴 스타일

글꼴

• font-family : 글꼴의 종류를 지정한다.
  - 여러 개의 이름을 지정하는 경우, 종류가 설치되어 있지 않은 경우에 대비하여 대체할 글꼴을 순서대로 지정한다.
• font-size : 글꼴의 크기를 지정한다. 값을 지정하지 않으면 브라우저의 기본 크기가 적용된다.
• font-variant : 글꼴의 속성 중에서 소문자를 대문자(또는 대문자를 소문자)로 바꾸는 효과를 지정한다.
• font-style : 글꼴의 기울임 효과를 지정한다.
• font-weight : 글꼴의 두께를 지정한다. 기본값은 normal이다

font

• font-style : 기울임 효과
• font-variant : 소문자 대문자 효과
• font-weight : 두께
• font-size : 크기
• line-height : 줄 높이
• font-family : 글꼴

텍스트 스타일

텍스트

Color

글자 색상을 나타내는 속성

• 색상 이름 (ex. red, blue)
• RGB 값 (ex. rgb(255, 0, 0))
• HEX 코드 (ex. #FF0000)
  색조(0~360), 채도(0~100%), 명도(0~100%)
  색조는 0 = red, 120 = green, 240 = blue

Text-decoration

글자 장식을 나타내는 속성

• underline: 밑줄
• overline: 윗줄
• line-through: 가운데 줄
• none: 장식 없음

Text-transform

대소문자 변환을 나타내는 속성

• none: 변환 없음
• uppercase: 대문자로 변환
• lowercase: 소문자로 변환
• capitalize: 단어의 첫 글자만 대문자로 변환

Text-shadow

글자 그림자를 나타내는 속성

• h-shadow: 그림자의 수평 위치
• v-shadow: 그림자의 수직 위치
• blur-radius: 그림자의 흐림 정도
• color: 그림자의 색상

문단 스타일

문단

direction

텍스트의 흐름 방향을 지정

• ltr(left-to-right) : 왼쪽에서 오른쪽으로 텍스트를 표시
• rtl(right-to-left) : 오른쪽에서 왼쪽으로 텍스트를 표시

text-align

텍스트의 정렬 방식을 지정

• left : 왼쪽 정렬
• right : 오른쪽 정렬
• center : 가운데 정렬
• justify : 양쪽 정렬

text-justify

텍스트의 줄 내용의 양쪽 정렬을 지정

목록 스타일

목록

list-style-type

목록 마커의 유형을 지정하는 데 사용

list-style-image

목록 마커로 사용할 이미지를 지정하는 데 사용

• url(image-path) : 이미지 경로

배경 스타일

배경

background

CSS 배경 속성은 요소의 배경을 지정하는 데 사용

background-clip

요소의 배경을 어디까지 적용할지 지정하는 속성 (기본값은 border-box)

background-image

요소의 배경에 사용할 이미지 경로를 지정하는 속성 (이미지 경로는 url() 함수로 지정)

background-repeat

배경 이미지의 반복 여부를 지정하는 속성

background-size

배경 이미지의 크기를 지정하는 속성

background-position

배경 이미지의 위치를 지정하는 속성

border : 테두리(경계선) 설정, 두께, 스타일, 색상
- solid : 실선
- dashed : 점선
float : 요소 왼/오른쪽 으로배치
- clear: right : 오른쪽 float된 요소 아래로 이동
- clear: left : 왼쪾 float된 요소 아래로 이동
- clear: both : 왼쪽과 오른쪽 float 요소 아래로 이동
padding : 요소의 내용과 테두리 사이의 여백을 지정하는 속성

레이아웃 스타일

레이아웃

height(높이)/width(너비) 속성

• 각각 요소의 높이와 너비를 지정
• 이 속성들은 px, em, % 등의 단위로 값을 입력할 수 있음

블록 레벨 요소

• HTML에서는 블록 레벨 요소와 인라인 레벨 요소로 구분
• 한 줄 전체를 차지하며, 새로운 줄에서 시작함
• 대표적인 블록 레벨 요소로는 div, p, h1~h6, ul, ol, li, table, form 등이 있음

인라인 레벨 요소

• 블록 레벨 요소 안에서 쓰이며, 컨텐츠의 일부분만 차지함
• 한 줄에 여러 개가 올 수 있음
• 대표적인 인라인 레벨 요소로는 a, span, img, input, button 등이 있음

display 속성

• 요소를 어떻게 보여줄지를 지정
• 대표적인 값으로는 block, inline, inline-block, none 등이 있음
  - display: block : 한 줄을 전체 차지(줄바꿈 발생), 너비, 높이 조절가능
  - display: inline : width, height 속성적용하지 않고 가로로 배치, padding 크기는 적용됨 -> margin-left으로 크기 조절
  • display: inline-block : 줄 바꿈 없이 나란히 배치 / 너비, 높이 조절 가능
  • display: none : 태그는 존재하지만 공간(영역)을 차지 하지 않는다.(화면에서 제거)

padding

• 컨텐츠와 테두리 사이의 여백을 지정하는 속성
• 값은 숫자, px, em 등 단위를 사용하여 지정하며, 상하좌우 순서로 값을 지정할 수 있음
• 값 하나만 지정하면 상하좌우 모두 동일한 값으로 지정됨

margin

• 테두리 바깥쪽 여백을 지정하는 속성
• 값은 숫자, px, em 등 단위를 사용하여 지정하며, 상하좌우 순서로 값을 지정할 수 있음
• 값 하나만 지정하면 상하좌우 모두 동일한 값으로 지정됨
  - margin: auto : 요소를 가운데 정렬하고자 할때 자동으로 여백 조절을 해줌
  

속성 선택자

name=name2

속성값과 일치하는 객체(태그, 요소) 선택

name~=name1

속성 안의 값이 특정 값을 단어(띄어쓰기 단위)로써 포함하는 객체 선택

• name1이 안에 있어야 함

class|=class

특정 값과 일치하거나 -가 바로 따라오는 객체 선택

• class="class" 또는 class="class-xxx" 인 경우만 선택

name^=name

속성 값이 특정 값으로 시작하는 객체 선택 (^=)

• name 속성 값이 name으로 시작하는 요소 선택, "name=namexxx"인 경우

class$=class

속성 값이 특정 값으로 끝나는 객체 선택 ($=)

• class="xxxclass"

속성 값이 특정 값을 포함하는 객체 선택 (*=)

class 속성 값이 div를 포함하면 적용

• class="mydivbox", class="containerdiv"

자손 & 후손 선택자

자손 선택자 (> - 바로 아래 태그)

• #test1 > h4 : #test1의 직속 h4 태그만 선택

후손 선택자 ( - 중첩 포함)

• #test1 ul : #test1 내부에 있는 모든 ul 태그에 적용됨

형제 관계 선택자

들여쓰기 같은 라인

특정 요소 바로 뒤에 오는 형제 요소 (+)

• #div-test1 + div : #div-test1 바로 뒤에 오는 div 한 개만 적용

특정 요소 뒤에 존재하는 모든 형제 요소 (~)

• #div-test2 ~ div : #div-test2 뒤에 있는 모든 div 태그에 적용됨

이벤트 관련 선택자

:active

요소가 클릭되었을 때 스타일 적용

• #active-test:active : #active-test를 클릭하면 스타일이 변동한다.

:hover

마우스를 올렸을 때 스타일 적용

• #hover-test:hover : #hover-test 위에 마우스를 올리면 스타일 변경됨

:checked

체크된 상태의 요소 선택

• input[type=checkbox]:checked : 체크되면 스타일 변경

:focus

포커스를 받은 입력 요소 스타일 적용

• #userId:focus, #userPwd:focus : 커서를 두변 스타일 변경

:disabled

비활성화된 요소 스타일 변경

• option:disabled : 비활성화된 option 요소 스타일 변경

:enabled

활성화된 요소 스타일 변경

• option:enabled : 활성화된 option 스타일 변경