HTML / CSS part를 공부하면서 배우게된 레이아웃에 대한 내용을 정리.
배움 출처 : https://ko.learnlayout.com/box-model.html
display 는 css에서 레이아웃을 제어하기 위해 필요한 가장 중요한 property이다.
사용자가 임의로 설정하지 않았을 경우 기본적으로 사용된 tag의 성질을 따른다.
block이 기본 설정인 tags
- div
- p
- form
..
inline이 기본 설정인 tags
- span
- a
- img
..
display: none
visibility: hidden
이 두가지 코드의 결과는 모두 "보이지 않게 하기" 이다.
단!
display: none은 해당 element가 아예 없는 존재가 되도록 하지만,
visibility: hidden 의 경우 해당 element가 존재하되, 보이지 않아 공간은 그대로 차지한다.
inline element와 비슷하지만 너비를 지정할 수 있다.
예제로 보면 이해하기가 더 쉽다!
float과 clear를 사용하여 박스그리드와 그리드에 포함되지 않는 컨테이너 구분
.box { float: left; width: 200px; height: 100px; margin: 1em; } .after-box { clear: left; }
inline-block을 사용
.box { display: inline-block; width: 200px; height: 100px; margin: 1em; }
두가지 방법의 공통된 결과
주의할 점이 있다.
1. inline-element는 vertical-align property의 영향을 받는다. (기본적으로 top으로 설정하려는 경향이 있다.)
2. 각 column의 너비를 설정해 주어야 한다.
3. HTML 각 column 사이에 공백이 있으면 column 간에 틈이 생긴다.
nav {
display: inline-block;
vertical-align: top;
width: 25%;
}
.column {
display: inline-block;
vertical-align: top;
width: 75%;
}
도움 받은 정보 출처 : https://heropy.blog/2018/11/24/css-flexible-box/
이에 대한 내용은 실습하면서 내가 실제 사용한 부분에 대해서만 되내이려 한다. (내용이 너무 많기 때문)
display 값에는 flex 값도 있다.
flex를 사용하기 위해선 container와 item 두가지 요소가 있어야 한다.
container를 display: flex 로 지정해줌으로써 안에 속한 item들의 정렬이 바뀐다.
여러가지 설정법 중 두가지를 되내이면
- display: flex;
- container들이 block 요소처럼 (수직) 쌓인다.
- display: inline-flex;
- container들이 inline 요소처럼 (수평) 쌓인다.
위 설정은 item이 아닌 container 양상에 해당하는 것임을 헷갈리지 말자!
크게 두가지만 살펴보면
- justify-content: space-between;
- item들 사이 간격을 일저하게 한다.- justify-content: space-around;
- item들 둘레의 간격을 일정하게 한다.
1번을 쓰면 사이간격만 조절되고 / 2번을 쓰면 첫번째와 마지막 child를 포함하여 모든 item의 테두리 간격이 조절된다.
새롭게 탄생한 CSS property!
위 그림은 놀랍게도 width 값이 같다!! 단, padding값이 서로 다르게 설정되어 있다.
.simple {
width: 500px;
margin: 20px auto;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border-width: 10px;
}
이런 현상때문에 실제 일할때 많은 어려움이 있었다고 한다.
다음과 같이 box-sizing을 적용하였다.
.simple {
width: 500px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.fancy {
width: 500px;
margin: 20px auto;
padding: 50px;
border: solid blue 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
그 결과 더이상 padding과 테두리가 너비를 늘리지 않는다.
위에서 말했듯 box-sizing은 새로게 도입된 css property다. 실험적인 요소이기 때문에 이를 활성화 하기 위해선 아직까지 위와 같은 코드를 붙여주어야 한다.
좀 더 복잡한 레이아웃!
position: ###;
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: -20px;
left: 20px;
background-color: white;
width: 500px;
}
위 코드와 같을때, relative2 요소는 relative1 요소에 대해 윗부분은 20px만큼 겹치고, 왼쪽에서부터 20px 떨어져 있는 위치에 존재하게 된다.
.relative {
position: relative;
width: 600px;
height: 400px;
}
.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}
레이아웃을 잡는 데 사용하는 또 하나의 css property
이미지 주위를 텍스트로 감싸기 위해 만들어 졌다.
예시)
이미지에 float: right;를 설정하면 이미지는 화면 오른쪽에, 글은 이미지공간을 비켜선채로 왼쪽 부분으로 보인다.
float의 동작 방식을 제어하는데 중요한 property
어떤 element가 float: left로 지정되어 있지만, margin으로 인해 공간이 띄어졌을때 그 다음 element가 그 element를 포함시켜 출력될 수 있다.
실제 section 부분은 div 다음에 있는 것이지만 화면 상 이렇게 나오는 것이다.
이를 해결하기 위해 section에 clear를 넣어준다!
clear: left;
그러면 left로 지정된 float 값을 무시하여 다음과 같이 나오게 된다. (left, right, both)
이미지가 그것을 담고있는 element보다 더 높을 경우 element밖으로 삐져나올때 사용하는 개념.
요즘 나온 개념!
.clearfix {
overflow: auto;
}
주의 : 요즘 나온 브라우저에만 적용된다. (IE6은 추가 코드 작성해야 한다.)
position처럼 작동하기
position을 이용했을 때
.container { position: relative; } nav { position: absolute; left: 0px; width: 200px; } section { /* position is static by default */ margin-left: 200px; }
floatd을 이용했을 때
nav { float: left; width: 200px; } section { margin-left: 200px; }
CSS는 아직도 최신 기술이 계속 개발되고 있다. 당장 지금만 해도 flexbox같은 개념들로 더 멋진 column을 설정할 수 있다고 한다! 아직 완전히 상용화는 되지 않아 모든 브라우저에서 활성화할수 있는건 아닌거 같지만...
일단 이정도 까지 되새기며 공부를 마치고, 앞으로 개발하면서 꾸준히 새로운 개념들을 찾아 공부해야 함을 다시한번 느꼈다.