<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>parent element size</title>
<style>
*{border: 1px dotted red;}
p{padding: 20px; margin: 4px;}
a{padding: 10px; margin: 10px;}
em{padding: 10px;}
strong{margin: 20px;}
img{padding: 10px;}
input{margin: 20px;}
</style>
</head>
<body>
<!-- 부모요소 box의 height이 언제나 자식의 box높이를 감싸지 않을 수도 있음 -->
<!-- 블록요소 안에 블록요소.. 일 때 [자식요소의 box(마진,패딩 포함된)의 높이를 감싼 사이즈]-->
<div style="border: 1px dotted blue;">
<p>hello</p>
</div>
<hr>
<!-- 블럭요소 안에 인라인요소를 배치했을떄 why??
블럭요소 입장에서는 자식인라인요소가 content로 느껴짐.. 그래서 단순히 overflow 상황으로 느껴짐-->
<div style="border: 1px dotted green; overflow: visible;">
<a href="">nice</a>
<em>good</em>
<strong>html</strong>
</div>
<hr>
<!-- 블럭요소 안에 인라인블럭요소를 배치할때는 자식의 box높이를 모두 감쌈 -->
<div style="border: 1px dotted black;">
<img src="../Day01/쿠로미.jpeg" alt="쿠로미" height="20">
<input type="text">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sub menu</title>
<style>
*{margin: 0; padding: 0;}
ul{list-style: none;}
nav{
height: 50px;
background-color: yellow;
}
#menu>li{
/* nav_item */
display: inline-block;
margin: 10px;
border: 2px solid blue;
padding: 5px 10px;
}
ul.submenu{
position: absolute;
border: 1px dotted red;
display: none;
}
ul.submenu>li{
border: 1px dotted green;
}
#menu>li:hover{
background-color: greenyellow;
}
/* 호버링 됐을 때 */
#menu>li:hover .submenu{
display: block;
}
</style>
</head>
<body>
<nav>
<ul id="menu">
<li class="nav_item">
aaa
<ul class="submenu">
<li><a href="">111</a></li>
<li>222</li>
<li>333</li>
</ul>
</li>
<li class="nav_item">
bbb
<ul class="submenu">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</li>
<li class="nav_item">
ccc
<ul class="submenu">
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex CSS style</title>
<style>
body{border: 1px dotted red;}
/* 자식요소들의 사이즈 볼 수 있또록 */
#container>div{
background-color: yellow;
padding: 20px;
margin: 10px;
width: 100px;
}
/* 가장 먼저 부모요소에 flex 스타일 적용 */
#container{
display: flex; /*자식요소들이 옆으로 배치. 마치, [인라인블럭요소]가 된 것 처럼*/
/* 여러가지 배치에 관련한 flex속성들 */
/* 1) 자식요소가 많아져서 부모의 사이즈를 벗어날때 설정 */
flex-wrap: wrap;
flex-wrap: wrap-reverse;
flex-wrap: nowrap; /*default*/
/* 2) 배치방향을 수직방향으로 변경 */
flex-direction: column; /*수직*/
flex-direction: column-reverse; /*밑에서 위로*/
height: 300px;
/* 수평배치 */
flex-direction: row; /*default*/
flex-direction: row-reverse; /*오른쪽에서 왼쪽으로*/
/* 3) flow : direction, wrap의 축약 속성 ::순서상관없음. */
flex-flow: column wrap;
flex-flow: nowrap row; /*default*/
/* 자식요소의 위치 정렬관련 속성 2개 */
/* 1. justify-content : 배치방향(direction)과 같은 방향의 정렬 */
/* 1.1 수평배치일때 수평정렬 */
flex-direction: row;
justify-content: center;
justify-content: flex-end; /*오른쪽끝*/
justify-content: flex-start;
justify-content: space-between; /*균등하게 배치 (많이 쓰임)*/
justify-content: space-around; /*요소둘러싸서 균등하게*/
justify-content: space-evenly; /*둘러싸서 균등하게 */
/* 1.2 수직배치일때 수직정렬 */
flex-direction: column;
justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
justify-content: flex-start; /*default*/
/* 2. align-items : 배치방향과 교차축의 정렬 */
/* 2.1 수평배치일때 수직정렬 */
flex-direction: row;
align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch; /*default*/
/* 2.2 수직배치일때 수평정렬 */
flex-direction: column;
align-items: center;
align-items: flex-end;
align-items: stretch; /*자식요소의 width속성이 있다면 그 너비가 우선시됨.*/
}
</style>
</head>
<body>
<!-- flex style : 자식요소들의 배치[layout]를 부모요소의 설정으로 결정하는 방식
[마치, 안드로이드의 LinearLayout 처럼] -->
<div id="container">
<div>aa</div>
<div>bb</div>
<div>cc</div>
<!-- <div>aa</div>
<div>bb</div>
<div>cc</div>
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>aa</div>
<div>bb</div>
<div>cc</div> -->
</div>
<hr>
<!-- 자식요소에 사용하는 flex 스타일속성 -->
<div id="container2">
<div id="c1">aaa</div>
<div id="c2">bbb</div>
<div id="c3">ccc</div>
</div>
<style>
/* 우선 부모요소가 flex style */
#container2{display: flex;}
#container2>div{
background-color: aqua;
padding: 20px;
margin: 10px;
}
/* 자식요소들에 설정하는 flex스타일 속성들 알아보기 */
/* 1)order : 배치의 순서를 변경 - 낮은 숫자가 먼저 배치됨 */
#c1{order: 3;}
#c2{order: 1;}
#c3{order: 2;}
/* 2) -grow : 너비를 상대적인 값의 비례로 결정 [android의 weight과 같은 기능] */
#c1{
order: 1;
flex-grow: 1;
}
#c2{
order: 2;
flex-grow: 1;
}
#c3{
order: 3;
flex-grow: 6;
}
/* 3) -shrink : 나머지 요소들과 비교하여 얼마나 줄어들지 결정. : 04번파일실습*/
/* 4) -basis : 요소의 초기 길이를 지정함 -width와 약간다름.
화면이 작아지면 우선적으로 먼저 축소됨 */
#c1{
flex-grow: 0;
}
#c2{
flex-grow: 0;
flex-basis: 200px;
}
#c3{
flex-grow: 0;
flex-basis: 400px;
}
/* 5) flex : 축약속성 [-grow -shrink -basis] */
#c1{flex: 0 0 0;}
#c2{flex: 1 0 0;}
#c3{flex: 1 0 0px;}
#c1{flex: 1;} /*-grow 만 써도 됨*/
#c3{flex: 3;}
/* 6) 자식요소 스스로의 위치를 정렬 */
#container2{
flex-direction: row;
height: 300px;
align-items: flex-start;
}
#c2{align-self: center;}
#c3{align-self: flex-end;}
/* #c2{justify-self: flex-end;} 도 같은 방식 */
</style>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
.container{
display: flex;
}
.container>div{
background-color: yellow;
width: 100px;
margin: 10px;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h1>flex-shrink style property</h1>
<div class="container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0;">3</div>
<div>4</div>
<div>5</div>
<div style="flex-shrink: 1;">6</div>
<div>7</div>
<div>8</div>
<div style="flex-shrink: 2;">9</div>
<div>10</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex style layout tamplet</title>
<style>
body{
font-family: 'Times New Roman', Times, serif;
margin: 0;
}
header{
height: 200px;
background-color: blue;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
nav{
display: flex;
background-color: black;
}
nav a{
color: white;
text-decoration: none;
padding: 14px 20px;
text-align: center;
}
nav a:hover{
background-color: white;
color: black;
}
.container{
display: flex;
flex-wrap: wrap;
}
.container aside{
flex: 3;
background-color: #f1f1f1;
padding: 20px;
}
.container .main{
flex: 7;
background-color: white;
padding: 20px;
}
.fakeimag{
background-color: #aaaaaa;
width: 100%;
padding: 20px;
}
footer{
padding: 20px;
text-align: center;
background-color: #dddddd;
}
/* 반응형 웹 rwd */
@media all and (max-width: 700px){
.container, nav{
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- header -->
<header>
<h1>my web site</h1>
<p>with a <strong>flaxiible</strong>layout</p>
</header>
<!-- navigation bar -->
<nav>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
<a href="#">link</a>
</nav>
<div class="container">
<!-- 왼쪽 사이드 -->
<aside>
<h2>about me</h2>
<h5>photo of me</h5>
<div class="fakeimag" style="height: 200px;">image</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus modi id minus dolore qui numquam culpa maiores commodi consequuntur inventore repudiandae laboriosam nulla vel tempora optio eius, quaerat accusamus neque.</p>
<h3>more text</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, atque voluptatum velit tempore dignissimos quia mollitia corrupti consectetur repellat! Soluta optio doloribus incidunt esse quas consectetur illum accusamus nisi libero!</p>
<div class="fakeimag" style="height: 50px; margin: 4px;">image</div>
<div class="fakeimag" style="height: 50px; margin: 4px;">image</div>
<div class="fakeimag" style="height: 50px; margin: 4px;">image</div>
</aside>
<!-- 본문 영역 -->
<article class="main">
<h2>title heading</h2>
<h5>title desciption 2023-10-31</h5>
<div class="fakeimag" style="height: 200px;" >image</div>
<p>some text...</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam deleniti ratione culpa velit, eos quasi sunt tempora unde, doloremque aperiam accusamus eius ullam ipsam! Commodi vitae mollitia expedita officia laudantium.</p>
<br>
<h2>title heading</h2>
<h5>title desciption 2023-10-31</h5>
<div class="fakeimag" style="height: 200px;">image</div>
<p>some text...</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam deleniti ratione culpa velit, eos quasi sunt tempora unde, doloremque aperiam accusamus eius ullam ipsam! Commodi vitae mollitia expedita officia laudantium.</p>
</article>
</div>
<!-- footer -->
<footer>
<h2>footer</h2>
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid style</title>
<style>
#container{
display: grid;
/* 격자모양을 결정 - 한줄에 3칸씩 배치해보기 */
grid-template-columns: 100px 100px 100px;
grid-template-columns: auto auto auto; /*화면 너비의 3분할*/
/* 줄 높이도 지정가능 */
grid-template-rows: 100px 150px;
column-gap: 1em; /*바로 부모의 글씨사이즈를 기준으로 한 배율 : em*/
row-gap: 0.5rem; /*무조건 최상위 부모의 글씨사이즈 기준 한 배율 : rem (권장)*/
gap: .5rem 1rem; /*축약: row, column*/
}
#container div{
background-color: aqua;
margin: 4px;
text-align: center;
padding: 8px;
}
/* 자식요소(셀) 관련 속성 */
#item1{
/* 셀병합 */
grid-column-start: 1;
grid-column-end: 3;
/* 1부터 3전까지 : 1~2*/
}
#item3{
grid-column-start: 2;
grid-column-end: 4;
/* 2~3 */
}
#item5{
grid-column: 3 / span 2;
/* 3~4 */
}
#item6{
grid-row-start: 3;
grid-row-end: 5;
/* 3~4번 줄 */
}
</style>
</head>
<body>
<!-- 격자 배치구조..[웹사이트의 기본 레이아웃같은 .. 모양]에 특화된 스타일 -->
<div id="container">
<div id="item1">1</div>
<div id="item2">2</div>
<div id="item3">3</div>
<div id="item4">4</div>
<div id="item5">5</div>
<div id="item6">6</div>
<div id="item7">7</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid style layout tamplet</title>
<style>
#container{
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-template-rows: auto 300px auto;
}
#container> div{
background-color: aquamarine;
text-align: center;
padding: 20px 0;
font-size: 30px;
border: 1px solid black;
}
#item1{ grid-column-start: 1; grid-column-end: 6;}
#item2{ grid-column: 1; grid-column-end: 2;}
#item3{ grid-column: 2; grid-column-end: 5;}
#item4{ grid-column: 5; grid-column-end: 6;}
#item5{ grid-column: 1 / span 5;}
</style>
</head>
<body>
<div id="container">
<div id="item1">header</div>
<div id="item2">menu</div>
<div id="item3">main content</div>
<div id="item4">right</div>
<div id="item5">footer</div>
</div>
</body>
</html>
'CSS' 카테고리의 다른 글
Web App: 반응형웹03 (0) | 2023.10.30 |
---|---|
Web App: 반응형웹02 (1) | 2023.10.30 |
Web App: 반응형웹01 (0) | 2023.10.30 |
웹사이트 만들어보기 (0) | 2023.10.30 |
CSS-D5 (0) | 2023.10.30 |