본문 바로가기
프론트 엔드/CSS

CSS 전체적인 복습

by 코린이의 세계 2024. 8. 28.

(시작하기에 앞서서, 짐코딩님의 무료 강의를 참고하였음을 알림)

https://github.com/gymcoding/learn-html-css

 

GitHub - gymcoding/learn-html-css

Contribute to gymcoding/learn-html-css development by creating an account on GitHub.

github.com

(오픈 소스는 다음과 같음. 고마워요 짐코딩!!)

 

HTML/CSS 강의

 

www.youtube.com

 

CSS란?

CSS란?

Cascading Style Sheets의 약자로, HTML문서를 꾸밀 때 사용하는 스타일을 잘 정리한 시트(문서)이다. HTML로 웹 페이지의 뼈대를 만들고, CSS로 웹 페이지를 예쁘게 꾸미는 역할을 한다.

CSS 구조

CSS의 구조는 다음과 같다.

스타일 적용은 크게 인라인, 외부, 내부가 있는데 외부로 적용하는 것을 추천한다.

  • 외부 style.css 파일 정의
/* style.css File */
h1 {
  color: cyan;
}
.article {
  border: 1px solid black;
  padding: 30px;
}
  • HTML 파일에서 외부 style.css 파일 연결
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Apply CSS</title>
  <!-- 외부 스타일(External Style)-->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 외부 스타일 적용 -->
  <h1>코딩</h1>
  <div class="article">우리는 코딩을 배우고 있어요!</div>
</body>
</html>

참고로 자바스크립트를 가져올 때도 이런 식을 가져온다.(스크립트) 

css는 링크를 이용해서 가져오는 게 다반사. href에 해당 파일명을 가져온다.

CSS 주석

주석은 StyleSheet 내에 메모를 남기는 것을 말한다.

/* 메모내용 */
h2 {
	color: blue;
}

/*
	메모내용이 여러줄일 경우 
*/

주석은 /*  */ 을 이용해주면 된다.

CSS 출처 적용 우선순위

사용자 !important > 제작자!important > 제작자 > 사용자 > 브라우저

  • 주의사항
  • !important는 폭포의 흐름을 깰 수 있으니 주의해서 사용해야 한다. (쓰지 말라는 뜻)

Cascading 뜻

Cascading Style Sheet에서 Cascading은 폭포라는 뜻을 갖고 있다.

HTML 문서는

  • 제작자 스타일을 우선 적용하고 →
    • 그 다음 브라우저 사용자 스타일 →
      • 마지막으로 브라우저 기본 스타일을 적용.

이처럼 Cascading의 뜻인 폭포와 같이 스타일이 우선순위에 맞게 연속적으로 적용됨을 의미한다.

선택자

CSS 선택자 - CSS 규칙을 적용할 요소를 정의하는 것이다. HTML의 태그 요소를 지정해서 조종하는 것이다.

선택자는 정말 많기에 다음 페이지를 참고하자.

https://gymcoding.notion.site/51f4764c74794542b59a20872997c2d5

 

선택자 | Notion

CSS 선택자

gymcoding.notion.site

CSS 속성 - 폰트

글꼴 관련 속성 MDN

  • font-family - 글꼴 종류를 지정.
  • 기본값 : 웹브라우저 기본 글꼴.
  • font-size - 글자 크기를 지정.
  • font-style - 글자를 이텔릭체로 표시할지 지정.
  • font-weight - 글자 굵기를 지정.

단위 em, rem

  • px : 픽셀 단위
  • rem : 루트 요소의 글꼴 크기
  • em : 요소의 글꼴 크기
  • vw : viewport 너비의 1%
  • vh : viewport 높이의 1%

그 밖에 필요 부분은 다음 링크 참고

 

CSS 타이포그래피(Typography)

CSS 타이포그래피(Typography)에 대해 알아봅시다. 본 포스팅은 < 패스트캠퍼스 야무 강사님의 프론트엔드 개발 시작하기 CAMP > 강의 내용을 정리한 것임을 알려드립니다. CSS 타이포그래피(Typography)

JihyeHwang09.github.io

(당연히 색깔은 color 속성을 이용한다.)

CSS 속성 - 표

 

표 관련 속성 MDN

  • <table> 태그에 border 속성을 활용하여 테두리 그리기
table {
	border: 1px dolid #222;
	border-collapse: collapse;
}
td, th {
	border: 1px solid #222;
}

핵심은 border이다. 또한 백 그라운드 색깔도 바꿀 수 있다.

th {
	background-color: #ccc;
}
CSS Box Model

Box Model

