CSS 기본 개념 정리

devlsn96·2024년 9월 22일

프론트엔드 기본 개념 정리

목록 보기

2/11

🎁 CSS의 탄생배경
폰트 : (자바의 wrapper클래스처럼) 태그는 아니지만, 렌더링은 가능하다. 🧨
html태그의 역할은 구조적인 기능, 시맨틱태그처럼 정보검색을 용이하게 하는 기능이 추가되었다. <font size="8" color="blue">Hello</font>, <font size="8" color="red">Hello</font>

디자인적 요소는 앞으로 CSS 언어가 담당한다!

1. CSS

1-1. CSS란 무엇인가?

HTML, XHML, XML같은 문서의 스타일을 꾸밀 때 사용하는 스타일시트 언어
HTML은 CSS가 있기 전에 있었던 언어로,
<h1 style="color: tomato;">Hello World</h1>
- <h1> 에서 css 속성값을 지정할 수 있지만,
CSS는 HTML이 있는 후에 CSS를 입힌다.

<style>태그에 선택자를 지정하여 보통 <head>안에 css를 입힌다.
<style>
    h2{
        color: powderblue;
    }
</style>

1-2. 선택자(selector)와 선언(declaration)

css에서 가장 기본적인 문법이다.
어떤 태그를 디자인하기 위해서는 디자인하려는 태그를
- 선택하고, (선택자)
- 선택한 대상에게 효과를 줘야함. (선언)

1-3. CSS코드를 작성하는 기본형식

<style>
	selector{
		속성1:값1;
		속성2:값2;
		....
	}
</style>

2. 기본 셀렉터의 종류

2-1. 기본셀렉터 종류

css에서 셀렉터를 작성하는 방법은 기본적으로 HTML의 태그이름, 클래스속성, id속성에 대한 명시가 있다.

1. 태그 이름
selector{...css 적용...}

특정 태그를 가리킨다.
HTML내에 동일 태그가 존재할 경우 태그 요소를 일괄 처리한다.

2.클래스
.selector{...css 적용...}

셀렉터 이름 앞에 점(.)을 붙여 표시하고
HTML태그의 class 속성에 점을 제외한 이름을 명시하여 지정한다.
태그의 종류를 가리지 않고 여러 요소에 복수 지정이 가능하다. (재사용하기 위한 목적)
이 경우, selector의 이름은 자유롭게 지정

3. id
#selector{...css 적용...}

