CSS 강의 및 실습 정리!

• 2장 CSS가 등장하기 전의 상황

  	html의 등장으로 웹을 만들 수 있었지만, 
  	사람들은 점차 웹을 보기 좋게 꾸미려고 하였음!
  	-> CSS의 필요성 증대

		<font color="red">CSS</font> : 글자색을 red로 바꿔주는 tag

• 3장 CSS의 등장

		<!--
		--> : 주석 처리 code

		<style> 
    		a{
        		color:red; 
    		}
		</style>

		<style></style> : tag 내부의 내용이 CSS 문법임을 알리는 tag

		a{
        		color:red; 
		 } 
		: html의 모든 a tag의 글자색을 red로 바꾸는 CSS code

		CSS의 핵심 -> 
		중복을 제거 (1억개의 font code의 중복 제거) & 효과적으로 웹 페이지 디자인

		1. html이 정보에 전념하게 하기 위해서 디자인의 개념을 뺏어옴
		2. CSS로 디자인 하는 것이 훨씬 더 효율적!

• 4장 CSS의 기본 문법

		<a href="2.html" style="color:red">칼바람의 나락</a>

		: style="color:red" html의 문법이지만, CSS속성을 가지고 있음

		a{

		} : 중괄호(선택자, Selector)

		웹페이지에 CSS를 삽입하는 방법
		1. style tag 사용
		2. style 속성 사용

		text-decoration: none;
		: 추가적인 디자인 모두 제거

• 5장 혁명적 변화

		 a{    
       		color:red;
		 }

		a = selector
        color = property
        red = value
		color:red; = declaration

• 6장 CSS 속성을 스스로 알아내기

  	글자 사이즈 변경
  	검색어 : css text size property

		code : font-size = 45px;

		글자 정렬 방식 변경
		검색어 : css text align property

		code : text-align = center/right/left/justify;

• 7장 CSS 선택자의 기본

  		특수한 tag만 변경하고 싶다. 
  		-> class 속성 지정 후 해당 class로 선택자 지정
    		+ 공백으로 여러개의 class 설정 가능 -> 우선 순위에 대한 모호함 발생

 			<style>
        			.saw{
            			color: gray;
        			}
        			.active{
						color: red;
        			}
    		</style>

			<li><a href="2.html" class="saw active">칼바람의 나락</a></li> 

			-> id 속성 지정! , Selector 우선 순위 id > class > tag 
			(같은 종류의 selector 라면 나중에 나올수록 우선순위 높음)

 			<style>
        			.saw{
            		color: gray;
        			}
        			#active{
						color: red;
        			}
    		</style>

			<li><a href="2.html" class="saw" id="active">칼바람의 나락</a></li>

• 8장 박스 모델

			-block level element(=tag)
 			: 화면 전체 크기를 차지하는 tag

			-inline element(=tag)
 			: 화면 일부만을 차지하는 tag
			-> display 속성의 기본값이 각각 block과 inline일뿐, 절대적인 값은 아님. 
			display: inline, block, none 변경 가능!

				여러 선택자를 , 를 통해 구분하여 코드의 중복을 막을 수 있음
				
				h1, a{
                		border-width:5px;
                		border-color: red;
                		border-style: solid;
            	}

				또한, border: 5px, red, solid로 property의 중복도 막을 수 있음!
				value값들의 순서는 상관없음!

			-CSS box model 구성 요소

				padding
				margin
				width ... etc

• 9장 박스 모델 써먹기

  	웹페이지의 검사 도구를 통해 수정하고자 하는 박스 모델의 속성을 알아낸다.

• 10장, 11장 그리드

		<div></div> : block (의미, 기능 x - 디자인을 위한 tag)
		<span></span> : inline

		fr : 자동으로 조절되는 크기

		display: grid; -> 그리드 컨테이너 설정
		grid-emplate-columns: 150px 1fr; 
		-> 150px 와 나머지 부분으로 채움
		
		* 선택자를 분명하게 하기 위해 id + tag 형식으로 사용!

• 12장, 13장 미디어 쿼리

		미디어 쿼리 : 화면의 크기에 따라 다르게 표시하기 위한 장치

		@media(min-width:800px){
    		div{
        		display: none;
   			}
		}
		: 화면이 800px보다 클때, 아무것도 표시하지 않음!
			
		
		* screen width < 800px = max-width:800px
		* screen width > 800px = min-width:800px 

• 14장 CSS 코드의 재사용

  		중복되는 코드를 막기 위해 style tag 내부의 내용을 별도의 css file로 저장하고
  		이를 다시 링크를 통해 받아오는 방식으로 코드의 중복을 막는다.
  		-> 대규모의 작업시 훨씬 더 편리함, 코드 효율성 극대화