[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 9일차

Notice

Recent Posts

Recent Comments

Link

250x250

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

Tags more

Archives

Today

Total

관리 메뉴

Bin's Blog

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 9일차 - CSS 활용 본문

학습일지

[유데미x스나이퍼팩토리] 10주 완성 프로젝트 캠프 9일차 - CSS 활용

hotIce 2023. 6. 15. 00:27

728x90

🤔 CSS란?

👉 CSS는 Cascading Style Sheets의 약자이다.

👉 한 번에 여러 웹 페이지의 레이아웃을 제어할 수 있다.

👉 외부 스타일시트는 CSS 파일에 저장된다.

👉 Cascading: 연속화 => CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용된다. 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙는다.

1️⃣ CSS Selector

👉 css 선택기는 스타일을 지정할 HTML 요소를 "찾는"(또는 선택하는)데 사용된다.

<!--요소 이름을 기반으로 HTML 요소를 선택한다-->
p {
  text-align: center;
  color: red;
}

<!--id 선택자는 HTML 요소의 id 속성을 사용하여 특정요소를 선택한다.-->
#para1 {
  text-align: center;
  color: red;
}

<!-- 클래스 선택기는 특정 클래스 속성을 가진 HTML 요소를 선택한다-->
.center {
  text-align: center;
  color: red;
}

👉 코드를 최소화하려면 선택기를 그룹화하는 것이 좋다.

h1, h2, p {
   text-align: center;
   color: red;
}

2️⃣ CSS 삽입하는 법

