Css 사진 블로그 코드

    <img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"><img

        src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"><img

        src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg">

위 처럼 img를 붙혀서 쓴 이유는 html은 기본적으로 화이트스페이스라는 공간을 가지기 때문인데 만약

 

<span>hellow</span><span>world</span>

 

을 작성한다면 출력값은 hellowworld 가 된다. 하지만

 

<span>hellow</span>

<span>world</span>

 

을 작성하면 출력값은 

hellow world 가 되어 두 단어 사이에 공간이 생기는데, 이를 화이트스페이스 라고 한다.

위 img에도 똑같이 적용되기 때문에 img들의 css margin, padding등의 값을 잘 적용시키기 위해서 img를 붙혀서 쓴다.

 

but

 

Flexbox를 사용하면 위처럼 안해도 된다.

margin-left: calc(10%/6);

 

위같이 calc를 사용하면 뒤에 수식을 계산이 가능하다.