셀렉터 이름 앞에 (#)을 붙여 표시하고,
HMLT태그의 id속성에 샵(#)을 제외한 이름을 명시하여 지정한다.
id속성의 값은 HTML페이지 내에서 중복 사용될 수 없다. (고유특성 명시)
이 경우, selector의 이름은 자유롭게 지정

2-2. 조합형 셀렉터

tag.class{속성1:값1;, 속성2:값2;,....}
tag#id{속성1:값1;, 속성2:값2;,....}

id값이나 class값을 태그 이름과 함께 명시하여 적용하는 형태
셀렉터가 지정하는 대상을 자세하게 명시할 수 있다.
태그, 클래스, 아이디를 독립적으로 명시할 때보다 우선적으로 적용된다.

2-3. AND의 의미를 갖는 콤마(,) 사용

selector1, selector2, selector3, ..{ 속성1:값1;,속성2:값2;....; }

여러 개의 요소에 동일한 CSS내용을 적용하기위해 셀렉터를 콤마(,)로 구분하여 일괄처리 할 수 있다.
태그, class, id등 모든 형태의 css셀렉터가 가능하다.

3. 가상 클래스란?

특정 상황에 따라 반응하는 가상 클래스
HTML태그에서 특정 상황이 발생했을 경우에만 적용되는 CSS 셀렉터이다.
가상클래스는 CSS의 셀렉터 이름 뒤에 :상황 의 형식으로 명시한다.
:first-child : 여러 개의 동일한 요소 중 에서 첫번째요소
:last-child : 여러 개의 동일한 요소 중 에서 마지막요소

4. 복잡한 형태의 선택자

4-1. 다양한 CSS의 조합방식

CSS에서 표현하는 선택자의 표현방식은 태그의 구조에 따라 자식 셀렉터, 자손 셀렉터 등으로 조합하여 사용한다.

1. 자식 셀렉터

>로 구분
>는 HTML의 계층 구조의 표현

선택자A > 선택자B 일 경우 B요소는 A의 1depth 안에 존재해야 한다.

2. 자손 셀렉터

공백으로 구분
자식 셀렉터가 반드시 1depth안에 존재해야 했다면, 자손 셀렉터는 depth를 제한하지 않는다
명시 과정에서 중간단계를 생략해도 된다.
몇 depth를 더 내려가던지, 지정한 태그의 범위안에 존재하기만 하면 된다

3. HTML 속성에 따른 구분

스타일시트의 셀렉터가 적용되는 대상에게 특정 속성이 있는지 여부와 특정 속성의 값이 적용되어 있는지 여부에 따라 태그 요소를 좀 더 구체적으로 가리킬 수 있다.

input[type= 'password']{
		border: 3px solid tomato;
}

4. nth-child 가상클래스

여러개 요소중 n번째 요소라는 의미로 :nth-child(n)형식이 추가
요소를 뒤에서부터 카운트 할 경우 :nth-last-child(n)를 사용한다.

5. css 우선순위

코드의 순서 상관없이 구체적인 것을 기준으로 (다음과 같이) 우선순위가 정해진다

1. style attribute
2. id selector
3. class selector
4. tag selector

단, 속성에 !important키워드를 삽입하면 해당 키워드를 먼저 적용한다.

6. 폰트

font-size : 글자 크기
font-style : 글자 기울임
font-weight : 글자 굵기
line-height : 줄간격
font-family : "서체종류"
font : font-weight font-style font-size``line-height font-family; (일괄지정방식)

6-1. 웹 폰트

웹에서 다운로드받아 폰트를 사용할 수 있다.
예를 들면, 구글폰트 가 있다.

😊 문단 관련된 CSS 연습할 때 참고하기!
아무 의미없는 텍스트를 가져올 수 있는 사이트

7. 문단관련 속성

7-1. text-align

left, center, right
justify : 문단을 하나의 박스처럼 구성
문단의 크기 기반으로 텍스트 정렬

7-2. text-shadow

셀렉터 {
	text-shadow : x-offset y-offset blur-radius color;
}

x-offset : 본체와 그림자의 가로축 거리(px)

y-offset : 본체와 그림자의 세로축 거리(px)

blur-radius : 번짐정도(px)

color : 그림자의 색상

<span style="text-shadow: 3px 3px 5px blue;">HTML5</span> &amp;
<span style="text-shadow: 3px -3px 5px orange;">CSS3</span>

8. 박스

8-1. block 과 inline

엘리먼트들은 크게 두가지로 구분한다.
1. block element : 화면 전체를 사용하는 태그
2. inline level element : 화면의 일부를 차지하는 태그

8-2. 박스의 기본 크기를 결정하는 특성

가로축 : 부모를 가득 채운다.
세로축 : 자신이 포함하고 있는 내용만큼 설정
내용이 없을 경우 높이가 형성되지 않는다.

8-3. 박스 크기 구성요소

1. border

border : 굵기 종류 색상;

border의 종류는 solid, dotted... 등이 있다.
표시 위치에 따른 border속성의 세분화
: 테두리의 상/하, 좌/우 영역을 각각 개별적으로 지정하기 위해 다음과 같이 세분화 한다.
border-top 굵기 종류 색상;
border-right 굵기 종류 색상;
border-bottom 굵기 종류 색상;
border-left 굵기 종류 색상;

😊 CSS 박스 속성 box-sizing: border-box;
border값으로 인해 전체적인 box의 크기가 달라지는 경우가 발생하는데..
이에 대응하기 위해 box-sizing 속성으로 해당하는 태그에 전체적인 width값과 height값을 통일시켜줄 수 있다.

2. padding

: 내용영역과 border 사이의 여백의 크기
padding : px값;

표시 위치에 따른 값의 세분화
padding-top 상단 여백 px단위로 지정
padding- right 우측 여백 px단위로 지정
padding-bottom 하단 여백 px단위로 지정
padding-left 좌측 여백 px단위로 지정
값의 지정 형식 (공백 구분)
- 1개의 값 : 상 하 좌 우 모두 같은 크기의 여백 지정
- 2개의 값 : 공백으로 구분 하여 2개의 값을 지정한 경우
  첫번째 값은 "상 하"
  두번째 값은 "좌 우"
- 4개의 값 : 공백으로 구분하여 4개의 값을 지정할 경우
  첫번째값이 상단여백 그 후,
  우측, 하단, 좌측 순서로 시계방향으로 적용

3. margin

마진 겹침 현상 : "상하" 마진값이 어떤 상황에서 사라지는 현상을 의미한다.

마진의 적용원리
: 움직일 수 없는 요소를 밀어내어 스스로의 위치를 변경시키거나 다른 요소를 밀어내는 특성을 갖기 때문에 위치와 관련된 속성이다. 즉, margin 속성은 요소의 위치를 변경시키면서 주변 요소에게 영향을 주게 된다.

8-4. 중첩된 `<div>` 간의 크기 관계

child태그는 parent태그의 내용이므로 child 의 border와 padding 을 합한 모든 크기 요소의 합이 parent의 width나 height를 넘을 수 없다.
(만약, child의 전체 크기가 parent의 width나 height의 값보다 커진다면 child는 parent를 벗어나게 된다)
width와 height값은 한번 부여되면 고정 사이즈를 갖는 특성이 있으며, 내용이 많아질 경우 자동으로 확장되지 않는다.

1) 백분율로 사이즈를 지정하는 경우

~~박스에 대한 width나 height 속성을 백분율로 지정할 경우에도~~
비율에 대한 기준이 되는 건 부모요소에 대한 width와 height 값이다.

2) auto값으로 사이즈를 지정하는 경우

