flew 속성 어려움, 주의해서 다시 볼 것.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{background-color: #3d84b8;}
.parent{
border: 1px solid white;
height: 700px;
display: flex;
flex-direction: row;
/*기본이 nowrap고 wrap 컨텐츠 크기가 넘어가면 밑줄로 넘어감*/
flex-wrap: wrap;
/*justify-content center 메인축 아이템들을 정렬한다.
기본값이 flew-start, space-between 양끝맞춤*/
justify-content: center;
/*stretch가 기본값, 교차 축 아이템 */
align-items: flex-start;
/*stretch 기본값, 여러줄 정렬*/
align-content: flex-start;
}
.parent div{
background-color: #e1e5ea;
}
div{
/* display: block; default */
display: block;
border: 1px solid yellow;
padding: 20px;
margin: 30px;
}
span{
display: inline;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div>div box</div>
<span>span box</span>
<div></div>
</body>
</html>
참고 사이트
https://poiemaweb.com/html5-syntax
HTML5 Introduction & Syntax | PoiemaWeb
HTML (HyperText Markup Language)은 웹페이지를 기술하기 위한 마크업 언어이다. 조금 더 자세히 말하면 웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화하
poiemaweb.com
1분코딩
웹 창작자들을 위한 꿀정보
studiomeal.com
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
'공부 > 프론트앤드' 카테고리의 다른 글
| 스터디 01일) Do it! 반응형 웹 만들기 13~45페이지 (0) | 2020.07.24 |
|---|---|
| dothome 무료 호스팅 신청하기 (0) | 2020.07.09 |
| 자바스크립트) 오늘의 요일 switch문으로 표현 (0) | 2019.05.10 |
| 자바스크립트 do it! 2~3일차 (0) | 2019.05.02 |
| 30일 과정) 프론트단 공부하기 01 (0) | 2019.04.27 |
