[CSS] 기초(03/23)

HTML, CSS

by front-hyun 2023. 3. 25. 02:49

CSS의 특성: 폭포수, 상속, 우선순위

CSS는 Cascading Style Sheets의 약어입니다. Cascade란 폭포란 뜻인데 이것에서 유추가 가능합니다.
CSS는 폭포수가 아래로 떨어질 때처럼 CSS에서 스타일이 적용될 때는 우선순위를 가지고 적용이 되기 때문에 이 모습이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었습니다.
같은 태그에 대한 규칙이 있는 경우 -> 마지막으로 작성된 규칙이 적용됩니다.

Inheritance(상속)이란?

부모 요소의 css 규칙을 자식 요소가 상속하여 적용하는 것입니다.
자식 요소가 css 규칙을 가지고 있다면 이를 우선하여 적용합니다.

Specificity란?

css 규칙이 서로 충돌할 때 어떤 것을 적용할지 결정합니다.
표에서 위로 갈수록 우선시되는 것입니다.

HTML 요소의 style 속성	1000
id로 선택된 요소	100
class로 선택된 요소	10
태그의 이름으로 선택된 요소	1

HTML 요소의 style 속성 vs 태그의 이름으로 선택된 요소

class로 선택된 요소 vs 태그의 이름으로 선택된 요소

CSS Box란? Inline Box , Block Box, Inline-block Box

CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.

(1) Inline Box

먼저 Inline Box에 대해 알아보겠습니다.
Inline Box는 한줄에 표시됩니다.<a>, <img>, <span>이 있습니다.태그로 감싸진 내용만큼만 영역을 차지합니다.
width와 height로 요소의 크기를 조절할 수 없습니다.inline은 좌우 margin, padding만 적용 가능합니다.

(2) Block Box

다음은 Block Box에 대해 알아보겠습니다.
display:block;개별 요소마다 줄을 바꿉니다.<h1>, <p>, <div> 태그가 있습니다.
width와 height로 요소의 크기를 조절합니다.내용과 별개로 자신의 영역을 가집니다.

Block은 가지지만 lnline은 가지지 못한 것: width, height, margin, padding

-> line도 margin과 padding이 가능하지만 좌우에 대해서만 적용이 가능합니다.

(3) Inline-Block Box

display: inline-block;
inline과 block의 특징을 모두 포함합니다.
줄을 바꾸지 않습니다.
block처럼 width와 height를 가집니다.
상하 margin, padding이 레이아웃에 유효합니다.

inline과 다르게 상하좌우 모두 margin과 padding 속성이 적용된 것을 볼 수 있습니다.

Box Model이란?

Block Box가 가지는 기본 모델입니다.

Margin: 테두리로부터 다른 요소까지의 거리

padding: 50px 실행 시에 테두리와 내용 간의 거리가 멀어지는 것을 볼 수 있습니다.

div{margin:20px;}	상하좌우에 모두 같은 값 적용합니다.
div{margin:20px 30px;}	상하 20px, 좌우 30px 값 적용합니다.
div{margin:20px 10px 20px 10px;}	상 우 하 좌 순서!( 위쪽부터 시계방향으로 이동합니다.) div{margin-top:20px; margin-right:10px; margin-bottom:20px; margin-left:10px;} 과 동일합니다.

Border: 내용을 둘러싼 테두리

6px solid darkmagenta 하나의 속성에 두께, 유형, 색상이 적용 가능합니다.

Padding: 내용으로부터 테두리까지의 거리

div{padding:20px;}	상하좌우에 모두 같은 값 적용합니다.
div{padding:20px 30px;}	상하 20px, 좌우 30px 값 적용합니다.
div{padding:20px 10px 20px 10px;}	상 우 하 좌 순서!( 위쪽부터 시계방향으로 이동합니다.)

Box-sizing: 박스에 적용된 사이즈의 기준 정하기

div{box-sizing:content-box;} -> 요소 사이즈에 패딩과 테두리 포함 x

