2021.3.10 (Wed) -def

margin 개념정리

margin: A px; - 사방으로 A px만큼 margin이 생긴다

margin: A px B px; - 위아래로 A px 만큼, 양옆으론 B px 만큼 마진이 생긴다

margin: A px B px C px D px; - 시계방향대로 마진이 생긴다/ 위로 A px, 오른쪽으로 B px, 아래로 C px, 왼쪽으로 D px

 

Example) margin: 0 auto - 위아래로 마진을 주지 않고 양옆으로 auto는 가로 중앙에 배치한다는 뜻이다. 그리고 자연스럽게 좌우 여백은 균등하게 배분된다.

 

 

 

couldn't see container and contents in the page.

Reason was: image was bigger than 'visual'. When i changed height of visual as same as height of image the problem fixed!! / check

 

width 100% - it gives full space on width

 

 

 

Block, Inline, Inline-block Difference

 

1. Block

- it takes full space of width << so it goes down- think it as a one long block which takes full space in width- can change width, padding and height << size- 이걸 옆으로 붙여주기 위해서 사용하는 css >> float:left; << it forcely pulls things to beside

- without float:left/right; << things are taking whole line by alone

 

2. Inline

- it has a form of line << things are arranged in one line (beside)- can't change width, paddin and height- elements under inline >> <span> or <a> << to control the size of inline elements, we use {display:block;}

 

3. Inline-block

- it has a form of inline but can change the size like block- {display: inline-block}

 

 

scr (source)- 파일경로

padding - 펼쳐서 가운데로

wrap-wraping the whole page

 

절대경로

상대경로 << commonly using in html

   - 바깥 폴더에서 불러올 경우 two dots

 

To make two class : <class = "A 띄어쓰기 B">

We use header for center alignment