내일배움카드(재직자) 웹표준 수업 / 4월1일 (금) 12회차

 

 

▷float<가로> : 구역을 왼쪽/오른쪽에 배치하고 옆에 빈공간에 "내가 왼/오 로 갈테니까 다른구역이 와도 된다!"
                     float가 반복되며 순서대로 배치

            속성값 ▶ left : 왼쪽으로 배치하고 오른쪽에 다음 구역이 들어오게 함
                      ▶ right : 오른쪽으로 배치하고 왼쪽에 다음 구역이 들어오게 함

 

 

▷clear<세로> : float가 설정된 구역의 아래로 내려줌 (float를 무력화?)

            속성값 ▶ left : clear보다 위에 있는 구역중에서  float가 left로 설정된 구역에 바로 아래에 맞게 줄바꿈                          (위에있는것 높이에 맞게 딱 붙어서 배치)
                      ▶ right : clear보다 위에 있는 구역중에서  float가 right 로 설정된 구역에 바로 아래에 맞게 줄                                    바꿈 (위에있는것 높이에 맞게 딱 붙어서 배치)
                      ▶ both : 윗줄과 안겹치게 줄바꿈



*생활코딩님의 설명으로는 float를 무력화 시키는 태그라고 했음. clear: left/right는 float 방향과 같게 속성값을 주면 무력화가 되고, 방향이 다르면 되지 않음. 그래서 이걸 보완해주는게 clear: both 속성임. 방향 상관없이 float효과를 안먹겠다....

 

 

<반응형 디자인 responsive deisgn> : 화면의 크기에 따라서 내용의 크기와 위치도 맞게 변하게 하는 디자인
                                                   (가로만 가변형(=반응형)으로 사용함. 세로는 고정된 크기 사용)

 

 

---

 

 

 

 

 

<헷갈리는 padding / margin %계산법>

 

1. 배경과 박스들의 값을 전부 % 로 줌

 

 

2. 전체화면인 연두색이 100%인 상태이다

 

                           

3. 따라서 container1/2(옆에 파란색) 은 연두색 배경의 50%이다

             

 

 

4. 하지만 container1 에 padding 값을 1% 씩 주었다

   

       

박스와 container1 연노랑 배경 사이 공백이 padding 1%

 

 

 

5. 그래서 결과적으로 각각의 박스들에게 남은 퍼센트는 padding값 1%가 빠진 49% 이다.

 

 

 

 

6. 그런데 여기서 각각의 박스들에게는 또 padding값을 5% 주었다

 

 

7. 각각 박스들이 총 쓸수있는 남은 퍼센트는 49%인데 가로 세로 각각 padding 5%를 주었으니

위/아래 가로들의 값은 총, 5% + 5% = 10% 가 되는것

 

 

 

8. 따라서, 총 49%에서 가로들의 값을 뺀 박스의 순수한 가로/세로 퍼센트는 

49% - 10% = 39% 가 되는 것이다.