html_pr12) style.css Code Review

https://mywebproject.tistory.com/122

HTML 훈련 - (12) Gmail Inbox

 

 

 

 

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

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

.sr-only {
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: -1;
  width: 1px;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
}

.inbox {
  max-width: 1140px;
  border-collapse: collapse;
  border-radius: 4px;
  background-color: #fff;
  font-size: 13.5px;
  color: #212529;
  white-space: nowrap;
}

.inbox thead {
  position: absolute;
  z-index: -1;
}

.inbox tr {
  transition: box-shadow 150ms ease-in-out;
}

.inbox tr:not(:last-child) {
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
}

.inbox tr:hover {
  box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.14);
}

.inbox tr.unread {
  font-weight: 700;
}

.inbox tr.unread span {
  font-weight: 400 !important;
}

.inbox span:not(:nth-child(2)) {
  opacity: 0.75;
}

.inbox th,
.inbox td {
  padding: 8px 16px;
}

.inbox th:nth-child(3),
.inbox td:nth-child(3) {
  padding-right: 64px;
}

.inbox th:last-child,
.inbox td:last-child {
  font-size: 12px;
}

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

.inbox-actions {
  display: flex;
  align-items: center;
}

.inbox-actions > * {
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0 2px;
}

.inbox-star,
.inbox-checkbox::after {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: none;
  background-color: transparent;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: opacity 100ms;
}

.inbox-star:hover,
.inbox-checkbox:hover::after {
  opacity: 0.75;
}

.inbox-star:focus,
.inbox-checkbox:focus {
  outline: none;
  box-shadow: none;
}

.inbox-star {
  background-image: url(./assets/icon-star-border.svg);
}

.inbox-star.active {
  background-image: url(./assets/icon-star.svg);
}

.inbox-checkbox::after {
  content: "";
  background-size: 90% auto;
  background-image: url(./assets/icon-checkbox-outlined.svg);
}

.inbox-checkbox.active::after {
  background-image: url(./assets/icon-checkbox-checked.svg);
}

.inbox-checkbox {
  position: relative;
  top: 1px;
  overflow: hidden;
}

.inbox-checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

 

---

 

 

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

 

전체 기본 설정.

 

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: #ee5253;
  }

 

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

 

 

 

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

column

수직방향(열. 세로) / 상-하

 

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

center

아이템을 한 덩어리로 묶어, 수평방향의 중앙에 위치시킴

 

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

center

아이템을 한 덩어리로 묶어, 수직방향의 중앙에 위치

 

 

___

 

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

 

::after은 가상 요소임.

 

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

 

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

 

https://mywebproject.tistory.com/86

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

 

가상 요소(Pseudo-Element)

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

 

::after

요소의 컨텐츠 끝부분

 

 

___

💡 CSS display 속성

 

display : inline	(default) 요소를 inline 요소처럼 표시함.  앞뒤로 줄바꿈 되지 X.
display : block	요소를 block 요소처럼 표시함. 앞뒤로 줄바꿈 됨.
display : none	박스가 생성되지 않음. (공간 차지 X)
display : inline-block	inline 이지만, 내부는 block처럼 표시함. (박스 모양이 inline 처럼 옆으로 늘어섬)

 

 

---

.sr-only {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: -1;
    width: 1px;
    height: 1px;
    overflow: hidden;
    visibility: hidden;
  }

 

 

screen reader - only.

 

스크린리더상에서는 읽히지만, 화면상에는 나타나지 않게.

 

 

position : absolute

 

CSS의 position속성에 대한 내용을 정리하여 포스팅하였다.

 

https://mywebproject.tistory.com/96

 

CSS position attribute 

= 문서 상에 요소를 배치하는 방법을 지정.

 

relative	요소를 일반적인 문서 흐름에 따라 배치하고,  자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용.
absolute	요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 대신 가장 가까운(위치) 부모요소에 대해 상대적으로 배치

 

- 좌표를 지정 해주기 위해서는 position과 left, right, top, bottom 속성을 함께 사용함.

position을 absolute나 fixed로 설정시 가로 크기가 100%가 되는 block 태그의 특징이 사라짐.

 

 

 

CSS z-index

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

z-index 적용 - CSS: Cascading Style Sheets | MDN

 

** 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다.

 

z-index 속성은 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능) = 해당 엘리먼트의 z축 상의 위치

 

높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링됨.

즉, 아래로 쌓이게 하려면 음수를 사용한다.

 

z-index는 position 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.

 

 

---

 

.inbox {
    max-width: 1140px;
    border-collapse: collapse;
    border-radius: 4px;
    background-color: #fff;
    font-size: 13.5px;
    color: #212529;
    white-space: nowrap;
  }

 

border-radius

border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다.

하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다.

 

** radius = 반지름

 

cr: developer.mozila.org

 

border-radius: 10px; = 네 모서리에 다 적용 (반지름이 10px인 원형 꼭짓점)

 

