Day: 2022 2월 3

bookmark_borderAre personalised diets the best way to be healthy?

Posted on

Are personalised diets the best way to be healthy?

  • what counts is not what you eat but how your body reacts.
  •  gut – the tube which includes the large and small intestine.
  • microbes
  • 5.5 metres : five and half metres
  • If evidence is flimsy, it’s weak and unconvincing.
  • realise = realize 
  •  if something sticks out of the crowd, it’s noticeable in a good way.
  • the more diverse someone’s microbes, the better their gut was at digesting food, regulating fat and maintaining health. 
  • that took ‘guts’, which is the second meaning of the word: courage.

bookmark_borderCSS 기초 활용

Posted on

CSS 테두리 : CSS Border Style

<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
</style>
...
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>

높이와 너비 : CSS Height and Width

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

CSS 여백 : CSS Margin

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

CSS 박스모델 : CSS Box Model

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

CSS 아이콘 모델 : CSS Icons

<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-cloud" style="font-size:24px;"></i>
<i class="fas fa-cloud" style="font-size:36px;"></i>

CSS 오버플로 모델 : CSS Layout – Overflow

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

CSS 가상클래스 :

CSS Links

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

CSS Dropdowns

<style>
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>