모든 HTML 요소는 웹 페이지에서 일정 공간을 차지하게 된다. 그리고 이러한 공간을 CSS에서는 박스 모델(Box Model)로 정의하고 있다. 이 박스 모델에 대한 공부는 중요하다. (웹 페이지 레이아웃을 짤 때 기준이 되어주기 때문.

HTML 요소의 박스 모델은 Content, Padding, Border, Margin으로 구성되어 있다. (여기에서 개인적으로 제일 많이 쓰이는 건 패딩이랑 마진인 거 같다. 물론 컨텐트와 보더도 많이 쓴다.)

박스 모델

박스 모델을 알고 싶으면 개발자 도구(f12)를 이용해서 알아낼 수 있다.

엘리먼트요소에서 박스모델을 알아내면 위와 같이 나올 것. 

HTML 요소의 박스 모델은 Content, Padding, Border, Margin으로 구성되어 있다고 하였는데, 각 모델에 대한 짧은 설명은 다음과 같이 정리된다.

  • Content - 텍스트나 이미지가 들어있는 HTML 요소의 실직적인 내용.
  • Padding - Content와 Border사이의 영역으로 쉽게 말해 안쪽 여백.
  • Border - Content를 감싸는 테두리.
  • Margin - 테두리와 이웃하는 요소 사이의 간격으로 쉽게 말해 바깥쪽 여백.

(자세한 태그, 선택자는 밑 사이트 참고)

https://gymcoding.notion.site/CSS-Box-Model-c58de03a0f9a40b890bd7951ae27d606

 

CSS Box Model | Notion

Box Model

gymcoding.notion.site

CSS Display

display 속성

display 속성은 HTML 요소를 어떻게 표시할지를 결정한다. HTML 요소마다 기본적으로 갖고 있는 display 속성 값이 다르다. 이 부분을 display 속성으로 제어하는 것이다.

이 기본값이 display: block 이면 Block Level Element 이며, display: inline 일 경우 Inline Level Element 이다.

그리고 display 속성은 주로 4가지 속성 값이 쓰인다. 그중 하나가...

none

none 이다. 요소를 보이지 않게 설정하는 것이다. visibility 속성을 hidden으로 설정한 것과 달리, 영역도 차지하지 않는 속성값이다. 

CSS Float

 

float 속성

float 의 사전적인 의미는 '뜨다"라는 뜻이다.

만약 HTML 요소에 float이 적용되면 HTML 요소는 원래의 흐름에서 벗어나 둥둥 떠다니듯 배치가 된다. 다만 최근 웹사이트에서는 사실상 전멸 수준으로 사용하지 않는다... (옛날에 화려한 웹사이트들은 많이 썼다고..)

CSS Position

position 속성

position 속성은 HTML 요소를 배치하는 방법을 지정하는 것이다.

  • static (기본값)
  • static은 요소가 HTML 문서에서 일반적인 흐름을 따라 배치가 되게 하며, 기본값이다.
  • relative
  • static과 마찬가지로 요소가 문서의 일반적인 흐름에 따라 배치되게 한다. static과 차이점은 요소가 자신의 static 위치에서 top right bottom left와 같은 속성에 의한 상대적인 위치에 배치된다.
  • absolute
  • absolute는 요소가 문서의 일반적인 흐름을 따르지 않게 한다. absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직인다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 된다.
  • fixed
  • fixed 역시 absolute와 마찬가지로 요소가 문서의 일반적인 흐름에서 제거된다. 대신, 스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치됩니다. 즉, 스크롤되어도 움직이지 않는 고정된 자리를 갖게 된다.
  • 뷰포트(viewport)란? 웹 페이지가 브라우저 화면상에서 실제로 표시되는 영역이다.
  • sticky
    • top속성을 적용해야 스크롤 임계점에서 고정이 됨.
    • left, right, bottom 속성을 사용할 수 없음.
  • sticky는 요소가 HTML 문서 안에서 static과 같이 일반적인 흐름에 따라가다가 스크롤 위치가 임계점에 이르면 fixed와 같이 박스를 화면에 고정할 수 있는 속성이다.

이런 포지션 속성은 웹사이트에서 스크롤을 따라오는 상단툴에 쓰이기도 한다.

https://www.youtube.com/watch?v=Nq4WblZ1VXY&list=PLlaP-jSd-nK-ponbKDjrSn3BQG9MgHSKv&index=29

영상 참고

영상을 참고하면 더 이해하기 쉽다. 꼭 보자.

배경 스타일링 하기

배경 이미지 스타일

background-color

HTML 요소의 배경 색을 지정한다.

/* 키워드 값 */
background-color: red;
/* 16진수 값 */
background-color: #bbff00;
/* RGB 값 */
background-color: rgb(255, 255, 128);
/* 특별 키워드 값 */
background-color: currentcolor;
/* 전역 값 */
background-color: inherit;

background-image

HTML요소에 배경 이미지를 한 개 또는 여러 개를 지정할 수 있다.

background-image: url("../../media/examples/lizard.png");
background-image: url("../../media/examples/star.png"),
                url("../../media/examples/lizard.png");

이 밖에 색깔을 그라데이션으로도 줄 수 있다. (이건 알아서 구글링 하자..)

고급선택자 - 가상클래스 요소

가상 클래스(pseudo-class)는 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다. 많은 선택자가 존재하기는 하지만 대표적인 코드는 다음과 같다.

a:hover {
  color: orange;
}
input:focus {
	color: red;
}

hover는 마우스 이벤트를 제어하는 고급 선택자이다. (사실상 필수...) 그리고 input태그에 focus를 이용해서 색깔도 바꿔줄 수 있다.

CSS Transform, Transition

이 부분부터 "애니메이션"에 대한 것이다.

여기서 애니메이션은 엄청 넓은 의미의 애니메이션이다. 그저 "이동"이어도 애니메이션으로 취급하였다.

일단은 이동과 전환에 대한 이야기를 하겠다.

Transform

transform 속성은 HTML 요소를 회전, 크기 조절, 기울이기, 이동 효과를 나타낼 때 사용한다.

사용법은 transform 속성 값으로 특수한 함수를 넣어주면 된다.

/* x축(가로)으로 20px 이동 */
transform: translateX(20px);

/* y축(세로)으로 40px 이동 */
transform: translateY(40px);

/* x축(가로)으로 20px, y축(세로)으로 40px 이동 */
transform: translate(20px, 40px);

transform을 사용하려면 해당 요소의 display 속성이 block 또는 inline-block 이어야 하니, 이 부분은 조심하자.

Transition

transition의 사전적 의미는 "전환"이라는 뜻이다. CSS에서 transition은 속성 값이 변할 때 더욱더 부드럽게 전환할 수 있도록 도와준다.

속성

  •  transition-property
  • 어떤 속성에 트랜지션 효과를 줄 것인지 지정합니다.
    • transitino-property: <속성1>, <속성2>; 와 같이 지정할 수 있다.
    • all : 모든 속성을 지정한다. (all은 생략 가능.)
    • none : 아무것도 지정하지 않는다.
  • transition-duration
  • 트랜지션 효과를 몇 초 동안 실행할 것이지 지정한다.
  • transition-delay
  • 지정한 초만큼 기다렸다가 실행할 때 사용한다.
  • transition-timing-function
  • 트랜지션이 시작하면서 끝날 때의 타이밍! 즉 속도를 지정하는 것이다.
    • linear : 트랜지션의 시작과 끝의 속도가 일정함
    • ease-in : 천천히 시작했다가 완료될 때 속도가 증가.
    • ease-out : 빨리 시작했다가 완료될 때 속도가 낮아짐.

참고 사이트 >

https://tympanus.net/Development/PageTransitions/

 

A Collection of Page Transitions

A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions A collection ofPage Transitions

tympanus.net

CSS Animation

 

Animation

요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 주는 것을 말한다. 이때 CSS 스타일이 변화되는 중간지점을 키프레임이라고 합니다. 즉 @keyframes은 애니메이션의 중간 상태라고 할 수 있다.

애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다. (그만큼 복잡하다..)

코드 예시는 다음과 같다.

@keyframes background {
	from { background-color: red; }
	50% { background-color: green; } /* percentage로 중간 스타일을 적용 */
	to { background-color: blue; }
}

시작부터 끝까지 퍼센트를 지정해서 애니메이션을 넣어줄 수 있다. 선택자는 똑같이 CSS의 문법들을 사용해 주면 된다. 키포인트는 @keyframes 이라는 명령어를 사용하는 것이다.

Animation 속성

animation-name

  • 애니메이션의 중간 상태를 지정하기 위한 이름을 정의한다. 중간 상태는 @keyframes 규칙을 이용하여 기술한다.
animation-name: shape;

@keyframes shape {
...

이 밖에 애니메이션 속성이 많다. 이 많은 속성을 알고 싶다면 밑의 MDN 사이트를 이용해 주면 된다. (아님 구글링...)

  • MDN Animation
 

animation - CSS: Cascading Style Sheets | MDN

animation 단축 CSS 속성은 스타일 사이에 에니메이션을 적용합니다. animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, 그리고 animation-

developer.mozilla.org

  • 다양한 애니메이션
 

Cool CSS Animation | Resources and tutorials for designers

Free tutorials and resources to learn to code CSS animation by example.

coolcssanimation.com

Flexbox

플렉스 박스가 없던 CSS의 시절은 지옥과 같았을 것이다. 그러나 플렉스 박스가 태동하게 됨에 따라서 CSS는 엄청난 발전과 직관적이고 쉬운 레이아웃 만들기를 가능하게 만들었다.

flexbox란?

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 HTML 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식이며, "혁신"이라고 할 수 있는 개념.

flexbox의 장점을 한 마디로 표현하면 복잡한 계산 없이 요소의 크기와 순서를 유연하게 배치할 수 있다고 할 수 있다. 정렬, 방향, 순서, 크기 등을 유연하게 조절할 수 있기 때문에 별도의 분기 처리를 줄일 수 있고, CSS만으로 다양한 레이아웃을 구현할 수 있다.

그리고 실제로도 플렉스 박스를 이용해서 대부분 레이아웃을 만들어 준다. 

flexbox 구성

flexbox는 우리가 배치하고 싶은 HTML 요소인 flex item과 이것을 감싸고 있는 상위 부모 요소인 flex container로 구성된다.

  • flex container : flex item 을 감싸고 있는 부모 요소
  • flex item : flex container 안에 있는 여러 개의 자식 요소

컨테이너 안에 아이템이 존재하는 것이다. 그리고 속성을 이용해서 어떻게 아이템을 정렬하고 배치할지를 정할 수 있다.

일단, 이 플렉스 박스를 쓰고 싶으면 display: flex를 먼저 기입해야 한다. 이후 추가적인 속성을 이용해서 아이템을 지정해 주는 것이다.

코드는 다음과 같다.

추가적인 설명은 다음과 같다.

flex-direction

아이템을 행으로 배치할 것인지 열로 배치할 것인지 결정하는 속성이다.

즉, "순서"를 결정하는 속성이다.

align-items

아이템에 관한 속성이다.

아이템은 컨테이너를 기준으로 어떻게 아이템을 정렬할지 결정하는 속성이다.

ustify-content

아이템에 관한 속성이다.

컨테이너 안에서 아이템을 어떻게 나란히 정렬할 것인지 결정하는 속성이다.

그림으로 표현하면 이해하기 쉬울 것이다. 그림은 다음과 같다.

코드는 위에서 보여줬으니, 그림과 참고해서 코드를 짜면 좋을 거 같다!

알아두면 좋은 사이트.
  • Flexbox Game

https://flexboxfroggy.com/#ko

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

  • Flexbox로 만들 수 있는 10가지 레이아웃

https://d2.naver.com/helloworld/8540176#ch2

  • Flexbox Layout Github

https://github.com/dinanathsj29/css-flexbox-beginners-tutorial

 

GitHub - dinanathsj29/css-flexbox-beginners-tutorial: CSS flexbox tutorial for all, This is comprehensive guide to CSS flexbox l

CSS flexbox tutorial for all, This is comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox. - dinanathsj29/css-flexbox-beginners-tutorial

github.com

https://codingworld2002.tistory.com/59

 

CSS Flexbox / Grid

css에서 Flexbox 와 Grid는 정말 중요한 개념이다. 이에 대한 설명은 밑의 영상을 참고하자. (아, 그리고 "절대 하나 하나 처 외우지 말 것)https://youtu.be/7neASrWEFEM?si=LVytunQ_Ozp0U2Ww플렉스박스https://youtu.be

codingworld2002.tistory.com

(앞 광고)

마치며..

CSS도 HTML과 마찬가지로 엄청나게 많은 속성과 선택자가 존재할 것이다.

또한, 모든 속성과 선택자들 전부 외울 필요는 없다. 애초에 외우지도 못한다.

그러나 많이 사용하면서 자연스럽게 외워질 것이니, 이 부분은 걱정하지 않아도 괜찮다. 그리고, 개념적인 부분이 헷갈리면 다시 복습하면 된다. 

(복습하고 싶으면 이 페이지를 참고하면 될 듯하다...😊❤️)

'프론트 엔드 > CSS' 카테고리의 다른 글

미디어 쿼리란? 기초부터 실전까지  (1) 2024.10.09
프드프 구매 현황 따라해봄.  (6) 2024.09.23
CSS에서 반응형 웹페이지를 object-fit 속성으로 컨텐츠 제어하기  (1) 2024.09.04
CSS 애니메이션 사이트  (0) 2024.09.03
CSS Flexbox / Grid  (0) 2024.07.12

관련글

티스토리툴바