웹디자인 2

[SW코딩] 핵심 HTML/CSS 기초 - 04. 웹사이트의 레이아웃

01 박스 모델 박스 모델 구조 - 컨텐츠를 감싸는 3가지의 축 margin과 padding의 차이 - margin -> border -> padding 순서로 여백을 만든다. margin과 padding을 작성하는 방법 - margin-left, margin-right 등 직접 값을 지정해도 되지만 위 코드처럼 한 줄에 작성이 가능하다. - {margin : top right bottom left;} 순서로 값이 적용된다. 02 Block 요소와 Inline 요소 - block 요소 : Y축을 기준으로 요소들이 생성된다. - inline 요소 : X축을 기준으로 요소들이 생성된다. Block 요소의 특징 03 margin 병합 현상 형제지간의 마진 병합 - 다음과 같이 top과 bottom일 경우에 둘..

[SW코딩] 핵심 HTML/CSS 기초 - 03. 웹사이트 디자인 (2)

01 Cascading : 우선순위를 결정하는 방법 CSS의 우선순위를 결정하는 세 가지 요소 1. 순서 2. 디테일 3. 선택자 순서에 의한 캐스케이딩 : 코드는 위에서 아래로 실행되기 때문에 나중에 적용한 값을 따른다. 디테일에 의한 캐스케이딩 : 부모 자식 태그 간 더 자세하게 나와있는 선택자를 따른다. 선택자에 의한 캐스케이딩 : 구체적으로 명시된 태그순으로 강도가 높다. 02 CSS 주요 속성 Width, Height - width 속성 : 선택한 요소의 너비를 설정, 픽셀(px), 퍼센트(%), 픽셀은 고정적인 크기, 퍼센트는 유동적인 크기를 갖는다. - height 속성 : 선택한 요소의 높이를 설정 font - font-family : 브라우저마다 지원하는 폰트가 다르다. 입력한 순서대로 ..