A sentimental robot

padding은 요소의 테두리 안과 content 사이의 간격이다. padding을 사용하여 스타일을 적용할 때 가장 유의해야할 점을 알아보자. width를 주의해라! div 태그의 width 값을 100px로 주고, padding 값을 10px로 주었다. 실제 width 값은 의도치 않게 120px이 되버린다. (padding-right, padding-left 값이 width값에 적용된다.) 이 때 padding값에 상관 없이 div 태그의 width를 100px로 주고 싶다면 box-sizing 속성을 이용하면 좋다. box-sizing : border-box 값을 주면 요소의 너비는 패딩 값에 영향을 받지 않는다. 여기서 참고로 알아두면 유용한 CSS box model Total element w..

css 를 적용할때 쉬워보이면서도 은근 헷갈이는 요놈! 마진! 패딩이랑 헷갈려~ 정확하게 짚고 넘어가자. margin은 요소를 둘러싸고 있는 공간이다! 패딩이랑 헷갈린다면, 마진을 border(요소의 테두리) 밖의 공간이라고 생각하면 좋다. 패딩은 테두리 안의 공간이다. margin-top, margin-right, margin-bottom, margin-left 를 값을 margin 속성으로 한 번에 줄 수 있는데 순서에 유의하자. margin 속성이 값을 4개를 가진다면? margin : 1px 2px 3px 4px (top / right / bottom / left 순) margin 속성이 값을 3개만 가진다면? margin : 1px 2px 3px (top / right and left / bot..

Html 요소의 배경을 이미지로 설정하고 싶다면 background-image속성을 사용한다. body{ background-image: url('zomebie.png') } 이렇게 속성을 준다면 zomebie.png란 이미지로 배경화면이 설정되는데 요소의 배경을 꽉 채우기 위해 이미지가 수평과 수직으로 반복되어 나타난다. background-repeat속성을 이용하면 수직이든 수평이든 원하는 방식으로 이미지가 반복된다. repeat-x : horizontally repeated repeat-y : vertically repeated no-repeat : once repeated 그 외에도 background-position, background-attachment 속성이 있다. 이렇게 많은 속성들을 하..

CSS 스타일을 적용하는 방법은 3가지가 있다. 1. inline 태그 내에 style 속성을 사용하는 방법, 우선 순위가 가장 높다. 2. internal 태그 내에 태그를 사용하는 방법으로 하나의 html 페이지에 스타일을 정의한다. 3. external 외부 css 파일을 사용하는 방법으로 한 개 이상의 html 페이지에 스타일을 정의할 수 있다. 외부 css 파일을 적용시킬 경우, 태그 내에 를 추가한다.

Flex box 'display : flex' defines the container flexbox. flex-direction : row (For default) the cross axis would be vertical / the main axis would be horizontal flex-direction : column the cross axis would be horizontal / the main axis would be vertical align - items controls the cross axis. 교차축 ,수직축 담당 also controls each flex item's property 'align-self 'all. 각 플렉스 아이템들이 차지하는 너비 안에서의 정렬 align -..