[HTML/CSS] 2일차

김민정·2024년 1월 8일

CSS html 개발 기술블로그 백엔드 부트캠프 오즈스쿨 웹개발 초격차캠프 코딩 코린이 프론트엔드

HTML/CSS

목록 보기

3/9

1. CSS 소개

1. CSS란?

캐스케이딩 스타일시트 (Cascading Stylesheet)를 의미한다.

Cascading : 폭포같은, 계속되는, 연속적인
Style : 멋을 내다.
Sheet : (종이나 문서) 한 장

→ 연속적으로 스타일을 정의하는 문서.

CSS는 스타일을 정의하는 문서 형식이다.
태그와 태그가 중첩되어 연속적인 (Cascading) 구조를 지닌 HTML 문서에 스타일을 추가한다.

2. 작동 과정

HTML 문서(코드)에 CSS를 더하여 HTML이라는 웹 콘텐츠들은 스타일을 가지고 웹 브라우저에 올린다.(Load)
웹 브라우저는 코드를 해석해서 결과를 렌더링 한다.
(화면에 보여준다.)

HTML : 웹 페이지의 콘텐츠를 정의하는 언어 ⭐
CSS : HTML 문서에 스타일을 추가하는 역할 🌟

3. CSS의 문법

HTML 코드가 다수의 '태그 (tag)'로 구성되는 것처럼, CSS 코드는 다수의 '스타일 선언문'으로 구성된다.

스타일 선언문의 형태는 다음과 같다.

선택자{
	속성명: 속성값;
}

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

예시)

p {
    color: red;
} /*문단을 빨간색으로 지정하겠다*/

선택자 : p 태그에 스타일을 적용하겠다.
{중괄호} : 이 안에 p 태그에 대한 스타일을 정의하겠다.
속성명 : color로 정의하겠다. 이건 글자색을 의마한다.
속성값 : red로 정의하겠다. 이건 빨간색 글자를 원한다.

4. CSS 주석

/* 주석의 내용 */ → C언어의 문단형 주석과 동일하다.

5. CSS3이란?

현 시점에 HTML5가 웹 개발 표준으로 인정받고 있는 것처럼, 스타일시트 또한 웹 표준 기술이 존재하는데 그것이 바로 CSS3 이다.

2. CSS 문서 사용하기.

1. CSS 문서

CSS 문서는 독립적으로 존재할 수 있지만, HTML 문서와 함께 사용하지 않는 CSS 문서는 단지 하나의 텍스트 문서에 불과할 뿐이다. 즉, 혼자서는 할 수 없는 일이 없는 것이다.

CSS 문서에 정의된 스타일이 웹 브라우저 화면을 통해 보여지도록 하기 위해서는 반드시 HTML 문서 작성이 먼저 이루어져야 한다.

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

1️⃣ 인라인 스타일 : 태그에 직접 기술하기

2️⃣ 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기

3️⃣ 문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기.

2. 인라인 스타일 방법

태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식이다. 따라서 선택자는 필요 없다.
웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.

<p style="color: blue;">
	글자를 파랗게 만들어줘
</p>

※ 사용을 지양하는 편이다.

3. 스타일 태그 방법

HTML 문서에 <style></ style> 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있다. '내부 스타일시트'라 표현하기도 한다.

<style>
	/* style 태그 안에는 CSS 코드를 작성해야 한다. */
	p{ color: red;}
</style>

4. 문서 간의 연결 방법

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

<link href="./style.css" rel="sylesheet">

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

→ <link> 태그는 HTML 문서의 <head></head> 내부에서 사용해야 합니다. ⭐ HTML 문서 정보에 해당하기 때문이다.

5. CSS 문서 특징

인라인 스타일로 작성한 것이 우선적으로 적용된다.
이 후에 스타일 태그 방법이 오더라도 영향이 없다.
인라인 스타일이 아닌 경우, 나중에 쓰여진 선언문이 적용된다.
엔터가 HTML에서 영향을 주지 않는데 CSS에서도 동일하게 영향을 주지 않는다.

