[CSS] <ul> , <span> Using background-color tools

---

This time we try to using about <ul>, <span>. Let' s start it 

---

• 특별히 유의할 내용은 없다. 잘 사용하지는 않을것 같은데 알아는 두자.

		<div style="background-color: red;"> aaa</div>
		
		<p style="background-color: blue;">bbb</p>
	
		<div style="background-color: red; width: 100px;">das</div>

		<div style="background-color: blue">beta</div>
		
		<ul style="background-color: red;">
			<li style="background-color: grey;">알파
			<li>베타
		</ul>
		
		<hr>
		
		<span style="background-color: red;">aaaa</span>
		<span style="background-color: blue;">bbbb</span>

 

• block은 세로로 나열, inline-block은 가로로 나열 한다.

<style type="text/css">
	span {
				display: inline-block;
				width: 100px;		
				height: 50px;
				text-align: center;
		}
</style>

		<span style="background-color: red;">김덕배</span>
		<span style="background-color: grey;">제임스</span>
		<span style="background-color: green;">송지아</span>
		<span style="background-color: skyblue;">박순신</span>

• 잘보면 검정색 버튼이 없어진걸, 볼수가 있다.

<ul style="list-style-type: none;">

 

 

• 예전에는 무언가를 만드는데, Table을 많이 활용했지만 요즘은 <div>,<ul><span> 이런것을 많이 활용한다.

<style type="text/css">
	span, li {
				display: inline-block;
				width: 100px;
				padding: 15px;
		}	
    
    <ul style="list-style-type: none;">
			<li style="background-color: red;">김제동
			<li style="background-color: blue">암탉
			<li style="background-color: skyblue;">수탉
			<li style="background-color: hotpink;">마당을 나온
		</ul>

 

• 만약 </li>로 닫아주게 된다면 가운데에 공백에 생기게 되는것을 명심하자. 

 

 

 

 

 

 

---

 

 

To be continue