[2024-2 웹기초 스터디] 이민형 #2주차

Css 누구니?

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어로

HTML로 작성된 구조에 색상, 레이아웃, 폰트, 간격 등의 시각적 요소를 추가하는 데 사용된다.

CSS를 사용하면 웹 페이지의 디자인과 레이아웃을 효율적으로 관리할 수 있다.

주요 기능

HTML 요소에 스타일을 적용 (색상, 크기, 폰트 등)
웹 페이지의 레이아웃 조정 (위치, 정렬, 크기, 간격 등)
반응형 디자인 구현 (화면 크기에 맞춰 스타일 변경)

CSS 기본 문법은 선택자(selector), 속성(property), 값(value)으로 구성된다.

CSS는 HTML 요소에 스타일을 적용하기 위한 규칙을 정의한다.

기본 구조

선택자 {
    속성: 값;
}

선택자: HTML 요소를 지정
- 예: p, h1, .class, #id
속성: 스타일을 설정할 항목
- 예: color, font-size, background-color
값: 속성에 대한 설정 값
- 예: red, 16px, center, tomato

HTML에 CSS를 추가하는 방법

인라인 스타일: HTML 태그에 직접 스타일을 적용.

<p style="color: red; font-size: 20px;">이 문장은 빨간색입니다.</p>

인 라인 말 그대로

스타일 태그 : <style> 태그를 사용해 HTML 문서 안에 CSS를 작성.

    <style>
        body {
            background-color: lightgray;
        }
        p {
            color: blue;
            font-size: 18px;
        }
    </style>

스타일 태그 시작과 끝 그 안에

외부 스타일 시트: CSS를 별도의 파일로 작성하고, HTML에서 link 태그로 연결.

<link rel="stylesheet" href="styles.css">  <!-- 외부 CSS 파일 연결 -->

href: 연결하고자 하는 외부 소스의 url

rel: HTML문서와 외부 소스의 연관 관계

일반적으로 외부 스타일 시트를 사용하는 것이 가장 효율적이고 관리하기 용이

Selector

전체 선택자 (Universal Selector)

* {
    color: blue;
}

모든 요소들의 색을 파란색

그룹 선택자

h1, h2, h3 {
    color: red;  /* <h1>, <h2>, <h3> 요소에 적용 */
}

아이디 선택자

#header {
    color: blue;  /* id가 'header'인 요소에 적용 */
}

클래스 선택자

.button {
    color: blue;  /* class가 'button'인 모든 요소에 적용 */
}

태그 선택자