[실습]

3. 선택자

1. 선택자 유형

스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정된다. 이때, 요소는 오직 하나만 선택할 수도 있고 여러 개를 동시에 선택할 수도 있다.

아래에는 대표적인 선택자 5가지에 대해 소개하고 그 이외에 다양한 선택자에 대해서는 추가 검색해보는 것을 추천한다.

[CSS 선택자] https://developer.mozilla.org/ko/docs/Web/CSS/CSS_selectors

1) 전체 선택자 (*)_애스터리스크

문서 내 모든 요소를 선택해 스타일을 적용한다.
(입력하게 되면 아래 코드 색이 다 변한다.☆)

2) 태그 선택자 (태그명)

특정 태그로 만들어진 모든 요소를 선택

실습에서는 <li></li> 태그로 되어있는 값이 변했다.

3) 클래스 선택자 (.클래스값)

특정 클래스 값이 지정된 모든 요소를 선택
어느 클래스에 있는 것인지까지 표현하고 싶다면 태그명.클래스값 으로 적어줘도 무방하다.

4) 아이디 선택자 (#아이디값)

특정 아이디 값이 지정된 요소를 선택
클래스 선택자와 동일하게 태그명#아이디값 으로 적는 것이 가능하다.

5) 그룹 선택자 (선택자, 선택자, 선택자 ...)

여러 유형의 선택자를 한꺼번에 선택

2. 선택자간 우선순위

CSS 문서에는 보통은 뒤에 쓰여진 것이 최종적으로 보여지게 된다. 하지만 선택자에서 쓰여진 순서와 관계없이 적용되는 순위가 있다.

아이디 선택자
클래스 선택자
태그 선택자
전체 선택자, 그룹 선택자

[실습]

4. 박스모델

1. 박스 모델 (Box Model)이란?

브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간이다. 따라서 브라우저를 통해 렌더링 되는 웹 요소들 또한 그 안에서 개별적으로 너비와 높이를 가진다.

박스 모델은 너비와 높이를 가지는 개별 요소를 가리켜 '박스'라 표현하고, 박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델이다.

CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용할 수 있으며, CSS는 영역 별로 크기를 따로 설정할 수 있도록 다양한 속성들을 제공한다.

2. 박스 모델 세부 영역들

1. 콘텐츠 영역

: 요소 내에 포함된 콘텐츠를 표시하는 영역
º 관련 속성 : width, height

2. 안쪽 여백

: 테두리 안에서 콘텐츠 주변을 감싸는 여백
º 관련 속성 : padding

3. 경계선 (테두리)

: 콘텐츠와 안쪽 여백을 둘러싸는 테두리
º 관련 속성 : border

4. 바깥쪽 여백

: 테두리 바깥에서 요소를 감싸는 여백
º 관련 속성 : margin

개발자 도구(F12)를 이용하면 박스 모델도 확인할 수 있다.

앞으로 각 이 영역들에 대해 다루는 법을 배울 것이다.

3. 콘텐츠 영역의 크기 변경하기

콘텐츠 영역의 너비를 결정할 때는 width 속성을,
높이를 결정할 때는 height 속성을 사용한다.
두 속성은 모두 크기를 결정하기 위해 사용하는 속성이므로, 속성값을 결정할 때는 수치와 단위를 함께 입력해주어야 한다.

주로 픽셀(px)이나 % 단위를 많이 사용하는데, 다른 단위도 많이 있다.

픽셀 (px) : 화소
% : 내가 속한 영역을 기준으로 백분율을 계산한다.
ex) 기본 콘텐츠 영역 크기(body)가 707 이라면 이걸 기준으로 몇 %인지 계산. → 50% : 707 X 0.5 = 353.5
그리고 내가 속한 영역에 관련 값이 있어야 적용 가능하다.

[실습]

5. 테두리 스타일

