choiiis

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

🍊 CSS활용

1. CSS(Cascading Style Sheets)

CSS란?

  • 한 번에 여러 웹 페이지의 레이아웃을 제어 할 수 있음.
  • 외부 스타일시트는 CSS파일에 저장됨.
  • Cascading: 연속화 (cascade: 폭포)

HTML5의 기본 요소

  • HTML 문서는 기본적으로 엘리먼트들이 모여 있는 공간

CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용됨
우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Casecade라는 단어가 붙음.

CSS 작성방법

  • Selector(선택기)는 스타일을 지정할 HTML요소를 가리킴
  • 선언 블록에는 세미콜론으로 구분된 하나 이상의 선언이 포함
  • 각 선언에서 콜론으로 구분된 CSS 속성 이름과 값이 포함
  • 여러 CSS 선언은 세미콜론으로 구분됨, 선언 블록은 중괄호

CSS Selector

  • CSS 선택기는 스타일을 지정할 HTML요소를 찾는(또는 선택하는)데 사용 됨.
p {
  text-align: center;
  color: red;
}
  • 요소 선택기는 요소 이름을 기반으로 HTML요소를 선택
#para1 {
  text-align: center;
  color: red;
}
  • id 선택자는 HTML요소의 id속성을 사용하여 특정 요소를 선택
  • 요소의 id는 페이지 내에서 고유함 id선택기는 하나의 고유한 요소를 선택하는 데 사용
  • 특정 id를 가진 요소를 선택하려면 해시(#) 문자 뒤에 요소의 id를 씀
.center {
  text-align: center;
  color: red;
}
  • 클래스 선택기는 특정 클래스 속성을 가진 HTML요소를 선택
  • 특정 클래스의 요소를 선택하려면 마침표(.) 문자와 클래스 이름을 씀
h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}
  • 코드를 최소화 하려면 선택기를 그룹화하는 것이 좋다.
  • 선택기를 그룹화 하려면 각 선택기를 쉼표로 구분

예시 👇🏻

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

CSS 삽입하는 법

HTML이 웹 문서의 뼈대를 만드는 것
CSS는 색상, 크기, 이미지 등 디자인 요소 담당

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

h1 {
  color: maroon;
  margin-left:40px;
}
</style>
</head>
<body>
</body>
  1. 외부 스타일 시트를 import하여 사용
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">
  1. 인라인 스타일 시트: html 파일에서 스타일 직정 지정
<h1 style="color: blue; margin-left: 30px;">This us a heading</h1>

인라인 스타일은 우선 순위가 가장 높음, 외부 및 내부 스타일과 브라우저 기본값을 재정의

내부 CSS

단일 HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일 시트를 사용할 수 있음.
내부 스타일은 

<!DOCTYPE html>
<html lang="ko">
<head>
<style>
  body {
    background-color: linen;
  }

  h1{
    color: maroon;
    margin-left: 40px; 
  }
</style>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

외부 CSS

외부 스타일 시트를 사용하면 파일 하나만 변경하여 전체 웹 사이트의 모양을 변경 할 수 있음.
각 HTML페이지는 헤드 섹션 내부의 요소 내부에 외부 스타일 시트 파일에 대한 참조를 포함해야함

<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

body {
  background-color: linen;
}

h1{
  color: maroon;
  margin-left: 40px; 
}
  • 외부 스타일 시트는 모든 텍스트 편집기에서 작성할 수 있음(.css 확장자로 저장)
  • 외부 .css 파일에는 HTML 태그가 포함되면 안됌

CSS 우선 적용 순위

같은 요소에 다른 CSS 속성이 중복 설정되어 있을때, 우선 적용 순서

  1. 속성값 뒤에 !important가 붙어 있는 속성
  2. 인라인 스타일로 적용되어 있는 속성
  3. 선택자에 id가 쓰인 속성
  4. class, attribute, pseudo-class로 지정한 속성
  5. 태그 이름으로 지정한 속성
  6. 부모 요소에 의해 상속된 속성

기본 디자인 요소 Review

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

CSS 테두리 스타일

속성 border-style은 표시할 테두리 종류를 지정

  • dotted: 점선 테두리 정의
  • dashed: 점선 테두리 정의
  • solid: 솔리드 테두리 정의
  • double: 이중 테두리 정의
  • groove: 3D 그루브 테두리 정의
  • ridge: 3D 능선 테두리 정의
  • inset: 3D 삽입 테두리 정의
  • outset: 3D 아웃셋 테두리 정의
  • none: 경계를 정의하지 않음
  • hidden: 숨겨진 테두리 정의

height 및 속성 width은 요소의 높이와 너비
높이 및 너비 속성에는 패딩, 테두리 또는 여백이 포함X
요소의 패딩, 테두리 및 여백 내부 영역의 높이/너비를 설정

  • auto: 기본값
  • length: 높이/너비를 px,cm 등으로 정의
  • %: 컨테이닝 블록의 백분율로 높이/너비를 정의
  • initial: 높이/너비
  • inherit: 높이/너비는 부모 값에서 상속

