html_pr03) style.css Code Review

https://mywebproject.tistory.com/81

HTML 훈련 - (3) Feature Box

 

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

 

 

선택자 * 는 html 문서 내 모든 요소를 나타내는 CSS level 1의 선택자이다.

 

>> 선택자에 대한 내용은 추후 포스팅에서 다루도록 하겠다. (REF: https://www.nextree.co.kr/p8468/)

 

 

 

___

 

box-sizing

box-sizing은 요소의 너비와 높이를 계산하는 방법을 지정함.

 

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

 

 

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

 

 

 

+++) 참고 - CSS color에 대해 

 

  color: #1a0dab;

이런 color 코드는 어디서 알 수 있을까?

 

 

 

color picker 을 이용하자.

-> color picker에서  HEX값을 복사해서 사용하면 된다.

 

16진수 표기법: #RRGGBB[AA] R(빨강), G(초록), B(파랑), A(알파)는 16진수 문자(0-9, A-F). ** A는 선택사항 -> 단축시 #0f38  와 같이 쓸 수 있음.

 

 

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

 

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

 

 

 

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

 

위 예제에서는

flex-direction은 column(수직방향(열. 세로) / 상-하로)

justify-content는 center(아이템을 한 덩어리로 묶어, 수평방향의 중앙에 위치시킴)

align-items는 center(아이템을 한 덩어리로 묶어, 수직방향의 중앙에 위치)

 

+) flex-wrapper 속성은 주지 않았다.

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

 

 

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

https://mywebproject.tistory.com/86

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

 

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

 

가상 요소(Pseudo-Element)

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

 

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

::after

요소의 컨텐츠 끝부분

 

• content 속성

- CSS 효과이기 때문에 의미론적 웹은 아니므로 검색엔진에는 검색되지 않는 디자인 요소로 취급됨.

- 그냥 content를 요소에 단독으로 사용시, 아무 변화도 없음. 

(어느곳에 content 속성을 삽입할지 위치를 지정하지 않았기 때문.

 content 속성은 대부분 :before 또는 :after 가상클래스와 같이 사용됨!)

 

+) content 속성에는 이미지 파일도 삽입할 수 있음/

content: url(“이미지 주소”);

 

 

 

/* Common styles */
.feature-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 420px;
  padding: 40px 32px;
  border-radius: 6px;
  background-color: #fff;
  text-align: center;
}

 

feature-box라는 클래스를 가진 부분에 적용하는 스타일임.

 

• width와 max-width의 차이.

가로 크기를 지정할 때 가로 속성 값을 %로 지정했을 때 

width와 max-width는 다르다!

 

width 속성은 속성값을 100%로 설정할 경우 요소의 크기를 100%로 유지하지만,

max-width 속성은 100%로 설정할 경우 요소의 기본 크기 이상으로는 크기가 조절되지 않는다.

 

width	100%로 하면 요소의 크기가 100%로 유지됨 (원래 요소의 사이즈보다 커질 수 O)
max-width	100%로 해도, 요소의 기본(default)크기 이상으로는 조절 X (작아지는건 가능 / 커지는건 원래사이즈보다 커지진 X)

즉,

 

width: 100%로 지정한 경우에는
: 창의 크기를 줄이거나 늘리면 창의 너비에 맞춰 크기가 크고/작아짐. (원래 요소 크기보다 커질수 있음)

 

max-width: 100% 로 지정한 경우
: 창의 크기를 줄이면 줄인만큼 충실히 줄어들지만,
  크기를 키울 때는 원래 이미지 사이즈보다 커지지는 않는다.

 

 

+) width값을 지정해주지 않으면, 창의 크기만 변하고 요소의 크기는 변화 없음.

 

출처: https://ccuram.tistory.com/29

[CSS] width와 max-width의 차이점

 

• 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

 

 

 

 

 

 

---

 

 

REFERENCE

 

https://github.com/rohjs/bugless-101/blob/practice/html-practice/03-feature-box/styles.css