CSS 선수학습(9)

2021. 7. 21. 10:10

<!--

※ FlexBox

1. 부모 요소인 container와 자식 요소인 items가 반드시 필요하다.

</div>

2. 부모 요소인 container에 사용하는 스타일 속성

- display:flex; 플렉스 박스임을 지정

> 아이템 박스들이 좌에서 우로 배치된다.

- justify-content:space-between; 아이템의 수평 정렬을 지정

> flex-start: 왼쪽 정렬

> flex-end: 오른쪽 정렬

> center: 중앙 정렬

> space-between: 양끝 정렬

> space-around: 양끝 정렬(좌우에 여백 생성)

> space-evenly: 양끝 정렬(아이템 주변에 균등한 여백을 생성)

- align-items:center; 아이템의 수직 정렬

- flex-direction:column; 아이템을 줄바꿈 한다.

3. 자식 요소인 item에 사용하는 스타일 속성

-order:숫자; 숫자가 양수이면 오른쪽으로 배치, 음수이면 왼쪽으로 배치됨.

-->

<!DOCTYPE html>

<head>

<style>

* { margin:0; padding:0; box-sizing:border-box; }

.box {

width: 1100px; margin: 30px auto; padding:20px;

box-shadow: 0 0 25px #666 ;

}

.container {

display: flex;

justify-content: space-around;

align-items: center;

padding: 10px 0;

border-bottom: 1px solid #999;

}

.container img {width: 20%;}

.container p {width: 75%;}

p.second { order:-1;}

.bn { border: none;}

</style>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </p>

</div>

<p class="second">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. </p>

</div>

</div>

</div>

</div>

</body>

</html>

--------------실습문제 선생님풀이

<!doctype html>

<html>

<head>

<style>

* { margin:0; padding:0; box-sizing:border-box; }

.clear { clear:both; }

header {

display:flex;

justify-content:space-between;

align-items:center;

height:70px; padding:0 50px; background:#06f;

}

h1 { color:#fff; }

ul li { float:left; list-style:none; }

ul li a {

padding:5px 30px;

color:#fff; text-decoration:none; text-transform:uppercase;

}

ul li a:hover { color:#36f; background:#fc0; border-radius:5px; }

section { width:1300px; margin:0 auto; }

article {

float:left; width:80%; padding:30px;

border-right:1px solid #666;

}

article figure { float:right; width:50%; padding:20px 50px; }

article figure img {

width:100%; border:3px solid #fff;

box-shadow:0 0 10px #666;

}

article figure figcaption { padding-top:15px; text-align:center; }

article p { padding-top:20px; }

aside { float:right; width:20%; padding:30px; }

aside ul { margin-top:30px; }

aside ul li a { display:block; margin:5px 0; color:#333; }

footer {

height:200px;

border-top:1px solid #666;

}

</style>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</header>

</figure>

<p>

정당은 법률이 정하는 바에 의하여 국가의 보호를 받으며, 국가는 법률이 정하는 바에 의하여 정당운영에 필요한 자금을 보조할 수 있다. 국회는 상호원조 또는 안전보장에 관한 조약, 중요한 국제조직에 관한 조약, 우호통상항해조약, 주권의 제약에 관한 조약, 강화조약, 국가나 국민에게 중대한 재정적 부담을 지우는 조약 또는 입법사항에 관한 조약의 체결·비준에 대한 동의권을 가진다.

국회는 국민의 보통·평등·직접·비밀선거에 의하여 선출된 국회의원으로 구성한다. 근로조건의 기준은 인간의 존엄성을 보장하도록 법률로 정한다. 모든 국민은 거주·이전의 자유를 가진다.

</p>

<p>

</p>

<p>

</p>

</article>

<aside>

<ul>

</ul>

</aside>

</section>

</body>

</html>

'Coding' 카테고리의 다른 글

CSS 선수학습(11) (0)	2021.07.26
CSS 선수학습(10) (0)	2021.07.21
CSS 복습/실습 (0)	2021.07.20
CSS 선수학습(8) (0)	2021.07.19
CSS 선수학습(7) (0)	2021.07.16

Eunice

CSS 선수학습(9)

'Coding' 카테고리의 다른 글

+ Recent posts

티스토리툴바