[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - CSS 특강 (1)

---

목차

1. 강사 소개

2. CSS는 흥미롭다

3. 과제

---

1. 강사 소개

1-1. 이종찬 대표님 (Veamcamp)

1-2. 역사

- 중학생부터 웹페이지 만드는데 관심이 많았다.

- PC 통신 전화선으로 인터넷하던 시절

- 웹 사이트 외주 제작으로 20대를 보냄

- 신촌 SBS 강의 시작

- 책 지필 제안이 왔지만 여기엔 재능이 없었다.

- 유튜브를 시작했다  (좋댓구 부탁..)

2. CSS는 흥미롭다 : CSS 기초

2-1. CSS 기초값 Initial Value 이해하기

처음 웹 페이지를 작업 하려고 할 때는 큰 틀(main box) Layout 을 잡고 부터 만든다.

최소한의 마크업을 만들고, CSS 바로 진행한다.

영어 원문으로 용어들 어떻게 되어 있는지 알아둘 필요가 있다.

배경을 넣고 영역을 확인한다.

div {} (== type selector)

사용자 에이전트 (==크롬) 스타일 시트 (body 에 크롬 브라우저가 해주는 작업)

div 의 너비의 결정 : 직계 부모가 제공해주는 컨테츠 영역의 너비 (== 컨테이닝 블럭의 너비)

div {width: ?;} (Property 속성 : value 값)

initial value (초기값) : auto;

background-color 의 초기값은 transparent 투명

width 의 initial value 은 auto (자동 ... 어떻게 동작하는지 기준을 아는게 중요)

- persentage : 컨테이닝 블럭이 제공하는 컨텐츠 영역의 백분율 (CSS 개발자들이 설정한 값 적용)

- auto :  요소의 너비를 브라우저가 계산한 값을 제공함

width: auto 와 100% 는 다르다.

auto는 브라우저가 margin, border, padding을 고려하고, 100% 는 고려치 않고 전체가 늘어남

(결과가 다름. auto는 컨테이너 블록을 기준으로하고, 100% 는 width + alpha 가 된다.)

div {
    background-color: orange;
    margin-left: 50px;
    /* width: 100%; */
    width: auto;
}

height 의 initial value 은 auto (어떻게 계산되는지 기준을 알아야함)

- 요소의 높이를 계산해서 브라우저가 설정해줌

body 와 View Point 는 다르다.

div 에서 display 속성의 initial value 는 inline 인데 크롬 브라우저가 값을 block 으로 바꾼다.

새로운 Property 를 배웠으면 (initial value 를) 공부해라.

브라우저들은 stylesheet 기본 제공 스타일을 제공한다. (Firefox / Chrome 기본 제공 스타일)

div 는 width 가 고정적 너비로 컨테이너 블록에서 받은 공간을 다 차지하지 않아도 모두 div 꺼다.

이때 margin-left: auto; 를 주면 div가 할당받은 컨테이너 블록의 너비를 다 차지하도록 배치해준다.

margin-left: 0 auto; 왼쪽 기준에서 여백의 사용가능한 영역을 둘로 나눠서 가져감으로 가운데 정렬했다.

auto 는 어려운 value 이다. 어떤 기준으로 계산되는지 알아야하기 때문이다.

height : auto; 로 두는게 행복이다. 내용물에 맞춰서 알아서 늘어나기 떄문이다. (유지보수에 장점)

관계상 Header / Contents / footer 로 나뉜다.

각 레이아웃이 구분이 되도록 한다.

type selector 는 광범위한 선택자이다.

universal selector *{} *.소희 == 모든 소희들 (universal selector 는 생략되어 있다)

더 구체적인 선택을 위해 두번째 클래스의 정의 (클래스는 숫자로 시작할 수 없다)

type selector 와 class selector 등 선택자를 쓰는 이유는 섬세한 작업을 위해 더 구체적인 선택하기 위함

header 에 구성요소를 넣고 제일 먼저 작업할 것은 CSS 초기화 (전역 선택자) 이다.

CSS 에서 우선 해야할 일 , 사용자 에이전트(기본 브라우저) 스타일 시트 설정을 알고 기본 스타일 초기화

- margin: initial; 초기값 세팅 (margin: 0;)

- inline 요소는 옆의 공간이 자신의 공간이 아니다. 그래서 box 요소와 달리 margin: 0 auto 가 안된다.

- h1, p 는 브라우저에 의해 블록 요소이다.

     Block level 요소 : div, h1~h6, p, li, nav, footer 등

     inline Level 요소 : a, em, strong, img, span 등

     inline-block Level 요소 : button

• - 블럭요소 : <div>,<table>,<h1>~<h6>,<p>,<form>,<ul>,<ol>,<li>,<dl>,<dt>,<dd>,<pre>,<blockquote>등
• - 인라인요소 : <span>,<a>,<br>,<em>,<strong>,<input>,<label>,<img>

- h1 { text-align: center;} 이건 h1 이 가운데로 간것이 아니다. h1 의 contens 이동한 것이다.

- 배경색을 넣는 것이 중요한 것이다. 어떻게 움직이는 지 이해하는 데 도움이 되기 때문에.

- 내가 원하는 대로 일단 됬다고 하더라도, 어떤 일이 일어났는지 분석적으로 접근을 해야한다.

 

2-2. CSS 상속 Inheritance 이해하기

- descendant selector 자손 선택자, selector 사이에 Combinator 를 통해 조합을 한다.

• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)

- 상속되는 것 : color, text-align, font, font-weight

- 상속 되지 않는 것 : margin, background-color

- 상속되는지 아닌지 찾아보면 된다.

- 상속은 부모(... < body < HTML < Browser)로 계속 올라가고 없으면 브라우저 기본 세팅값을 받는다.

- 브라우저 기본 세팅값도 바꿀 수 있다.

 

2-3. User-agent stylesheet 이해하기

- 상속 지원되는 값은 inherit 하는게 좋고, 상속 지원 않되는 것은 inital 하는게 좋다.

- unset 으로하면 브라우저가 알아서 상속은 상속, 안되는건 초기값으로 해준다.

- reset.css 는 Update가 안되다보면 최신 브라우저 생태계와 안맞을 수 있으니, 너무 고민없이 관례만 따르는 것은 위험하다.

 

2-4. 캐스케이드 이해하기, CSS Specificity

- 여러곳의 CSS 클래스의 속성들이 한 곳으로 모임

- 아래 작성된 것이 덮어 씌워질 수 있으니 코드의 작성 순서를 잘 봐야할 필요가 있음

- 최종 결과물을 위해서 CSS 코드 조각이 모이는 과정이 캐스케이딩이며 프로퍼티가 겹칠때 의도된 대로 디자인이 안될 수 있으니 주의해야한다. (속성값이 덮어씌워질 수 있다)

 

2-5. CSS 박스모델 이해하기

2-6. 컨테이닝 블럭 이해하기

2-7. CSS 셀렉터의 목적 제대로 이해하기

2-8. 클래스 셀럭터의 올바른 쓰임새

3. 과제

3-1. 마감 : 2023년 7월 20일 오후 11시

3-2. 제출방법 : 폴더명과 동일한 압축 파일로 제출한다. (ex. 홍길동_fox.zip)

3-3. 과제 내용: CSS Challenges

- Readme.md 파일에 있는 피그마 링크를 참조해서 HTML/CSS 로 작성한다.

- 과제를 수행해야 다음 시간에 수업을 따라 갈 수 있다.

과제 이미지

+ 과제 완료 (코드)