Dog foot print

우리 자스민 그룹원들이 공부를 매일 안 해서 조금 걱정이다... 아마 내가 이 글을 오늘 단톡방에 올려도 클릭해서 보지 않을 것 같다. 만약 이글을 자스민 그룹원들이 본다면 호형 멋쟁이라고 카톡에 올려주길 바란다. box-sizing box모델은 다음과 같이 ''content, padding , border, margin " 으로 이루어져 있다. 우리는 box모델의 크기를 제어하기 위해서 width 나 height를 적용한다. 그러나 해당 box모델에 padding 값이나 border 값을 할당한다면 우리가 주었던 width와 height 값을 넘어서 padding + border + width 값으로 해당 box 모델이 결정된다. 그러나 개발자가 padding을 사용하더라도 boder + padding..

html 에 css를 연결하는 적용 방법으로는 3가지가 있다. 어트리뷰트를 사용하기 html 에 style 태그 작성하기 태그에 일일히 어트리뷰트를 작성하여 스타일을 적용시키는 것은 굉장히 불편하다. 그렇기에 html은 style태그를 제공하여 html 내부에 css문법을 사용할 수 있게 한다. head 내부에 style 태그를 작성하고 태그 내부에 css 문법에 맞게 작성하면 된다. 외부 css 파일을 링크 시키기 html에 style태그를 열고 css를 작성하면 html의 코드가 굉장히 길어지고 한 곳에 css가 몰려있어 굉장히 보기 불편하다. 그렇기에 외부에서 css파일을 작성한 후 html에 링크태그를 사용하여 사용할 수 있다. div{ color: gray; width: 100px; height..

width 와 height 는 처음 css를 배울 때 색상을 변경하는 단계를 넘어서 각 태그가 가지고 있는 box를 옮기며 사용 해볼 것이다. 그래서 내 경험상 width와 height를 쓸때 경험이적다면 pixel 단위를 사용하거나 단순히 % 단위를 사용하고 또한 내가 원하는 대로 사이즈가 나오지 않는 상황이 올 때가 있다. 이번 포스팅에서는 각 단위별로 width와 height가 어떻게 동작하는지 알아보겠다. 기본적용된 width와 height div의 경우 width와 height 를 명시 해 주지 않다면 div의 내부에 있는 콘텐츠의 높이만큼 height가 할당되고 화면의 끝까지 넓이가 증가한다.. a ㅈ % 단위 이 % 단위는 부모의 크기를 100%로 잡고 값을 할당한다. a b c px 단위 ..