CSS

Cascading Style Sheet
세부적으로 정의된 스타일이 있다면 쓰고, 없다면 기본 스타일로 HTML을 스타일링 해준다

상위 태그에서 정의된 디자인이 하위태그로 상속
개발자가 지정 => 사용자가 지정 => 기본브라우저 설정
HTML의 스타일을 손쉽게 제어할 수 있고, 유지보수가 쉽다.

CSS 문법 선택자

선택자와 선언부로 구성되어 있다

선언부는 속성명과 속성값은 콜론(:) 으로 연결되고, 하나 이상의 선언들은 세미콜론(;) 으로 구분한다.

• Universal ( * )
  모든태그들을 선택

		* {
		  color : orange;
		} // 모든 태그의 색이 orange

---

• Type
  해당 태그만 선택

		p {
		  font-weight: bold;
		} // <p> 태그만 글씨가 진해진다.

---

• ID
  #(해쉬기호) 로 해당 id 값만 선택

		<h1 id="main"> What I like </h1>

		#main {
		  color : blue;
		} // id 값이 "main"인 태그만 해당

---

• Class
  .(dot)으로 해당 class 값만 선택

		<div class="first"> delicious fruit </div>
		<div class="second"> favorite fruit </div>
		.first {
		  background-color : black;
		  color: white;
		} // div 태그 중 class 값이 "first"인 태그만 해당

---

• State
  의사클래스로 태그의 특수 상태를 정의

		<a class="book"> recommend books </a>
		<a class="store"> recommend stores </a>
		a.book:hover {
		  background-color : black;
		  color: red;
		} // a 태그 중 class 값이 "book" 인 태그만 마우스를 올렸을 때

---

	a:link { color: green } // 방문하지 않은 링크는 'green'
	a:visited { color: red } // 방문한 링크는 'red'
	a:hover { color: yellow } // 마우스를 올린 링크는 'yellow'
	a:active { color: grey } // 활성화한 링크는 'grey'
	p:active { color: blue } // 활성화한 문단은 'blue'

---

• Attribute
  -[ ] 에 속성값을 넣어 해당 속성값만 선택

		<a href="naver.com"> naver </a>
		<a href="google.com"> google </a>
		a[href="naver"] {
		  color: coral;
		} // a 태그 중 속성값이 [href="naver"]인 태그만 해당

[href^="naver"] : naver 로 시작하는 것만 선택
[href$=".com"] : .com 으로 끝나는 것만 선택

---

display

태그를 언제 어떻게 보여줄 지 결정

---

---

list	remark
block (줄바꿈)	새로운 라인에서 시작. 해당라인의 너비를 모두 차지
inline (줄바꿈X)	같은 라인에서 시작. 요소의 내용만큼만 너비 차지
inline-block (줄바꿈X)	같은 라인에서 시작하지만 요소를 블럭처리하여 너비 지정
none	숨기기

• block
  • 한 라인에 1개의 박스만 진열
  • display 를 inline 또는 inline-block으로 지정가능
• inline
  • 한 라인에 내용만큼만 진열
    -display를 block 또는 inline-block으로 지정가능
• inline-block
  • 한 라인에 여러 박스가 진열
    -display를 block 또는 inline으로 지정가능

position

태그의 위치를 결정하는 방식

list	remark
static	기본설정값 / 왼쪽->오른쪽. 위->아래
fixed	뷰포트 기준으로 고정. scrolling해도 고정되어 안움직임
absolute	상속되는 박스 기준으로 상대적으로 위치이동. 상속된 박스가 없다면 body기준으로 위치이동
relative	원래 있어야 하는 위치(static)에서 정의한 위치로 이동
sticky	원래 있던 자리에 고정되어 scrolling 해도 안움직이며 문서의 흐름을 따라 상대적인 위치에 배치
z-index	겹쳐지는 요소들이 보여지는 순서를 설정. 양수/음수로 설정할 수 있으며, 클수록 앞쪽에 위치

-뷰포트(viewport)?
	웹페이지가 사용자에게 보여지는 영역
-fixed 와 sticky 차이점
	fixed는 스크롤 시, 요소들이 겹칠 수 있으나 sticky는 겹치지 않음

드림코딩 CSS
TCP school

---

---

🙋🏻‍♀️ Today,

CSS의 기초적인 부분만 정리해봤다.
제대로 공부안하고 만든 자기소개서 웹페이지를 앞으로 파헤쳐보려고 한다.
웹페이지를 만들었을 때 안됐었던 부분들이 꽤 많이 있었는데 하나씩 까보면 해결이 될 거 같다.
사람은 배워야 한다. 기초공사가 부실하면 금방 무너진다.😥