<!-- 1.내부 스타일 시트-->
<head>
<style>
body {
    background-color: red;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
<style>
</head>



<!-- 2.외부 스타일 시트를 import 하여 사용-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">


<!-- 3.인라인 스타일 시트: html 파일에서 스타일 직접 지정 -->
<h1 style="color:blue; margin-left:30px;">This is a heading</h1>

3️⃣ CSS 우선 적용 순위

👉 우선순위 1: 속성값 뒤에 !important가 붙어 있는 속성

👉 우선순위 2: 인라인 스타일로 적용되어 있는 속성

👉 우선순위 3: 선택자에 id가 쓰인 속성

👉 우선순위 4: class, attribute, pseudo-class로 지정한 속성

👉 우선순위 5: 태그 이름으로 지정한 속성

👉 우선순위 6: 부모 요소에 의해 상속된 속성

4️⃣ 기본 디자인 요소

속성명	의미	속성명	의미
background-color	배경색	margin	바깥 여백 설정
background-image	배경 이미지 정의	padding	안쪽 여백 설정
border	경계선 스타일 정의	color	글자색을 변경
border-radius	테두리 둥글게 처리	text-align	글자 수평 중앙 정렬
letter-spacing	text 자간 설정	display	none: 해당 부분을 숨김 block: 해당 부분을 보임

5️⃣ CSS 테두리 스타일

👉 auto - 기본값이다. 브라우저는 높이와 너비를 계산한다.

👉 length - 높이/너비를 px, cm 등으로 정의한다.

👉 % - 컨테이닝 블록의 백분율로 높이/너비를 정의한다.

👉 initial - 높이/너비를 기본값으로 설정한다.

👉 inherit - 높이/너비는 부모 값에서 상속된다.

6️⃣ 아이콘 & 글꼴

<!-- 아이콘 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fontawesome</title>
  </head>
  <body>
    <script src="https://kit.fontawesome.com/cd8d608180.js" crossorigin="anonymous"></script>

    <!-- https://fontawesome.com/search?s=light&f=sharp&o=r -->
    <i class="fa-sharp fa-solid fa-house"></i>
    <i class="fa-sharp fa-solid fa-paperclip"></i>
    <i class="fa-sharp fa-solid fa-bomb"></i>
    </div>
  </body>
</html>

<!-- 글꼴 -->
<head>
<link rel="stylsheet" href="https://fonts.googleapis.com/css?family-Sofia">
<style>
body {
  font-family: "Sofia", sans-serif;
}
</style>
</head>

7️⃣ 자주 쓰는 CSS Pseudo-class Selector

Selector	예제	설명
:active	a:active	활성 링크를 선택
:hover	a:hover	마우스 오버가 되는 링크를 선택
:visited	a:visited	방문한 모든 링크 선택
:first-child	p:first-child	부모의 첫 번째 자식인 모든 <p> 요소를 선택
:nth-child(n)	p:nth-child(2)	부모의 두 번째 자식인 모든 <p> 요소를 선택

🤔 내가 몰랐던 부분들

1️⃣ align-items vs align-content

👉 align-items는 단일 라인에서 아이템들을 어떻게 정렬할지 결정한다. 반면에 align-content는 여러 라인의 아이템들 사이의 공간을 어떻게 배분할지 결정한다.

2️⃣ bootstrap을 사용하지 않은 grid

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2행 4열 그리드</title>
    <style>
      .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">내용 1</div>
      <div class="item">내용 2</div>
      <div class="item">내용 3</div>
      <div class="item">내용 4</div>
      <div class="item">내용 5</div>
      <div class="item">내용 6</div>
    </div>
  </body>
</html>

👉 display: grid는 해당 요소를 그리드 컨테이너로 만든다.

👉 grid-template-columns: repeat(4, 1fr); 이 속성은 그리드의 열 구조를 정의한다. 네 개의 동일한 크기의 열을 만들고 1fr은 사용가능한 fraction을 의미한다. 열은 사용 가능한 가로 공간을 4등분한다.

👉 grid-template-rows: repeat(2, 1fr); 이 속성은 그리드의 행 구조를 정의한다. 두 개의 동일한 크기의 행을 만들고 1fr은 사용가능한 fraction을 의미한다. 행은 사용 가능한 세로 공간을 2등분한다.

👉 grid-gap:20px 은 그리드 아이템들 사이의 간격을 정의한다.

3️⃣ transform과 animation

👉 transform: 이 속성은 요소를 변형시키는 데 사용된다. 이 변형은 이동(translate), 확대/축소(scale), 회전(rotate),등을 포함한다. 예를 들어, 요소를 오른쪽으로 50px, 아래로 100px 이동시키려면 transform: translate(50px, 100px);를 사용할 수 있다. 마찬가지로 요소를 두 배로 확대하려면 transform: scale(2);를 사용하면 되고, 요소를 45도 회전시키려면 transform: rotate(45deg);를 사용하면 됩니다. 여러 변형을 동시에 적용하려면 그냥 한 줄에 나열하면 된다. 예를 들어, transform: translate(50px, 100px) scale(2) rotate(45deg);.

👉 animation :이 속성은 애니메이션을 만드는 데 사용된다. 애니메이션은 키 프레임(@keyframes)을 정의하여 사용한다. 키 프레임은 애니메이션의 여러 단계를 나타내며, 각 단계에서 요소의 스타일을 정의한다. 예를 들어, 요소의 배경색을 2초 동안 빨간색에서 파란색으로 변경하는 애니메이션을 만들고 싶다면, 다음과 같이 작성한다.

@keyframes change-color {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

.my-element {
  animation: change-color 2s;
}

이 코드에서 change-color는 에니메이션의 이름이고, 2s는 에니메이션의 전체 시간이다. from은 에니메이션의 시작 상태를, to는 에니메이션의 종료 상태를 나타낸다.

4️⃣ ::before과 ::after 차이

👉 ::before와 ::after는 가상 요소라고 부르며, 선택한 요소의 내용 앞이나 뒤에 콘텐츠를 삽입하는 데 사용된다.

👉 ::before: 이 가상 요소는 선택한 요소의 내용 앞에 콘텐츠를 삽입한다. 예를 들어, 각 헤딩 앞에 자동으로 별표를 추가하려면 다음과 같이 작성할 수 있다

h2::before {
  content: "* ";
}

👉 ::after: 이 가상 요소는 선택한 요소의 내용 뒤에 콘텐츠를 삽입한다. 예를 들어, 각 링크 뒤에 화살표를 추가하려면 다음과 같이 작성할 수 있다.

a::after {
  content: " →";
}

👉 둘 다 텍스트나 인라인 요소의 앞이나 뒤에만 삽입할 수 있다. 그리고 꼭 content 속성을 지정해야 한다. 텍스트나, 이미지 or 아무것도 없어서 "" 공백만 남길 수 있다.

5️⃣ transition

👉 transition은 CSS 속성의 변화를 부드럽게 만드는 데 사용된다. 즉, 한 상태에서 다른 상태로 요소를 애니메이션화한다. 예를 들어, 버튼에 마우스를 올렸을 때 배경색이 부드럽게 변경되도록 만드는 것이다.

👉 transition 속성에는 최대 네 가지 값을 지정할 수 있다.

ransition-property: 변화를 줄 CSS 속성을 지정한다. 예를 들어 background-color, height, width 등이 될 수 있다. 모든 속성에 대해 전환을 적용하려면 all을 사용할 수 있다.
transition-duration: 전환 효과의 지속 시간을 지정한다. 이 값은 일반적으로 초(s)나 밀리초(ms)로 표시된다.
transition-timing-function: 속성 값의 중간 상태를 계산하는 방법을 지정한다. 이는 전환 효과가 시작과 끝에서 얼마나 빠르게 진행되는지 결정한다다. 일반적인 값으로는 linear, ease, ease-in, ease-out, ease-in-out 등이 있다.
transition-delay: 전환 효과가 시작하기 전에 대기하는 시간을 지정한다.

예를 들어, 배경색이 2초 동안 부드럽게 파란색에서 빨간색으로 변경되도록 만들려면 다음과 같이 작성할 수 있다.

div {
  background-color: blue;
  transition: background-color 2s;
}

div:hover {
  background-color: red;
}

❗️느낀점

👉 어제 html 그리고 오늘 css 수업을 들으면서 내가 생각보다 잘 알지 못하고 그냥 쓰고 있었다는 것을 깨달았다. 들을수록 새로운 부분도 많고 더 깊게 알아가는 과정을 가져서 너무 좋다.

👉 mdn 문서를 적극적으로 활용하면서 다양한 것을 직접 만들어봐야겠다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.