1. 테두리 스타일

테두리는 화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있게 해주는 유용한 영역이다.
테두리 스타일을 정의할 때는 단축 속성인 border를 사용하거나 border의 하위 속성을 개별적으로 사용하는 방법을 사용합니다.

º 단축 속성 : 여러개의 세부 속성을 한번에 정의할 수 있는 속성

border-width : 테두리의 두께를 지정
border-style : 점선(dotted, dashed), 실선(solid), 겹선(double) 등으로 테두리의 모양을 지정
border-color : 테두기의 색상을 지정 (기본 : 검정)

→ border : 테두리의 두께, 모양, 색상 등을 한번에 지정
(공백으로 속성값을 서로 구분한다.)

박스 모델의 테두리에는 네 개의 모서리가 있는데, CSS의 border-radius 속성을 사용하면 모서리를 둥글게 만들 수 있다.
(길이를 정해주면 그 길이에 해당하는 반경만큼 둥글어진다.)
- 각 네개의 모서리를 각각 지정할 수도 있는데 각 네 모서리의 값을 공백을 두고 입력해주면 된다.
- 적용 순서 : 왼쪽 위 - 오른쪽 위 - 오른쪽 아래 - 왼쪽 아래 (시계방향)

[실습]

6. 여백 다루기

1. 여백 구조

여백의 안쪽(padding), 바깥쪽(margin) 여부는 테두리(border)를 기준으로 정해진다.

박스 모델의 여백에는 네 개의 면이 존재하는데, 속성값 사용 개수에 따라 네 면의 여백 크기를 달리 정할 수 있다.

속성값 1개)

여백의 모든 면에 동일한 값을 지정

margin: 10px;

속성값 2개)

위아래 여백과 좌우 여백의 값을 따로 지정

margin: 10px 20px;

속성값 3개)

위쪽 여백, 좌우 여백, 아래쪽 여백 순서로 값을 지정

margin: 10px 20px 15px;

속성값 4개)

위, 우측, 아래, 좌측 순서대로 각각을 따로 지정 (시계방향)

margin: 10px 20px 30px 40px;

margin으로 예시를 넣어두었지만 padding에도 동일하게 적용된다.

이렇게 값만 넣어 각 부분을 지정하는 방법이 있고
위치에 대한 접미사 (top, right, botton, left)를 입력하여 지정하는 방법이 있다.

2. 추가 속성

width나 height를 사용하면 콘텐츠 영역의 크기를 결정할 수 있다.
여기에 padding 속성을 추가 정의하면 여백이 생기면서 요소가 기존보다 더 커지게 되는데, 이를 원치 않을 경우 box-sizing 을 사용하면 된다.

이는 content-box와 border-box에 각자 적용할 수 있는데 content-box에 기본적으로 적용된다.
(왜냐면 border-box로 적용한 후 padding의 여백이 바뀌면 content-box 크기가 줄어들기 때문이다.)

[실습]

7. 배경 다루기

1. 박스에 배경 추가하기

콘텐츠와 어울리는 적절한 배경을 추가함으로써 콘텐츠를 더욱 돋보이게 만들 수 있다.

background
박스 모델에 배경으로 추가된 색상이나 이미지 등은 박스 모델의 바깥쪽 여백을 제외한 나머지 3가지 영역 안에서 요소의 콘텐츠를 뒷받침한다.

2. 하위 속성들

