html_pr08) style.css Code Review

https://mywebproject.tistory.com/104

HTML 훈련 - (8) Receipt

 

 

 

@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700&display=swap");

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

html {
  font-family: "Nunito Sans", 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;
}

body > h1 {
  margin-bottom: 32px;
  font-size: 20px;
  line-height: 28px;
  color: #fff;
}

body > h1 span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  opacity: 0.5;
}

body > h1 a {
  color: #fff;
  text-decoration: none;
}

body > h1,
.receipt {
  width: 100%;
  max-width: 320px;
}

.receipt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 32px 32px;
  border-radius: 12px;
  background-color: #fff;
  background-image: url("./assets/logo-mcdonalds.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
  background-position: 91% 28px;
}

.receipt > span {
  order: 1;
  display: block;
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #80868e;
}

.receipt h2 {
  order: 2;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #333e47;
}

.receipt .barcode {
  order: 3;
  width: 120px;
  margin-bottom: 32px;
}

.receipt img {
  width: 100%;
  height: auto;
}

.receipt > div {
  order: 4;
}

.receipt dl {
  width: 100%;
}

.receipt dl div,
.receipt dl:last-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
  color: 333e47;
  opacity: 0.8;
}

.receipt dl:last-child {
  margin-bottom: 16px;
}

.receipt > div {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}

 

 

Analysis

 

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

html {
  font-family: "Nunito Sans", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1f2d3d;
}

전체 기본 설정. 

 

box-sizing

box-sizing은 요소의 너비와 높이를 계산하는 방법을 지정함. -> 보통은 border-box가 좋음

 

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

 

 

+)

html 선택자	태그(요소) 선택자. html 요소에만 스타일 적용.
* 선택자  (= asterisk)	공통선택자. 모든 태그에 스타일 적용 - head, style, body, title, html 등 모두 다 선택. 공통선택자는 모든 요소 및 그 하위 요소를 선택하여 스타일 지정함. -> 클래스 / 아이디와 상관없이 모~든 요소.

 

 

___

 

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;
}

 

body 전체를 flex의 컨테이너로 지정하고,

flex-direction지정해줌.

 

 

flex에 관련된 내용은 아래에 포스팅하였다.

 

https://mywebproject.tistory.com/69

CSS3 - flex (positioning)

-Flexbox로 레이아웃을 잡으면 모바일을 포함한 하이브리드 앱으로 만들때도 별도의 추가작업이 필요하지 않음.

 

Flexbox는, 유연한 요소(내용물)

그리고 그 요소를 담을 그릇으로 이루어짐.

 

 

1. 그릇에 해당하는 부모 요소(=컨테이너) 에 display: flex 를 입력해주어

flexbox임을 선언함.

 

2. 자식요소를 어떻게 배열할지 (방향성) flex-direction을 입력해줌.

 

3. 자식요소를 감싸주는 wrap의 여부를 flex-wrap으로. (아이템의 줄 넘김)

 

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

 

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

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

 

 

 

 

가상요소 after을 이용하여 content를 화면에 출력함.

 

가상요소와 가상클래스에 대한 내용은 아래 포스팅에 정리해두었음.

 

https://mywebproject.tistory.com/86

html) 가상 요소(Pseudo-element)와 가상클래스(Pseudo-class)

 

가상 요소(Pseudo-Element)

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

 

::after

요소의 컨텐츠 끝부분

 

___

 

 

body > h1 {
  margin-bottom: 32px;
  font-size: 20px;
  line-height: 28px;
  color: #fff;
}

body > h1 span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  opacity: 0.5;
}

body > h1 a {
  color: #fff;
  text-decoration: none;
}

body > h1,
.receipt {
  width: 100%;
  max-width: 320px;
}

body의 하위 요소(>) 들을 선택자로 함.

 

 

body > h1 {  body태그를 바로 위 부모요소로 갖는 h1태그

body > h1 span { body 태그를 바로 위 부모요소로 갖는 h1태그의 하위 span

body > h1 a { body 태그를 바로 위 부모요소로 갖는 h1태그의 하위 a

body > h1, .receipt { body 태그를 바로 위 부모요소로 갖는 h1태그 + receipt 클래스 (2개 이상 선택자는 ,로 구분함)

 

- 공백으로 구분하여 사용시

뒤에 나온 선택자가 하위 개체로 지정됨.

 

 

 

 

https://mywebproject.tistory.com/106

CSS) 다중 선택자 (Selector) - 선택자가 여러개일 경우

 

CSS의 다중 선택자에 대해서 정리하여 위에 포스팅하였다.

REF : https://www.w3schools.com/cssref/css_selectors.asp

 

 

 

 

___

 

 

.receipt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 32px 32px;
  border-radius: 12px;
  background-color: #fff;
  background-image: url("./assets/logo-mcdonalds.png");
  background-repeat: no-repeat;
  background-size: 40px auto;
  background-position: 91% 28px;
}

.receipt > span {
  order: 1;
  display: block;
  width: 100%;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #80868e;
}

.receipt h2 {
  order: 2;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #333e47;
}

.receipt .barcode {
  order: 3;
  width: 120px;
  margin-bottom: 32px;
}

.receipt img {
  width: 100%;
  height: auto;
}

.receipt > div {
  order: 4;
}

.receipt dl {
  width: 100%;
}

.receipt dl div,
.receipt dl:last-child {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-size: 14px;
  color: 333e47;
  opacity: 0.8;
}

.receipt dl:last-child {
  margin-bottom: 16px;
}

.receipt > div {
  display: flex;
  flex-direction: column-reverse;
  width: 100%;
}

 

가상 클래스

선택한 요소가 특별한 상태여야 만족할 수 있음.

대표적인 가상 클래스 예.

:link	방문 안한 링크
:visited	방문한 링크
:active	링크 누를때
:hover	링크에 마우스 올릴때
:focus	요소가 포커스될때 (키보드 or 문자입력양식)
:first-child	요소의 첫번째 자식요소
:first-line	블록 요소 문단의 첫번째 줄
:first-letter	블록 요소 첫줄에 첫번째 문자
:before	요소 내용 앞에 추가할 태그 지정 (content 속성 필요)
:after	요소 내용 뒤에 추가할 태그 지정 (content 속성 필요)

 

 

간략한 flex 구조 정리.

 

 

 

body > .receipt > .receipt dl div 

 

 

 

 

 

---

 

 

REFERENCE (style.css)

https://github.com/rohjs/bugless-101/tree/master/html-practice/08-receipt

 

https://edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4

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