Learn Typography by Building a Nutrition Label, Completed

float 줄글에서 어떤 글자만 위치를 이동하고 싶을 때

<span> 태그로 원하는 글자를 감싸고, class를 지정해 준다.

style.css 에서 class-name으로 불러온 뒤 float: 위치지정을 해준다. 

// index.html
<p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
 
 // style.css
 .right {
  float: right;
}

 

>> float 는 왼쪽, 오른쪽으로 객체를 띄워서 정렬하는 속성

 

 

overflow

요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때 지정

overflow:hidden;

https://developer.mozilla.org/ko/docs/Web/CSS/overflow

overflow - CSS: Cascading Style Sheets | MDN

 

clear 

float 값을 취소함

.divider {
  border-bottom: 1px solid #888989;
  margin: 2px 0;
  clear:right;
}

>> float:right 값이 설정되어있는 % Daily Value *을 해제함

https://aboooks.tistory.com/79

[html/css] clear 속성에 대해 배워 보자 (clear:none, right, left, both)

 

https://developer.mozilla.org/ko/docs/Web/CSS/clear

clear - CSS: Cascading Style Sheets | MDN

 

:not 

이미 지정된 css 스타일에서 특정한 요소를 제외시킬 때 사용

선택할 요소: not(제외시킬 요소) { }

div:not(example) {
  color: red;
}

#example이 없는 모든 div 요소를 선택

 

ㄷhttps://webisfree.com/2015-11-13/[css]-not-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%82%AC%EC%9A%A9%EB%B0%A9%EB%B2%95 

[CSS] :not 선택자 사용방법

 

margin / padding 한줄에 적을 때 순서

margin: [margin-top] [margin-right] [margin-bottom] [margin-left];

 

margin: [margin-top] [margin-left = margin-right] [margin-bottom];

 

margin: [margin-top=margin-bottom] [margin-left = margin-right];

 

margin: [margin-top = margin-bottom = margin-left = margin-right];