p {
    color: red;  /* 모든 <p> 빨간색* /
}

선택자가 겹친다면

기본적으로 나중에 작성된 스타일이 적용된다.

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

선택자 우선순위

아이디 선택자 클래스 선택자 태그 선택자

글꼴 관련 속성

font-family : 글꼴 종류

font-size : 글꼴 크기

font-style : 이탤릭체로 표시할지 지정

font-weight: 글꼴 굵기

font-variant: 소문자를 작은 대문자로 바꿈

단위

px - 픽셀 단위
rem - 루트 요소의 글꼴크기 (최상위 요소의 몇 배 크기로 적용할건지 선택 ex) 2rem = 2배)
em - 요소의 글꼴 크기 (현재 설정되어있는 자기 자신 요소의 몇 배 적용할건지 선택)
vw : viewport 너비의 1%
vh : viewport 높이의 1%

글꼴 색상 지정

색상 키워드 ex) blue, red, yellow

RGB 표기법 rgb()

16진수 표기법 ex) #ff0000 #ff00ff

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

블록 레벨 요소는 자기가 속한 영역의 너비를 모두 차지

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

display 속성의 주요 값

1. block

블록 요소로 표시

div { display: block; }

2. inline

인라인 요소로 표시

span { display: inline; }

3. inline-block

인라인처럼 같은 줄에 표시되지만, 블록 요소처럼 너비와 높이를 설정

div { display: inline-block; width: 100px; height: 50px; background-color: lightblue; }

모든 HTML은 웹사이트에서 일정 공간을 차지하는데

이를 CSS에서는 BOXMODEL이라고 부름

margin
content
border
padding

Float & Clear

float 속성은 요소가 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 함

float 속성 값

none - 기본값으로 요소를 띄우지 않음
left - 왼쪽에 띄움
right - 오른쪽에 띄움

clear는 float 요소의 이래로 내려가게 함

clear 속성 값

clear: none; - 기본값
clear: left; - 왼쪽을 취소
clear: right; - 오른쪽을 취소
clear: both; - 왼쪽 오른쪽 둘다 취소

Position

문서에서 요소를 배치하는 방법 단어 뜻 그대로

오프셋 값을 정의해서 맘대로 조정

position 속성

static(기본 값) -
relative -요소를 일반적인 흐름에 따라 배치
absolute - 일반적인 문서 흐름에서 제거하고 가장 가까운 지정요소에 대해 오프셋 적용
fixed - 지정한 위치에 고정 스크롤을 움직여도 고정
sticky - 스크롤되는 상위 요소를 기준으로 오프셋을 적용

Css 누구니?

CSS(Cascading Style Sheets)는 웹 페이지의 스타일을 정의하는 언어로

HTML로 작성된 구조에 색상, 레이아웃, 폰트, 간격 등의 시각적 요소를 추가하는 데 사용된다.

CSS를 사용하면 웹 페이지의 디자인과 레이아웃을 효율적으로 관리할 수 있다.

주요 기능

HTML 요소에 스타일을 적용 (색상, 크기, 폰트 등)

웹 페이지의 레이아웃 조정 (위치, 정렬, 크기, 간격 등)

반응형 디자인 구현 (화면 크기에 맞춰 스타일 변경)

CSS 기본 문법은 선택자(selector), 속성(property), 값(value)으로 구성된다.

CSS는 HTML 요소에 스타일을 적용하기 위한 규칙을 정의한다.

기본 구조

선택자 {

속성: 값;

}

선택자: HTML 요소를 지정

예: p, h1, .class, #id

속성: 스타일을 설정할 항목

예: color, font-size, background-color

값: 속성에 대한 설정 값

예: red, 16px, center, tomato

HTML에 CSS를 추가하는 방법

인라인 스타일: HTML 태그에 직접 스타일을 적용.

<p style="color: red; font-size: 20px;">이 문장은 빨간색입니다.</p>

인 라인 말 그대로

스타일 태그 : <style> 태그를 사용해 HTML 문서 안에 CSS를 작성.

<style>

body {

background-color: lightgray;

}

p {

color: blue;

font-size: 18px;

}

</style>

스타일 태그 시작과 끝 그 안에

외부 스타일 시트: CSS를 별도의 파일로 작성하고, HTML에서 link 태그로 연결.

href: 연결하고자 하는 외부 소스의 url

rel: HTML문서와 외부 소스의 연관 관계

일반적으로 외부 스타일 시트를 사용하는 것이 가장 효율적이고 관리하기 용이

Selector

전체 선택자 (Universal Selector)

* {

color: blue;

}

모든 요소들의 색을 파란색

그룹 선택자

h1, h2, h3 {

color: red; /* <h1>, <h2>, <h3> 요소에 적용 */

}

아이디 선택자

#header {

color: blue; /* id가 'header'인 요소에 적용 */

}

클래스 선택자

.button {

color: blue; /* class가 'button'인 모든 요소에 적용 */

}

태그 선택자

p {

color: red; /* 모든 <p> 빨간색* /

}

선택자가 겹친다면

기본적으로 나중에 작성된 스타일이 적용된다.

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

선택자 우선순위

아이디 선택자 클래스 선택자 태그 선택자

글꼴 관련 속성

font-family : 글꼴 종류

font-size : 글꼴 크기

font-style : 이탤릭체로 표시할지 지정

font-weight: 글꼴 굵기

font-variant: 소문자를 작은 대문자로 바꿈

단위

px - 픽셀 단위

rem - 루트 요소의 글꼴크기 (최상위 요소의 몇 배 크기로 적용할건지 선택 ex) 2rem = 2배)

em - 요소의 글꼴 크기 (현재 설정되어있는 자기 자신 요소의 몇 배 적용할건지 선택)

vw : viewport 너비의 1%

vh : viewport 높이의 1%

글꼴 색상 지정

색상 키워드 ex) blue, red, yellow

RGB 표기법 rgb()

16진수 표기법 ex) #ff0000 #ff00ff

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

블록 레벨 요소는 자기가 속한 영역의 너비를 모두 차지

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

display 속성의 주요 값

1. block

블록 요소로 표시

div { display: block; }

2. inline

인라인 요소로 표시

span { display: inline; }

3. inline-block

인라인처럼 같은 줄에 표시되지만, 블록 요소처럼 너비와 높이를 설정

div { display: inline-block; width: 100px; height: 50px; background-color: lightblue; }

모든 HTML은 웹사이트에서 일정 공간을 차지하는데

이를 CSS에서는 BOXMODEL이라고 부름

margin

content

border

padding

Float & Clear

float 속성은 요소가 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 함

float 속성 값

none - 기본값으로 요소를 띄우지 않음

left - 왼쪽에 띄움

right - 오른쪽에 띄움

clear는 float 요소의 이래로 내려가게 함

clear 속성 값

clear: none; - 기본값

clear: left; - 왼쪽을 취소

clear: right; - 오른쪽을 취소

clear: both; - 왼쪽 오른쪽 둘다 취소

Position

문서에서 요소를 배치하는 방법 단어 뜻 그대로

오프셋 값을 정의해서 맘대로 조정

position 속성

static(기본 값) -

relative -요소를 일반적인 흐름에 따라 배치

absolute - 일반적인 문서 흐름에서 제거하고 가장 가까운 지정요소에 대해 오프셋 적용

fixed - 지정한 위치에 고정 스크롤을 움직여도 고정

sticky - 스크롤되는 상위 요소를 기준으로 오프셋을 적용

FlexBox

flexbox는 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한

1차원 레이아웃 모델임

행 또는 열이 주축이 되어서 요소의 정렬 방향을 결정함

flex-direction 속성은 요소를 배치할 때 사용할 주축 및 방향을 지정

flex 디렉션 속성

row 주축은 행 콘텐츠의 방향과 동일row-reversecolumncolumn-reverse

flexbox 다루기

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

주축 배치 방법 : justifly-content

교차축 배치 방법 : align-items

교차축 개별요소 배치 방법 : align-self

줄 바꿈 여부 : flex-wrap

선택자 시즌 2

[class] {
    color: green;  /* class 속성인 요소에 초록색 텍스트 적용 */
}

