html_pr09) style.css Code Review

https://mywebproject.tistory.com/107

HTML 훈련 - (9)GitHub Dropdown Menu

 

 

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

.dropdown {
  position: relative;
}

.dropdown-button {
  width: 40px;
  padding: 0;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  background-color: transparent;
  cursor: pointer;
}

.dropdown-button:hover {
  opacity: 0.75;
}

.dropdown-button:focus,
.dropdown-button:active {
  box-shadow: none;
  outline: none;
}

.dropdown-button img {
  width: 100%;
  height: auto;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  padding: 8px 0;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15);
  transition: transform 200ms ease-in;
}

.dropdown-menu.active {
  display: block;
}

.dropdown-menu:hover {
  transform: translateY(2px);
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -18px;
  right: 12px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 9px solid #fff;
  border-right: 8px solid transparent;
}

.dropdown-menu h3,
.dropdown-menu a {
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  text-decoration: none;
}

.dropdown-menu h3 {
  padding: 8px 16px 16px;
  border-bottom: 1px solid #e1e4e8;
  font-weight: 500;
}

.dropdown-menu h3 strong {
  font-weight: 700;
}

.dropdown-menu h3 strong:hover {
  opacity: 0.5;
}

.dropdown-menu ul {
  list-style-type: none;
  padding: 8px 0;
}

.dropdown-menu ul:last-child {
  border-top: 1px solid #e1e4e8;
}

.dropdown-menu ul a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  text-decoration: none;
}

.dropdown-menu ul a:hover {
  color: #fff;
  background-color: #0366d6;
}

 

 

---

 

 

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: #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

요소의 컨텐츠 끝부분

 

___

 

 

.dropdown {
  position: relative;
}

 

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

 

https://mywebproject.tistory.com/96

CSS) CSS position attribute

 

 

CSS position attribute 

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

 

relative

요소를 일반적인 문서 흐름에 따라 배치하고,  자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용.

 

 

___

 

 

 

.dropdown-button {
  width: 40px;
  padding: 0;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  background-color: transparent;
  cursor: pointer;
}

.dropdown-button:hover {
  opacity: 0.75;
}

.dropdown-button:focus,
.dropdown-button:active {
  box-shadow: none;
  outline: none;
}

.dropdown-button img {
  width: 100%;
  height: auto;
}

 

• border-radius

 

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도 쓰는듯)

 

 

 

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

border-radius - CSS: Cascading Style Sheets | MDN

 

 

 

• cursor(커서)

REF: https://developer.mozilla.org/ko/docs/Web/CSS/cursor

 

위 문서를 참조하여, CSS cursor에 대한 내용을 따로 포스팅하였다.

아래 링크 참조.

 

 

https://mywebproject.tistory.com/110

CSS) CSS cursor(커서) attribute

 

 

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;

 

위 예제에서는

 

.dropdown-button {
  width: 40px;
  padding: 0;
  border: none;
  border-radius: 5px;
  overflow: hidden;
  background-color: transparent;
  cursor: pointer;
}

위와 같이 button 요소 위에 마우스를 올렸을때 pointer 형태의 모양으로 보이도록 지정한다.

 

pointer

The cursor is a pointer that indicates a link. Typically an image of a pointing hand.

 

 

 

 

• opacity

REF:https://developer.mozilla.org/ko/docs/Web/CSS/opacity

 

위 문서를 참조하여, CSS opacity 에 대한 내용을 따로 포스팅하였다.

아래 링크 참조.

 

 

https://mywebproject.tistory.com/111

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

 

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

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

 

 

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

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

 

opacity: 0.4;

 

-> 자식 요소는 불투명하게 유지하고 싶다면 background 속성을 이용하자!

 

background: rgba(0, 0, 0, 0.4);

 

 

 

 

 

___

 

 

 

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  padding: 8px 0;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 15px rgba(27, 31, 35, 0.15);
  transition: transform 200ms ease-in;
}

.dropdown-menu.active {
  display: block;
}

.dropdown-menu:hover {
  transform: translateY(2px);
}

.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -18px;
  right: 12px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-left: 8px solid transparent;
  border-bottom: 9px solid #fff;
  border-right: 8px solid transparent;
}

.dropdown-menu h3,
.dropdown-menu a {
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  text-decoration: none;
}

.dropdown-menu h3 {
  padding: 8px 16px 16px;
  border-bottom: 1px solid #e1e4e8;
  font-weight: 500;
}

.dropdown-menu h3 strong {
  font-weight: 700;
}

.dropdown-menu h3 strong:hover {
  opacity: 0.5;
}

.dropdown-menu ul {
  list-style-type: none;
  padding: 8px 0;
}

.dropdown-menu ul:last-child {
  border-top: 1px solid #e1e4e8;
}

.dropdown-menu ul a {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  text-decoration: none;
}

.dropdown-menu ul a:hover {
  color: #fff;
  background-color: #0366d6;
}

 

 

• position

 

CSS position 속성에 대한 내용은 아래 포스팅에 따로 정리해두었다.

 

 

https://mywebproject.tistory.com/96

CSS) CSS position attribute

 

 

CSS position attribute 

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

 

absolute

요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않음. 대신 가장 가까운(위치) 부모요소에 대해 상대적으로 배치

 

cf> relative

relative

요소를 일반적인 문서 흐름에 따라 배치하고,  자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용.

 

default 값은 static(고정)이고, 주로 absolute 아니면 realtive를 많이 사용함.

 

 

 

• 다중 선택자

 

 

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

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

 

 

 

 

https://mywebproject.tistory.com/106

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

 

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

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

 

 

 

 

 

---

REFERENCE (style.css / app.js)

https://github.com/rohjs/bugless-101/tree/master/html-practice/09-github-dropdown-menu

 

 

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