[TIL] Day6

공부중인 개발자·2021년 4월 12일
CODESTATESCSS
0

TIL

목록 보기
6/64
post-thumbnail

· What?

CSS 기초

배운것을 기록은 했으나 틀릴 가능성이 매우 높고 수정할 내용이 대다수입니다.

CSS

  • HTML, CSS, 그리고 JS는 웹 어플리케이션을 만드는 세가지의 주축
    그 중에서도 CSS는 스타일링을 담당
  • 콘텐츠의 배치와 위치 (레이아웃 디자인)
  • 텍스트를 강조하거나 밑줄을 치는 등, 최소한의 타이포그래피 (Typography)

프론트 개발자가 되려면

사용자가 웹 서비스를 이용할 때, 크롬과 같은 브라우저에 보이는 부분을 프론트엔드라고 함
프론트엔드를 개발하는, 프론트엔드 개발자는 최소 레이아웃 디자인과 타이포그래피를 할 줄 알아야함

  • 화면의 구성이나 배치 (레이아웃 디자인)
  • 굵은 글씨와 같은 타이포그래피와 색상을 적용하는 일 등

프론트엔드 개발자나 앱 개발자, 백엔드 개발자까지, 자신을 개발자라고 소개할 수 있다면 최소한의 UI는 직접 만들 수 있어야 합니다.

1.CSS 기초실습

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Modern CSS</title>
  <link rel="stylesheet" href="index.css" />
</head>
<body>
<header>This is the header.</header>
<div class="container">
  <nav>
    <h4>This is the navigation section.</h4>
    <ul>
      <li>Home</li>
      <li>Mac</li>
      <li>iPhone</li>
      <li>iPad</li>
    </ul>
  </nav>
  <main>
    <h1>This is the main content.</h1>
    <p>...</p>
  </main>
  <aside>
    <h4>This is an aside section.</h4>
    <p>...</p>
  </aside>
</div>
<footer>
  <ul>
    <li>개인정보 처리방침</li>
    <li>이용 약관</li>
    <li>법적 고지</li>
  </ul>
</footer>
</body>
</html>
  • 시멘틱 태그
    <header> <main> <nav> <aside> <footer> 태그는 <div> 태그와 똑같음
    이름에 의미를 붙여 부르는 태그를 시맨틱 태그라고 함

현재 HTML 파일의 상태

  • CSS를 이용하기
    CSS를 이용하여 영역에 색상을 주고 header, footer 태그의 문자열의 정렬을 바꿈
body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #4a4a4a;
}
header, footer {
  font-size: large;
  text-align: center;
  padding: 0.3em 0;
  background-color: #4a4a4a;
  color: #f9f9f9;
}
nav {
  background: #eee;
}
main {
  background: #f9f9f9;
}
aside {
  background: #eee;
}

CSS의 내용을 살펴보면

  • 셀렉터: 태그이름이나 id, 또는 클래스를 선택, 셀렉터로 특정 요소를 선택했다면, 중괄호 안에서 이 요소에 적용할 내용을 작성
  • 요소에 적용할 수 있는 내용은 속성이라고 함.
    색상, 글자크기 등 다양한 속성이 있음 속성에 적용할 적절한 값을 입력하여 스타일을 표현
    그림에 나타나있는 color: red;는 이 요소의 색상을 빨간색으로 스타일링
    속성과 값의 끝에는 세미콜론(;)을 붙여 속성끼리 구분

body(html body부분을 지정) {
margin: 0; (border 경계 바깥 여백을 0으로)
padding: 0;(border 경계 안 여백을 0으로)
background: #fff; (배경의 색을 #fff색으로)
color: #4a4a4a;(글자색을 #4a4a4a;색으로)
}
header, footer {
font-size: large; (폰트사이즈를 large로)
text-align: center; (텍스트를 가운데 정렬)
padding: 0.3em 0; (경계 안 여백을 상하 0.3em(em: font_size, 해당폰트의 대문자 M의 너비를 기준) 좌우 0으로 지정)
background-color: #4a4a4a;(배경의 색을 #4a4a4a;색으로)
color: #f9f9f9;
}

  • background 와 background-color의 차이점
    background-color는 배경의 색만을 지정하지만 background는 배경의 색외에도 다른 background의 옵션(위치나 이미지등)을 추가하여 넣을 수 있다.

  • CSS 추가

<link rel="stylesheet" href="index.css" />

link 태그는 HTML 파일과 다른 파일을 연결하는 목적으로 사용
rel: 연결하고자하는 파일의 역할이나 특징을 나타냄
CSS(Cascading Style Sheet)는 Style sheet이므로 rel속성에 stylesheet을 추가
href속성에는 파일의 위치를 추가해야 함.
작성한 두 파일은 한 폴더 내에 있으므로 파일이름만 입력
다른 폴더에 파일이 존재하는 경우, 절대경로 또는 상대경로를 입력해 원하는 파일을 찾아 연결할 수 있음