CSS 박스 모델

  • CSS에서 “상자 모델”이라는 용어는 디자인과 레이아웃을 말할 때 사용
  • CSS 상자 모델은 기본적으로 모든 HTML요소를 감싸는 상자(여백, 테두리, 패딩 및 실제 콘텐츠로 구성)

CSS 높이 및 너비 값

border-radius 속성은 요소에 둥근 테두리를 추가하는 데 사용

p {
    border: 2px solid red;
    border-radius: 5px;
  }

CSS 아이콘

<!DOCTYPE html>
<html>

<head>
<script src="https://kit.fontawesome.com/a076d0599.js" crossorigin="anonymous"></script>
</head>

<body>
  <i class="fas fa-cloud"></i>
  <i class="fas fa-heart"></i>
  <i class="fas fa-car"></i>
  <i class="fas fa-file"></i>
  <i class="fas fa-bars"></i>
</body>

</html>

CSS Google 글꼴 사용방법

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

CSS 레이아웃 - 위치 속성

position속성은 요소에 사용되는 위치 지정 방법 유형을 지정

위치 속성 position은 요소에 사용되는 위치 지정 방법의 유형을 지정

  • static
  • relative
  • fixed
  • absolute
  • Sticky

position 속성을 먼저 설정하지 않으면 작동X
위치 값에 따라 다르게 작동

CSS 레이아웃 - static

div.static {
  position: static;
  border: 3px solid #73AD21
}

HTML 요소는 기본적으로 정적으로 배치
정적으로 배치된 요소는 top, bottom, left 및 right 속성의 영향X

CSS 레이아웃 - relative

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21
}

정상 위치를 기준으로 배치
상대적으로 배치된 요소의 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 원래 위치에서 벗어나 조정
다른 콘텐츠는 요소가 남긴 간격에 맞게 조정X

CSS 레이아웃 - absolute

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21
}

가장 가까운 위치에 있는 조상을 기준으로 위치가 지정됨(고정된 것처럼 뷰포트를 기준으로 위치 지정되는 대신).

하지만, 절대 위치 지정 요소에 위치 지정 조상이 없으면 문서 본문을 사용하고 페이지 스크롤과 함께 이동

CSS 기본 선택자 Review

Selector 예제 설명
#id #name id가 name인 요소를 선택
.class .intro class가 intro인 요소를 선택
* * 모든 요소 선택
element p 모든 <p> 요소를 선택
element, element div, p 모든 <p>, <div> 요소를 선택
element > element div > p 부모가 <div>요소인 모든 <p> 요소를 선택
element + element div + p <div>요소 바로 뒤에 배치되는 첫번째 <p> 요소를 선택

자주쓰는 CSS Pseudo-class Selector

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

CSS Grid와 table-cell의 차이점

Grid

  • CSS Grid는 그리드 기반의 레이아웃 시스템, 요소들을 그리드로 배치할 수 있음
  • 그리드 컨테이너와 그리드 아이템을 정의하여 유연한 레이아웃을 구성할 수 있음
  • 그리드 아이템들은 자유롭게 배치될 수 있으며, 행과 열의 크기를 조정 및 정렬 가능
  • 그리드는 반응형 레이아웃을 쉽게 구성할 수 있는 강력한 기능 제공

CSS table-cell

  • CSS table-cell은 테이블의 셀(cell) 요소를 이용하여 레이아웃을 구성하는 방식
  • 테이블 구조를 사용하여 요소들을 행과 열로 정렬하며, 행과 열의 크기는 자동으로 조정
  • 테이블은 일반적으로 데이터 표시를 위해 사용되며, 특정한 테이블 구조를 갖고 있음
  • 테이블 요소를 사용하여 레이아웃을 구성하면 행과 열 간의 정 렬과 셀 간의 간격 조정이 쉽다

결론적으로 CSS Grid는 좀 더 유연하고 강력한 레이아웃 시스템을 제공
table-cell은 주로 테이블 형태의 데이터를 표시

2. 과제 - 내 프로필 만들기 - html, css, js

HTML

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Profile</title>
  <link rel="icon" href="image/favicon.png">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;700&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="css/style.css">
  <script defer src="./js/index.js"></script>
</head>

