과정명 : 대구 AI 스쿨 일반과정
강의 : 웹프로그래밍김인권_4레이아웃_210509
주제 : css
css레이아웃
margin / padding 속성
각 태그로 만들어진 객체들의 위치를 조정하기 위해서는 margin속성과 padding속성을 활용할 수 있다.
- margin : border를 기준으로 브라우저와 객체의 거리
- padding : border를 기준으로 객체 안쪽과 컨텐츠의 거리
html
<div class="box-model"> Hello World </div>
css
.box-model{
width: 200px;
height: 200px;
background-color: yellow;
border: solid 10px red;
margin-top: 100px ;
padding-left: 100px;일반적인 경우padding속성은 객체의 전체 길이를 늘린다. (width값 + padding값) top left bottom right의 순서로 속성값을 줄 수 있다. 이때 숫자 0은 해당하는 곳에 값을 주지 않는 다는 뜻이다.
[margin: top left bottom right;]
[padding: top left bottom right;]box-sizing: border-box 속성은 객체가 margin이나 padding값에 의해 크기가 변하지 않게 하는 속성이다. 다만 이 속성이 적용되면 컨텐츠는 움직이게 된다.
html과 css에서 객체의 움직임은 타의적(수동적?)이다. 객체는 어떤 공간이나 객체에 의해 상/하, 좌/우로 밀리는 개념으로 이해하는 것이 쉽다.
html, body {
margin: 0;
padding: 0;
}css에 디폴트로 들어가야하는 속성값. 미세한 공간을 가지고 있기때문에 보정한다.
마진 병합현상
객체들을 움직이기 위해 사용하는 속성값이 객체간에 겹치게 되면 병합되거나 여러 객체가 함께 움직이는 현상 형제 관계의 객체 부모-자식 관계의 객체 모두에서 발생한다.
형제 객체 : 두 객체의 margin속성이 맞붙어 겹치게 되는 경우 두개의 속성이 큰 값을 가진 속성에 병합되는 현상
- margin-bottom: 100px + margin-top: 50px 이 겹치게 되는 경우 두개의 값이 100px로 병합되어 나타난다.
부모 - 자식 객체 : 부모 - 자식관계의 객체 중 자식 객체의 margin값이 부모 객체에 함께 적용되는 현상. 웹프로그래밍에서 가장 빈번한 병합현상. - position속성으로 해결할 수 있다.
block/ inline 진영 그리고 display속성
html은 y축의 속성을 지닌 block객체와 x축 속성을 가진 inline객체로 나누어 진다. 이중 inline 속성은 공간을 가질 수 없어 margin과 inline속성을 사용하지 못한다. 하지만 display속성을 활용하여 각 진영간의 속성의 변경 혹은 두가지 속성을 지닐 수 있다.
- vertical-align속성 : 가장 큰 오브젝트를 기준으로 객체들을 정렬 시킨다. inline 객체에만 사용이 가능하다.
img태그의 이미지는 inline/ block 양쪽 모두의 속성을 가지고 있다.
position 속성
각 객체들은 차원의 개념을 가지고 있다. 객체가 가진 차원의 개념은 웹페이지 레이아웃의 조정하는데 중요한 요소이며 깊은 이해도가 요구된다.
position : stactic ; - 2차원의 개념
객체의 기본적인 상태로 부모객체의 높이 값이 없으면 자식객체의 높이값 속성을 따른다.
postion : fixed ; - 3차원의 개념
fiexed속성이 적용된 객체는 독립적으로 움직이며 static 속성과 반대되는 속성이다.
position : reletive ; - 차원의 교집합적 성격
객체가 가진 현제 좌표값을 기준으로 움직임이 적용된다. 2차원, 3차원 개념의 두가지 속성 모두를 띈다.
postion : absolute ; - 3차원 개념
마진 병합이 일어나지 않고 브라우저를 기준으로 객체에 움직임이 적용된다. 자식 객체의 속성값이 부모객체에 영향을 주지 않는다.
Review
약 3일을 배우고 논하기 우수운 이야기 지만 레이아웃에 관련된 오늘 수업은 css에서 매주 중요한 부분이라는 생각이 들었다. 대중들이 생각하는 잘 만들어진 웹사이트는 결국 정보가 제대로 정리되어 전달되는 것에서 전해진다고 생각한다.
오늘의 강의 마지막에 position속성을 활용하는 가지수에 대한 내용이 있었는데 크게 공감한다. 객체와 컨텐츠를 자유자재로 배치하고 배열하는 작업이마 말로 가장 튼튼하게 쌓아야 될 실력이라고 생각하게 되었다.
