멋쟁이사자처럼 프론트엔드스쿨 회고(09.02)

 

.

https://camp.veamcamp.com/allday/page/list.php

veamcamp

1. CSS selector

1) tag(type selector (태그 선택자))

처음부터 용어를 바르게 잡아야 함

div{
 color:blue;
}

 

2) . class (class selector)

type selector로만 하면 너무 광범위하니까 여러 방법 씀(class 등)--> 특히 class는 시각적인 부분 표현하기에 용이하다!

똑같은 요소를 단순히 타이핑 하는 것은 같은 요소가 양이 많아졌을 때 유지보수가 힘들다.  따라서 클래스 지정자를 사용해서 유지보수에 용이하게 하는 등의 방법을 사용하면 좋다!

.wrap{
 color: blue;
}

3) *(universal selector)

모든 요소를 선택할 때 쓰는 선택자. 참고로 class selector는 앞에 *이 생략된 것이다.

 

4) div p(하위선택자)

모든 자손을 선택한다. 

 

5) div > p(자식선택자)

직계자식을 선택한다. 

 

2. width 와 height property 탐구

1) width

(1) width:100%

부모가 제공해준 너비만큼 100프로 (너비에서 마진 등을 플러스 알파로!)

즉, 부모값을 단순히 픽셀값으로 가져오기만 함

 

(2) width:auto

브라우저가 계산해줘서 마진또는 패딩, 보더를 고려해서 최대콘텐츠 영역만큼 가득채워줌

width의 initial value가 auto임

내 의사를 명확히 하기 위해 auto를 명시적으로 지정하거나, 미디어쿼리에서 지정한 것을 되돌리고 싶을 때(초기화하고 싶을때) 지정해주기도 함. 초기화할때는 좀더 명시적으로 initial 써주기도 함.

 

2)height

height경우 또한 initial value는 auto임

똑같이 auto 라는 키워드이나, height auto는 자식을 기준으로 크기를 결정(컨텐츠 크기만큼)

 

프로퍼티가 뭐냐에 따라 작성된 auto의 의미가 달라짐.

모든 프로퍼티는 이니셜 value가 존재하고 initial value 는 다 다르다.(background-color의 initial value 가 투명이듯이)

 

3. box model

1) 원래는 박스모델에 padding 이나 border가 들어가면  박스 사이즈가 커진다. 이걸 원하지 않는다면 여기서 border-box를 쓰면 사이즈가 안커지고 포함되게 된다.

 

2) block level elements 정렬

한 줄(부모가 제공하는 컨텐츠 영역만큼)을 다 차지한다. 전체가 다 내땅이라는 의미이다. 그안에 width 로 차지하는 부분이 전체가 아니라면 전체 땅을 빌리고 일부에만 집을 지은 것이라고 생각하면 된다.

 

 (1) margin-left:auto와 margin-right:auto

 블록레벨 요소에서 사용가능한 공간을 마진으로 써서 이동하는 것!

margin-left:auto와 margin-right:auto를 같이 쓰면 사용가능한 공간을 둘로 나누는 것이다. 그래서 그걸 왼쪽 오른쪽에서 나눠서 쓰니깐 결국 가운데로 정렬되는 것이다. 이걸 줄이면 margin 0 auto;

*margin의 initial value 는 0이다. auto는 0이다.

 

 (2)margin-top:auto와 margin-bottom:auto

0이다.위 아래는 남의 땅이라서 적용이 되지 않는다.

 

3) inline level elements 정렬

 (1)text align center

 h1와 같은 container 안에 텍스트가 있다면 text align center를 했을 때 안에 있는 텍스트가 가운데 정렬된다. (inline elements의 상위에게(블록레벨) 주는 것)

* 다만 이것은 헷갈리면 안되는게 , h1 자체가 움직이는 것이 아닌 그 안에 든 텍스트가 inline level elements이기 때문에 반응을 하는 것 뿐이다. h1 자체가 움직이기 위해서는 블록레벨 엘리먼트 정렬방법인 margin 0 auto를 사용해야 한다.

 

*inline elements는 기본적으로 base line이 존재한다.

inline elements는 부모에게 지정하는 text elements를 

 

*inline elments는 아예 width height가 존재하지 않는다.

*인라인에서 padding은 전깃줄은 그대로고 상하단 여백이 생긴다?

display는 블록화 한다. 블록을 인라인하거나 인라인을 블록하거나!

display: inline-block 은 인라인과 블록의 속성을 골고루 가지고 있다.

 

 

 

4.페이지 만들때 배운점

첨에 먼저 큰 틀을 봐라 몇개로 나뉜지

국룰은 header contents footer 

우리가 만드는 과정은 요리에 비유

css 스타일을 각각의 요소들에게 브라우저가 제공해주는 스타일이 있다.(initial 아님)

예를 들면 h1에 마진이 있는 것 등.. 하지만 우리가 의도한 대로 바꿔야 함. 초기화를 해주는 것이 안정적인 방향.

항상 레이아웃부터 하고 디테일은 나중에 하기.

html은 시각적으로 움직이지 말자 ~ 시각적인 부분은 무조건 css에 일임하는 것이!

 

 

5. 상속

상위요소에게 지정하면 하위요소도 받아먹을 수 있게 하는 것

중요-width는 상속안됨!

inherit 은 상속이 안되는데도 상속되게 하는 키워드이다.

 

.wrapper {
	background-color: blue;
}

.div{
	background-color: inherit;
}

폰트사이즈 초기값 설정시 16px 이라는 값 말고 inherit 을 적기!

원래부터 상속이 되는 프로퍼티들은 inherit을 하는게 일반적이다. 원래대로 상속을받게끔..

 

꾸미기

fit-content : 컨텐츠의 사이즈에 맞게 값 설정

 

 

6. CSS cascading

선택자는 우선순위가 있다. 

얼마나 구체적인지 브라우저가 판단해서 구체적인 셀렉터 파악함

똑같은 클래스를 두번부르면 더 가중치 높음

작성순서는 동점일때 그제서야 중요해진다

 

preview png

과제포인트

1. 눈에 보이는 그대로 최대한 만든다.

2. 유지보수가 중요하다.(하나의 값을 만들었을 때 유연하게 값이 변하도록 하기)

초기화같은거 단계 생각해서 만들기.

---

특강 너무 알찼고요 .. 그저 빛종찬... 단 한마디도 놓치기 싫었는데 조금 놓쳐서 진짜 화난다 쒸익쒸익..

어느덧 일주일이 지났다 시간이 정말 빠르게 갔다! 주말동안 과제, 복습 열심히 하고 에너지 조금이라도 충전해서 와야지:-)

 

주말할일:

1. 특강 놓친 부분 보충학습(특히 뒷부분)

2. 과제하기

3. 물어볼것 : padding 으로 조정할 때와 height 로 조정할 때의 차이점(윤철님 질문)? , 인라인에서의 패딩과 블록에서의 패딩 차이

4. emmt 복습, 그밖에 헷갈렸던 부분 복습

 

9/3 수정: 과제 하긴 했는데 유지보수가 어려울 것 같다. 근데 어떻게 고쳐야 할지 모르겠다 ㅠㅠ 어렵다..