[2024-2 웹기초 스터디] 김지수 #2주차

css란?

css는 Cascading Style Sheets를 의미한다.

Cascading: 계단식

Style: 멋을 내다

Sheets: (종이) 한 장

정리하묜 계단식으로 스타일을 정의하는 문서이다.

 

 

 

css가 일하려면

css 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTM 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는  CSS 문서는 사실상 의미가 없다.

 

HTML: 웹 문서의 콘텐츠 구성하는 언어

CSS: 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등)

 

---

CSS 기본 문법

 

CSS 기본 문법 사용 예

 

주석

 

HTML에 CSS를 더하려면

HTML 문서에 CSS 문서(코드)를 적용하고자 할 때는 다음과 같은 방식들을 사용할 수 있다.

 

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

 

인라인 스타일 

태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식 따라서 선택자는 필요 없다.

웹 콘텐츠와 스타일시트를 

 

스타일 태그

HTML 문서에 <style></style> 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있다.

 

문서 간의 연결

확정자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고, HTML문서에 이를 연결해줄 수 있다. 이때는 <link> 태그를 사용한다.

• href: 연결하고자 하는 외부 소스의 url을 기술하는 속성
• rel: 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성

---

선택자 

선택자: 어떤 요소에 스타일을 적용 할 것인지에 대한 정보

 

선택자의 종류

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

 

기본 선택자 1. 전체 선택자

모든 요소를 선택한다.

*(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호이다.

 

기본 선택자 2.태그 선택자

주어진 이름을 가진 요소를 선택한다. '유형 선택자'라고도 한다.

주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.

 

기본 선택자 3. 클래스 선택자

주어진 class 속성값을 가진 요소를 선택한다.

주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택한다.

 

기본 선택자 4. 아이디 선택자

주어진 id 속성값을 가진 요소를 선택한다.

id는 고유한(unique) 식별자 역할을 하는 전역 속성이다.

 

그룹 선택자

다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.

쉼표(,)를 이용해 선택자를 그룹화한다.

 

선택자가 겹치는 경우

선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용된다.

선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.

 

선택자 우선순위: 아이디어 선택자-> 클래스 선택자 -> 태그 선택자

 

---

함께 공부해 볼 텍스트 관련 속성

• font-fmily : 글꼴을 정의한다
• font-size : 글자 크기를 정의한다
• text-align : 정렬 방식을 정의한다
• color : 글자 색상을 정의한다

 

font-family

요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러 개의 글꼴을 연달아 우선 순위를 지정할 수 있다

 

font-size

수치와 단위를 지정해 글자의 크기를 정의할 수 있다

 

text-align

블록 내에서 텍스트의 정렬 방식을 정의한다. 미리 정의된 키워드 값을 지정한다

 

color

텍스트의 색상을 정의한다. 다양한 방법으로 색상을 지정할 수 있다.

 

RGB, 그게 뭔데

RGB 색상은 빛의 삼원색(Red, Green, Blue)을 혼합하여 색을 정의하는 방식이다. 모든 수치가 가장 높을 때 흰색이 된다.

 

---

블록 레벨 요소 vs 인라인 요소

블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다.

인라인 요소 : 자기에게 필요한 만큼의 공간만 차지한다.

 

display 속성

display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.

 

display 속성 값

display에는 미리 정의되어 있는 키워드를 속성값으로 지정한다.

 

border 속성

border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다. border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데, 이러한 속성을 '단축속성'이라 한다.

 

border 속성의 하위 속성

border 속성에 지정하는 값들을 따로따로 지정할 수도 있다. 각 속성은 다음과 같다.

 

---

박스모델 (Box-Model)

브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사격형 형태로 영역을 차지하게 된다. 이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정할 수 있다.

 

하나의 박스는 다음 네 개의 영역으로 구성된다.

• 콘텐츠 영역
• 안쪽 여백
• 경계선 (테두리)
• 바깥쪽 여백

 

박스 각 영역의 크기는 어떻게?

박스 각 영역의 크기를 정의할 수 있는 속성은 다음과 같다

 

• 콘텐츠 영역 : width, height
• 안쪽 여백 : padding
• 바깥쪽 여백 : margin
• 테두리 : border-width

 

---

padding 과 margin

 

 

다양한 경우의 수

여백은 상하좌우 네 개의 면에 존재하는 영역이다. 작성자늩 각 개별적으로 두꼐를 정의할 수 있다. 이를 위해 다음 두 가지 방법을 사용한다.

• 하위 속성 정의하기
• 여러 값을 한 번에 정의하기

 

하위 속성 정의하기

사와좌우 여백을 정의할 수 있는 개별 속성들이 있다

 

여러 값을 한 번에 정의하기

padding과 margin은 네 면의 여백에 대한 단축속성이다.

 

---

다시 보는 박스모델

 

box-sizing

box-sizing 속성은 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다.

 

---

background

배경(background)은 콘첸프의 배경을 정의한다. 단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있다.

 

---

float

float 속성은 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 한다.

 

clear

clear 속성은 float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.

 

---

position

position은 문서 상에 요소를 배치하는 방법을 정의한다. position이 요소의 배치 방법을 결정하면, top, bottom, right, left가 최종 위치를 결정하는 방식이다.

 

position 속성값

position  속성에는 다음 속성값들을 지정할 수 있다.

 

position: relative;

요소를 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 작용한다. 오프셋(보충)이란, 위치를 얼마간 이동시키는 것을 의미한다

 

 

position: absolute;

요소를 일반적인 문서 흐름에서 제거하고, 상위 요소 중 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다. position 지정 요소란, position 속성에 속성값이 정의되어 있는 요소

 

---

Position 속성값

position 속성은 다음 속성값들로 정의할 수 있다.

 

position: fixed;

요소를 일반적인 문서 흐름에서 제거하고, 지정된 위치에 고정시킨다.

 

position: sticky;

요소를 일반적인 문서 흐름에 따라 배치하고, 스크롤(scroll) 되는 가장 가까운 상위 요소에 대해 오프셋을 적용한다.

 

---

flexbox

flexbox란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다. flexbox를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)을 다룬다는 특성 때문이다.

 