div{box-sizing:border-box;} -> 요소 사이즈에 패딩과 테두리 포함 o

css 단위: 스크린 환경에 적합한 단위

px -> 스크린을 구성하는 작은 점

% -> 부모 요소를 기준으로 크기 설정

부모 요소의 크기 100px이므로 자식 요소는 100px*50%를 한 50px가 됩니다.

em/rem -> 부모 요소의 폰트 크기/루트 요소의 폰트 크기(root em)

-> 상위 요소의 크기 값에 em값을 곱하기

요소 간 복잡한 위계 관계가 있으므로 상위 요소를 일일이 정하는 것은 어렵습니다.

-> 최상위 요소인 <html>의 폰트 사이즈를 기준으로 크기를 설정해야 합니다.

CSS의 태그

<img> 태그 -> 이미지 넣을 때

<alt> 태그 -> 이미지 소스가 존재하지 않을 때 대체하는 텍스트

overflow

주어진 공간을 넘어가는 컨텐트를 어떻게 보여줄지를 제어합니다.

폰트 꾸미기: 텍스트 속성

테두리 꾸미기

width, height 값을 설정하지 않으면 line 형태로 출력됩니다.

요소 정렬하기

대표적인 중앙정렬 속성

margin: 0 auto; -> 위아래 여백은 없고 가로 중앙에 배치한다.

text-align: center; -> 부모 요소가 block이고 정렬하려는 자식 요소가 inline일 때

위치 속성으로 HTML 요소 배치하기: position, float, clear

1. position

1. 기준을 잡는다. position

2. 이동시킨다. top | bottom | left | right

top | bottom | left | right

top	요소의 position 기준에 맞는 위쪽에서의 거리(위치)를 설정
bottom	요소의 position 기준에 맞는 아래쪽에서의 거리(위치)를 설정
left	요소의 position 기준에 맞는 왼쪽에서의 거리(위치)를 설정
right	요소의 position 기준에 맞는 오른쪽에서의 거리(위치)를 설정

position 속성

static -> 기준이 없습니다. (배치 불가능/기본값)

relative -> 요소 자기 자신을 기준으로 배치합니다. 기준점은 (원래 위치의) 요소의 왼쪽 위 모서리입니다.

초록색 박스의 위치는 그대로 있으며, 파란색 박스의 위치가 자기 자신의 왼쪽 모서리를 기준으로  왼쪽과 아래쪽으로 각각 100px씩 이동하였습니다.

absolute -> 부모(조상)요소를 기준으로 배치합니다. 기준점이 브라우저의 왼쪽 위 모서리입니다.

파란색 박스가 브라우저의 왼쪽 위 모서리를 기준으로 왼쪽과 아래쪽으로 100px씩 이동하였습니다. 파란색의 자리는 초록색 박스가 채웠습니다.

fixed -> 뷰포트 기준으로 배치합니다. 지정된 위치에 고정합니다.

위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않습니다.

sticky -> 스크롤 영역 기준으로 배치합니다. 브라우저 화면을 스크롤링할 때 따라붙습니다.

2. float

자식이 부모로부터 떠오릅니다. => margin을 없애버립니다.

float 속성을 갖는 요소는 html 문서에서 공간은 차지화되 다른 요소의 배치에 영향을 안 주는 요소가 됩니다.

float 속성을 사용하면서 가장 주의해야 할 점은 float 속성을 통한 정렬 후 항상 float에 대한 해제(clear)가 이루어져야 정상적으로 container에 item들이 정렬된 상태로 포함되어진다.

none	float 속성 x
left	대상 요소를 공중에 띄워 왼쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치합니다.
right	대상 요소를 공중에 띄워 오른쪽에 배치하면서 다음에 오는 요소를 주변에 자연스럽게 배치합니다.
clear	float 속성을 해제할 때 사용하는 속성입니다.

예시 1) float:left or right