width, height, margin-left, margin-height에 대해 적용할 수 있는 특수한 값으로, 어떤 속성에 적용되느냐에 따라 동작하는 원리가 달라진다.

width : auto;
: 부모요소의 width값으로부터 padding과 border 크기를 뺀 나머지 값을 자동으로 계산하여 width에 적용한다.
height : auto;
자신이 포함하고 있는 내용영역에 대한 높이 만큼만 height를 설정

8-5. 화면을 가득 채우는 박스 만들기

box-sizing 로 padding값, border값으로 박스 크기가 width값을 넘을 때 전체 박스 크기를 width 에 맞춰준다.

9. deplay 속성

9-1. block-level

display: block;

이 속성이 적용되면 해당 요소는 width와 height를 적용할 수 있다.
(하나의 문단으로 처리되기 때문에, 태그 다음에 나타나는 요소는 자동 줄바꿈)

9-2. inline-level

display : inline;

이 속성이 적용되면 해당 요소는 width, height를 부여하더라도 적용되지 않는다.
(하나의 단어나 강조 구문처럼 인식되기 때문에, 태그 다음의 요소는 줄바꿈 되지 않는다.)

9-3. 공통

display:none;

이 속성이 적용된 요소는 화면상 표시되지 않는다.

9-4. display의 속성에 대한 inline-block값

block-level요소의 특성과 inline-level요소의 특성을 혼합한 형태
(block : 크기 지정 가능, inline : 문장으로 형성됨)
즉, 크기를 지정할 수 있는 inline-level 요소로 처리

9-5. `<li>`태그의 디자인 양식을 제거

list-style: none; : 이 속성을 적용하면 각 list 앞에 붙는 표시가 제거(none)된다.

10. float

10-1. float이란?

float 속성은 뉴스 페이지와 같은 곳에서 흔히 볼 수 있다Article페이지에서 사진이미지가 글 사이에 떠있는것 처럼
이미지나 박스를 화면의 우측 혹은 좌측에 고정시켜 놓고 텍스트가 그 옆을 흐르듯이 지나가도록 하는 것을 floating 처리라 하고, 이 때 사용되는 속성이 float 속성이다.

10-2. float 속성

float : left; : 요소를 부모박스 안에서 왼쪽에 고정
float : right; : 요소를 부모박스 안에서 오른쪽에 고정
float : inherit; : 부모요소에 적용된 float 속성값을 상속
float : none; : float속성을 적용하지 않음기본값

📌 float 속성 사용시 주의사항

width속성에 대한 auto값을 사용할 수 없게된다

%나 px 단위의 값만 사용 가능하다.

10-3. 서로 이어지는 두개의 문단의 경우

