웹프로그래밍/HTML CSS JavaScript
[CSS] 레이아웃과 flex
아잠만_
2024. 4. 30. 17:33
레이아웃
display 속성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
border : 1px solid blue;
width: 200px;
height: 40px;
display : none;
}
input[value=확인1]{
display: none;
}
</style>
<script type="text/javascript">
function showdiv() {
// div요소를 검색
let div = document.querySelector('div');
// div style를 변경
div.style.display = 'block';
// 확인1인 요소를 검색
let value1 = document.querySelector('input[value=확인1]');
value1.style.display = 'inline-block';
}
/*
const showdiv = function() { }
const showdiv = () => { }
*/
</script>
</head>
<body>
<button onclick="showdiv()">확인</button>
<br><br>
<div>
<p>다람쥐 헌 쳇바퀴에 올라타</p>
</div>
<br>
<input type="button" value="확인1">
<input type="button" value="확인2">
</body>
</html>레이아웃 위치
position 속성
요소의 위치를 지정하는 유형 설정
| static (정적 위치) | 정적으로 배치된다 ( 기본 값 ) |
| relative (상대 위치) | 정적인 위치를 기준으로 배치된다 |
| absolute (절대 위치) | 컨테이너를 기준으로 배치된다 |
| fixed (고정 위치) | 항상 같은 위치(컨테이너 원점)에 배치된다 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
margin: 20px;
border : 1px solid black;
}
.dd1{
background: red;
}
.dd2{
background: orange;
}
.dd3{
background: yellow;
}
.dd4{
background: green;
}
#d3{
position: relative;
top: 50px;
left: 80px;
}
#d6{
position: absolute;
top: 200px;
left: 200px;
}
#d11{
position: fixed;
top: 300px;
right: 200px;
}
</style>
</head>
<body>
<div class="dd1" id="d1">d1</div>
<div class="dd2" id="d2">d2</div>
<div class="dd3" id="d3">d3</div>
<div class="dd4" id="d4">d4</div>
<div class="dd1" id="d5">d5</div>
<div class="dd2" id="d6">d6</div>
<div class="dd3" id="d7">d7</div>
<div class="dd4" id="d8">d8</div>
<div class="dd1" id="d9">d9</div>
<div class="dd2" id="d10">d10</div>
<div class="dd3" id="d11">d11</div>
<div class="dd4" id="d12">d12</div>
</body>
</html>z-index
글씨는 기본 z-index=0;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div{
width: 100px;
height: 100px;
margin: 20px;
border : 1px solid black;
position: absolute;
}
.dd1{
background: red;
top : 100px;
left : 100px;
}
.dd2{
background: orange;
top : 150px;
left : 150px;
}
.dd3{
background: yellow;
top : 180px;
left : 180px;
z-index: 10;
}
.dd4{
background: green;
top : 200px;
left : 200px;
}
hr{
position: relative;
top: 350px;
left:10px;
}
img{
position: relative;
top : 450px;
z-index: -10;
}
</style>
</head>
<body>
<div class="dd1" id="d1">d1</div>
<div class="dd2" id="d2">d2</div>
<div class="dd3" id="d3">d3</div>
<div class="dd4" id="d4">d4</div>
<hr color='red'>
<img src="../images/cola.png" alt="">
<p>미국의 약사인 존 스티스 펨버턴(John Stith Pemberton, 1831~1888)[11]에 의해 만들어진 것으로, 원래는 포도주를 주 원료로 해 당대의 인기 음료였던 뱅 마리아니(Vin Mariani)를 베낀 제품이었다. 당시 이름은 펨버튼의 프렌치 와인 코카(Pemberton's French Wine Coca)였고, 뱅 마리아니의 흔한 유사품 중 하나 정도의 위치에 있었다.
1886년 애틀란타 카운티에 금주법이 시행되자[12] 포도주를 탄산수로 대체해서 새로운 음료를 만들었고, 펨버턴의 경리 직원이었던 프랭크 메이슨 로빈슨(Frank Mason Robinson)이 주성분의 이름을 조합해 코카콜라라는 이름을 붙였다. #
1886년 당시에는 첨가물 없이 순수히 코카잎 추출 성분과 콜라나무[13] 씨앗 추출물과 탄산수로 만들어졌었으며, 이것만으로는 부족해서 첨가물을 더 넣고 만든 것이 오늘날의 코카콜라 음료가 되었다. 이후 로빈슨은 펨버턴과 동업자가 되었고, 하술하듯 펨버턴 사후에는 에이사 캔들러와 동업하여 코카콜라 컴퍼니를 창립했다. 특히 로빈슨은 코카콜라의 독특한 흘림체 로고를 디자인하기도 했다.
이 음료는 그가 운영하는 약국의 소다수 판매 진열대에서 잔당 5센트로 판매되었지만, 별로 판매량이 좋지 않았다. 2년 후, 그는 이 청량음료에 대한 제조, 판매 등 모든 권리를 단돈 2000달러(현재가치로 5500만원)에 팔아버렸고, 존 펨버턴은 코카콜라의 권리를 판매한 지 몇 달 되지 않아 위암으로 별세했다. 그 때문에 별세하기 이전에 본인의 역작을 능력 있는 사업가에게 맡겼다는 얘기도 있다. 이 권리를 구매한 사람이 약제상인 에이사 캔들러이다.
1892년 에이사 캔들러는 이 청량음료의 가능성을 알아보고 프랭크 로빈슨과 함께 코카콜라 컴퍼니(The Coca-Cola Company, TCCC)를 설립했다. 이후 에이사 캔들러의 탁월한 영업 능력으로 판매량은 급증하였고, 코카콜라는 미국을 상징하는 청량음료로 성장하게 되었다.
현재 코카콜라 병의 디자인은 1915년 캔들러가 상금 500달러를 걸고 보기만 해도 코카콜라임을 알 수 있을 만큼 특색 있는 병을 만들기 위해 공모전을 열어서 채택한 것이다. 이 공모전에서 루트 유리 공장(The Root Glass Company)의 디자이너였던 알렉산더 새뮤얼슨(Alexander Samuelson)과 얼 딘(Earl Dean) 등 직원 5명이 제안한 디자인이 뽑혔다. 일설에는 1923년에 루드라는 인물이 코르셋 낀 드레스를 보고 만들었다는 말도 있었지만, 사실 어이없게도 코카나 콜라에서 병 모양을 생각해 냈던 것이 아니라 전혀 관련 없는 카카오 열매를 콜라 열매로 착각해서 만들었다고 한다.
</p>
</body>
</html>float
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{
width: 200px;
height: 200px;
float : left;
}
p{
width : 80%;
}
hr{
clear : both;
}
#img2{
float : right;
}
</style>
</head>
<body>
<img src="../images/Penguins.jpg" alt="penguin">
<p>미국의 약사인 존 스티스 펨버턴(John Stith Pemberton, 1831~1888)[11]에 의해 만들어진 것으로, 원래는 포도주를 주 원료로 해 당대의 인기 음료였던 뱅 마리아니(Vin Mariani)를 베낀 제품이었다. 당시 이름은 펨버튼의 프렌치 와인 코카(Pemberton's French Wine Coca)였고, 뱅 마리아니의 흔한 유사품 중 하나 정도의 위치에 있었다.
1886년 애틀란타 카운티에 금주법이 시행되자[12] 포도주를 탄산수로 대체해서 새로운 음료를 만들었고, 펨버턴의 경리 직원이었던 프랭크 메이슨 로빈슨(Frank Mason Robinson)이 주성분의 이름을 조합해 코카콜라라는 이름을 붙였다. #
1886년 당시에는 첨가물 없이 순수히 코카잎 추출 성분과 콜라나무[13] 씨앗 추출물과 탄산수로 만들어졌었으며, 이것만으로는 부족해서 첨가물을 더 넣고 만든 것이 오늘날의 코카콜라 음료가 되었다. 이후 로빈슨은 펨버턴과 동업자가 되었고, 하술하듯 펨버턴 사후에는 에이사 캔들러와 동업하여 코카콜라 컴퍼니를 창립했다. 특히 로빈슨은 코카콜라의 독특한 흘림체 로고를 디자인하기도 했다.
</p>
<hr>
<img id="img2" src="../images/Penguins.jpg" alt="penguin">
<p>미국의 약사인 존 스티스 펨버턴(John Stith Pemberton, 1831~1888)[11]에 의해 만들어진 것으로, 원래는 포도주를 주 원료로 해 당대의 인기 음료였던 뱅 마리아니(Vin Mariani)를 베낀 제품이었다. 당시 이름은 펨버튼의 프렌치 와인 코카(Pemberton's French Wine Coca)였고, 뱅 마리아니의 흔한 유사품 중 하나 정도의 위치에 있었다.
1886년 애틀란타 카운티에 금주법이 시행되자[12] 포도주를 탄산수로 대체해서 새로운 음료를 만들었고, 펨버턴의 경리 직원이었던 프랭크 메이슨 로빈슨(Frank Mason Robinson)이 주성분의 이름을 조합해 코카콜라라는 이름을 붙였다. #
1886년 당시에는 첨가물 없이 순수히 코카잎 추출 성분과 콜라나무[13] 씨앗 추출물과 탄산수로 만들어졌었으며, 이것만으로는 부족해서 첨가물을 더 넣고 만든 것이 오늘날의 코카콜라 음료가 되었다. 이후 로빈슨은 펨버턴과 동업자가 되었고, 하술하듯 펨버턴 사후에는 에이사 캔들러와 동업하여 코카콜라 컴퍼니를 창립했다. 특히 로빈슨은 코카콜라의 독특한 흘림체 로고를 디자인하기도 했다.
</p>
<hr>
</body>
</html>float와 clear
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{
min-width: 1200px;
}
div{
box-sizing: border-box;
border: 1px solid gray;
margin: 2px;
padding: 2px;
}
#header, #footer{
height: 50px;
background: #f5aadf;
}
.main{
height: 500px;
}
#left, #right{
width : 20%;
background: skyblue;
}
#center{
width: 59%;
float: left;
width: calc(59%-1%)
background-image: linear-gradient(skyblue, white);
}
#left{
float: left;
width: calc(20%-1%)
}
#right{
float: right;
}
#footer{
clear : both;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="left" class="main">left</div>
<div id="center" class="main">center</div>
<div id="right" class="main">right</div>
<div id="footer">footer</div>
</body>
</html>시맨틱 요소
위에 구현한 것을 간단히 태그로 사용할 수 있다.
Semantic Element
웹페이지의 구조를 쉽게 이해할 수 있도록 정의된 태그, 단순 컨테이너 역할
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
header, footer, section, aside{
box-sizing: border-box;
border: 1px solid gray;
margin: 2px;
padding: 2px;
border-radius:1%;
}
header,footer{
height: 50px;
background: maroon;
}
section {
float: left;
width: calc(59% - 1%);
background-image: linear-gradient(skyblue, white);
}
aside{\
width : calc(21% - 1%);
background: skyblue;
}
section, aside{
height: 500px;
}
#left{
float: left;
}
#right{
float: right;
}
footer{
clear: both;
}
</style>
</head>
<body>
<header>header</header>
<aside id="left">left</aside>
<section>section</section>
<aside id="right">right</aside>
<footer>footer</footer>
</body>
</html>flex
복수의 자식요소인 flex item과 그 상위 부모인 flex container로 구성
flex-flow
flex-direction 속성과 flex-wrap속성을 단축
flex-direction : row/column
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#container {
display: flex;
/* float : left; */
background: dodgerblue;
flex-direction: column;
}
#container div {
background: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
<script>
window.onload=function(){
let types = document.fform.fdType;
//id = container인 요소 접근
// let fcont =document.getElementById('container');
let fcont =document.getElementsByClassName('f-container');
console.log(fcont);
for(let i=0; i<types.length;i++){
// 이벤트 핸들러 추가
types[i].addEventListener('change', function(){
// fcont.style.flexWrap = types[i].value;
fcont.item(0).style.flexDirection=this.value;
})
}
}
</script>
</head>
<body>
<h3>flex-direction</h3>
<form name="fform">
<label> <input type="radio" name="fdType" value="column" checked>column
</label> <label> <input type="radio" name="fdType" value="column-reverse">column-reverse
</label> <label> <input type="radio" name="fdType" value="row">row
</label> <label> <input type="radio" name="fdType"
value="row-reverse">row-reverse
</label>
</form>
<div id="container" class="f-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>flex-wrap : wrap / nowrap / wrap-reverse
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#container {
display: flex;
/* float : left; */
background: dodgerblue;
flex-direction: row;
flex-wrap: wrap;
}
#container div {
background: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<h3>flex-wrap</h3>
<form name="fform">
<label> <input type="radio" name="fdType" value="wrap" checked>wrap
</label> <label> <input type="radio" name="fdType" value="nowrap">nowrap
</label> <label> <input type="radio" name="fdType"
value="wrap-reverse">wrap-reverse
</label>
</form>
<div id="container" class="f-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
<script type="text/javascript">
let types = document.fform.fdType;
//id = container인 요소 접근
// let fcont =document.getElementById('container');
let fcont =document.getElementsByClassName('f-container');
console.log(fcont);
for(let i=0; i<types.length;i++){
// 이벤트 핸들러 추가
types[i].addEventListener('change', function(){
// fcont.style.flexWrap = types[i].value;
fcont.item(0).style.flexWrap=this.value;
})
}
</script>
</body>
</html>flex-grow : flex item 의 확장
flex-shrink : flex item 의 축소
flex-basis : 0 (같은 크기) / auto (content의 크기따라 달라짐)
flex item의 기본 크기
flex
flex-grow속성과 flex-shrink 속성, flex-basis속성을 축약
.child { flex : flex-grow flex-shrink flexbasis; }
align-item : 수직정렬
justify-content : 수평정렬
레이아웃 적용 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Blog Page</title>
<style>
body *{
box-sizing: border-box;
margin: 3px;
border-radius: 20px;
}
#container {
display: flex;
flex-direction: column;
height: 800px;
}
header {
height: 20%;
border: 3px dashed teal;
text-align: center;
font-weight : bold;
display: flex;
flex-direction:column;
justify-content: center;
color : teal;
}
footer {
color:white;
font-weight:bold;
height: 10%;
background: teal;
text-align: center;
display: flex;
flex-direction:column;
justify-content: center;
}
#content {
height: 50%;
display: flex;
flex-direction: row;
}
aside {
border: 15px double white;
padding: 20px;
background: rgb(150,180,180);
/* flex : 1 1 auto; */
/* flex : 1; */ /* 1 1 0 */
flex: 30%;
}
section {
border : 15px dotted white;
border-left-style :none;
border-right-style :none;
border-bottom-style :none;
padding: 20px;
background: rgb(240,245,243);
flex: 70%;
flex-direction : column;
}
figure{
text-align: center;
}
img{
width: 50%;
}
.text{
height : 46%;
border : 3px solid teal;
background: white;
margin-bottom: 30px;
padding: 15px;
}
a{
color : yellow;
text-decoration : none;
font-weight: bold;
}
a:hover {
color:white;
}
h1{
text-shadow: 1px 1px 2px gray;
}
</style>
</head>
<body>
<div id="container">
<header>
<h1>My Blog Page</h1>
<br>
시멘틱 태그로 만들어진 페이지 입니다.
</header>
<div id="content">
<aside>
<h3>Links</h3>
<ul>
<li><a href="https://www.w3schools.com/">w3schools</a></li>
<li><a href="http://www.naver.com">Naver</a></li>
<li><a href="http://www.daum.net">Daum</a></li>
</ul>
<br>
<figure><img src="../images/chopa.jpg"> <br>쵸파</figure>
</aside>
<section>
<div class="text">
<h3>Semantic Tags</h3>
<br>
시멘틱 요소(Semantic elements)들은 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소이다. 레이아웃을 만들 때 쓰는 것. 의미가 있는 요소라면 div보다는 시멘틱 태그를 사용해준다.
</div>
<div class="text">
<h3>div와 span</h3>
<br>
div은 "divide"의 약자로서 페이지를 논리적인 세션으로 분리하는데 사용되는 태그이다. span요소는 인라인 요소로서 텍스트를 위한 컨테이너로 사용될 수 있다.
</div>
</section>
</div>
<footer>Copyright (c)2019 Hong</footer>
</div>
</body>
</html>