학습요약13>6강 핵심 css

※블로그 내용은 저 '개인'의 기준으로 더 필요하다고 생각되는, 또는 한번 더 짚어보는 의미로 대부분 직접 필기한 것입니다. 수희 혼자 볼라고 쓴 블로그

1. CSS란?

종속형 시트 또는 캐스케이딩 스타일 시트(CSS)는 마크업언어가 실제 표시되는 방법을 기술하는 스타일 언어로, html과 XHTML에 주로 쓰이며 XML에서도 사용할 수 있다.
기본 파일명 W3C의 표준이며 레이아웃과 스타일을 정의할 때의 자유도가 높다
CSS는 실제로 프로그래밍 언어도, 마크업 언어도 아님. 스타일 시트 언어임.
html문서에 있는 요소들에 선택적으로 스타일을 적용 할 수 있음.

---

3-3. position

• absolute: 부모가 기준
• fixed: 브라우저 화면 기준.고정
• sticky: 모바일에서 지원.중간에 있다가 스크롤 움직일때 화면에 걸려서 따라옴.
  중복되도 마지막에 쓴게 우선순위가 됨

---

4-1. 기본 선택자

• 전체 / div 요소 / [attr]특성 예를들어 input[type="text"] img[alt]

---

4-2. 그룹 선택자, 결합자

결합자:★ ~(일반 형제 결합자:첫번째 요소를 뒤따르면서 같은 부모를 공유하는 두번째 요소),
★+(인접 형제 결합자):

<h1> 제목</h1>
<p>블라 ㅂㄹ</p>
<p>블라2</p>
div { h1+p { color: red; } ]
하면 위에있는 블라 ㅂㄹ만 빨간색 됨.
h1과 가장 인접한 것을 선택하는 + (p)

---

4-3. 가상 클래스 선택자

:hover :first-child , :focus , active,
button:not(disabled):hover { }

---

4-4. 가상 요소 선택자

::before ::after ::placeholder
span { &::before { content: '(' } &::after { content: ')' } } span
모두 앞뒤로 가로생김 ★비포 애프터 연습..

---

5. 단축속성

• 패딩: 위, 아래 /패딩: 좌,우 / 패딩: 위, 왼or오 , 아래 / 패딩: 상,우,하,좌
  순서로 여백 지정됨
• 마진: 0 오토=좌우 가운데 / 마진: 위, 오토는 가운데 , 아래
  순서로 떨어짐.
• 백그라운드-컬러/이미지/repeat/포지션 속성등이 있음.

---

6. CSS Emmet 사용법

https://docs.emmet.io/cheat-sheet/
★★빠르게 쓸수 있는 단축말! 꼭보자