Waffle Studio Team 6

Simple Explanation about how to insert images, links and lists.

You can insert image with <img> tag. <img src="/your/image/path" /> You can insert link with <a> tag. <a href="/your/link/path" target="_black"> text </a> You can insert unordered list with <ul> and <li> tag. <ul>
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
</ul>

Example

Lion : Hello! I'm Lion. I'm here to give you some references.

References

Lion : Gook Luck with your coding!

Code of The Example

HTML Code

<h2>Example</h2>
<div class="wf-lion-img__wrapper">
  <img class="wf-lion-img" src="http://t1.daumcdn.net/liveboard/kakaogame/aa28778de3e24f07826d2885fbde743c.gif"/>
  <strong>Lion :</strong> Hello! I'm Lion. I'm here to give you some references.
</div>
<h3>References</h3>
<ul class="list-group list-group-flush">
  <li class="list-group-item">
    <a href="https://waffle-skile.github.io/lecture/2/" target="_blank">
      HTML & CSS Lecture
    </a>
  </li>
  <li class="list-group-item">
    <a href="https://waffle-skile.github.io/lecture/1/" target="_blank">
      Homework Description
    </a>
  </li>
  <li class="list-group-item">
    <a href="https://getbootstrap.com/" target="_blank">
      Bootstrap
    </a>
  </li>
  <li class="list-group-item">
    <a>
      Github Link (will be updated later)
    </a>
  </li>
</ul>
<div class="wf-lion-img__wrapper">
  <img class="wf-lion-img" src="http://upload2.inven.co.kr/upload/2018/08/25/bbs/i14519452171.gif"/>
  <strong>Lion :</strong> Gook Luck with your coding!
</div>

CSS Code

.wf-lion-img__wrapper {
  margin: 30px 0;
  display: inline-block;
  text-align: center;
}

.wf-lion-img {
  display: block;
  margin: 0 auto;
}