HTML파일에 CSS를 적용하는 2가지 방법
- HTML 파일의 head안에
<style>태그를 만듬- styles.css 파일을 따로 만들어서, HTML 파일에서
<link>태그안에 링크한다.
CSS 코드 작성방법
h1 {
color: blue;
font-size: 30px;
font-style: italic;
text-align: center;
}
- selector(태그)를 지정하고 curly bracket(중괄호)를 연다.
- color, font-size, text-align 등의 속성값을 준다.
- 속성값에 맞는 value값을 지정한다 (blue,30px,cecnter 등)
- 세미콜론(;)으로 마무리 한다.
block
block: 옆에 다른 요소가 못 오는것
대표적으로 <div> 와 <p>
inline
inline: 옆에 다른 요소가 올 수 있는 것. '같은 줄에 위치할 수 있다(in the same line)' 는 뜻이다. 대표적으로 <span>, <a>, <img>
inline은 높이와 너비가 없음.
=> 그래서 위, 아래에 margin을 가질수 없음. (But! padding은 사방에 가질 수 있음.)
=> 위,아래에 margin을 적용하고 싶다면 inline 요소를 block으로 바꿔야 함.
=> display:block; 을 통해서 inline요소를 block요소로 바꿀 수 있음.
box
box는 margin, border, padding으로 구성되어있다.
(1) margin : box의 border(경계)의 바깥에 있는 공간이다.
body{
margin: 0;
margin-left:10px;
margin-right:20px;
margin-top:20px;
margin-bottom:10px;
}
-위와 같이 보라색 box에 margin: 20px를 주면 상하도 margin이 적용되어야 하지만, 좌우만 적용된다. 보라색 box의 경계(border)가 같을 때 Collapsing margins 현상이 일어난다. 그래서 보라색 box의 상하에 margin이 적용이 안됨.
==> 이 현상은 상하에서만 일어나고 두 box의 margin이 동일하게 되는것이다.
💡 이를 해결하기 위해서는 padding의 개념이 필요하다.
(2) padding : box의 border의 안쪽에 있는 공간이다.
-베이지색 box에 padding 20px를 적용함.
(3) border : 말 그대로 box의 경계이다.
- border는 주로 width, style, color 속성을 사용한다. ex) border:3px solid white;
- border 속성 하나에 세 가지의 속성을 모두 적용시킬 수 있지만, style만 바꾸고 싶다면 border-style을 사용하면 됨. ex) border-style:dashed;
🖐 참고로 margin, padding의 속성값을 줄 때,
margin: 20px; // 이렇게만 적으면 위,아래,좌,우 모두 20px 적용
margin: 20px 15px; // 이렇게 적으면 20px는 위,아래에 적용되고 15px는 좌,우에 적용됨
margin: 40px 30px 20px 10px; // 이렇게 적으면 각각 위, 우, 아래, 좌에 적용된다.selector
<!DOCTYPE html>
<html lang="kr">
<head>
<style>
* { : '*'는 모든 요소에 적용
}
tag { : tag는 특정 tag에 적용
}
#id { : id는 '#'을 붙인다.
}
.class { : class는 '.'을 붙인다.
}
</style>
</head>
<body>
<tag>
<tag id="id"> : id (중복 불가. 한 tag당 id 1개)
<tag class="class"> : class (중복 가능. 여러 tag에 동일한 class 가능)
</body>
</html><div>와 같은 요소에는<div id="first>처럼 id를 줄수있는데, 한 요소는 id를 하나만 가질수 있고 이 요소에 대해서 css를 적용하려고 할땐 #id를 이용해서#first{ }로 접근해서 적용하면된다.- 여러 요소에 공통으로 스타일을 적용하려고 할때 id를 사용하지않고 class를 사용하는게 유용하다.
<div class="first>처럼 쓰면되고 .first{ }로 접근해서 적용하면된다. class명은 id와 달리 유일할 필요가 없어서 여러 요소들이 같이 사용할수있다. 하나의 요소에는 하나의 id만 가질수 있지만, 클래스는 하나의 요소에 여러개를 가질수 있다.
ex)<span class="tomato hello potato">==> 각각의 클래스로 본다. 그래서 .tomato{ } 도 할수있고, .hello{ } 도 할수있다.
💥 참고로, display 속성에는 block, inline, inline-block이 있는데, block은 margin이 상하좌우 적용 가능하지만, inline은 margin이 상하는 적용이 안되고 좌우만 적용 가능하다.
그리고 block(display:block / ex) <div> )은 width와 height를 줄수있지만, inline(display:inline / ex)<span> ) 은 width와 height를 줄수없다.
--> 인라인은 높이와 너비가 적용 안되기 때문에 위, 아래에 margin을 가질 수 없고 좌우로만 가질 수 있음. but, padding은 사방에 다 가질 수 있음.
inline으로 width와 height를 주려면 diplay를 inline-block으로 변경해야한다.
하지만 inline-block은 잘 안쓴다...
inline-block은 반응형 디자인을 지원하지않는다. 그래서 화면 크기에 따라 영향을 받는다.
--> 그렇기 때문에 inline-block대신에 flex를 사용한다.
flex
- flex는 내부 요소들을 유연하게 배치하는 방법으로 수평 또는 수직으로 배열할수있고 공간분배와 정렬등을 설정할수있다.
display:flex는 블록 요소이다. 해당 요소는 블록 요소의 특성을 가지게 됩니다. 즉 display:block과 동일하다.- 내부 엘리먼트의 width나 height를 지정하지 않고도 유연하고 균형잡힌 배치가 가능하다.
- 내부 엘리먼트는 일정한 비율을 유지한 채 위치하게 된다. ( justify-content와 align-items를 이용 )
<html>
<head>
<style>
body {
display:flex; : body안에 소속된 모든 div들에게 영향을 줌(부모)
}
</style>
</head>
<body>
<div1></div1> :영향을 받는 div들(자식1)
<div2></div2> :영향을 받는 div들(자식2)
<div3></div3> :영향을 받는 div들(자식3)
</body>
</html>
flex의 속성
display: flex;// flex 레이아웃을 적용- 자식 element들을 한꺼번에 움직이게 하려면 부모 element에게 명시하면된다.
ex) div가 자식이라면, body는 부모임.
즉, 부모에게 flex속성을 준다. - 감싸고 있는 겉에 있는 큰 박스 = 부모요소인 flex container
안에 있는 두개의 작은 박스 = 자식요소인 flex item
즉, 부모가 담고있는 자식들의 위치를 정렬하는 방법이다. - 이를 통해 flex container 내의 요소들(flex item)을 가로 또는 세로 축을 기준으로 정렬하고 간격을 조절할 수 있습니다.
- flex를 사용하게되면 기본적으로 main axis(가로축)을 기준으로 정렬된다. 그래서 flex item들이 왼쪽에서 오른쪽으로 수평적으로 배치가 된다.
flex-direction : row;(row || column || row-reverse || column-reverse)
// 내부 요소들의 정렬 방향을 나타낸다. row 는 가로방향 정렬, column 은 세로방향 정렬, flex-direction을 명시하지않으면 디폴트값은 row이다.- 그리고 display:flex를 하면,
justify-content와align-items를 적용할수있다.
<style>
body {
display: flex;
justify-content: main axis(주축)방향으로 콘텐츠 정렬
align-items: cross axis(교차축)방향으로 콘텐츠 정렬
flex-direction:column; //flex방향을 column(수직)로 바꾼다(디폴트값은 row(수평)이다).
//flex-direction이 column이면 주축은 수직이되고 교차축은 수평이된다.
flex-wrap: nowrap //예를들면 화면의 한 줄(수평)에 들어가는 만큼 박스의 width를 줄이거나 늘려서 최대한 넣는다.
// wrap을 하게되면 명시된 사이즈(width,height)를 반영함. 그게 되지 않으면 다음 줄로 옮김
}
</style>- body가 height 값을 갖고 있지 않으면, body는 박스의 크기 만큼만 크니까 align-items를 설정하더라도 바뀌지 않음.
이럴때, body에 height값을 px로 줘도 작동하지만, vh(viewport height)을 100vh로 줄 수 있다. (viweport = screen, 100vh는 화면높이의 100%를 말함. vh는 아이폰, 맥북등 기기에 따라 달라져서 유용함.
==> 이렇게하면 align-items를 설정하면 바뀐다. body의 height를 화면전체를 말하는 100vh로 주게되면 body의 높이는 화면전체의 높이이고 이 안에 박스가 있으므로 align-items를 이용해서 박스를 설정할수있다.
❗ 아래 코드처럼 자식 엘리먼트인 div 안에 있는 콘텐츠 text(1,2,3)에도 flex속성을 줄 수 있다.
<head>
<style>
body {
height: 100vh;
margin: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
div {
display: flex; //div안의 콘텐츠(text)에 적용되는 flex
justify-content: center; //div안의 콘텐츠에 적용되는 값
align-items: center; //div안의 콘텐츠에 적용되는 값
width: 200px;
height: 200px;
font-size: 28px;
color: white;
background-color: teal;
}
#second {
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div>1</div>
<div id="second">2</div>
<div>3</div>
</body>
</head>