float속성은 서로 문단이 다르더라도 이후에 명시되는 모든 요소에 대하여 영향을 준다
그러므로, float 속성이 사용된 후, 이 기능을 off 하지 않는다면 문단은 새로 시작되지 않는다.
float 속성을 종료할 위치 다음,
아무 내용이 없는 빈 <div> 태그를 사용하고 float: none; clear : both;의 CSS속성을 적용한다.

<div class="clear" style="float: none; clear : both;"></div>

10-4. 가상클래스 before, after의 사용

특정 요소의 시작 태그의 직전과 종료태그의 직후에 가상의 inline-level요소를 생성한다.
:before : 시작 태그 직후의 inline-level의 가상 클래스
:after : 종료 태그 직전의 inline-level의 가상 클래스

.clear:after{
	/* content는 태그안에 들어갈 내용 입력 */
    content: '';
    /* block-level의 영역이 크기를 설정할 수 있다. */
	display: block;
	clear: both;
	float: none;
}

10-5. 중첩된 박스 구조에서의 float 속성의 사용

float 속성이 적용된 요소는 부모 요소가 감싸지 못하기 때문에, float 속성이 적용되면 부모요소가 감싸지 못하기 때문에 레이아웃 안에서 다른 요소의 영역을 침범하게 된다.
부모 요소가 종료하기 전에 float 마감 처리를 추가하면 정상적으로 float가 적용된 요소를 감쌀 수 있다.
- 빈 HTML태그로 처리
- 부모 요소의 after 가상 클래스를 사용해서 처리

🎆 CSS코드에서 제공하는 애니메이션 코드
transition: all 0.3s; : 트랜지션 애니메이션이 적용여부(all or none)에 따라 시간(__s)을 적용한다.

Background 속성

background-repeat : 특정요소가 반복적으로 배경채움 (반복X : no-repeat)
background-position : 배경위치 지정 (방향, 좌표로)
background-size : 크기 지정 (contain, cover:비율깨지더라도 채움)
background: url(./파일경로) : 해당영역 반복적으로 채움, 좌표로 표시가능

입체적인 속성

z-index : 클수록 가장 위에 배치
opacity : 투명율

11. 포지션

엘리먼트의 위치를 지정하는 방법이다.

11-1. 엘리먼트의 위치를 지정하는 방법

static : 기본값
relative : 기준위치 지정
absolute : html 태그 기준으로 변경
fixed : (스크롤에 상관없이) 고정값

11-2. 위치값

위치값을 줄 때는 보통 좌측 상단을 기준으로 한다.
css에서 위치는 정적으로 존재한다.
즉, 위치값은 static하게 위치한다.
(자식 엘리먼트 기준으로 부모 엘리먼트 안에 존재해야 하기 때문에
left top 등의 옵션이 무시된다.)
bottom vs top : top 이 우선
bottom값을 써도 의미없음
right vs left : left가 우선
right값을 써도 의미없음

12. multi-column

신문기사 처럼 컬럼을 나누어주는 기능

column-count : (최대)컬럼 수 지정
column-width : 컬럼의 너비
column-gap : 컬럼 간격
column-rule-style : 컬럼 사이 라인 모양
column-rule-color : 컬럼 사이 라인 칼라
column-span: all; : 모든컬럼에서 하나의 영역으로 강조하는 효과
column-span: none; : 하나의 컬럼에서 하나의 영역으로 강조하는 효과

13. link 와 import

13-1. 외부로 파일을 빼는 방법

1. link
<link rel ="stylesheet" href="style.css"/>
2. import

<style>
	@import url ("style.css");
</style>

📌 Cache : 자주 접근하는 데이터를 복사해 놓는 "임시 저장소" - Browser cache : 서버 지연을 줄이기 위해 사용하는 웹캐시의 일종

14. Bootstrap

이미 존재하는 웹사이트의 디자인양식(프론트엔트 프레임워크)이 있다.
부트스트랩을 활용하면 빠르게 웹사이트의 디자인 요소를 적용할 수 있다.

14-1. 부트스트랩의 활용하기

1. 부트스트랩 사이트에 접속 후 CND를 통해 아래의 CSS 코드를 복사해 부트스트랩에 적용된 템플릿을 이용할 수 있다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>