22년 3월 24일_ D-2.. 불안하다

728x90

목요일[벌써 목요일이라니.. 말도 안돼..]

1. 오늘 배운거 코드 공유 및 필기 기재

2. 웹디 코드 공유

1. 웹 css + js

css 위치속성 절대 위치 좌표 xy를 지정 상대 위치 좌표 요소를 입력한 순서 혹은 요소으 포함 관계에 의해 위치가 지정 position static = 상대 위치/좌표 설정 relative = 초기 위치에서 상하좌우로 이동 absolute = 절대 위치/좌표 설정 fixed = 화면을 기준으로 절대 위치/좌표 설정 overflow :croll = 조상영역을 벗어나는 부분 스크롤 처리 비주얼 안에 npm install -g nodemon	camelCamelCase가 기본 if(fooBar == bazBat) 변수와 상수 let : mutable(변경 가능) _변수에 재할당 가능 const : inmutable(변경 불가)_변수에 재할당이 불가-> 상수로 사용 가능 재 할당이 불가하므로 선언과 할당을 함계 해주어야 한다 var : ES6이전, javaScript에서 사용하던 변수할당 변수 명령 규칙으로 숫자로 시작하면 안된다. 변수에 담긴 데이터 타입을 확인하고자 하면 typeof를 사용 let v = :this String" console.log("v is", typeof v); Math.round(.12.31), Math.floor(1.31) 형변환 parseInt(), parseFloat() console.log(parseInt("011")); //11 ("011",2)진법 변환 // 소수점 뺌 console.log(parseFloat("123.456")); 수치형 데이터가 NaN인지 확인 isNaN(v); replace(,) 치환 trim() 빈문자 제거 값이 없늘 때 null 값이 초기화 (선언)되지 않을 경우 undefined라는 특별한 타입 function sum(a,b){ return a+b; } console.log(sum(2,4)); 함수도 객체로 간주함 const sum= function(a. b) { return a+b; } console.log(typeof sum, sum(3, 7));	console.info("정보 메시지"); console.log("일반 로그 메시지"); console.warn("경고 메시지"); console.error("에러 메시지"); // var, let , const : 변수할당방법 var testVar = 10; let testLet = "let"; //재할당 가능 const TEST_CONST = "const" //const : 재할당 불가, 선언과 동시에 할당해줘야함 console.log(testVar, testLet, TEST_CONST); //변경시도 testVar = "var changed"; testLet = "let changed"; // TEST_CONST = "const changed"; console.log(testLet, testVar, TEST_CONST); // const로 하고 let으로 변경ㅎ 권장 // 자바스크립트는 터이터 타입이 고정 x 할당시 결정 let v = "JavaScript"; console.log(v, "->" , typeof v); v = 2022 console.log(v, "->" , typeof v);	let n1 =5; //Literal (소스에 직접입력) let n2 = Number(5); //Number객체를 이용한 생성 console.log(n1, "==", n2 ,"?", n1 == n2); console.log(typeof n1, typeof n2); //내장객체 Math의 활용 console.log(Math.PI); console.log(Math.max(1,5,3,6,7,4,1), Math.min(5,8,9,4,2,3)); console.log(Math.round(3.567), Math.floor(3.567)); //반올림 버림 // 다양한 수치 데이터의 입력 const red = 0xFF0000; //16진수로 데이터 입력 const oct = 0o10; //8진수로 입력 const bin = 0b1100; //2진수 console.log(red, oct, bin); console.log("=== casting"); // pareInt, parseFloat; Number형으로 형 변환 함수 console.log(parseInt("011")); console.log(parseInt("011",2)); //진법변환 console.log(parseInt("123.435")); //정수형태로 변환 console.log(parseFloat("123.456")); //실수형태로 변환 //주의 : NaN(Not a Number) let v = "abc123456"; console.log(parseInt(v), typeof v); v = parseInt("abc123456"); console.log(v, typeof v); //NaN를 연산에 포함 -> NaN console.log(v+10); console.log(isNaN(v)); //true가 나옴 //Infinity v = 1/0; console.log(v, typeof v); //Infinity확인 console.log(v+10); // 유한수 여부 확인 console.log("1/0 is Finite?", isFinite(1/0)); console.log("2022 is Finte?", isFinite(2022)); console.log("NaN is Finite?", isFinite(parseInt("abcdefg")));
//String 타입 const s1 = "Modern JavaScript and Java"; const s2 = String("Modern JavaScript and Java"); console.log(typeof s1, typeof s2); console.log(s1, s1.length); console.log(s1); //문자열 추출 메서드 console.log(s1.charAt(7)); console.log(s1.substring(7)); //7번부터 끝까지 라는 뜻 console.log(s1.substring(17)); //문자열 검색 메서드 console.log("=====검색====="); console.log(s1); let position = s1.indexOf("Java"); //java의 인덱스를 갖고 와라 console.log("1st Java:", position); position = s1.indexOf("Java", position + 4); console.log("2nd java :", position); position = s1.indexOf("Java", position + 4); console.log("3nd java:", position); //없으면 -1 console.log(s1.lastIndexOf("Java")); //뒤에서 부터 검색을 시작 console.log("======문자열 치환========"); console.log(s1); console.log(s1.replace("JavaScript", "JS")); //원본은 변경되지 않음 보관하고싶을 경우는 재할당해야함 // 공백 제거 let s3 = " hi "; console.log(s3); console.log(s3.trim()); //es6내용 //esc문자 \n : 개행 \| \t : 탭 \| \' : 작은 따옴표 \| \" : 큰 따옴표 \| \` : 백틱 \| \$ : 달러 기호 let message = "He happy, don\"t\" be shy"; console.log(message); //템플릿 문자열 let temp = 24; message = `현재 기온은 ${temp}도 입니다.`; console.log(message); //여러줄 문자열 message = "예전은 여러줄 문자열 만드는게 \n 쉽지 않았습니다."; console.log(message); message =`하지만 ES6에선 아주 손쉽게 여러개의 문자열을 만들 수 있습니다.`; console.log(message); // ==값을 비교 ===타입까지 비교	// boolean 데이터 타입 : true, false; // 비교 / 논리 연산의 결과 //논리의 조합 and(&&) , or \|\|, not!으로 조합 let v1; let v2 = null; console.log(typeof v1, typeof v2); // undefined : 자바스크립트 엔진사용 // null : 프로그래머에게 허용된 타입 //null 체크 console.log(v2, typeof v2, v2 == null); v2 = undefined; // undefined 체크 console.log(v2, typeof v2, v2 == undefined ); // == , === // == : 타입 관계 없이 값만 비교 // === : 타입 관계도 값과 함께 비교 console.log(2022 == "2022"); console.log(2022 === "2022"); // Boolean 함수의 값을 넣으면 논리 값을 추출 // number, string -> 값이 있으면 true로 없으면 false console.log(Boolean("String"), Boolean("")) console.log(Boolean(2022), Boolean(0)); console.log(true && "Test"); console.log(false && "Test"); console.log(true \|\| "Test"); console.log(false \|\| "Test"); // -> Test	//1. 2~9단까지 제작 (for문, whelie문) for (let i = 1; i < 10; i ++){ let num = 1; num = + i; for(let j = 2; j < 10; j ++){ let nuum = 2; nuum = + j; console.log(num+"x"+nuum+"="+i * j); } } console.log("==========whlie=========") let j = 1; let i = 2; while(i < 10){ while(j < 10){ j++; console.log(i+"x"+j+"="+ij); } i++; j =2; } //2. 역삼각형 5개 for문 , while문 let k; for(let i = 5 ; i > 0 ; i--){ k=""; for(let j=0; j<i ; j++){ k = k + ""; } console.log(k); } // i = 0; // j = 5; // while(i < 6){ // let k=""; // while(j < i){ // k += ""; // j--; // } // i++; // } // let count = 5; // while(count > 0){ // let stars = ""; // let col = 1; // while(count <= col){ // } // }	//함수 function sum(a, b){ return a+b; } console.log(sum(3,6)); //함수 표현식(익명함수) const asum = function(a, b){ return a+b; } console.log(typeof asum, asum(10,30)); //함수 매개변수 function getNumberTotal(){ // console.log(arguments); let result = 0; for(let i =0; i < arguments.length; i++){ if(typeof arguments[i] =="number") result += arguments[i]; } return result; } console.log(getNumberTotal(2,4,5,2)); console.log(getNumberTotal(2,4,"3",2));