<link rel="stylesheet" href="layout.css" />

위의 link태그를 index.html에 추가해준 뒤 새로운 layout.css를 만든다.

body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
display: flex;
flex: 1;
}
main {
flex: 1;
padding: 0 20px;
}
nav {
flex: 0 0 180px;
padding: 0 10px;
}
aside {
flex: 0 0 130px;
padding: 0 10px;
}

flex 속성은 레이아웃 속성 학습 시 자세하게 알아볼 예정
layout.css를 추가하면

이렇게 영역의 레이아웃이 바뀜

  • CSS 스타일을 적용할 수 있는 방법
    인라인 스타일: 같은 줄에서 스타일을 적용
    내부 스타일 시트: CSS 파일 내에 작성하는 내용을 별도의 파일로 구분하지 않고 style태그 내에 작성
    외부 스타일 시트: 이전에 작성해놓은 index.css나 layout.css 들을 외부스타일 시트라고 함

내부 스타일 시트 예시

<nav style="background: #eee; color: blue">...</nav>

2.기본적인 셀렉터 (selector)

idclass
# 으로 선택.으로 선택
한 문서에 단 하나의 요소에만 적용동일한 값을 갖는 요소 많음
특정 요소에 이름을 붙이는 데 사용스타일의 분류(classification)에 사용

id로 이름 붙여서 스타일링 적용하기

navigation section 아래에 있는 <h4> 요소 바꾸기

h4 {
  color: red;
}

aside section의 <h4> 요소에도 변경한 색상이 적용됨

  • navigation section요소에 id 할당하기
    이름을 붙일 때에는 가능한 의미를 담아서 구분할 수 있도록
    id가 있는 요소를 선택할 때에는 #기호를 이용
    id는 하나의 문서에서 한 요소에만 사용
<h4 id="navigation-title">This is the navigation section.</h4>
#navigation-title {
  color: red;
}

html의 navigation section에 id를 부여한 뒤 부여된 id에 css로 글자색을 넣어주니

aside section에는 변화가 없고 navigation section의 글자색만 변화했다.

class로 스타일을 분류하여 적용하기

navigation section의 항목에 밑줄 치기

li {
  text-decoration: underline;
}


li에 밑줄을 치니 <footer>에도 밑줄이 쳐지는 현상

  • navigation section <li> 요소에 class 부여하기
    navigation section의 모든 li요소에 동일한 class를 추가하면, 동일한 스타일을 여러 엘리먼트에 적용
    class는 #이 아닌 .을 이용해 선택
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>
.menu-item {
  text-decoration: underline;
}

menu-item 클래스의 문자열에 underline을 할당

Navigation section li에만 밑줄이 쳐져있음

여러 개의 class를 하나의 엘리먼트에 적용하기

<li> 요소에 적용된 여러 class 중에서 selected class를 통해 적용된 내용을 확인할 수 있음

<li class="menu-item selected">Home</li>
.selected {
  font-weight: bold;
  color: #009999;
}

Home 이라는 element를 menu-item / selected 변수 2개에 할당

텍스트 꾸미기

  • 색상: 글자의 색상을 변경하는 속성은 color 
.box {
  color: #155724; /* 글자 색상 */
  background-color: #d4edda; /* 배경 색상 */
  border-color: #c3e6cb; /* 테두리 색상 */
}
  • 글꼴: 글꼴의 속성은 font-family
.emphasize {
  font-family: "SF Pro KR", "MalgunGothic", "Verdana";
}

글꼴의 이름은 따옴표를 붙여서 적용가능
사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있음, 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있음
fallback은 표현하고 싶은 글꼴이 없거나 사용할 수 없는 경우를 위한 대비책, fallback을 위해 여러 글꼴을 사용하는 경우, 쉼표로 구분하여 입력할 수 있음 입력된 순서대로 fallback이 적용

  • 웹폰트 : 개발자가 표현하고 싶은 글꼴을 사용자의 기기에 적용할 수 있도록 필요에 따라 웹에서 다운로드 받게 하는 기술
  • 크기: 글자의 크기를 변경하기 위해서는 font-size 속성을 사용
.title {
  font-size: 24px;
}
  • 알아야 할 몇가지 단위
    글꼴의 크기에서는 단위가 무엇보다 중요
    글꼴의 단위는 절대 단위와 상대 단위, 두 가지로 구분
  • 절대 단위: px, pt 등
  • 상대 단위: %, em, rem, ch, vw, vh 등

