[2024-2 웹기초 스터디 #2주차] 김민재 - CSS

CSS란?

---

 

CSS: Cascading Style Sheets

• Cascading : 계단식
• Style : 멋을 내다
• Sheets : (종이) 한 장

⇒ 계단식으로 스타일을 정의하는 문서

• HTML + CSS ⇒ 문서 열기 ⇒ 코드 해석 ⇒ 웹 페이지
  • HTML이 없는 CSS는 사실상 의미가 없다

문법 학습 및 속성의 종류

---

기본 문법 및 사용 방법

**CSS 기본 문법**
선택자{
	속성명: 속성값;
}

선택자: 어떤 요소에 스타일을 적용할지에 대한 정보
{중괄호}: 선택한 요소에 적용할 스타일을 정의하는 영역
속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
속상값 : 어떻게 정의하고 싶은가에 대한 정보

• HTML에 CSS를 더하려면
  • 인라인 스타일: 태그에 직접 기술하기
  • 스타일 태그: 스타일시트를 위한 태그를 추가하여 작성하기
  • 문서 간의 연결: 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기

선택자 - 1

---

선택자의 종류

• 기본 선택자
• 그룹 선택자
• 특성 선택자
• 결합 선택자
• 의사 클래스
• 의사 요소

기본 선택자

• 전체 선택자
  • 모든 요소를 선택한다
  • • 기호는 문서 내의 모든 요소를 의미한다
• 태그 선택자
  • 주어진 이름을 가진 요소를 선택한다
  • 주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택함
• 클래스 선택자
  • 주어진 class 속성값을 가진 요소를 선택한다
  • 주어진 class를 가진 요소가 다수일 경우, 해당 요소들을 모두 선택함
• 아이디 선택자
  • 주어진 id 속성값을 가진 요소를 선택한다
  • id는 고유한(하나임) 식별자 역할을 하는 전역 속성임

그룹 선택자

• 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용
• 쉼표를 이용해 선택자를 그룹화한다

선택자가 겹치는 경우

• 나중에 작성된 스타일이 적용된다
• 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용된다
  • 아이디 선택자 > 클래스 선택자 > 태그 선택자

텍스트 관련 속성

• font-family
  • 요소를 구성하는 텍스트의 글꼴을 정의한다
• font-size
  • 수치와 단위를 지정해 글자 크기를 정의한다
    • px: 픽셀
    • rem: HTML 태그에 대응하는 상대적인 크기
    • em: 부모태그(상위태그)에 대응하는 상대적인 크기
• text-align
  • 블록 내에서 텍스트의 정렬 방식을 정의한다
    • left / right
    • center
    • justify
• color
  • 텍스트의 색상을 정의한다
    • 키워드 (ex. red)
    • RGB 색상 코드 (#FF0000)
    • RGB 함수 (rgb(100%, 0%, 0%))

블록 레벨 vs 인라인

• 블록 레벨: 자기가 속한 영역의 너비를 모두 차지
• 인라인: 자기에게 필요한 만큼의 공간만
• display
  • 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다
• border
  • 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.

박스모델

<aside> 💡

박스모델

브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형의 형태로 영역을 차지한다

이 영역이 박스이며, CSS는 박스의 크기, 위치, 속성을 결정할 수 있다

박스의 구성

• 콘텐츠 영역: width, height
• 안쪽 여백: padding
• 경계선 (테두리): margin
• 바깥쪽 여백: border-width </aside>

• padding과 margin은 콘텐츠 주변에 여백을 주는 요소
• 각 면에 개별적으로 두께 정의 가능
  • 하위 속성 정의하기
    • padding에 접미사 붙여 정의 (ex. padding-left)
    • margin 또한 같음
  • 여러 값을 한 번에 정의하기
    • ex. margin: 10px 20px 30px 40px
• box-sizing
  • 요소의 너비와 높이를 계산하는 방법 지정
    • content-box: 너비와 높이가 콘텐츠 영역만을 포함
    • border-box: 너비와 높이가 안쪽 여백과 테두리까지 포함
• background
  • 콘텐츠의 배경을 정의한다.
  • 단축 속성으로 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다.

float & clear

• float 속성은 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너 왼쪽이나 오른쪽에 배치되게 한다
• clear 속성은 float 요소 이후에 표시괴는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.

Position

• position은 문서 상에 요소를 배치하는 방법을 정의한다
  • position : 이렇게 배치할거야
  • top: 위면에서부터 얼만큼 떨어트릴거야
  • right
  • bottom
  • left
• 속성값
  • static
  • relative: 요소를 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋 적용
  • absolute: 요소를 일반적인 문서 흐름에서 제거하고, 상위 요소 중 가장 가까운 position 지정 요소에 상대적으로 오프셋 적용
  • fixed: 요소를 일반적인 문서 흐름에서 제거하고, 지정된 위치에 고정시킨다
  • sticky: 요소를 일반적인 문서 흐름에 따라 배치하되, 스크롤 되는 가장 가까운 상위 요소에 대해 오프셋 적용

flexbox

• 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃
  • 레이아웃을 다룰 때 한 번에 하나의 차원만을 다룬단 특성 때문에
  • 주축(main-axix)과 교차축(cross-axis)
• 속성
  • justify-content: 주축 배치 방법
  • align-items: 교차축 배치 방법
  • align-self: 교차축 개별요소 배치 방법
  • flex-wrap: 줄 바꿈 여부

선택자 - 2

---

특성 선택자

• 컨셉
  • 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다
• 값 확인
  • 기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있음

결합 선택자

• 컨셉
  • 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택
    • 자손 결합자: 두 개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할 수 있다
    • 형제 결합자: 두 개의 선택자 중 첫번째 선택자 요소의 형제를 선택할 수 있다

의사클래스

• 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미
• 예시
  • hover
  • active
  • focus
  • disabled
  • nth-child()

의사요소

• 선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정부분에 대한 스타일을 정의할 수 있다
• 예시
  • after
  • before
  • first-line
  • marker
  • placeholder

상속 및 공용 키워드

• 상속: 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것
  • 상속이 이뤄지는 속성이 있고 안되는 속성들이 있다
• 공용 키워드: 모든 CSS 속성에 사용 가능한 키워드가 있다
  • 예시
    • inherit
    • initial
    • unset

z-index

• 요소의 쌓임 순서를 정의할 수 있다.
• 정수 값을 지정하여 쌓임 맥락에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용 가능