background-color
: 요소의 배경 색상 지정 (색상 이름 사용)
background-clip
: 요소 내 배경의 적용 범위
(border-box(기본), padding-box, content-box 사용 가능)
background-image
: 요소의 배경 이미지 지정 (이미지 url 사용)
- url(이미지 url)
- 배경 이미지 크기 조정 필요. (background-size)
background-origin
: 요쇼 내 배경의 시작 위치 (별도의 키워드 사용)
- 기본이 padding-box
background-size
: 배경 이미지의 크기 (수치와 단위 사용)
- 실제 박스보다 이미지 크기가 작으면 기본적으로 바둑판 패턴의 배열로 보여준다.
background-repeat
: 배경 이미지의 반복 패턴 (별도의 키워드 사용)
- 기본적으로 바둑판 배열
- no-repeat : 반복 X
- repeat-x : 가로로만 반복
- repeat-y : 세로로만 반복
background-position
: 배경 이미지의 위치 (수치와 단위 사용)
- center, top, bottom, right, left
- 2가지 섞어서 사용도 가능. left center, botton center
- 디테일하게 조정하고 싶은 경우 (x, y) 순으로 치수 적어주면 된다.

[실습]

8. 색깔을 지정하는 다양한 방법

1. `color`

글자 색을 지정할 때는 color 속성을 사용하며, 색 지정 방법은 글자 색, 테두리 색, 배경 색 모두에 대해 동일하다.

색 지정하는 방법은 지금까지 색상을 나타내는 영단어 '키워드'를 사용해왔다.

그 외 다른 방법은 아래와 같다.

rgb 함수 사용
: rgb 함수에 수치를 입력해 색상을 결정한다.
hsl 함수 사용
: hsl 함수에 수치를 입력해 색상을 결정한다.
16진수값 사용
: 빨강, 초록, 파랑의 비율을 16진수로 표현해 색상을 결정한다.

⭐ 작성할 때 각 값 별 단위를 꼭 적어줘야한다!! ⭐

색상을 나타낼 때 공통점
: 색을 조합해서 나타낸다.

2. rgb 함수

rgb란 빛의 3원색인 red, green, blue의 줄임말이다.
CSS는 빨강, 초록, 파랑 각 색상의 비율을 지정해 색상을 결정할 수 있는 rgb 함수와 투명도를 추가 지정할 수 있는 rgba 함수를 각각 지원하는데, 두 함수의 사용법은 다음과 같다.

rgb(값1, 값2, 값3) → r g b 순으로 값 입력.

rgba (값1, 값2, 값3, 값4) → r g b 투명도 순으로 값 입력.

r, g, b는 0~100 사이 숫자 (% 단위 필수)
투명도는 0~1 사이 실수

3. hsl 함수

hsl 함수는 색조(hue)와 채도(saturation), 그리고 조도(lightness)를 각각 지정해 색상을 결정하는 함수이다.
투명도를 추가로 지정하고 할 때는 rgb함수와 동일하게 a를 추가하여 hsla 함수를 사용한다.

hsl(값1, 값2, 값3) → 색조, 채도, 조도 순으로 값 입력.

hsla(값1, 값2, 값3, 값4) → 색조, 채도, 조도, 투명도 순으로 값 입력.

º 색조

: 각도를 입력해 색상을 선택하는 항목.
0 ~ 360 사이 숫자 (= 색깔 방향 의미 숫자) (숫자만 기재)
0 (= 360)은 빨간색, 120은 녹색, 240은 파란색

º 채도

: 컬러 정도
0 ~ 100 % (% 단위 필수)
0%는 음영, 100%는 컬러 최대치

º 조도

: 밝기
0 ~ 100 % (% 단위 필수)
0%는 검은색, 50 %는 보통, 100%는 흰색

4. 16진수값

