html_pr05) style.css Code Review

https://mywebproject.tistory.com/91

HTML 훈련 - (5) BreadCrumb & Pagination

 

Analysis

 

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

 

 

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

 

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

 

보통은 > *로는 margin, box-sizing을 쓰고

html선택자로는 font나 line-height(줄간격), 폰트색(color)등을 지정하는듯.

 

 

___

 

 

 

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

 

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의 수직버전이라 생각하면 쉽다.

 

 

 

 

+) Chrome 개발자도구(F12)를 통해 flex 옵션도 테스트해볼 수 있음.

 

flex 옵션 test

 

flex 박스의 경우

여러개 쓰면

 

box1: flex-direction/justify-content(수평)/align-items(수직)

box2: justify-content(수평)/align-items(수직)

 

이런식으로 해줌. 

 

즉,  자식요소를 어떻게 배열할지 (방향성) 에 대한 flex direction은

flex에서 박스역할(틀)을 하는 부분에만 해줌.

 

 

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

 

가상 요소(Pseudo-Element)

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

 

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

::after

요소의 컨텐츠 끝부분

 

content는 단독으로 사용하지 않고, 가상요소(::after과 같은)와 함께 사용함. - 내용이 들어갈 위치를 언급해줘야하니까.

 

 

---

<Breadcrumb>

.breadcrumb {
  display: flex;
  align-items: center;
  margin-bottom: 56px;
  font-size: 1.125rem;
  color: #0366d6;
}

.breadcrumb::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  background-color: transparent;
  background-position: center center;
  background-size: contain;
  background-image: url("./assets/icon-repository.svg");
  background-repeat: no-repeat;
}

.breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb a:first-child::after {
  content: "/";
  padding: 0 4px 0 8px;
  color: #586069;
}

 

 

• flex 

body선택자의 flex box가 겉부분이고, 

breadcrumb 클래스 선택자의 flex box는 내부 아이템(item)이 되는것이므로

justify-content(수평)/align-items(수직) 만 적어줌.

 

• 이미지 삽입

logo 이미지를 삽입해주기 위해 css를 이용함.

의미상 중요하지 않은 이미지이므로 css로 삽입해줌. (html의 img태그는 사용하지 않고)

content: ""

+) background 속성들

  background-color: transparent;
  background-position: center center;
  background-size: contain;
  background-image: url("./assets/icon-repository.svg");
  background-repeat: no-repeat;

- css에서 background-color의 default 값은 transparent(투명)이다.

 

- background-position은 value(top,bottom,left,right,center / % / length), global values(inherit, initial, revert, unset)

등의 값을 가진다. 이 예제에서는 이미지의 위치를 어떻게 할지이다.

 

value 이용시(keyword)

 

- background-size 

cr: developer.mozilla.org

 

https://developer.mozilla.org/ko/docs/Web/CSS/background-size

background-size - CSS: Cascading Style Sheets | MDN

 

 

background-repeat: repeat-x

위와같이 repeat-(축)을 입력해주면, 이미지가 x축으로 반복된다.

 

no- repeat을 해주면 이미지가 반복되지 않는다.

( background-size 를 contain으로 해주었다면 no-repeat을 해주어야 반복 안됨 )

 

>> contain = 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정.

 

cf> cover 으로 설정해주면?

이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정하되,

이미지의 가로세로비가 요소와 다르다면 이미지를 세로or가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정.

 

 

---

<Pagination>

 

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  background-color: #fff;
  border: 1px solid #e1e4e8;
}

.pagination a,
.pagination button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #0366d6;
  text-decoration: none;
}

.pagination > a:first-child {
  border-radius: 3px 0 0 3px;
}

.pagination > a:last-child {
  border-radius: 0 3px 3px 0;
}

.pagination ol button {
  background-color: #fff;
  border: none;
}

.pagination ol {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  list-style-type: none;
  background-color: #fff;
}

.pagination li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 32px;
  border-right: 1px solid #e1e4e8;
  font-size: 13px;
  font-weight: 500;
  color: #0366d6;
}

.pagination li.disabled {
  background-color: #fafbfc;
}

.pagination li.current-page {
  border-color: #0366d6;
  background-color: #0366d6;
}

.pagination li.current-page a {
  color: #fff;
}

.pagination *[disabled],
.pagination .disabled {
  color: #d1d5da;
  background-color: #fafbfc;
}

 

.pagination {   display: flex;	flex박스. body에서의 flex의 아이템에 해당하므로 flex-direction은 선언할필요 없음.
.pagination a, .pagination button {   display: inline-flex;	두개 이상의 선택자는 컴마(,)로 구분. +) inline flex, 즉 수평쌓음.(좌우로)
.pagination > a:first-child {   border-radius: 3px 0 0 3px; }	하위 요소를 의미하는 > 기호로 pagination이라는 클래스의 하위 a요소의 가상클래스(first-child)에 적용한다.
.pagination ol {   display: flex;	ol태그도 flex의 아이템에 해당함.
display: inline-flex;	display: inline-flex로 지정된 Flex Container는 Inline(Inline Block) 요소와 같은 성향(수평 쌓임)을 가진다. 즉, 일반 flex는 flexbox끼리 위아래로(상하)로 쌓이지만, inline-flex는 좌우로 쌓인다. (여기서 쌓인다는건 flex box,즉 겉부분을 의미함. flex box 안에 아이템을 쌓는건 flex-direction속성임!!!)
.pagination li.disabled { } .pagination li.current-page { } .pagination li.current-page a { }	해당 페이지마다 스타일 적용.
.pagination *[disabled], .pagination .disabled {	[attr]attr이라는 이름의 특성을 가진 요소를 선택. 앞에 * (와일드카드) 는 모든 요소를 선택하라는 뜻 / disabled라는 클래스를 선택

https://mywebproject.tistory.com/86

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

 

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

 

 

 

 

 

___

 

inline flex에 대해 다음 포스팅에서 다루도록한다.

 

https://mywebproject.tistory.com/98

CSS) inline-flex (인라인 flex)

 

 

 

---

 

 

REFERENCE

 

https://github.com/rohjs/bugless-101/blob/master/html-practice/05-breadcrumb-and-pagination/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