😎M.cloud☁️

*디자인만을 위한 태그 2가지*

<div> : block element

<span> : inline element

그리드 사용

#id{
	display : grid;
  	grid-template-columns: 150px 1fr; <!---첫번째 그리드의 넓이 1fr(화면 분할, 2fr, 3fr 등)
    }
    
#id #first {	<!--id안에 first라는 div 선택--!>
}
<div id = "id">
	<div id = "first">
   		content1
    </div>
    <div>
   		content2
    </div>
</div>

1. 선택자로 CLASS를 사용 : .class이름

ex) 틀린 예 - 적용 안됨

<style>
	saw{	/!--saw 라는 태그를 선택--!/
    ....
    }
</style>

<li><class = "saw"> HTML </li>
<li><class = "saw"> CSS </li>

ex) 올바른 예

<style>
	.saw{		<!-- class가 saw인 태그를 선택 --!>
    ....
    }
</style>

<li><class = "saw"> HTML </li>
<li><class = "saw"> CSS </li>

2. class 를 여러개 설정, 제어 가능

ex)

class = " saw active"

.active{

}

.saw{

}

=>saw선택자의 property 적용

단, 명령의 순서에 따라서 적용이 다르게 됨.

3. ID 사용 : #id이름

ex)

class = " saw" id="active"

#active{

}

.saw{

}

=>active선택자의 property 적용

※선택자 우선 순위 : id>class>tag | 같은 선택자 유형은 가장 마지막이 적용

★id는 페이지 내에서 한번만 사용 가능함★

ex)
<!--가능--!>
<style>
	.a{
    }

<p><class = "a">Hi</p>
<p><class = "a">Hello</p>

<!--불가능--!>
<p><id = "a">Hi</p>
<p><id = "a">Hello</p>

<!--가능--!>
<p><id = "a">Hi</p>
<p><id = "b">Hello</p>

|CSS Selectors|

웹에 css를 삽입하는 두가지 방법

1. 헤드에 스타일 태그를 쓴다.

2. 스타일 속성을 쓴다.