HTML
<div></div> = 웹사이트의 레이아웃을 만들때 주로 사용.
div태그를 사용하여 각각의 블록을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있음.
#속성
1.style은 div태그의 스타일을 지정해주는 것으로 다른 속성들을 사용할 수 있게끔 해줌. <div style="">
2. width는 div의 가로 크기를 정해줌. px(픽셀)단위로도 정할 수 있고 %(비율)단위로도 정할 수 있음.
3. height는 div의 세로 크기를 정해줌. px(픽셀)단위로도 정할 수 있고 %(비율)단위로도 정할 수 있음.
4. border은 div의 테두리의 굵기를 정해줌. 숫자가 클수록 굵기가 굵어짐.
5. background-color은 div태그의 배경색상을 정하는 속성임.
6. float은 div의 정렬(좌,우)을 하는 속성. 가운데정렬은 안됨.
7. margin은 div의 정렬기준 끝에서부터 여백을 주는 속성. (margin-top,margin,-bottom,margin-left,margin-right)
#inline 과 block 속성
태그는 웹브라우저에 탑재된 스타일시트에 따라 기본적인 CSS속성을 가지있다. 그 중 inline과 block이라는 속성은 화면 레이아웃과도 직접적인 연관성이 있기에 이해할 필요가있다.
-
inline 속성은 쉽게 말해 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치하려는 성향임. 대표적으로 <a> 태그. 그래서 inline 속성은 문장안에서 사용하는 태그에 주로 기본값으로 설정되어있음.
tip) 어떤 태그가 인라인 요소인지 일일이 종류를 나열하는 것보다는 CSS를 작성할 때 아래와 같은 특징을 발견해서 파악하는게 좋다.
1) 상,하단 외부 여백(margin-top, margin-bottom) 속성을 정의해도 적용되지 않는다. 인라인 요소의 상, 하 여백은 margin이 아니라 line-height 속성에 의해 발생
2) width와 height 속성도 적용되지 않는다. 인라인 요소의 너비와 높이는 태그가 품고 있는 내부 요소의 부피에 맞춰짐.
3) 인라인 속성을 가진 태그끼리 연속으로 사용되는 경우에는 최소한의 간격을 유지하기 위해서 좌, 우에 약 5px 가량의 외부 여백(margin)이 자동으로 발생이와같은 특징은, 인라인 요소를 가진 태그들이 서로 나열되었을 때, 최소한 같은 줄에 같은 높이로 가지런히 위치하면서, 약간의 좌우 간격으로 서로를 분별할 수 있도록 하기 위한 웹 브라우저의 기본 설정 때문
-
block 속성은 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지. 대표적으로 <p>태그
블록 속성을 가지고 있는 태그는 기본적으로 width:100% 속성을 가지고 있음. 화면의 가로 폭을 100%로 완전히 차지해서 다음 요소가 양 옆으로 붙을 공간이 없어져서 자연스럽게 줄 넘김이 됨. margin, width, height 속성을 정의하면 모두 적용된다.
tip) 특정 태그가 블록 요소인지 아닌지 가장 쉽게 파악하는 방법은 CSS로 배경색을 입혀보는 것이다. 배경색이 화면 폭을 모두 차지한다면 그 태그는 블록속성 태그이다.
cf) Block은 Inline을 포괄하는 더 큰 개념. 따라서 HTML을 마크업 할 때는 Inline 속성의 태그 안에 Block 속성 태그를 넣으면 문법 오류가 됨. inline < block
CSS
#flex란?
웹페이지의 레이아웃을 잡을 때 보통 display, float, position과 같은 css 속성들을 이용함. 그런데 이러한 속성들로 레이아웃을 구현하는 게 몹시 복잡하거나 어려울 때가 있음. 그래서 css3에 flex라는 방식이 새롭게 추가됨. flexible box, flexbox라고도 부름.
flexbox는 부모 요소인 flex container와 자식 요소인 flex item으로 구성됨. flex container가 flex 태그의 영향을 받는 공간이고 그 안에서 flex item들의 배치, 정렬이 설정된 속성에 따라 변경되는 것.
<div class="flex_container">
<div class="flex_item"></div>
<div class="flex_item"></div>
<div class="flex_item"></div>
<div class="flex_item"></div>
<div class="flex_item"></div>
</div>
<style>
.flex_container {
border:1px solid white;
}
.flex_item {
margin:5px;
width:50px;
height:50px;
background-color:#f2c94c;
}
</style>
div는 기본적으로 block 속성을 가지고 있기에 수직으로 쌓인다.
<style>
.flex_container {
display:flex;
border:1px solid white;
}
.flex_item {
margin:5px;
width:50px;
height:50px;
background-color:#f2c94c;
}
</style>
이렇게 flex_containter에 display:flex; 속성을 적용해주면 수직정렬된 flex item들이 수평으로 정렬됨.
