2.15 _[CSS 기초]

당일회고

오늘은 CSS 기초 수업을 들었다.
정말 css는 너무 파고들수록 방대한 양이 날 맞이하는 느낌이야!!!!
선행학습을 해서 다행이지! 안 했다면 아주 머리가 빙빙 돌았을 거 같다.
이제 갈수록 더 모르는 것들이 많이 나올 텐데 복습과 예습을 철저히 해야겠다!
아무튼 어제 html로 만들었던 자기소개 페이지를 css로 꾸며보는 과제를 진행했는데
여기 바꾸면 저기 바뀌는 css 너란 놈 ㅎㅎ
아무튼 꾸역꾸역 다 해서 제출하고 다른 분들이 한 과제를 봤는데 고수분들이 너무 많았다!! 너무 잘하잖아! 부러워!!😅
내일부턴 페어 프로그램이 시작되어 모르는 분들과 팀이 되어 과제를 수행해야 한다. 떨린다!
민폐는 되지 말아야지

---

복습

키워드 : css, box-model, display, background(- color),box-sizing,selector, ui, ux, rel, overflow, font-family, text-align, 가상클래스 셀렉터,

---

css : 웹 페에지에 스타일, 레이아웃을 정의하는 스타일시트 언어
box-model : element 들은 다 box-model로 구성되어 있다. margin border padding content로 구성되어 있다.

display : block inline-block inline 중 어느 쪽으로 요소를 처리할 건지 정할 수 있고 flex grid 처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.

위와 같은 특징을 가진다.

background(-color) : 배경화면을 변화시킬 수 있다. color image repeat 등 다양한 값을 줄 수 있다

box-sizing :content-box border-box 를 값으로 가진다.

selector : 선택자로 html의 요소를 지정하는 역할을 한다.

ui : user interface 로 사용자의 편의를 위해 만들어진 기술
ux : user exprience 로 사용자의 경험을 말한다.
rel : 해당요소의 특징이나 역할을 적는다.
overflow : 요소의 콘텐츠 크기가 박스의 크기 보다 큰 상황에 사용 (콘텐츠 크기 제어)
font-family : 글꼴을 정하는 속성

text-align : 블록 요소 블록 요소 안에 있는 인라인요소(텍스트,이미지 등) 을 가로 정렬
vertical-align : 인라인 요소와 table cell-box 에서의 수직 정렬

가상클래스 셀렉터 : 사용자가 어떤 동작을 취했을때 나타나는 효과로 :를 사용한다.
예 - a:hover {...}

---

css 시작 전 초기화하는 코드

 * {
 	margin: 0 ;
    padding: 0 ;
    box-sizing: border-box;
    }

이것을 입력해놓고 사용하자! 콘텐츠 크기를 생각하면서 레이아웃을 짜고 배치를 하는건 어렵다고 생각하기 때문에 저렇게 많이들 초기화 시켜놓고 코드를 짠다!!

z-index 오늘 한 분이 이것을 이용하여 과제를 했었는데 들어는 봤지만 정확이 어떤건지 몰라 개념을 공부해보았다.

position 속성을 이용하면 요소를 공중에 띄울 수 있다 (겹치게 할 수 있다). 이때 요소들의 수직 위치를 z-index 속성으로 우선 순위를 정할 수 있다!
값이 클 수록 --> 상단
값이 작을 수록 --> 하단

z-index의 값이 없는 경우는 0으로 취급!(기본값은 auto임.)
그리고 z-index는 같은 형제 요소 간에 비교에 사용함!
만약
a-박스와 b-박스가 있고 이 둘은 형제 요소이고
b-박스에 자식으로 c-박스가 있다고 하자.
a-박스의 z-index=10 b-박스의 z-index=1
c-박스의 z-index=999 라고 한다면 가장위에 오는 것은?

바로 c-박스 가 아닌 a-박스 이다. 형제 요소간
z-index 크기를 먼저 비교하기 때문! c-박스를 맨 위에 올릴려면 b-박스의 z-index=1을 제거해주면 됨.

selector (선택자)

• id : #
• class : .
• tag
• 전체셀렉터: (*)
• [속성] : 셀렉터[속성]
• 후손셀렉터 : 셀렉터a 셀렉터b 띄어쓰기가 중요!
• 자손셀렉터 : 셀렉터a >셀렉터b
• 형제셀렉터

  셀렉터a +셀렉터b 셀렉터a 뒤에 바로 위치하는 셀렉터b
  셀렉터a ~셀렉터b 셀렉터a 뒤에 오는 셀렉터b

• 가상클래스 셀렉터 : 셀렉터:pseudo-class
• 나머지는 필요할 시에 검색해서 찾아보도록 하자!