코드스테이츠-부트캠프 (CSS-기초)

김희목·2024년 2월 24일
CSS코드스테이츠프론트엔드
0

코드스테이츠

목록 보기
3/56
post-custom-banner

Section1. Unit3 [css]기초

Chapter1-1 CSS와 프론트엔드 개발

CSS = 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어입니다.

HTML로 웹 페이지의 구조를 잘 세우고 나서, CSS로 UI 및 레이아웃을 적절히 구성하면 멋진 웹 페이지를 완성할 수 있습니다.

사용자 인터페이스(UI)

인터페이스란 - 컴퓨터와 교류하기 위한 연결고리

사용자 인터페이스란 - 일반 사용자가 쉽게 사용할 수 있는 인터페이스 즉 UI

직관적이고 쉬운 UI 제작은 프론트엔드 개발자의 기본 소양

  • 아무리 훌륭한 내부 기능을 갖고 있더라도, UI가 없으면 소용이 없다. 즉, 사용자가 애플리케이션을 사용하게 하려면
    UI가 꼭 필요합니다.

좋은 사용자 경험(UX)

  • 복잡한 내용을 단순하게 구분 짓고 페이지를 나누어 사용자가 한 페이지에서 볼 수 있도록 디자인

웹 페이지 제작을 위한 역략
1. 컴포넌트 기능별로 묶어서 제작
2. 화면의 구성이나 배치 (레이아웃 디자인)
3. 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

Chapter1-2 CSS 따라하기

텍스트의 가운데 정렬을 하기 위한 속성은 무엇인가요?
= text-align 속성을 사용하여 center 의 속성값을 넣어 사용

글자 색을 바꾸기 위한 속성은 무엇인가요?
= color의 속성명을 넣어 원하는 색상의 속성값을 넣어 사용

배경 색을 바꾸기 위한 속성은 무엇인가요?
= background-color의 속성명을 넣어 원하는 색상의 속성값을 넣어 사용

background 속성과 background-color 속성은 어떻게 다른가요?
= 둘다 배경 색상을 지정할 수 있다. 그러나 background-color는 색깔만 지정할 수 있는 반면 , background 는 컬러 외에 다른 옵션들까지
사용할 수있다. 기본적으로 color/ image / repeat / attachment 등 다른 옵션을 부과 가능함

em의 의미는 무엇인가요?

= 속성값중 상대단위로 글자크기와 같은 것들을 선태갛여 지정할 수 있게 하는 단위

CSS 파일 추가

  • link rel="styleshett" href="index.css" /

CSS 내용

  • body {
    color : red;
    font-size : 30px;
    }

id로 이름을 붙여 사용할 경우 css에서는 #을 붙여 사용한다

class로 이름을 붙여 사용할 경우 .확장자명 을 사용하여 지정한다.

Chapter1-3 텍스트 꾸미기

color = 색상 변경 (글자색상)

background-color = 배경색상

border-color = 테두리 색상

font-family = 글꼴

font-size = 글자 크기

font-weight = 글자 굵기

text-decoration = 밑줄, 가로줄

letter-spacing = 자간

line-height = 행간

text-align = 정렬

Chapter1-4 절대 단위와 상대 단위

절대 단위 = pt ,px, cm, mm

상대 단위 : %, em, rem , ch, vw, vh

글꼴 사이즈의 경우

  1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 경우 - px을 사용(절대 단위)

  2. 일반적인 경우 - rem을 사용 (상대 단위)

화면 사이즈를 정할 때

  1. 반응형 웹에서 기준점을 만들떄
  • 세로모드, 데스크탑, 가로모드 등등 디바이스 크기별로 css를 달리 적용 이때 기준은 px로 정한다.
  1. 화면 너비나 높이에 따른 상대적인 크키가 중요한 경우
  • 이때에는 vw,vh 를 사용한다 /

Chapter 2-1 박스모델 기초

HTML - BODY - DIV#CONTAINER - [ HEADER - H1,H2 ] , [NAV - UL - LI - A ] , [FIGURE - A - LMG - FIGCAPTION ] , [FOOTER]

질문
1. 위 HTML에서 줄 바꿈이 적용되는 요소는 무엇인가요? 줄 바꿈이 적용되지 않은 요소는 무엇인가요?
= span 태그

  1. 위 CSS 코드에서 실제로 작동하지 않는 것이 존재합니다. 무엇일까요?
    = span 속성값에서 width값과 height 값이 작동하지 않았다.