2. 웹디 코드 공유

html

css

<!DOCTYPE html>

<head>

<title>노랑우산어린이재단</title>

</head>

<body>

<h1>미얀마 성장발달보고서</h1>

<p>미얀마 아동을 후원해주시는 후원자님,

안녕하세요!<br>

결연아동에게 보내주시는 따듯한 관심과

사랑에 감사드립니다.<br>

2019년 2월 22일(금) 결연아동의 사진이

담긴 성장발달보고서와 사업장소식을

발송했습니다.<br>

결연아동의 소식과 함께 오늘도 행복한

하루 보내세요!<br>

노랑어린이재단 드림.<br>

</p>

</div>

<ul>

<li><a href="#">아동복지연구소</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li><a href="#">참여갤러리</a></li>

</ul>

</li>

</ul>

</div>

</div>

<!-- <div class="main">

<ul>

</ul> -->

<ul>

<li><a href="#">미얀마 성장발달보고서 및 사업장소식 발송 </a><span>2019.03.05</span></li>

<li><a href="#">법인사무처 2019년 3월 주요일정 </a><span>2019.03.02</span></li>

<li><a href="#">노랑어린이재단 개인정보처리방침 개정안내 </a><span>2019.01.15</span></li>

<li><a href="#">네팔 성장발달보고서 및 사업장소식 발송 </a><span>2019.01.11</span></li>

