<link href="styles.css" rel="stylesheet" /> head안에 넣어서 html과 css를 연결시킴
font-weight
font-style:italic
text-align: center
inline 종류 : span, a, image
inline -> block 으로 바꾸기
span {display: block;}
block을 inline으로 바꾸기(width와 height를 가진)
div {display: inline-block;} : default값에 문제가 많음... 빈 공간 문제, 정해진 형식이 없음
inline-block은 responsive disign 반응형 디자인을 지원하지 않음
->flex 사용
flexbox 3가지 규칙
1. 자식 엘리먼트(div)에게는 어떤 것도 적지 말아야한다. 부모 엘리먼트(body)한테만 명시해야함.
<body>
<div>1</div></body>
에서 body는 div의 부모, div는 1의 부모
2. main axis (수평) cross axis (수직)
3.
부모 엘리먼트를 flex container로 만들어야함 부모가 자식을 제어함
flex contrainer은 두개의 축을 가짐. main axis(디폴트는 수평이고 나중에 수직으로 바꿀수o), cross axis
body {display: flex; justify-content: center; align-items: center;}
justify-content: 의 default는 flex-start임. (수평)
space-evenly는 빈 공간을 같은 크기로 나눠서 배치.
space-around space-between
align-items (수직)
body에 height값을 줘야함 100vh viewport height(화면높이의 100%)
align-items:stretch; height값이 없는 경우에 늘어나게함.
주축을 수평이 아니라 수직으로 바꾸고싶다면(cross axix는 수평이 됨)
body {flex-direction : column} defaults는 row column-reverse row-reverse
wrapping : 화면을 줄였을때 box가 줄어드는현상
body{flex-wrap: wrap} box크기가 유지됨 wrap-reverse
요소가 inline이면 그 요소는 width height를 가질 수 없다. padding margin은 가질수있음
대신 위, 아래에 margin을 가질 수 없다! 좌,우만 가짐. padding은 상하좌우 다 가질 수 있다
상,하에 margin을 줘야한다면 inline을 block으로 바꿔야한다.
block은 width height가 있다.
block의 큰 특징 3가지
1. margin : border로부터 바깥 공간 (body의 margin은 default 8px)
2. padding : border로부터 안쪽 공간
3. border : box의 경계
margin : 10px 20px 상하에 10px 좌우에 20px
collapsing margins
box의 경계가 다른 box의 경계와 같다면 두개의 margin은 하나로 취급됨 (상,하에서만)
->padding 사용
border: 2px solid black; 너비 스타일 색상
border는 inline에도 적용된다
하나의 태그에서 여러개의 class를 가질 수 있다.
<span class="a b c d e">
border-radius 둥글게
'Dev > HTML5 CSS3' 카테고리의 다른 글
| [코코아톡] 챌린지 6일차 (0) | 2022.02.19 |
|---|---|
| [코코아톡] 챌린지 5일차 / position, pseudo selectors (0) | 2022.02.18 |
| [코코아톡] 챌린지 3일차 / meta, label, input, semantic HTML (0) | 2022.02.17 |
| [코코아톡] 챌린지 2일차 / HTML, CSS 간단한 정리 (0) | 2022.02.16 |
| [코코아톡] 챌린지 1일차 / HTML 공부 중! (0) | 2022.02.14 |