block 요소 대표적인 ex ) = div, p

inline 요소 대표적인 ex ) = span

Chapter 2-2 박스를 구성하는 요소

Margin(바깥 여백) / Border(테두리) / Padding(안쪽 여백) / Content

질문

1.테두리를 점선으로 만들고 싶으면 어떻게 해야 할까요? border-style의 값 중 하나를 바꿔보세요.
= solid 값을 dotted 값으로 변경한다.

2.테두리를 둥근 모서리로 만들 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, border 속성만으로는 둥근 모서리를 만들 수 없습니다.
= border-radius 속성을 사용해야 합니다.

3.박스 바깥쪽에 그림자를 넣을 수도 있습니다. 어떤 속성을 사용하면 되나요? 참고로, 그림자를 명확하게 보기 위해서는 background
속성이 불투명해야 합니다
= box-shadow 속성을 사용해야합니다.

박스크기를 측정을 할 때 border-box를 사용하여 레이아웃 디자인에서 여백과 테두리를 포함하는 계산법을 사용하면 편리하다.

Chapter 3-1 다양한 CSS selector

전체 셀렉터 = * {}

태그 셀렉터 = 같은 태그명을 가진 요소를 선택하여 ex) h1{},div{} / 복수도 가능 ex) section,h1{}

ID셀렉터 = #id명{}

class셀렉터 = .class명{}

attribute 셀렉터
= a[href] { }
p[id="only"] { }
p[class~="out"] { }
p[class|="out"] { }
section[id^="sect"] { }
div[class$="2"] { }
div[class*="w"] { }

자식 셀렉터 = header > div {} = 바로 아래자식인 요소를 선택 부모의 요소 바로 아래에 있는 자식들을 선택

후손 셀렉터 = header div {} = 모든 div 들이 선택

형제 셀렉터 = section ~ p {} = 같은 부모를 공유하면서 첫 번째 입력한 요소 뒤에 오는 두 번재 입력한 요소 모두 선택

인접형제 셀렉터 = section + p {} = 두 번째 입력한 요소를 선택

종합 퀴즈

  • 자기소개 페이지 꾸미기 (css 추가)

자기소개 페이지

html 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>자기소개 페이지 만들기</title>
  <link rel="stylesheet" href="index3.css">
</head>
<body>
  <div>
  <nav>
  <h1>코드스테이츠 45기 김희목입니다</h1>
</nav>
  <img src="totofo.png">
  <main>
  <h4 id="acg">나의 목표</h4>
  <ul>
    <li>자기주도적 학습과 해결능력 키우기</li>
    <li>연봉 3000만원 이상</li>
    <li>주니어 개발자로 성장하기</li>
  </ul>
  <h4 id="atg">목표를 이루기 위한 다짐</h4>
  <ul>
    <li>블로그를 작성하며 아는 것과 모르는 것을 구별하고 복습을 잘할 것</li>
    <li>여러 사람들과 소통을 잘 하고 수업에 잘 따라가기</li>
    <li>모르는 것이 있다면 꼭 질문을 통해 알아갈 것</li>
  </ul>
</main>
</div>
</body>
</html>


css 코드

body {
  background-color:white;
  margin: 50px 50px;

}
div {
  background-color: #f5f5f5;
  border-radius: 20%;
}
nav{
  color:black;
  background-color: white;
  width: 560px;
  height: 60px;
  line-height: 56px;
  text-align: center;
  margin-top: 0%;
  margin-left: 25%;
  border-radius: 20%;
  
}
img {
  margin: auto;
  display: block;
}
h3{
  color: black;
  text-align: center;
}

main {
  background-color: whitesmoke;
  width:  550px;
  height: 320px;
  border-radius: 20px;
  text-align: center;
  margin-left: 25%;

}

#acg{
  color: black;
  font-weight: 700;
  font-size: 24px;
  background-color: white;
  border-radius: 20%;
  margin-left: 10%;
  margin-right: 10%;
}
#atg{
  color: black;
  font-weight: 700;
  font-size: 24px;
  background-color: white;
  border-radius: 20%;
  margin-left: 10%;
  margin-right: 10%;
}
profile
김희목
이전 포스트

코드스테이츠 -부트캠프 (HTML의 기초)

다음 포스트

코드스테이츠 부트캠프 - (HTML/CSS 활용)

post-custom-banner

0개의 댓글