html_pr01) style.css Code Review

https://mywebproject.tistory.com/79

HTML 훈련 - (1) Ad Banner

위 예제에서 사용한 style.css의 코드를 분석해보자.

 

* {
    margin: 0;
    box-sizing: border-box;
  }
  
  html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
      "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #1f2d3d;
  }
  
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    background-color: #1f2d3d;
  }
  
  body::after {
    content: "kimbug©";
    display: block;
    margin-top: 50px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
  }
  
  .modal {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 40px 36px 36px;
    border-radius: 12px;
    background-color: #fff;
    transition: box-shadow 250ms ease-in, transform 250ms ease-in;
  }
  
  .modal:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
  }
  
  h1 {
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #474747;
  }
  
  p {
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    letter-spacing: 0.01em;
  }
  
  a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 320px;
    height: 65px;
    border-radius: 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    background: linear-gradient(90deg, #ff8806 0%, #fb07f3 100%);
  }

 

 

 

 

1. 

 

* {
    margin: 0;
    box-sizing: border-box;
  }

 

box-sizing

box-sizing은 요소의 너비와 높이를 계산하는 방법을 지정함.

 

content-box	기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
border-box	테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.

 

 

2.

  html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
      "Helvetica Neue", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #1f2d3d;
  }

 

 

• font-family

font-family 목록에 최소 한 개의 generic family를 추가해야 하는데,
시스템이나 font-face 규칙을 이용 해 다운로드 받은 폰트 중에 특정 폰트가 있다는 것을 보장할 수 없기 때문.

예>  font-family: Verdana, Arial, Helvetica, sans-serif;

 

• font-size 폰트크기

 

• line-height 

-줄 높이를 정하는 속성

normal : 웹브라우저에서 정한 기본값 length : 길이로 줄 높이 정함 number : 글자 크기의 몇 배인지 percentage : 글자 크기의 몇 %로 initial : 기본값으로 설정 inherit : 부모 요소의 속성값을 상속받음

 

ex> 글자크기가 50px일때, line-height : 1.5           // 1.5배  = 75pxline-height : 80%         // 80%  = 40px

 

 

3. 

 

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    margin: 0 auto;
    background-color: #1f2d3d;
  }

 

• flex

 

https://mywebproject.tistory.com/69

CSS3 - flex (positioning)

 

- 자식요소를 어떻게 배열할지 (방향성) flex-direction

 

row	수평방향(행. 가로) / 좌-우
row-reverse	수평방향(행. 가로) / 우-좌
column	수직방향(열. 세로) / 상-하
column-reverse	수직방향(열. 세로) / 하-상

 

- 아이템간의 여백 or 정렬을 설정해주는 jusify-content

 

flex-start	아이템을 한 덩어리로 묶어, 수평방향 시작 점에 위치시킴
flex-enter	아이템을 한 덩어리로 묶어, 수평방향의 끝 점에 위치시킴
center	아이템을 한 덩어리로 묶어, 수평방향의 중앙에 위치시킴
space-between	아이템을 컨테이너의 양쪽 끝에 맞춰 정렬
space-around	컨테이너의 양쪽 끝을 기준으로 각 아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬

 

- 수직방향으로의 정렬을 설정해주는 align-items

 

** justify-content의 수직버전이라 생각하면 쉽다.

flex-start	아이템을 한 덩어리로 묶어, 수직방향의 시작 점에 위치
flex-enter	아이템을 한 덩어리로 묶어, 수직방향의 끝 점에 위치
center	아이템을 한 덩어리로 묶어, 수직방향의 중앙에 위치
baseline	아이템을 컨테이너의 baseline에 맞춰 정렬
stretch	컨테이너의 양쪽 끝을 기준으로 각 아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬

 

 

 

 

 

4.

body::after {
    content: "kimbug©";
    display: block;
    margin-top: 50px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
  }

 

• ::after

 

가상요소 ::before, ::after

= 가상 요소(Pseudo-Element)

 

가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며,
존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함.

 

 

::first-line	요소의 텍스트 중 첫 줄
::first-letter	요소의 첫번째 글자
::before	요소의 컨텐츠 시작부분
::after	요소의 컨텐츠 끝부분
::selection	요소의 텍스트 중 선택된 영역(drag)
::placeholder	input 필드 힌트 텍스트인 placeholder

 

>> 가상요소 (Psuedo-element) 에 대한 포스팅을 아래에 정리하였다. (+가상 클래스)

 

 

https://mywebproject.tistory.com/86

 

+) 참고 - 모달(modal)은 무엇인가?

 

모들 윈도(Modal Window)는

사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에

사용자의 상호동작을 요구하는 창을 뜻한다.

 

주로 모달 대화상자라고 부름.

 

모달 윈도 - 위키백과, 우리 모두의 백과사전

 

 

** REFERENCE LECTOR

김버그의 HTML&CSS는 재밌다 - 구름EDU

https://github.com/rohjs/bugless-101/blob/practice/html-practice/