이종찬 교수님의 CSS 특강 !

css

<width> : 너비

적어주지 않으면 auto,
자신의 부모요소 기준으로 가득 참

<height> : 높이

적어주지 않으면 auto,
자신의 자식요소 기준으로 자동 조절

<margin> : 바깥여백

auto로 지정하면 활용 가능한 margin공간을 최대로 씀
ex) margin: 상우하좌;
	margin: 상하 우좌;
    margin: 상 우좌 하;
    margin: 상 우 하 좌;

<padding> : 안쪽여백

자신의 너비, 높이에 더해짐
ex) padding: 상우하좌;
	padding: 상하 우좌;
	padding: 상 우좌 하;
	padding: 상 우 하 좌;

<border> : 테두리

자신의 너비, 높이에 더해짐
ex)	border: 두께 스타일 색상;

width : 부모 요소 기준(auto)
height : 자식 요소 기준(auto)
mrgin : 남는공간을 가지겠다
ex) margin-left,margin-right 하면 가운데 정렬이된다.

margin : initial(초기값=0);
margin: 0 auto;(상하 좌우)

ex)

width : 400px;
margin : 0 auto;
블럭레벨 엘리먼트의 가운데 정렬만 된다

작성 TIP

<div>
    <div>Header</div>
    <div>Contents</div>
    <div>Footer</div>
</div>
1. 전체적으로 몇 등분인지 나누기 

2. N등분이 눈에 보여야 다음 스탭이 눈에 보인다.
  구분을 위해 시각적으로 각각 img, background 등 넣기

3. 기본(레이아웃관련) 스타일 짜기 
   기본 margin 0; padding: 0; 등

4. 각 div에 class=""(이름표)를 주고 css 효과를 준다!
  
  (세세하게)
  div class="haeder"
  div.header { 
  			background-image: url(images/cover.png)			
  }
  
  (보통)
  div class="haeder"
  .header { 
  			background-image: url(images/cover.png)			
  }
  
  5. 
  body {
  			background-image
  			background-size
  			background-position
  			background-attachment
  }
  
  5. 헤더는 총 3세등분 되어있음
     헤더와 풋터가 작업먼저하고 나머진 가운데는 할게 많아서 미리 해놓고 한다!
  
        <div class="wrapper">
            <div>Header</div>
          		<img src="">
          		<h1>asdasd</h1>
          		<p>forend </p>
            <div>Contents</div>
            <div>Footer</div>
        </div>

이미지 가운데 정렬은

height는 auto;
background-size는 cover;
padding 50px 0;

width 100% = auto랑 같은걸로 표현됨

<auto>는 <margin>포함 가득찬다(좀 더 유연함)
100%는 밀린다
오토가 더 '행복'
box-sizing: contents-box;

오늘의 꿀팁(?)

• 이미지 찾는곳 unsplash 퀄리티 굳! (무료)

• 파파고 번역기 최고

• 책추천 : css설계가이드

• css는 입문하기는 쉽지만 마스터는 없다
  css는 계단식으로 성장 !
  참고 인내해야하는 공부...
  컴포넌트화 모듈화 !

• 생활에 가까운 컨텐츠 찾기
  디자인은 별것 없다 남들이 안하는 것 하면 된다.
  디자인은 큰것부터 작은것으로 가면서 세분화하기
  틀 -> 전체 디자인 -> 얼굴 -> 눈,코,입
  만델라 css페이지 참고 !

• 오늘 엄청 따라가기 힘들고 벅찼다...
  어제의 나보다 한 발자국 더.
  이건 장기 레이스, 행복을 위해 오늘도 한 걸음 한걸음 하겠다 !!!!