[class="item"]item인 경우

[class*="item"]포함하고 있는 경우

[class^="item"]으로 시작할떄

[class＄="item"]으로 끝날때

자손 결합자

div p { color: tomato; } div 요소 안에 위치하는 모든 p요소 선택

div > p { color: tomato; } div요소의 바로 아래 위치하는 p요소 선택

형제 결합자

h1 ~ p{ color: tomato; } h1 요소의 뒤에 오는 형제중 모든 p

h1 + p{ color: tomato; } h1요소의 바로 뒤에 오는 형제 p

의사클래스

의사클래스는 선택지에 추가하는 키워드로

요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.

ex) h1 요소에 마우스가 올라오면 글자를 tomato색으로 하겠다.

hover-마우스 포인터가 요소에

active-요소가 활성화

focus-요소가 포커스를 받아

disabled-요소가 비활성화

nth-child()-형제 사이에서의 순서에 따라

의사요소

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

after-요소의 앞에 의사요소를 생성 및 추가

before-요소의 뒤에 의사요소를 생성 및 추가

first-line-블록 레벨 요소의 첫 번째 선에 스타일을 적용

marker-목록 기호의 스타일을 적용

placeholder-입력요소의 플레이스홀더 스타일을 적용

상속

하위요소가 상위요소의 스타일 속성값을 물려받는 것을 상속이라고 한다.

상속이 이루어지는 요소가 있고 아닌 요소가 있는데,

공용키워드

모든 css 속성에 사용가능한 키워드가있음 그게 바로 공용키워드

전역값이라고도 함

z-index

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

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

ㅋ-index의 값은 auto임. auto는 새로운 쌓임 맥락이 정의 되지 않은 자연스러운 상태

저작자표시 동일조건

'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글

[2024-2 웹기초 스터디] 김지수 #3주차 (0)	2024.11.14
[2024 - 2 웹기초 스터디] 김재승 #2주차 (0)	2024.11.11
[2024-2 웹기초 스터디 #2주차] 김민재 - CSS (0)	2024.11.07
[2024-2 웹기초 스터디] 김지수 #2주차 (1)	2024.11.06
[2024-2 웹기초 스터디] 이민형 #1주차 (0)	2024.11.01

KMU_SW_CLUB

[2024-2 웹기초 스터디] 이민형 #2주차

Css 누구니?

기본 구조

HTML에 CSS를 추가하는 방법

Selector

전체 선택자 (Universal Selector)

그룹 선택자

클래스 선택자

태그 선택자

선택자가 겹친다면

글꼴 관련 속성

단위

글꼴 색상 지정

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

display 속성의 주요 값

1. block

2. inline

3. inline-block

Float & Clear

Position

FlexBox

선택자 시즌 2

의사클래스

의사요소

상속

공용키워드

z-index

'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글

티스토리툴바

[2024-2 웹기초 스터디] 이민형 #2주차

Css 누구니?

기본 구조

HTML에 CSS를 추가하는 방법

Selector

전체 선택자 (Universal Selector)

그룹 선택자

클래스 선택자

태그 선택자

선택자가 겹친다면

글꼴 관련 속성

단위

글꼴 색상 지정

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

display 속성의 주요 값

1. block

2. inline

3. inline-block

Float & Clear

Position

FlexBox

선택자 시즌 2

의사클래스

의사요소

상속

공용키워드

z-index

'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글

'WINK-(Web & App)/HTML & CSS & JS 스터디' Related Articles

티스토리툴바