색상을 지정할 때는 해시(#) 기호로 시작하는 여섯 자리 16진수 값을 입력하는 방법을 사용하기도 한다.
이때 입력하는 16진수 값을 'RGB 색상 코드'라 부르기도 한다. (#RRGGBB / #RRGGBBAA)

16진수
: 0 1 2 3 4 5 6 7 8 9 A B C D E F
ex) FF = 255
000000 = 검정 / FF0000 = 빨간색 / 00FF00 = 초록색 / 0000FF = 파란색

5. `opacity`

함수에 a를 추가해서 투명도를 나타낼 수 있지만, 따로 속성 opacity를 추가하여 투명도를 적용할 수 있다.

[실습]

9. 텍스트 꾸미기

1. 글꼴 바꾸기

font-family 속성은 요소에 포함된 텍스트의 글꼴을 정의할 때 사용하는 속성이다.

p {
	font-family: Arial, Helvetica, sans-serif;
}

font-family 속성에는 한 개 이상의 글꼴을 지정할 수 있다. 입력한 글꼴 뒤에 쉼표를 입력한 후에 새로운 글꼴을 이어서 입력하는 방식으로 속성값을 지정하는데, 이 경우 가장 먼저 쓰여진 글꼴부터 우선적으로 요소에 적용된다.
만약, Arial이 지원되지 않는 pc에서는 Arial 다음인 Helvetica 글꼴이 적용되어 나타나게 된다.

+) monospace : 맥(MAC) 기본 글꼴. / selif : 윈도우 기본 글꼴.

2. 웹 폰트 사용하기

웹 폰트란, 컴퓨터 시스템에 해당 폰트가 설치되어 있지 않은 경우에도 웹 서버로부터 이를 제공받아 사용할 수 있는 '웹 전용 글꼴'을 뜻한다.
앞서 font-family를 이용한 글꼴 적용시 잘못 입력된 글꼴이거나 시스템에 설치되어 있지 않은 글꼴인 경우에는 요소에 적용되지 않는데, 웹 폰트를 이용하면 그러한 문제가 발생하는 것을 방지할 수 있다.

3. 텍스트 꾸미기

텍스트에도 크기, 색상, 정렬 방식 등의 다양한 속성이 존재한다.

font-size
: 글자 크기 지정 (수치와 단위 입력)
- 기본 16px
- h1 : 32px
font-weight
: 글자 두께 지정 (별도의 키워드 입력)
- 100 ~ 900 (얇은 ~ 두꺼운)
line-height
: 행 높이 지정 (수치와 단위 입력)
- 문장별 간격을 조절한다.
- 폰트 (글꼴)에 따라 그 크기가 달라질 수 있다.
text-aligh
: 텍스트 정렬 방식 지정 (별도의 키워드 입력)
- jutify : 양끝 정렬
text-decoration
: 텍스트 줄 긋기 (별도의 키워드 입력)

4. 단위

크기를 지정할 때는 수치와 함께 단위를 지정하곤 한다.
이는 글자 크기에 대해서도 마찬가지인데 텍스트에서 사용하는 새로운 단위 2가지가 있다.

rem : 루트 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위
em : 부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위

*루트 요소 : 문서의 시작부분을 뜻하는 것으로 HTML 태그를 의미한다.

*부모 요소(태그) : 콘텐츠 입장에서 자기 자신을 감싸고 있는 콘텐츠 태그

[실습]

10. Mini Project 프로필 페이지에 스타일시트 더하기

[CSS 강의 1일차 후기]

HTML 강의를 하루만에 진도를 다 나가고
2일차에 CSS 강의를 나가는지 몰랐다...

주말에도 HTML 강의 과제를 해서 마무리 지었고

CSS가 다른 Python이나 C언어처럼 아예 동 떨어져 있는건 아니어서 HTML 복습도 살짝씩 되고 재밌었다.

무엇보다 HTML은 배치만 하는 느낌이라면 CSS는 이 배치한걸 내 맘대로 꾸미는 느낌이라 더 재밌었다. ㅎㅎㅎ

그리고 앞으로 3일은 더 CSS에 관련해서 배울 예정이라 더 재밌을거 같다 ㅎㅎ

$(하지만, 강의 양과 과제량은 그렇지 않지,,,🥲)$

확실히 코딩의 언어들은 컴퓨터에 있는 여러 프로그램들을 처음 사용하는 것처럼 처음에 이 언어가 어떤 구조로 굴러가는지만 배운다면 나머지 부가적인 기능은 오직 검색으로만 또는 다른 사람이 만든 코드를 보고 배움으로 나도 기술을 습득하는 느낌이다.
~~(처음 AUTOCAD 배웠을 때의 느낌이랄까,,,)~~

