본문 바로가기
반응형

박스모델2

박스 모델 /border / padding / margin / float대용 margin병합? / table 선 없애기 박스모델 박스는 총 4가지의 세분된 영역으로 구성. 영역마다 다양한 스타일을 적용 Content 영역 : 요소의 실제 내용을 포함하는 영역. 따라서 크기는 내용의 너비 및 높이. 너비는 width가 선언하고 너비는 height가 선언. Padding 영역 : content 영역과 테두리 사이의 여백을 padding content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향 이에 따라 padding을 content의 연장으로 볼 수도 있다. Border 영역 : content 영역을 감싸는 테두리 선 Margin 영역 : border 바깥쪽의 영역 border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역 즉, 주변 요소와의 여백(간격) 지정 전체 박스 사이징의 값은 width + he.. 2019. 7. 24.
[FC] CSS 파일분리 / CSS 불러오기 CSS파일은 한 번 정해지면 바뀌지 않는 정적 파일임 CSS파일도 파일 분리 및 파일 불러오기 가능 파일분리하면 좋은점 기존 html파일에 style을 작성하면 해당 html파일에만 적용가능했으나 파일분리를 통해 다른 html파일에도 적용가능해짐. 중복사용가능 주소에 존재하는 외부 CSS 문서 불러오기 코드 type : css타입+text타입 rel : relation의 약자. 불러오는 파일과 html과의 관계를 설명. 스타일시트 관계 스타일 상속의 예시. box스타일 적용시키기 / 부모태그 / 자식태그 box모델과 관련된 속성은 상속이 되지 않는다. height적용시키면 width적용시키면 엘리먼트 단위로 작성한 CSS코드가 우선순위를 갖는다. 결론 div태그의 자식요소인 h1, p태그에는 박스모델과 .. 2019. 6. 8.
반응형