천진난만 코딩 스토리

block의 경계로부터 안쪽 공간 block뿐 아니라 inline에도 적용 가능함. 1) padding: 30px 50px 20px 10px; padding도 margin과 마찬가지로 padding: 30px 50px 20px 10px; 이라고 적게 되면 위쪽 30, 오른쪽 50, 아래쪽 20, 왼쪽 10의 공간을 가지게 됨. 2) 여러 개의 박스 구분하기 (id) 모든 div에 같은 스타일이 적용되어 구분하기 힘듬. 구분하기 위해서 div에 각 각 고유의 id를 부여 하기로 함. 3) id 불러오기 id는 '#' + '지정한 id'를 통해 불러와서 사용함. div박스에만 적용되는것이 아님. 모든 id는 하나의 고유값이기 때문에 다른 태그에도 id를 작성하면 해당 아이디를 불러 올 수 있음.

block의 경계로부터 바깥 공간 block의 경우에는 상하좌우에 모두 적용할 수 있지만, inline의 경우에는 높이와 너비를 가질 수 없기에 좌우에만 적용이 가능함. 1) margin: 20px; 위치를 지정하지 않고 margin값을 1개 입력 시 block의 상하좌우에 모두 적용됨. 2) margin-left: 50px; 왼쪽 외에도 오른쪽, 위쪽, 아래쪽도 할 수 있음. 3) margin: 50px 20px; margin: __px __px; => 나란히 두 개의 값을 작성할 경우 자동으로 앞에 값은 '상하'로 뒤에 값은 '좌우'로 적용됨. 4) margin: 30px 50px 20px 10px; margin: __px __px __px __px; => 나란히 네 개의 값을 작성할 경우 자동으로 ..

1. block 과 inline 비교 block inline 옆에 다른 요소 올 수 없음 같은 줄에 하나만 올 수 있음 높이, 너비를 가질 수 있음 ex tag) div, p, address, header etc... 옆에 다른 요소 올 수 있음 같은 줄에 여러 개 올 수 있음 높이 너비를 가질 수 없음 ex tag) span, code, link, img etc.. 2. Block Inline block을 inline으로, inline을 block으로 바꿀 수 있음. 1) block ->inline div{ display: inline; } 2) inline -> block span{ display:block; }