[유데미X스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) - 8일차 CSS

이율곡·2023년 6월 14일
React부트캠프스나이퍼팩토리유데미프론트엔드(React/리액트)
0

부트캠프

목록 보기
8/37
post-thumbnail

8일차

8일차는 CSS 강의를 들었다. 프론트엔드를 함에 있어 이미지를 그려주는 역할이다. 개인적으로 CSS는 매우 중요한 역할이고 큰 부분을 차지하고 있다고 생각한다. 그래서 이번 강의는 기초적인 부분도 있지만 개인적으로는 잘 활용하는 것에 목표를 두어 공부를 했다.

기초를 다진 후 잘 활용하는 것을 우선으로 진행하기!🫢

git: https://github.com/leeyulgok/Day3/tree/main/%EC%8B%A4%EC%8A%B5

위의 링크는 오늘 공부한 내용을 기록한 git이다.

CSS

우선 CSS란? "Cascading Style Sheets"의 약자로, 웹 페이지의 디자인과 레이아웃을 정의하기 위해 사용되는 스타일 시트 언어다.

사용방법

CSS 사용방법은 크게 3가지 방법으로 나눌 수 있다. 요소기반, id기반, 클래스 기반이다. 각 사용방법마다 특징이 존재한다.

1. 요소기반

	h1 {
    	text-align: center;
    }

요소 기반의 CSS는 모든 요소에 스타일을 준다. 이 방법은 거의 사용되지 않는다. 코드를 해석하면 모든 h1 요소는 텍스트를 가운데 정렬하도록 한다.

2. id 기반

	#myHeader {
    	color: red;
    }

id 기반의 CSS는 id를 갖고 있는 요소의 스타일을 준다. #을 통해 사용하며, id는 한 가지만 존재가 가능하다. 중복될 수 없다는 얘기다. 그래서 단 하나의 태그만 스타일을 줄 때 사용한다. 코드는 myHeader라는 id를 가진 요소의 색을 붉은 색으로 줬다.

3. 클래스 기반

	.container {
    	margin: 0;
        padding: 0;
    }

클래스 기반은 .을 사용하여 나타내고 class를 갖고 있는 모든 태그에 적용이 된다. 주로 div태그에 사용되는 경우가 많고, 블록들을 스타일할 때 사용된다. 위의 코드를 살펴보면 container 클래스를 갖고 있는 모든 태그에 margin과 padding을 0으로 설정했다.

삽입방법

삽입 방법은 크게 내부, 외부, 인라인으로 나눌 수 있다. 주로 외부 > 내부 > 인라인 순서로 사용된다.

1. 내부 스타일 시트

<style>
  p { color : red }
</style>

내부 스타일 시트는 html에 head 태그 안쪽에 style 태그를 주어 사용된다. 이 삽입 방식은 주로 크지 않은 프로젝트나 간단한 웹 페이지를 만들 때 사용된다.

2. 외부 스타일 시트

<link rel="stylesheet" href="styles.css">

3. 인라인 스타일 시트

<p style="font-size: 24px;">하하</p>

가장 사용되지 않는 방법 중 하나이다. 태그 안쪽에 style 속성을 통해 스타일을 주는 방식인데, 이는 코드의 역할을 분리하지 않아 코드를 더 어지럽게 보이게 한다. 인라인 스타일이 사용될 때는 작은 한 부분에만 변화를 줄 때 사용한다.

과제

이번 과제는 자기소개 홈페이지를 만드는 것이다. 그래서 이번에 만든 홈페이지를 간단하게 올려보려 한다.

git : https://github.com/leeyulgok/Day3/blob/main/%EC%8B%A4%EC%8A%B5/practice1.html

코드를 올리면 너무 길 것 같아서 우선 git 링크를 남겼다.

이미지

꾸민 자기소개 페이지는 아래의 이미지와 같다.


특별하게 꾸민 것은 없지만 깔끔하게 해보았다.

실습

