[Day 5] 빔캠프 이종찬 강사님과 함께하는 CSS 뽀시기

https://www.youtube.com/c/veamcamp

빔캠프 - 코딩으로 웹디자인

(구독, 좋아요~)

 

오늘은 빔캠프 이종찬 강사님과 CSS 특강을 하였다!

CSS의 본질부터 꿰뚫는 강사님의 강의력은 정말 어마어마했다....!!

하루 특강인 게 정말 아쉬울 정도였다 ㅜㅠ

강사님 덕분에 CSS의 진짜 매력을 느낄 수 있었고,

오늘 배운 것과 추가로 복습이 필요한 부분에 대해서

이번 주말동안 공부해야 겠다고 다짐했다.

 

오늘 강의 중 나에게 가장 와닿았던 부분을 꼽자면

 

1. inherit과 initial의 특징과 차이점

2. block과 inline

3. margin을 이용한 가운데 정렬 원리

4. background의 여러가지 속성

5. 코드의 재활용성(컴포넌트, 모듈화)

 

인데, 하나씩 다시 정리해보고자 한다.

 

본격적인 내용 정리하기 전에 html과 css를 작업할 때 순서!

html이든 css든 생각없이 되는대로 코드를 적었는데 앞으로는 지양해야겠다..!

지현님의 엄청난 정리....👍

+ type selector는 초기화할 때만 적어주기

+ 주석을 통해 css 코드 기능 별로 구분하기

 

---

 

1. inherit과 initial

 

initial은 말 그대로 초기값을 의미한다.

css 프로퍼티는 제각각 초기값을 가지고 있는데, 자주 쓰이는 것들은 초기값이 무엇인지 알아 놓으면 좋다.

 

inherit은 상속인데,

부모요소에게 지정된 속성값이 자식값으로 전달되는 것을 의미한다.

 

상속이 지원되는 속성은 초기화할 때 inherit을 쓰고, 안되는 속성은 initial을 쓰는 것이 좋다. 

 

---

2. block-level 엘리멘트와 inline 엘리멘트

block은 브라우저 화면 전체의 width를 자기땅(수업에서 나온 찰떡 비유)으로 취급한다.

그래서 각 블록 요소들은 아래로 쌓인다.

만약 width를 설정해줬다고 해도 남은 빈 공간도 사용 가능한 공간이기 때문에 margin auto로 자동으로 취할 수 있다.

 

block-level elements

---

div

ul

li

h1~h6

p

---

반면 inline은 말그대로 (텍스트)라인 안을 의미한다.

그래서 width와 height의 개념이 없다.

 

inline elements

---

text

image(와 같은 콘텐츠)

---

---

3. 가운데 정렬

그래서 이러한 block과 inline의 특성을 이용해서 다음과 같이 가운데 정렬을 할 수 있다.

div {
	width: 400px;
    margin-left: auto;
    margin-right: auto;
}

 

block과 inline 둘 다 각자의 특징이 있는데,

이 둘의 장점을 모두 갖춘 방식이 바로 inline-block이다.

 

inline의 특징으로 인해

컨텐츠 양만큼 width가 자동조절되고,

vertical-align 속성에 영향을 받는다.

 

block의 특징으로 인해

원하는 width, height 값을 지정할 수 있으며

box model을 자유롭게 사용가능하다.

 

---

4. background의 여러가지 속성

거의 background-color만 사용해왔던 나는 이번 기회로 다른 속성들에 대해서 배울 수 있었다.

 background-image: url(images/icon-information.png);
 /*백그라운드 이미지 삽입*/
 background-repeat: no-repeat;
 /*백그라운드 이미지를 여러 번 반복하고 싶거나 혹은 그러지 않고 싶을 떼*/
 background-position: right 30px center;
 /*주로 삽입된 작은 백그라운드 이미지의 위치*/

---

5. 컴포넌트화, 모듈화

페이지 상에서 어떤 부분이든 위치가 옮겨지든가내용이 추가가 될 수 있기 때문에 그런 수정사항을 용이하게 하기 위해서는코드를 컴포넌트화, 모듈화가 필요하다.

 

 

 

주말동안 CSS 차근차근 다시 복습해보면서

강사님이 내주신 과제도 열심히 다시 만들어볼 것이다!

(가능하다면 호박을 넣어서....)

(CSS 애니메이션, pseudo selector도 다시 공부!!)