div안의 복수개의 div는 수직정렬입니다. 이것을 수평정렬로 바꿉니다. 그리고 ul li태그로 생성된 수직 정렬 목록을 수평목록으로 바꿉니다.

위의 코드 출력 결과 메뉴1, 메뉴2는 float: left; 적용되었고, 메뉴2는 float:right; 적용되었습니다.

메뉴1과 메뉴3에 clear:left;를 한 결과 float 속성이 해제되어서 수직정렬로 바뀌었습니다.

예시 2)

이미지에 float="left"속성을 주면 이미지는 왼쪽으로 배치되고 뒤따르는 텍스트는 이미지를 감싸며 배치됩니다.

object-fit 속성

요소의 크기에 맞게 <img> 태그와 <video> 태그의 크기를 조정하는 방법으로 사용되는 속성입니다.

fill	기본값, 요소에 크기에 맞게 꽉채워 보여줌, 필요한 경우 오브젝트가 늘어나거나 찌그러집니다.
contain	요소의 가로나 세로크기에 가능한 딱 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 딱 맞추기 때문에 남는 공간이 발생할 수 있습니다.
cover	요소의 가로나 세로크기에 가능한 맞춰져 크기가 조정되고, 비율은 고정된 상태입니다. 개체 크기에 맞게 잘립니다. 가득 채울때까지 확대됩니다.
none	크기가 조정되지 않고 원본사이즈로 처리됩니다. 크면 잘리고, 작으면 남습니다.
scale-down	크기를 아무것도 지정되지 않거나 혹은 contain이 지정되어 있는 것처럼 변경됩니다. 이는 원본 크기보다 작아지는 결과를 보여줍니다.

object-fit:contain;과 object-fit:scale-down; 실행 결과입니다.

배경 이미지 관련 속성: background-image, background-repeat, background-position

background-image

background-image: none | url | initial | inherit

none	이미지를 배경으로 사용하지 않습니다.
url	이미지의 URL을 입력합니다.
initial	기본값으로 설정합니다.
inherit	부모 요소의 속성값을 상속받습니다.

background-image: url("happy.jpg"); 실행 결과입니다.

background-repeat

배경 이미지의 반복 여부와 반복 방향을 정합니다.

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

repeat : 가로 방향, 세로 방향으로 반복합니다.

repeat-x : 가로 방향으로 반복합니다.

repeat-y : 세로 방향으로 반복합니다.

no-repeat : 반복하지 않습니다.

initial : 기본값으로 설정합니다.

inherit : 부모 요소의 속성값을 상속받습니다.

background-position

왼쪽 상단

background-position:left top;
background-position:0% 0%;

왼쪽 중단

background-position:left center;
background-position:0% 50%;

왼쪽 하단

background-position:left bottom;
background-position:0% 100%;

중앙 상단

background-position:center top;
background-position:50% 0%;

중앙 중단

background-position:center center;
background-position:50% 50%;

중앙 하단

background-position:center bottom;
background-position:50% 100%;

오른쪽 상단

background-position:right top;
background-position:100% 0%;

오른쪽 중단

background-position:right center;
background-position:100% 50%;

오른쪽 하단

background-position:right bottom;
background-position:100% 100%;

z-index 속성

position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를 z-index 속성으로 정합니다. 값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록 아래로 내려갑니다.

[추가 학습 가이드]

1. 이미지 object-fit 속성

2. 배경 이미지 관련 속성 background-image, background-repeat, background-position 등

3. z-index 속성

4. float/clear 속성 예제 찾아서 실습해보기

'HTML, CSS' 카테고리의 다른 글

블로그 페이지 만들기 (0)	2024.01.21
display: block, inline-block (0)	2024.01.21
이미지와 div 가운데 정렬, float: left로 <div> 가로 정렬 (1)	2024.01.15
[CSS] transition, animation, flexbox, Tailwind CSS (0)	2023.03.29
2주차 웹, HTML 기초, CSS 기초(03/20) (0)	2022.04.28

프론트엔드 기록

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문