<body>
  <div id="container">
    <header>
      <nav class="menu">
        <ul>
          <li><a href="#about">About</a></li>
          <li><a href="#timeline">Timeline</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </header>

    <section>
      <article id="about">
        <div>
          <img src="image/meee.png" alt="프로필 사진">
          <h1>🍊🍊🍊</h1>
          <p>배움을 즐기고, 여러방면의 성장을 좋아합니다.</p>
          <p>새로운 것과 변화에 두려움이 없으며 함께 성장하는 것에 관심이 있습니다.</p>
        </div>
      </article>

      <article id="timeline">
        <div class="inner">
          <div>
            <img src="./image/publisher.jpg" alt="">
            <p><span>🍊2019-08 ~ 2020-02🍊</span><br />웹 디자인 & 퍼블리셔 과정 수료</p>
          </div>
          <div>
            <img src="./image/company.jpg" alt="">
            <p><span>🍊2020-02 ~ 2021-06🍊</span><br />퍼블리셔 취업 및 퇴사</p>
          </div>
          <div>
            <img src="./image/full_stack.jpg" alt="">
            <p><span>🍊2022-03 ~ 2022-08🍊</span><br />풀스택 개발자 양성과정 수료</p>
          </div>
          <div>
            <img src="./image/study.jpg" alt="">
            <p><span>🍊2022-08 ~ 2022-10🍊</span><br />[스터디] Spring 프로젝트 진행</p>
          </div>
          <div>
            <img src="./image/front.jpg" alt="">
            <p><span>🍊2023-01 ~ 2023-05🍊</span><br />메가테라 프론트엔드 생존코스 수료</p>
          </div>
          <div>
            <img src="./image/camp.jpg" alt="">
            <p><span>🍊2023-06 ~ ing🍊</span><br />10주 완성! 프로젝트 캠프(프론트엔드 리액트)</p>
          </div>
        </div>
      </article>

      <article id="contact">
        <div>
          <img src="./image/favicon.png" alt="">
          <a href="https://ji-yoon98.github.io/">BLOG</a>
          <a href="mailto:nmjk0123@gmail.com">GMAIL</a>
          <a href="https://github.com/Ji-Yoon98">GITHUB</a>
        </div>
      </article>
    </section>
  </div>
</body>

</html>

CSS

a { text-decoration: none;}

#container{
  width:100%;
  height:100vh; 
  overflow: auto;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

/* Header */
header {
  width: 100%;
  position: fixed;
}

.menu {
  margin: 0 auto;
  width: 800px;
}

.menu ul { 
  display: flex;
  justify-content:space-between;
  align-items: center;
  margin-top: 50px;
}

.menu ul li a {
  font-size: 26px;
  font-weight: bold;
  color: #000;
  font-family: 'Frank Ruhl Libre', serif;
}

/* article 공통 */
article {
    width:100%; 
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: center;
}

/* About */
#about {
  background-color: #F9F5E7;
  text-align: center;
}

#about img {
  width: 70%;
  border: 5px solid #FF822D;
  border-radius: 100%;
  margin-bottom: 40px;
}

#about p {
  font-size: 22px;
  padding-top: 25px;
  font-weight: bold;
}

/* Timeline */
#timeline {
  background-color: #e0d8cc;
  background-size: cover;
  background-attachment: fixed; 
  background-position: center; 
  text-align: center;
}

#timeline .inner {
  width: 1700px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
#timeline .inner div {
  width: 30%;
  padding-top: 50px;
}

#timeline .inner img {
  width: 500px;
  height: 300px;
  border-radius: 10px;
  transform: scale(0.9);
  transition: all 0.2s;
}

#timeline .inner img:hover {
  transform: scale(1);
}

#timeline .inner span {
  font-weight: bold;
  line-height: 30px;
}

/* Contact */
#contact {
  background-color: #F8EAD8;
  text-align: center;
}

#contact img {
  display: block;
  margin: 0 auto;
  margin-bottom: 100px;
  transform: scale(0.9);
  transition: all 0.2s;
}

#contact img:hover {
  transform: scale(1);
}


#contact a {
  font-size: 40px;
  font-weight: bold;
  font-family: 'Frank Ruhl Libre', serif;
  padding: 0 140px;
  font-style: italic;
  color:#000;
}

#contact a:hover {
  color:#FF822D;
}

/* menu click style */
.menu_active {
  color:#FF822D !important;
  text-decoration: underline;
}

js

let currentMenu;
let menu = document.querySelector('.menu');

function handleClick(e) {
  if(currentMenu) {
    currentMenu.classList.remove('menu_active');
  }

  e.target.classList.add('menu_active');
  currentMenu = e.target;
};

menu.addEventListener('click', handleClick);

결과

1

3. 회고

CSS에 대해 복습하는 시간이었다. 오랜만에 써보는 거다 보니 헷갈리는게 좀 많았던거 같다 그래도 기본적인건 아직 잊지 않아서 다행!
오늘 과제는 내 프로필을 만드는 거였다. 저번에 실습시간에 짰었던 내용을 기반으로 다시 만들어 봤다.
배경색을 고르느라 애먹었지만 그래도 잘 고른거 같다고 생각한다..?ㅎ
html, css, js는 금방했는데 내용 넣어야 할 것들을 뭘 넣어야 할지 많이 고민했다.
근데 딱히 진짜 뭘 넣어야 할지 몰라서 그냥 아주 간단하게만 만들어서 넣었는데 괜찮은지 잘 모르겠음
전체적인 컨셉은 내가 만든 파비콘을 기반으로 했다! 내 파비콘은 오렌지지만 대부분의 사람들이 귤로 앎..🥲


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

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프

Leave a comment

You may also enjoy

MZT_Project

✨휴대폰 판매 쇼핑몰✨