신규 블로그를 만들었습니다!
CSS 쉬우면서도 알아야하는 내용이 굉장히 많습니다. 그 중에서도 중요하다고 생각하는 내용을 아래에 정리했습니다.
일단 display속성의 block, inline, inline-block, none 4가지를 살펴봅시다.
div와 span(display: block, inline)
div는 display 속성이 block이고, span의 경우 display 속성이 inline입니다.
여기서, block과 inline 이란?
block은 부모를 꽉 채우는 특징을 가짐.
inline은 자기 자신의 영역만을 채우는 특징을 가짐. 그냥 text라고 생각하면 편함.
예를들면,
body {
font-size: 2em;
}
div {
background-color: red;
}
span {
background-color: blue;
}<body>
<div>div</div>
<span>span</span>
</body>
여기서 div와 span의 크기를 조절해보면?
div와 span에 각각 너비(width)와 높이(height)를 주어줬습니다.
body {
font-size: 2em;
}
div {
background-color: red;
height: 300px;
width: 200px;
}
span {
background-color: blue;
height: 300px;
width: 200px;
}
하지만 span의 경우는 너비와 높이가 적용이 안됩니다. 그 이유는 span의 특징은 box가 아니기 때문에 크기 조정이 불가능 합니다.
display: inline-block
그렇다면 inline의 크기를 조정하고 싶다면 어떻게 해야할까? inline-block 속성을 이용하면 됩니다.
inline-block은 inline의 속성과 block의 속성을 둘다 가지고 있는 속성입니다.
body {
font-size: 2em;
}
div {
background-color: red;
height: 300px;
width: 200px;
}
span {
background-color: blue;
height: 300px;
width: 200px;
display: inline-block;
}
아까는 span에 크기를 적용해도 소용이 없었지만, display에 inline-block 속성을 주고 크기가 적용된것을 확인 할 수 있습니다.
display: none
none을 사용하면 해당 내용이 사라지게 됩니다. 그렇기 때문에, 보통 메뉴를 보이게 했다가 안보이게 했다가 할때 사용합니다.
body {
font-size: 2em;
}
div {
background-color: red;
height: 300px;
width: 200px;
}
span {
background-color: blue;
height: 300px;
width: 200px;
display: none;
}
두번째 다뤄볼 내용은 BOX MODEL입니다.
BOX MODEL
box-sizing: content-box(기본값)일 때, 총 길이의 크기는 width + 2*padding + 2*boder + 2*margin이 됩니다.
(2를 곱하는 이유는 양쪽에 하나씩 존재하므로)
하지만 box-sizing: border-box일 때는 width에 padding과 border가 포함이 됩니다. 그래서, 총 길이의 크기는 width + 2*margin이 됩니다.
(사실 boder-box가 다루기 쉬워서 많이 사용한다. 하지만, 꽤 최근의 브라우저만 지원이 된다는 단점이 있다. 그래봤자 explorer 옛날 버전만 안될 뿐...)
위 내용과 padding, margin등을 이용해서 2단 구성 레이아웃을 구성해봅시다.
2단 구성 레이아웃 만들기
html코드
<div class="container">
<section class="item item-a">
<h3>Section A</h3>
<p>백종원의 푸드트럭을 ...생략... 겸한다.</p>
</section>
<section class="item item-b">
<h3>Section B</h3>
<p>백종원의 푸드트럭을 ...생략... 겸한다.</p>
</section>
</div>css 코드
/* CSS Reset */
body, h3, p {
padding: 0;
margin: 0;
}
.container {
}
.item {
padding: 5%;
}
.item-a {
background-color: yellow;
}
.item-b {
background-color: yellowgreen;
}
block속성에 의해 width와 height를 모두 100%이기 때문에 화면 전체를 채우고 있습니다.
만약 Section A와 Section B를 2:3 크기로 조절하고 싶다면, Section A에는 width를 30%, Section B에는 width를 50%를 주면 됩니다.
30%, 50%를 주는 이유는 padding값으로 5%(양옆으로 총 10%)가 들어갔고 box-sizing의 기본값은 content-box이기 때문입니다.
즉, width: (30% + 5% + 5%) = 40%, height: (50% + 5% + 5%) = 60%라고 할 수 있습니다. (만약 이게 헷갈리고 복잡하다면 box-sizing을 border-box로 바꾸고 width:40%, height:60%를 주면 됩니다.)
/* CSS Reset */
body, h3, p {
padding: 0;
margin: 0;
}
.container {
font-size:0;
}
.item {
font-size:1rem; /* root em */
display: inline-block;
padding: 5%;
}
.item-a {
width: 30%;
background-color: yellow;
}
.item-b {
width: 50%;
background-color: yellowgreen;
}container에 보면 font-size: 0으로 되어 있습니다. 그 이유는 Section A와 B 사이에 공백문자가 들어가서(
과) 한줄에 나란히 나오지 않기 때문입니다.
container에서 font-size를 0으로 했으니 item에는 font-size를 1rem을 주어 원상태로 바꿔줍니다.
max-width
max-width를 통해 최대 늘어날 수 있는 width값을 설정 할 수 있습니다.
예를들면, container에 max-width: 1000px을 넣으면 1000px까지만 늘어나고 그 이상으로는 section이 늘어나지 않습니다.
/* CSS Reset */
body, h3, p {
padding: 0;
margin: 0;
}
.container {
max-width: 1000px;/* 최대 1000px까지만 */
font-size:0;
}
.item {
font-size:1rem; /* root em: 보통 16px */
display: inline-block;
vertical-align: top;
padding: 5%;
}
.item-a {
width: 30%;
background-color: yellow;
}
.item-b {
width: 50%;
background-color: yellowgreen;
}
margin: 0 auto (중앙 정렬)
그리고, 가운데로 정렬하는 방법이 있는데 자주 사용하는 방법으로 margin: 0 auto를 사용하는 방법입니다.
0으로 상하 값을 주고, 좌우값을 auto라는 값을 주면되는데, 여기서 auto라는 것은 좌우로 균등하게 margin값을 줍니다.
.container {
max-width: 1000px;/* 최대 1000px까지만 */
margin: 0 auto; /* 중앙 정렬 */
font-size:0;
}그래서 container에 margin: 0 auto;를 주게 되면, 컨텐츠가 가운데 정렬이 되는 것을 볼 수 있습니다.
CSS Reset
일단 아래 사진을 봅시다. 제목은 h3태그를 이용하고 내용은 p태그를 이용했습니다.
CSS를 적용 안했지만 기본적으로 가지고 있는 속성에 의해서 위와 같이 보이게 됩니다.
알아서 padding, margin, bold 등등 여러가지 기본으로 들어가 있는 속성 때문에 방해가 되곤 합니다. 그래서 이런 속성을 없애주는 초기화 작업을 합니다. 이런 작업을 CSS reset 이라고 합니다.
이러한 CSS Reset에서 유명한 "Eric Meyer"의 CSS Reset이 있습니다.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}그냥 위 내용을 css 파일에 복사 붙여넣기를 하면 됩니다. 사실 위 방법 말고 다른 방법도 많습니다.
그중에서 * {}, 에스테르크(*)를 이용한 방법이 있는데, 모든 태그에 적용한다는 의미입니다. 하지만, 브라우저가 모든 태그를 검색하기 때문에 렌더링 할 때 속도에 악영향을 미친다고해서 사용안하는 추세로 바뀌고 있습니다.
다른 글
2019/03/17 - [WEB/HTML&CSS] - HTML에서 이미지 가져오기 (img 태그)
HTML에서 이미지 가져오기 (img 태그)
웹 개발을 하다보면 이미지는 굉장히 중요한 역할을 합니다. HTML에는 자체적으로 이미지를 가져와 보여주는 기능이 있습니다. 이 기능을 하는 img 태그에 대해 살펴봅니다. 그리고, img 태그안에 들어가는 속성(s..
hongku.tistory.com
2019/03/18 - [WEB/HTML&CSS] - HTML 오디오 태그 (Audio, iframe) 음악 자동재생
HTML 오디오 태그 (Audio, iframe) 음악 자동재생
HTML 5부터 제공해주고 있는 오디오 태그가 있습니다. 오디오 태그를 이용해서 원하는 음악을 html에 넣을 수 있습니다. 그리고, audio 태그 말고 iframe 태그로도 음악을 넣을 수 있습니다. 아래에서는
hongku.tistory.com
'WEB > HTML&CSS' 카테고리의 다른 글
| CSS의 float 속성으로 레이아웃 구성하기 (1) | 2019.03.20 |
|---|---|
| HTML 오디오 태그 (Audio, iframe) 음악 자동재생 (3) | 2019.03.18 |
| HTML에서 이미지 가져오기 (img 태그) (1) | 2019.03.17 |
| HTML 테이블 사용방법 (table) (0) | 2019.03.16 |
| HTML에서 리스트 사용방법(ol, ul, li) (0) | 2019.03.15 |
최근댓글