반응형
안녕하세요 코딩초밥입니다 ㅇㅅㅇ
웹앱을 만들려고했을때 저는 처음에 배치를 하는 과정이
안드로이드스튜디오와 달라서 힘들었는데요!(사실 실력이 부족..)
CSS로 콘텐츠를 배치를 하려면 일일이 하나씩 배치를 하는 느낌이라서 꽤 힘들었습니다.
허나 이 FLEX 기능은 안드로이드스튜디오처럼
자식요소들의 배치를 부모요소가 결정을 합니다(한줄기의희망)
자 같이 알아보도록할까요?
안드로이드 스튜디오에서 작업하시다 오신분들에게 설명을 빠르게 드리기위해서는
방향지정에 관한 키워드입니다 눈에 익으시죠? 이렇게 생각하시면됩니다.
orientation=flexdirection
horizontal= row
vertical= colcumn
display의 한 요소인 flex는
자식요소들을 자동으로 inline-blox요소로 바꿉니다. inline인 요소들도 blox요소처럼되서
한칸을 먹는게아니라 옆으로 이동한다는 이야기입니다.
기본적으로 자식의 배치방향은 row입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flexstyle</title>
<style>
body{
margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
/* header요소 [클래스선택자를 사용함으로서 나중에
다른요소에 같은 스타일 지정할떄 용이해짐] */
.header{
background-color: #1abc9c;
height: 160px;
display: flex;
/* oreantation */
flex-direction: column;
/* 위아래중에 센터 */
justify-content: center;
/* 좌우로 센터 */
align-items: center;
/* justify-content: center;
align-items: center; */
color: white;
}
/* navbar style */
.navbar{
background-color: #333333;
display: flex;
/* flex를 display해놓으면 안에있는녀석들이
inline으로 변해서 */
}
.navbar a{
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
}
.navbar a:hover{
color: tomato;
background-color: wheat;
}
/* 콘텐츠 영역(2개 영역: aside,section) */
/* 좌우로 배치되도록 */
.container{
display: flex;
/* 브라우저 사이즈가 작아지면 밖으로나갈수도있으니까
자동 줄바꿈*/
flex-wrap: wrap;
}
/* 왼쪽사이드 */
#side{
flex-grow: 3;/*row방향으로 너비가 30%의비율*/
background-color: seagreen;
padding: 20px;
}
/* 본문영역 */
.main{
flex:7;
padding: 20px;
background-color: white;
}
.fackimg{
background-color: turquoise;
width: 100%;
padding: 20px;
}
.footer{
padding: 20px;
background-color: tomato;
text-align: center;
}
/* 화면너비가 700보다 작을때{}안의 스타일 적용 */
@media screen and (max-width: 700px){
.container,.navbar{
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- 1.note:사이트를 열었을떄 알림사항들을 보여주는 영역 -->
<div style="background-color: khaki; padding: 5px;">
<h4 style="text-align: center;">브라우저 사이즈를 조절하면 반응형웹 효과있습니다</h4>
</div>
<header class="header">
<h1>My Website</h1>
<p>With a <strong>flexible</strong>layout</p>
</header>
<!-- Navigation bar -->
<nav class="navbar">
<a href="">link</a>|
<a href="">link</a>|
<a href="">link</a>|
<a href="">link</a>|
</nav>
<!-- aside영역과 section영역 2개를 옆으로 배치하기 위해 -->
<!-- flex스타일로 지정 row방향 -->
<div class="container">
<aside id="side">
<h2>About Me</h2>
<h5>photo of me:</h5>
<div class="fackimg" style="height: 200px;">Img</div>
<p>Some text about me</p>
<h3>More Text</h3>
<p>This is more text</p>
<div class="fackimg" style="height: 60px;">image</div><br>
<div class="fackimg" style="height: 60px;">image</div><br>
<div class="fackimg" style="height: 60px;">image</div><br>
</aside>
<section class="main">
<h2>TITLE HEADING</h2>
<h5>title description, Dec 7, 2020</h5>
<div class="fackimg" style="height: 200px;">image</div>
<p>sometext..</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur unde beatae cupiditate maxime necessitatibus. Laudantium rerum perspiciatis, quaerat ipsa illum mollitia maxime vero voluptates nisi sed tenetur. Inventore, reprehenderit a.</p>
<h2>TITLE HEADING</h2>
<h5>title description, Dec 7, 2020</h5>
<div class="fackimg" style="height: 200px;">image</div>
<p>sometext..</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequuntur unde beatae cupiditate maxime necessitatibus. Laudantium rerum perspiciatis, quaerat ipsa illum mollitia maxime vero voluptates nisi sed tenetur. Inventore, reprehenderit a.</p>
</section>
</div>
<!-- footer -->
<div class="footer">
<h2>footer</h2>
</div>
</body>
</html>
반응형
'이과 > HTML,CSS,JS' 카테고리의 다른 글
| HTML_오디오,비디오 div, span (2) | 2021.05.06 |
|---|---|
| 반응형 웹디자인. (5) | 2021.05.03 |
| HTML_줄바꾸기,헤딩,수평선,리스트 (0) | 2021.05.01 |
| HTML에 대한 이해 (1) | 2021.04.30 |
| CSS_CSS에 대한 이해 (0) | 2021.04.30 |
댓글