오늘 배운 내용 중 실습한 부분을 기록하려 한다. 대단한 건 아니지만, 기록해봄으로써 나중에 이 글을 봤을 때 이보다 더 성장해야겠다.

내용

오늘의 주된 실습은 스나이퍼팩토리의 홈페이지의 일부분을 CSS로 표현하는 실습을 했다. 상단의 네비게이션 바부터 교육과정까지 진행했다. 나는 그 중 교육과정란을 기록하려 한다.

스파이퍼팩토리 홈페이지 : https://sniperfactory.com/

이미지

일단 내가 만든 교육과정은 아래의 사진과 같다.

이런 느낌으로 만들었다. 완전 똑같지는 않지만, 나름 비슷하게 흉내를 내보았다.

코드

이 사진을 만든 코드이다. html과 css코드라 나눴다.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>교육과정</title>
    <link rel="stylesheet" href="./practice3.css">
    <script src="https://kit.fontawesome.com/a6428546b2.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="containers">
        <div class="container">
            <div class="container-image">
                <img src="../counselingCorgi.webp" alt="교육과정">
            </div>
            <div class="container-content">
                <div class="content-head">
                    <h3>제목</h3>
                </div>
                <div class="content-des">
                    <p>내용</p>
                </div>
                <div class="content-icon">
                    <a>기수 #기<i class="fa-solid fa-rocket"></i></a>
                </div>
            </div>
            <button>더 알아보기</button>
        </div>
    </div>
</body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  .containers {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .container-image img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
  }

  .container-image:hover img {
    transform: translateY(-5px);
  }

  .container-content {
    width: 100%;
    margin-top: 20px;
    text-align: left;
  }

  .content-head h3 {
    font-size: 18px;
    margin: 0;
  }

  .content-des {
    margin-top: 10px;
  }

  .content-des p {
    font-size: 14px;
    margin: 0;
  }

  .content-icon {
    text-align: right;
    margin-top: 10px;
  }

  .content-icon a {
    font-size: 12px;
  }

  button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #ff6600;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  button:hover {
    background-color: #ff4500;
  }

별 거 내용 없다고 생각했지만, 생각보다 많은 양을 차지하고 있다. CSS를 해보면서 느낀점이 있다. 그건 바로 단락과 블록을 잘 나누는 것이다. 그것만 잘하면 CSS도 크게 어렵지 않고, 어렵다면 유명한 홈페이지들을 들어가서 검사로 어떤 블록으로 되어 있는지 확인하는 노력을 하면 더 쉽게 다가갈 수 있다고 생각한다.

정리하기

CSS를 활용 잘하는 사람이 잘 해보인다.

웹 페이지를 구성하는 요소 중 하나인 CSS는 꽃이라고 할 수는 없다. 하지만 꽃을 꾸미게 하는 큰 요소기 때문에 잘 사용하면 매우 이쁜 꽃을 만들 수 있게 한다.

8일차 강의를 통해서 CSS에 대해 공부하고 다양한 요소들에 대해 알 수 있었다. 이는 알고 있는 것만으로 좋은 것은 아니고 내가 어떻게 활용할 줄 아는 것이다. 그렇기 때문에 스스로 다양한 웹 페이지를 만들어보고 요소들을 사용해 보면서 익혀야 하는 것이 중요하다고 할 수 있다.

CSS는 나에게 있어 부족한 부분이지만 오늘 강의를 통해 세세하게 알게 되었고, 잘 활용할 줄 아는 개발자가 되고 싶다.

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프

profile
이율곡
음악을 좋아하는 사람이 음악을 만들 듯, 개발을 좋아하게 될 사람이 쓰는 개발이야기
이전 포스트

[유데미X스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) - 7일차 HTML 클론코딩 및 Git강의

다음 포스트

[유데미X스나이퍼팩토리] 10주 완성 프로젝트 캠프 프론트엔드(리액트/react) - 9일차 CSS 및 git

0개의 댓글