jinseon's log

✔ display - Block과 Inline 요소의 성격을 바꿀 때 사용 - inline-block을 사용하면 두 요소의 성격을 모두 가짐 => 줄바꿈 x => width와 height는 지정 가능 ✔ float - 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용 - 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것 - 레이어 : 층, 다른 레이어 위로 쌓거나 투명도 조절도 가능 - 레이어가 겹쳐지지 않게 왼쪽에서부터 정렬시키고 싶은 경우 float: left;를 연속적으로 입력 ✔ clear - float에 대한 속성을 제어하고자 할 때 사용 => float로 정렬 후 빈 공간을 어떻게 관리할 것인지 지정 - both : 모든 공간을 비움 - right : 우측 정렬에 대한 공..

✔ 마진 병합 현상 - 태그의 부모 자식 혹은 형제 관계에서 두 마진이 겹치거나 함께 사용되는 현상 ✔ 형제지간의 마진 병합 - margin-bottom과 margin-top 중 숫자가 큰 값으로 적용 ✔ 부모 자식간의 마진 병합 - 자식인 뿐만 아니라 부모인 에도 영향을 미침 => article에 margin-top 적용 시 100px만큼 위에 여백이 생김 -> main도 함께 100px만큼의 여백 생김

✔ 박스 모델 - 요소를 감싸는 큰 세가지 축을 의미 (박스처럼 감싸고 있는 형태) - content : 요소 - padding : content와 border 사이의 공백 => border 안 - border : 경계 - margin : content의 가장 바깥 공백 => border 밖 ✔ margin과 padding의 차이 - 여백을 만드는 공간 비교 - margin-left - border 바깥쪽에서 왼쪽에 여백을 만듦 - padding-left - border 안쪽에서 왼쪽에 여백을 만듦 - 공간이 여백을 포함한 크기로 변경되는 점 유의 ✔ margin과 padding 작성 방법 - top right bottom left 순서로 한 줄에 작성 가능