이제 이 모든걸 다 섞어서 응용할 수 있는 걸 배울텐데 앞으로 더 기대가 된다.

그리고 Python과 C언어는 혼자서도 틈틈히 알고리즘 문제를 풀던지 관련 사이트, 책을 읽으면서 잊어버리지 않도록 노력해야겠다.
(javascript, django 배울때도 계속)

[참고 자료]

[입문자를 위한 CSS3 (저자)강윤호] https://wikidocs.net/book/9136
[google browse fonts]
https://fonts.google.com/?subset=korean¬o.script=Kore
[16진수 색상표]
http://www.hipenpal.com/tool/html-color-charts-rgb-color-table-in-korean.php
[오즈스쿨 스타트업 웹 개발 초격차캠프 백엔드 HTML&CSS 강의]

김민정

백엔드 코린이😁

이전 포스트

[HTML/CSS] 과제 1일차 (HTML vs HTML5 차이)

다음 포스트

[HTML/CSS] 2일차

HTML/CSS

1. CSS 소개

1. CSS란?

2. 작동 과정

3. CSS의 문법

4. CSS 주석

5. CSS3이란?

2. CSS 문서 사용하기.

1. CSS 문서

2. 인라인 스타일 방법

3. 스타일 태그 방법

4. 문서 간의 연결 방법

5. CSS 문서 특징

[실습]

3. 선택자

1. 선택자 유형

1) 전체 선택자 (*)_애스터리스크

2) 태그 선택자 (태그명)

3) 클래스 선택자 (.클래스값)

4) 아이디 선택자 (#아이디값)

5) 그룹 선택자 (선택자, 선택자, 선택자 ...)

2. 선택자간 우선순위

[실습]

4. 박스모델

1. 박스 모델 (Box Model)이란?

2. 박스 모델 세부 영역들

1. 콘텐츠 영역

2. 안쪽 여백

3. 경계선 (테두리)

4. 바깥쪽 여백

3. 콘텐츠 영역의 크기 변경하기

[실습]

5. 테두리 스타일

1. 테두리 스타일

º 단축 속성 : 여러개의 세부 속성을 한번에 정의할 수 있는 속성

[실습]

6. 여백 다루기

1. 여백 구조

속성값 1개)

속성값 2개)

속성값 3개)

속성값 4개)

2. 추가 속성

[실습]

7. 배경 다루기

1. 박스에 배경 추가하기

2. 하위 속성들

[실습]

8. 색깔을 지정하는 다양한 방법

1. color

2. rgb 함수

3. hsl 함수

º 색조

º 채도

º 조도

4. 16진수값

5. opacity

[실습]

9. 텍스트 꾸미기

1. 글꼴 바꾸기

+) monospace : 맥(MAC) 기본 글꼴. / selif : 윈도우 기본 글꼴.

2. 웹 폰트 사용하기

3. 텍스트 꾸미기

4. 단위

*루트 요소 : 문서의 시작부분을 뜻하는 것으로 HTML 태그를 의미한다.

*부모 요소(태그) : 콘텐츠 입장에서 자기 자신을 감싸고 있는 콘텐츠 태그

[실습]

10. Mini Project 프로필 페이지에 스타일시트 더하기

[CSS 강의 1일차 후기]

(하지만,강의양과과제량은그렇지않지,,,🥲)(하지만, 강의 양과 과제량은 그렇지 않지,,,🥲)(하지만,강의양과과제량은그렇지않지,,,🥲)

[참고 자료]

[HTML/CSS] 과제 1일차 (HTML vs HTML5 차이)

[HTML/CSS] 과제 2일차 (XML과 XHTML의 다른 점?)

0개의 댓글

1. `color`

5. `opacity`

$(하지만, 강의 양과 과제량은 그렇지 않지,,,🥲)$