李鐘碩教授のCSS講座!

css

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

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

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

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

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

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

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

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랑 같은걸로 표현됨

今日の秘訣(?)