천진난만 코딩 스토리

같은 박스를 구분하기 위해 각 각의 박스에 고유한 id를 부여함. 고유한 id이기 때문에 중복하여 사용할 수 없음. id는 '#' + '지정한 id'를 통해 불러와서 사용함. 1) span 박스 만들기 span 태그를 사용하여 Hello라고 적힌 연두색 박스를 여러개 나열함. span 태그는 inline 요소이기 때문에 높이와 너비가 없고 block과 달리 나란히 위치할 수 있음. 이 여러개의 span 중 특정 span의 스타일을 변경하고 싶을 땐? id를 사용하여 스타일링을 해보도록 하겠음. 2) id 사용하여 각 각 스타일링하기 많은 박스를 같은 스타일로 변경하고 싶어도 id는 고유의 값이기 때문에, 각 각 다른 id를 가지고 있어서 스타일도 각 각 따로 적어줘야 함. 이렇게 중복되는 코드를 여러 번..

block의 경계부분 block뿐 아니라 inline에도 적용 가능함. 1) border의 속성 border은 많은 속성을 가지고 있음. 그러나 사용하는 종류만 사용하게 됨. 주로 점선의 형태보다는 실선의 형태를 많이 사용함. 2) border 적용하기 원하는 두께, 원하는 스타일, 색상 순서로 작성하면 짜잔~ 경계가 생김. 3) 전체에 border 적용하기 *을 사용하여 전체에 border 적용 가능 모든 태그에 적용됨. (block, inline 모두 적용됨)

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; }