38일차 2023-04-28
2023. 5. 1. 20:11ㆍJavaScript
CSS3
Flex12_2.html
※flex-grow, flex-shrink, flex-basis 아이템의 크기와 관련된 속성으로
세 가지 속성을 변경한다는 것은 아이템들의 사용가능한 공간(여백)을
아이템의 확장, 축소등을 통해 분배하는 방식을 변경하는 것이다
※flex-grow와 flex-shrink속성에 지정하는 숫자는 확장과 축소의 비율값
속성값이 0이면 컨테이너의 크기에 상관없이 원래 크기(flex-basis) 유지.
flex: flex-grow ,flex-shrink,flex-basis 속성 3가지를 축약한 속성(기본값은 flex: 0 1 auto)
flex: 1 1 0은
flex-grow:1;
flex-shrink:1;
flex-basis :0 과 같다
위는 또한 flex:1과도 같다
나머지는 기본값인 flex-shrink: 1 속성과 flex-basis: 0 속성으로 설정된 거와 같다
flex: 1 속성은 컨테이너의 크기에 따라 아이템의의 크기도 커지거나 작아진다는 의미
크기가 고정되어야 하는 아이템에는 flex: none 속성(flex:0 0 auto)을 적용
flex:initial(기본값)는 flex: 0 1 auto
flex:none는 flex: 0 0 auto
flex:auto는 flex: 1 1 auto
※flex:숫자는 flex: 숫자 1 0와 같다
initial(기본값): 컨테이너의 크기를 축소 시에만 아이템이 축소된다
none: 컨테이너 확장,축소시에도 아이템의 원래 크기를 유지한다.
auto: 컨테이너 확장,축소시 아이템의 크기도 확장, 축소된다
숫자: 컨테이너를 일정한 비율로 차지하면서 f컨테이너의 크기에 따라 아이템의 크기도 커지거나 작아진다.
11-3.FlexBox에서의 Margin
-아이템에 margin을 속성을 사용하면 각 아이템을 쉽게 배치할 수 있다.
단,컨테이너에 먼저 display:flex를 주어야 한다.
-컨테이너의 flex-direction:row일때
수평 중앙 배치 : margin: 0 auto;
왼쪽 배치 : margin-right: auto;
오른쪽 배치 : margin-left: auto;
-컨테이너의 flex-direction:column일때
수직 중앙에 배치 : margin: auto 0;
위쪽 배치 : margin-bottom auto;
아래쪽에 배치 : margin-top: auto;
Flex12_2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex12_2.html</title>
<style>
.container1{
background-color: yellow;
display: flex;/*일때 각 아이템의 속성 flex-grow:0; flex-shrink:1; flex-basis:auto이 기본값이다*/
}
.item,.item-1,.item-2{
background-color: green;
border:2px red solid;
box-sizing: border-box;
/*
※flex-basis:아이템의 기본 크기를 설정(아이템 확장/축소시의 기준 크기)
-아이템 크기
아이템의 크기를 지정시 flex-basis나 width속성(모든 요소의 기본 CSS속성)으로 지정할 수 있다
※flex-basis의 값에 따라 width속성의 값이 적용되기도 하고 무시되기도 한다
flex-basis:auto일때는 width지정 시 width값이 flex-basis값이 되고,
width 미 지정시에는 컨텐츠 크기가 자동으로 flex-basis값이 된다
flex-basis:특정값(예:flex-basis: 200px;)일때 width속성이 무시된다
flex-basis:0일때 컨텐츠 크기만큼 영역이 만들어진다(이때도 width속성은 무시)
-아이템의 축소
아이템에 지정한 width는 아이템의 영역 크기가 된다.
basis값 <= width값: basis값으로 아이템의 시각적 크기가 결정된다(width값은 무시된다)
shrink역시 적용이 안된다(width만큼 안줄어들어서)
basis값 > width값: basis값으로 아이템의 시각적 크기가 결정된다(width값은 무시된다)
shrink 적용된다(width값까지 줄어든다)
※배치 시 컨테이너의 크기를 줄여도 축소되면 안되는 아이템 컨텐츠가 있으면
width속성을 지정하자;
*/
/*1.flex-basis:auto테스트(기본값)*/
/*width:300px;200px이 flex-basis의 값이 된다.단 축소는 안된다*/
/*2.flex-basis:특정값 테스트*/
/*flex-basis: 150px;
width: 300px;/*width는 무시된다. 하지만 width선언되면 축소가 안됨*/
/*3.flex-basis:0 테스트*/
/*flex-basis: 0;/*컨텐츠 크기만큼 영역이 만들어진다*/
/*width: 200px;/*width는 무시된다(근데 주석을 했다,풀었다해보면 스크롤 생김
이 이유는 보이지않는 item의 영역+영역+...이게 컨테이너의 크기가 되서 그럼*/
/*flex-basic:auto와 flex-basis:0의 차이점
공통점:컨텐츠 크기만큼 아이템의 영역이 만들어진다
차이점:auto는 width지정 시 width의 값이 basis값이 되고
0는 width지정시 아이템 크기가 적용이 안된다 즉 width가 무시된다
*/
/*flex-basis: 0;/*컨텐츠 크기만큼 아이템 영역이 생성된다*/
/*width:200px;/*아이템크기에는 적용이 안된다 즉 무시된다*/
}
.container2{
background-color: yellow;
display: flex;
}
.item-1{
/*flex-grow:0(기본값),flex-shrink:1(기본값)의 의미:
컨테이너를 늘려도 아이템의 크기는 변하지 않고
줄일때 아이템의 크기가 똑같은 비율로 줄어든다
브라우저를 줄였다 늘였다하면서 테스트.(단,flex-wrap:nowrap;)*/
/*1.기본값 테스트*/
/*flex-basis: 150px;
flex-grow: 0;
flex-shrink: 1;*/
/*2.flex-grow:특정값:0이 아닌값 지정 테스트*/
/*flex-grow: 1;/*컨테이너의 여유공간을 다 채우고 flex-grow에 지정한 비율대로 각 아이템들의 영역이 만들어진다*/
/*flex-basis: 0;/*flex-grow:1로 인해서 늘어난 아이템의 크기가 flex-basis값이 된다*/
/*축약속성*/
/*flex:1;는 flex-grow:1,flex-shrink:1,flex-basis:0와 같다
컨테이너를 늘리면 아이템의 크기가 늘어나고
컨테이너를 줄이면 아이템의 크기가 줄어든다
UI 만들때 사용
*/
/*flex:1;/*숫자 하나는 flex-grow값이다. 즉 grow:1 shrink: 1 basis:0 */
/*flex:none;은 flex: 0 0 auto와 같다.
컨테이너가 여유 공간이 있든 없든
아이템의 크기를 유지시(폭 지정시에 그 폭으로 미 지정시는 컨텐츠 크기로)*/
/*flex:none;
width:150px;*/
/*width:150px;/*위와 같다. 생각해보면 width의 속성은 길이를 고정하기 때문에 flex속성이 안먹히니깐*/
}
.item-1:nth-child(1){
flex-basis:100px;
flex-grow: 1;
flex-shrink: 1;
order:2;/*기보값은 0,숫자가 작을수록 먼저 배치된다(음수도 허용)*/
}
.item-1:nth-child(2){
flex-basis:100px;
flex-grow: 2;
flex-shrink: 2;
order:-5;
}
.item-1:nth-child(3){
flex-basis:100px;
flex-grow: 1;
flex-shrink: 1;
order:-10;
}
.item-1:nth-child(4){
flex-basis:100px;
flex-grow: 1;
flex-shrink: 1;
}
.item-1:nth-child(5){
flex-basis:100px;
flex-grow: 1;
flex-shrink: 1;
}
.container3{
background-color: yellow;
display: flex;
/*justify-content: flex-start;/*기본값-왼쪽정렬*/
/*justify-content: flex-end;/*오른쪽정렬*/
/*justify-content: center;/*가운데 정렬*/
/*justify-content: space-around;/*아이템을 중심으로 여백 균등*/
/*justify-content: space-between;/*시작점과 끝점에 아이템을 붙이고 여백 균등*/
/*justify-content: space-evenly;/*양끝 여백이고 아이템과 아이템 사이의 여백 균등*/
}
/*justify-content: flex-start;와 같다*/
/*.item-2:last-child{
margin-right: auto;
}*/
/*justify-content: flex-end;와 같다*/
/*.item-2:first-child{
margin-left:auto;
}*/
/*justify-content: center;와 같다(아래 주석2개 풀기)*/
/*.item-2:last-child{
margin-right: auto;
}
.item-2:first-child{
margin-left:auto;
}*/
/*justify-content: space-around;와 같다*/
/*.item-2{
margin: 0 auto;
}*/
/*justify-content: space-between;와 같다*/
/*.item-2:nth-child(2){
margin:0 auto;
}*/
/*justify-content: space-evenly;와 같다*/
.item-2:nth-child(1){
margin: 0 auto;
}
.item-2:nth-child(3){
margin: 0 auto;
}
</style>
</head>
<body>
<fieldset>
<legend><h2>Flex Item의 flex-basis속성</h2></legend>
<div class="container1">
<div class="item">item1</div>
<div class="item" >item2</div>
<!-- width값을 지정해서 축소가 일어나지 않는다 -->
<!-- <div class="item" style="width: 300px;">item3</div> -->
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
</fieldset>
<hr/>
<fieldset>
<legend><h2>Flex Item의 flex-grow속성 및 flex-shrink속성</h2></legend>
<div class="container2">
<div class="item-1">item1</div>
<div class="item-1">item2</div>
<div class="item-1">item3</div>
<div class="item-1">item4</div>
<div class="item-1">item5</div>
</div>
</fieldset>
<fieldset>
<legend><h2>Flex Item의 mar속성 적용하기</h2></legend>
<div class="container3">
<div class="item-2">item1</div>
<div class="item-2">item2</div>
<div class="item-2">item3</div>
</div>
</fieldset>
</body>
</html>결과)
//////////////////////Flex12_2.html
Flex12_3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex12_3.html</title>
<style>
*{
margin: 0;
padding: 0;
font-family: 'Courier New', Courier, monospace;
}
.allWrap{
display: flex;
justify-content: center;
}
.wrap{
display: flex;
flex-direction: column;
flex:1;
align-items: center;
width:80%;
}
.header{
display: flex;
justify-content: space-between;
}
.header > .logo{
flex: none;/* 아이템 크기 고정 즉 로고이미지 확대/축소 불가하게*/
width:100px;
padding-top: 10px;
}
.logo > img{
width:100%;
margin-left: 10px;
}
.header > .topMenu{
display: flex;/*수직으로 가운데 배치하기 위한 flex속성(align-items) 사용하기 위함*/
align-items: center;
}
.header .topMenu > ul{
display: flex;
list-style: none;
}
.header .topMenu > ul > li{
border-right: 1px gray solid;
padding: 0 5px;
}
.header .topMenu > ul > li:last-child{
border:none
}
.content{
display: flex;
}
.aside{
flex:none;
width:100px
}
.aside > ul{
margin: 10px 0 0 10px;
list-style: none;
}
.aside > ul > li{
margin-bottom: 5px;
}
.between{
flex:none;
width:50px
}
.main{
flex-grow: 1;
padding:10px 0 0 10px;
}
.footer{
display: flex;
height:60px;
justify-content: center;
align-items: center;
}
.footer>address{
font-style: normal;
font-weight: bold;
}
</style>
</head>
<body>
<div class="allWrap">
<div class="wrap">
<div class="header">
<div class="logo"><img src="../Images/logo.jpg" alt="회사 로고 이미지"/></div>
<div class="between"></div><!--브라우저 줄였을때 탑네뉴 텍스트가 로고이미지 겹치는 부분 해결용-->
<div class="topMenu">
<ul>
<li>홈</li>
<li>로그인</li>
<li>회원가입</li>
<li>공지사항</li>
<li>자주묻은질문</li>
</ul>
</div>
</div>
<div class="content">
<div class="aside">
<ul>
<li>서브메뉴1</li>
<li>서브메뉴2</li>
<li>서브메뉴3</li>
<li>서브메뉴4</li>
<li>서브메뉴5</li>
</ul>
</div>
<div class="main">
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
<h2>실제 내용이 들어갑니다</h2>
</div>
</div>
<div class="footer">
<address>서울시 금천구 가산동 한국소프트웨어 인재개발원</address>
</div>
</div>
</div>
</body>
</html>결과)
/////////////Flex12_3.html
JavaScript
RegExp11.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RegExp11.html</title>
<script>
//RegExp객체 생성
//RegExp객체.test(문자열)함수 : 일치하는 패턴을 찾으면 true반환,그렇지 않으면 false반환
//String객체.match(RegExp객체) : 처음 발견된 패턴만 배열로 반환
//RegExp객체.exec(문자열)함수 : 무조건 첫번째 일치한 요소만 반환
//1.g옵션을 안 준 경우
//var regexp1 = /\d{2}/;
var regexp1 = new RegExp("\\d{2}");//혹은 new RegExp(/\d{2}/);
console.log('%O',regexp1);
var str='AB100CDE99FGHI';
console.log(regexp1.test(str));//true
var findArr=str.match(regexp1);
console.log(findArr,findArr.length);//['10']
console.log('찾은 패턴의 시작 인덱스:',findArr.index);
var execArr=regexp1.exec(str);
console.log(execArr);//이때는 match와 동일
//2.g옵션을 준 경우
var regexp2 = /\d{2}/g;//new RegExp(/\d{2}/,'g') 혹은 new RegExp("\\d{2}",'g')
console.log('%O',regexp2);
console.log(regexp2.test(str));//true
findArr=str.match(regexp2);//문자열 끝까지 스캔해서 일치하는 패턴을 찾는다
console.log(findArr,findArr.length);//['10','99'] 2
//findArr.index : g옵션 부여시 반환된 배열에는 index속성이 없다
execArr=regexp2.exec(str);
console.log(execArr);
//3. 추출하기
var str2="[17.07.11 23:29:11] [INFO ] [eclipse.galileo-bean-thread-50618297 galileo.site.SiteBean:317 ] - ##galileo_bean end. MessageExchange_ID:ID:localhost-15a6308ba1c-6:86071562";
var regexp3 = /\[(\d{2}\.\d{2}\.\d{2}\s\d{2}:\d{2}:\d{2})\]\s\[(.+)\]\s\s\[(.+)\]\s-\s(.+)/i;
var isMatch=regexp3.test(str2);
//추출방법1
if(isMatch){
console.log('[추출방법1]');
//괄호 () 로 그룹을 만들어주고 RegExp.$그룹번호 와 같은 방식으로 접근.
//정규표현식에서 첫번째 괄호가 그룹번호 1부터 시작한다
//RegExp.$0 은 없다
console.log(RegExp.$1);
console.log(RegExp.$2);
console.log(RegExp.$3);
console.log(RegExp.$4);
}
//추출방법2
var extarctArr=str2.match(regexp3);
//console.log('extarctArr:',extarctArr);
if(isMatch){
console.log('[추출방법2]');
//console.log(extarctArr[0]);//전체 문자열
console.log(extarctArr[1]);
console.log(extarctArr[2]);
console.log(extarctArr[3]);
console.log(extarctArr[4]);
}
function checkEmail(){
var email = document.querySelector('[type=email]').value;
console.log(email);
var regexp = /\w+@(\w+)\.com/i;
if(!regexp.test(email)){
alert('이메일 형식이 아닙니다');
return;
}
console.log(RegExp.$1);
}
//여러줄로 구성된 문자열에서는 패턴을 찾으려면 m옵션을 추가하자
var str4 = "#국어\r\n영어\r\n#산수\r\n미술\r\n#음악";
var regexp4 = /^#.+$/mg;
console.log(regexp4.test(str4));
var multilineArr = str4.match(regexp4);
console.log(multilineArr);
</script>
</head>
<body>
이메일을 입력하세요?
<input type="email" />
<input type="button" value="확인" onclick="checkEmail()"/>
</body>
</html>
RegExp11.html
결과)
/////////RegExp11.html
'JavaScript' 카테고리의 다른 글
| 40일차 2023-05-02 (0) | 2023.05.02 |
|---|---|
| 39일차 2023-05-01 (0) | 2023.05.02 |
| 37일차 2023-04-27 (0) | 2023.04.27 |
| 36일차 2023-04-26 (0) | 2023.04.26 |
| 35일차 2023-04-25 (0) | 2023.04.25 |