MDN, w3schools 등에서 단위에 대한 더 많은 정보를 확인할 수 있고 여기에서는 절대 단위와 상대 단위를 비교 그리고 언제, 어떤 단위를 써야하는지 안내

  1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우

    px(픽셀)을 사용
    px은 글꼴의 크기를 고정하는 단위이기 때문에 사용자 접근성이 불리
    픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리

  2. 일반적인 경우

    상대 단위인 rem을 추천
    root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem, 두배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있음
    이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리 (em은 부모 엘리먼트에 따라 상대적으로 크기가 변경되므로 계산이 어렵습니다. 이에 비해 rem은 root의 글자 크기에 따라서만 상대적으로 변합니다.)

  3. 반응형 웹(responsive web)에서 기준점을 만들 때

    반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트
    예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼때, 가로 모드로 볼 때, 태블릿으로 볼 때 등.
    이 때에는 디바이스 크기 별로 CSS를 달리 적용. 이 때, 디바이스 크기를 나누는 기준을 보통 px로 정함

  4. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우

    vw, vh를 사용 추천
    웹사이트의 보여지는 영역: Viewport
    vw, vh는 각각 viewport width와 viewport height을 뜻함. 화면을 가득 채우며 딱 떨어지게 스크롤되는 사이트의 경우 이런 웹 페이지에서 사용하는 방법이 100vw, 100vh를 사용해 구현한 것 (참고로 <body> 태그에서의 %는 HTML이 차지하는 모든 영역, 즉 지금은 보이지 않으나 스크롤했을 때 보이는 영역까지 포함했을 때에 비율입니다.)

  • 기타 스타일링
    굵기: font-weight
    밑줄, 가로줄: text-decoration
    자간: letter-spacing
    행간: line-height
  • 정렬
  • 가로로 정렬할 경우 text-align을 사용 유효한 값으로는 left, right, center, justify(양쪽 정렬)가 있음
  • 세로로 정렬할 경우 vertical-align 속성을 쉽게 떠올릴 수 있지만, 이 속성은 부모 요소의 display 속성이 반드시 table-cell이어야 합니다. 세로 정렬이란, 정렬하고자 하는 글자를 둘러싸고 있는 박스의 높이가, 글자 높이보다 큰 경우에만 적용할 수 있지만 추후 공부를 한 뒤 작성

박스모델

줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)

박스의 종류는 줄바꿈이 되는 박스와 줄바꿈이 없이 옆으로 붙는 박스로 구분가능
줄바꿈이 되는 박스는 block 박스, 줄바꿈이 일어나지 않고, 크기지정을 할 수 없는 박스는 inline 박스
그리고 이 두가지 박스 종류의 특징이 섞인, 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있음

  • Block 요소의 대표적인 예는 <div>, <p>

  • Inline 요소의 대표적인 예는 <span>

span {
  background: yellow;
  display: inline-block;
  width: 100px;
  height: 100px;
}

위의 사례는 <span> 태그에 display속성을 inline-block으로 바꿔준 것으로 줄바꿈은 일어나지 않지만 크기가 width 100px, height 100px이 되는 span이 됨

제목1blockinline-blockinline
줄바꿈 여부줄바꿈이 일어남줄바꿈이 일어나지 않음줄바꿈이 일어나지 않음
기본적으로 갖는 너비(width)100%글자가 차지하는 만큼글자가 차지하는 만큼
width, height 사용 가능여부가능가능불가능

박스를 구성하는 요소

margin : 경계선의 바깥 여백
border : 경계선
padding : 경계선의 안 여백

박스 크기 측정 기준

  • box-sizing을 나누는 기준
    content-box : 콘텐트 영역을 기준으로 크기를 정함
    border-box : 테두리를 기준으로 크기를 정함
    initial : 기본값으로 설정
    inherit : 부모 요소의 속성값을 상속

content-box VS border-box

width: 100px;
height: 100px;
margin: 10px;
border: 10px solid #dddddd;
padding: 10px;

위의 경우 content- box의 box크기는 content의 범위 100 X 100 + border, padding 각각 20 X 20 으로 총 140 X 140px의 크기를 가진다.
border-box의 경우 box의 크기는 100 X 100px 이며 border, padding 을 모두 채우고 난 위 60 X 60px이 content의 범위이다.
margin은 box 바깥의 범위를 이야기하므로 box의 크기와는 무관하다

querySelector

  • html를 js로 바꾸는 작업을 배운다
    document.querySelector().textContent
    빈칸에 태그를 넣으면 태그의 컨텐츠가 나온다
    document.querySelector().textContent = "";
    ""안에 다른 내용을 넣으면 원래의 컨텐츠가 아닌 새롭게 넣은 내용이 나온다

마지막으로...

계산기 제작은 내일 한꺼번에 작성할 예정.
계산기 만들기는 생각보다 많이 어렵다

참고자료
https://developer.mozilla.org/ko/docs/Web/API/Document/querySelector
https://kutar37.tistory.com/entry/CSS-box-sizing-%EC%86%8D%EC%84%B1
https://www.codingfactory.net/10630
https://ofcourse.kr/css-course/margin-padding-%EC%86%8D%EC%84%B1
https://zinee-world.tistory.com/131

profile
공부중인 개발자
열심히 공부하자
이전 포스트

[TIL] Day5

다음 포스트

[TIL] Day8

0개의 댓글