</ul>

</div>

<!-- <div class="gallery">

<ul>

</ul>

</div> -->

</div>

<option>서울종합아동복지관</option>

<option>부산종합아동복지관</option>

<option>대구종합아동복지관</option>

<option>대전종합아동복지관</option>

<option>청주종합아동복지관</option>

<option>제주종합아동복지관</option>

</select>

</div>

<ul>

</ul>

</div>

</body>

</html>

*{padding: 0; margin: 0; font-size: 14px; font-family: "맑은 고딕" sans-serif;

color: #333333;}

img{

border: none;

}

text-decoration: none;

}

li{

list-style: none;

}

h1{

float: left;

}

.gnb {

float: right; width: 600px; height: 40px;

}

body{

}

.header{

width: 1200px;

height: 60px;

margin: 0 auto;

.main{

width: 1200px;

height: 300px;

margin: 0 auto;

overflow: hidden;

z-index: 1;

}

.contents{

width: 1200px;

height: 200px;

margin: 0 auto;

}

.notice, .gallery, .banner{

width: 400px;

height: 200px;

}

.main ul{

width: 100%;

height: 100%;

position: relative;

z-index: 1;

}

.main li{

width: 100%;

height: 100%;

position: absolute; top: 0; left: 0;

z-index: 1;

}

.popup{

display: none;

background-color: rgba(0,0,0,0.5);

position: absolute; top: 0; left: 0;

width: 100%;

height: 100%;

z-index: 50;

}

.pwrap{

width: 300px;

height: 300px;

background-color: #fff;

margin: 0 auto;

margin-top: 100px;

}

.pwrap h1{

text-align: center;

font-weight: 100000;

font-size: large;

padding: 10px;

}

.pwrap p{

padding: 10px;

}

.pwrap a{

float: right;

margin-right: 20px;

color: blue;

font-weight: 700;

}

.gnb > ul > li{

float: left; width: 150px; height: 100px; text-align: center;

line-height: 100px;

position: relative;

}

.mainnav{

display: block;

width: 100%; height: 100%;

box-sizing: border-box;

font-size: 18px; font-weight: bold;

}

.gnb li:hover .mainnav{

color: blue; border-bottom: 1px solid lightpink;

}

.subnav{

position: absolute; top: 100px; left: 0;

z-index: 500;

width: 150px; height: 200px; line-height: 50px;

background-color: #fff;

}

.borad{

width: 300px;

height: 50px;

float: left;

margin: 0 auto;

border: 3px solid #333;

}

.borad > ul{

float: left;

width: 140%;

height: 40px;

border: 1px solid #333;

}

.active{

font-size: 18px;

border-bottom: 3px solid #333;

}

//yesterday wished to today list
. 행복하기✔

. 안좋고 거슬렸던 일 3가지 기재

tomorrow wish list
. 행복하기✔

. 안좋고 거슬렸던 일 3가지 기재

728x90

저작자표시 (새창열림)

'IT To do and To was' 카테고리의 다른 글

2022년 3월 26일_웹디자인기능사 실기 후기 2022 1회편 (1)	2022.03.27
22년 3월 25일_js파트 수업 + 웹디 공부 (0)	2022.03.25
22년 3월 23일_웹 2번째 시간 및 웹디..공부.. (0)	2022.03.23
22년 3월 22일_웹 class 시작 (0)	2022.03.22
22년 3월 21일_깃 약간의 설명, 웹 디자인 기능사...공부 (0)	2022.03.21

웹, 앱 일대기_금.짜

22년 3월 24일_ D-2.. 불안하다

'IT To do and To was' 카테고리의 다른 글

티스토리툴바

« 2025/07 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

22년 3월 24일_ D-2.. 불안하다

'IT To do and To was' 카테고리의 다른 글

'IT To do and To was' 관련글

티스토리툴바