flexbox 만들기

flexbox를 flex 컨테이너라고도 한다(요소들을 포함하기 때문) flex 컨테이너를 만들기 위해서는 컨테이너에 display: flex;를 작용해야 한다.

 

먼저 알아야 할 것

flexbox에는 '주축(main-axis)'과 '교자축(cross-axis)'이 있다.

 

flex-direction

flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.

 

---

flexbox 다루기

flexbox를 다루기 위해 다음과 같은 속성들을 사용할 수 있다.

• 주축 배치 방법 : justifly-content
• 교차축 배치 방법 : align-items 
• 교차축 개별요소 배치 방법 : align-self
• 줄 바꿈 여부 : flex-wrap

---

선택자

선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보

 

선택자의 종류

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

 

특성 선택자 1. 컵셉

특성 선택자(상속 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.

 

특성 선택자 2. 값 확인

기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있다.

 

결합 선택자 1. 컨셉

결합 선택자(결합자)는 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택한다. 

• 자손 결합자
• 형제 결합자

결합 선택자 2. 자손 결합자

두 개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할 수 있다.

 

결합 선택자 3. 형제 결합자

두 개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있다.

 

---

의사클래스

의사클래스(가상클래스)는 선택지에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.

 

앞 페이지에서 보인 예시의 결과는 다음과 같다

 

실습대상

 

---

의사요소

의사요소(pseude-elements)는 선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.

 

앞 페이지에서 보인 예시의 결과는 다음과 같다.

 

실습대상

 

---

상속 

상속(Inheritance)이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다.

 

다 되는 건 아니다

상위요소로부터 상속이 이루어지는 속성이 있는 반면, 그렇지 않은 속성도 있다

 

공용 키워드

모든 CSS 속성에 사용 가능한 키워드가 있다. 때문에 이를 '전역 값'이라 표현하기도 한다.

 

---

z-index

z-index 속성은 요소의 쌓임 순서(stack order)를 정의할 수 있다. 정수 값을 지정하여 쌓임 맥릭(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다.

 

쌓임 맥락 ? 뭐가 쌓여?

동일한 위치에 요소들이 배치되면, 요소들은 z축에서 쌓이게 된다.

 

z-index 값은 정수로

z-index의 기본값은 auto이다. auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다.