html_pr06) style.css Code Review

https://mywebproject.tistory.com/93

HTML 훈련 - (6) Product Card

 

 

@import url(https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

* {
  margin: 0;
  box-sizing: border-box;
  letter-spacing: -0.03em;
}

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

.product-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 48px 24px;
  border-radius: 4px;
  background-color: #fff;
}

.product-card:hover .product-card-image::after {
  box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.4);
}

.product-card-image {
  order: 1;
  position: relative;
}

.product-card-image img {
  position: relative;
  z-index: 1;
  border-radius: 5px;
}

.product-card-image::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 8px;
  width: 75%;
  height: 0;
  padding-bottom: 75%;
  transform: translateX(-50%);
  background-color: #fff;
  transition: box-shadow 250ms ease-in;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.65);
}

.product-card-title {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.product-card-title h1 {
  font-size: 18px;
  line-height: 1.3333333333;
  color: #212529;
}

.product-card-title strong {
  padding: 0 5px 0 4px;
  border-radius: 4px;
  margin-left: 8px;
  font-size: 13px;
  line-height: 20px;
  color: #fff;
  background-color: #0257c7;
}

.product-card-author {
  order: 2;
  margin: 8px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #80868e;
}

.product-card-review {
  order: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: -4px;
  font-size: 14px;
}

.fas {
  color: #ffcf14;
  margin-right: -1px;
}

 

 

Analysis

 

 

* {
  margin: 0;
  box-sizing: border-box;
  letter-spacing: -0.03em;
}

 

• letter-spacing

글자 사이의 간격 조정.

 

/* 키워드 값 */
letter-spacing: normal;

/* <length> 값 */
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

/* 전역 값 */
letter-spacing: inherit;
letter-spacing: initial;
letter-spacing: unset;

value로 올 수 있는 값은 키워드값 / length값 / 전역값 이 있다.

 

 

html {
  font-family: "SpoqaHanSans";
  font-size: 16px;
  line-height: 1.5;
  color: #1f2d3d;
}

• line-height 

-줄 높이를 정하는 속성

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

 

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

 

 

 

 

+) html 선택자랑 * 선택자의 차이는?

 

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

flex box의 컨테이너에 해당 = body 선택자

 

 

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

 

https://mywebproject.tistory.com/69

CSS3 - flex (positioning)

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

 

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

 

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

 

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

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

 

++) 참고 - margin / padding / border 그리고 height와 width 

 

image cr: https://nulab.com/blog/tech/css-basics-for-engineer-boxmodel/

 

 

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

https://mywebproject.tistory.com/86

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

 

html의 가상요소/가상클래스에 대한 내용은 위 포스팅에 작성해두었다.

 

가상 요소(Pseudo-Element)

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

 

--> 위 예제에서는 가상요소중 하나인 ::after을 이용했다.

::after

요소의 컨텐츠 끝부분

after과 before의 경우에는 content 속성이 필요하다.

 

html문서를 보면, 전체를 div class=product-card로 감싸주고,

image / title / author / review 부분으로 각각 나눠준 구조이다.

 

 

**

 

product-card-author이 위로 어떻게 올라왔는지?

-> CSS의 flex의 속성중 하나인 order로 순서를 바꿔주었다.

 

1. 우선 body를 flex box의 컨테이너로 지정

2. product-card 자체를 flex box의 아이템으로 지정

3. product-card-image / product-card-title / product-card-author을 그 하위요소이므로

order 속성을 이용해서 순서를 바꿔줌.

 

 

.product-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  
  
.product-card-image {
  order: 1;



.product-card-title {
  order: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;



.product-card-author {
  order: 2;
  
  
  
.product-card-review {
  order: 4;
  display: flex;
  justify-content: center;
  align-items: center;

 

 

추후 포스팅 예정 - flex의 order과 position: absolute

 

 

 

---

 

 

REFERENCE (style.css)

https://github.com/rohjs/bugless-101/blob/master/html-practice/06-product-card/styles.css

 

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