border-radius: 10px 5%; = 상단좌측+하단우측은 10px / 상단우측+하단좌측은 5%로  설정 (마주보는 꼭짓점끼리같음)

 

border-radius: 2px 4px 2px; = 상단좌측 2px / 나머지(상단우측,하단좌측)4px /하단우측 2px

 

 

=> border-radius는 값(length)과 퍼센트(%)만 사용 가능함. 보통은 px이나 %단위로 (em도 쓰는듯)

 

 

 

 

 

 

border-collapse

 

REF: https://developer.mozilla.org/ko/docs/Web/CSS/border-collapse

border-collapse - CSS: Cascading Style Sheets | MDN

=표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정

 

분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있음.

상쇄 모델에서는, 인접한 표 셀은 테두리를 공유함.

 

(좌) collapse / (우) separate

 

Value 로 올 수 있는 값

 

/* Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: revert;
border-collapse: unset;

1. 키워드값 (collapse / separate)

2. 전역변수

 

 

 

---

 

 

CSS white-space

REF: https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN

CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정함.

 

 

 

white-space value 비교

• Whether and how white-space is collapsed.
• Whether lines may wrap at soft-wrap opportunities.

 

 

---

 

추후 추가 예정.

 

 

.inbox thead {
    position: absolute;
    z-index: -1;
  }
  
  .inbox tr {
    transition: box-shadow 150ms ease-in-out;
  }
  
  .inbox tr:not(:last-child) {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
  }
  
  .inbox tr:hover {
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.14);
  }
  
  .inbox tr.unread {
    font-weight: 700;
  }
  
  .inbox tr.unread span {
    font-weight: 400 !important;
  }
  
  .inbox span:not(:nth-child(2)) {
    opacity: 0.75;
  }
  
  .inbox th,
  .inbox td {
    padding: 8px 16px;
  }
  
  .inbox th:nth-child(3),
  .inbox td:nth-child(3) {
    padding-right: 64px;
  }
  
  .inbox th:last-child,
  .inbox td:last-child {
    font-size: 12px;
  }
  
  .inbox a {
    color: inherit;
    text-decoration: none;
  }

 

가상클래스 nth-child(3)

= 3번째 자식요소.

 

 

 

.inbox-actions {
    display: flex;
    align-items: center;
  }
  
  .inbox-actions > * {
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0 2px;
  }

 

flex-box의 item으로 지정함.

 

> * 선택자는

자식요소 모두를 의미함.

즉, inbox-actions의 자식 요소인

 

 

<div class="inbox-actions">
   <div class="inbox-checkbox">
       <input type="checkbox" id="inbox-1">
       <label for="inbox-1" class="sr-only">Select this Email</label>
   </div>    
   <button type="button" class="inbox-star">
       <span class="sr-only">Add to Favorites</span>
   </button>    
</div>

 

해당 부분에서는 inbox-actions 안에 있는 모든 요소에 스타일이 적용됨.

 

 

 

.inbox-star,
  .inbox-checkbox::after {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: none;
    background-color: transparent;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: opacity 100ms;
  }

 

 

두개 이상의 선택자를 지정할 때, 컴마로 구분하자.

 

 

 

가상 클래스

선택한 요소가 특별한 상태여야 만족할 수 있음.
예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있음.


syntax>

selector:pseudo-class { property: value; }

예제>

button:hover { color: blue; }

대표적인 가상 클래스 예.

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

 

 

 

• cursor attribute

 

https://mywebproject.tistory.com/110

CSS) CSS cursor(커서) attribute

 

위 포스팅에 cursor 특성에 대해 포스팅해두었다.

 

cursor

cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정한다.

 

 

** cursor 속성의 속성값으로 올 수 있는 value

키워드 값	cursor: pointer; cursor: auto;
URL, 대체 키워드	cursor: url(hand.cur), pointer;
URL, 좌표 or 대체키워드	cursor: url(cursor2.png) 2 2, pointer;
전역 값 (Global values)	cursor: inherit; cursor: initial; cursor: unset;

 

 

Opacity

 

https://mywebproject.tistory.com/111

CSS) CSS opacity(불투명도) attribute (cf. rgba 이용)

불투명도를 나타내는 opacity는 위 포스팅에서 다뤘다.

 

__

 

 

opacity 속성은 요소의 불투명도를 설정함.

불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대 개념임.

 

 

opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않는다.

따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖는다.

 

 

__

 

 

 

 

+) 선택자 다중

 

.inbox-checkbox:hover::after

.클래스명 : 가상클래스(hover) :: 가상요소 (after)

 

 

---

 

REFERENCE (style.css / app.js)

https://github.com/rohjs/bugless-101/tree/master/html-practice/12-gmail-inbox

 

 

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

 

강의내용 (X)
github 코드 위주로 작성하였습니다.

추후 비공개 처리 예정,