스파르타/웹개발
22.01.19 부트 스트랩, Java script <나만의 링크 메모장 만들기>
h.단디
2022. 1. 20. 01:44
선 수강, 후 재수강하면서 정리.
💡부트 스트랩에서 마음에 드는 형태 가져 온 후에 요모조모 바꿔보기
💡이 모양의 코드는 어디까지일까? 알고싶으면 '마우스 우클릭>검사'로 확인할 수 있음
💡구글링 팁! CSS OOO mdn CSS OOO W3school
💡에러를 무서워하지 않기
<나만의 링크 메모장 만들기>
에펠탑 사진으로 해서 맘에 든다
명찰 붙이기&지칭하기 에서 '지칭하기'css는 head에 넣어야하는데 엄한 곳에서 border 하느라 헤맸다.
한번 헤맸으니 다음엔 제대로 기억하자.
매직키보드 alt키가 뭔지 몰라서 정렬 못했는데 option키가 alt였음 ㅠ 이제 이쁘게 정렬해서 한 눈에 들어오게 해야지!
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Serif KR', serif;
}
.wrap{
width: 900px;
margin: auto;
}
.comment {
color: blue;
font-weight: bold;
}
.posting-box {
border: 2px solid;
border-radius: 5px;
width: 500px;
margin: 0px auto 30px auto;
padding: 30px;
font-weight: bold;
}
</style>
<script>
function hey() {
alert('안녕!!')
}
</script>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">나홀로 링크 메모장!</h1>
<p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
<hr class="my-4">
<p class="lead">
<a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" >
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">간단 코멘트</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
<div>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
<p> <div class="card-columns">
<div class="card">
<img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div></p>
</div>
</div>
</body>
</html>
JAVA script
브라우저가 유일하게 알아들을 수 있는 프로그래밍 언어
JAVA언어랑은 아무 연관 없담.
CSS는 <style></style>에, JAVA script는 <script></script>에!
alert 경고창
개발자도구 켜기 : 크롬 > 마우스 우클릭 > 검사 > console 바로바로 수정 및 확인이 가능함
열려있는 창을 새로고침하면 다 지워짐.
위 방향키 누르면 이전에 작성한 것 나옴.
[기초문법]
변수 - 값을 담음
let a = 2 a에 2를 넣었다 let first_name = 'dandi' firs_name에 dandi를 넣었다문자열은 "",''에 적어주기
변수 이름을 지정할 때는 남이 봐도 알아보기 쉽고 그럴싸하게 정하기
자료형
list : 순서가 중요한 담기 (시장에 가면~)
let a_list = ['수박','참외','배']첫번째가 0임. (1,2,3 아니고 0,1,2) ex) a_list[2]=배
dict : key값에 대응되는 value, 순서가 중요하지 않음
let a_dict = {'name':'bob','age':27} undefined a_dict['name'] 'bob' a_dict['height'] = 180 추가하는 것도 간편! 180 a_dict {name: 'bob', age: 27, height: 180} a_dict['fruits']=a_list (3) ['수박', '참외', '배'] a_dict {name: 'bob', age: 27, height: 180, fruits: Array(3)}age: 27fruits: (3) ['수박', '참외', '배']height: 180name: "bob"[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__() a_dict['fruits'][2] dic & list가 서로서로의 요소로서 쓰일 수 있다 '배'값 가지고 올 때는 [], 선언할때(?)는 {}
함수 - 정해진 동작 수행
function mysum(num1, num2){ 여기서 mysum은 그저 함수 이름일뿐, 뭘 갖다붙여도 됨 alert('안녕!') '안녕!' 경고창이 뜨고 return num1+num2 변수 num1,num2의 합을 return하는 함수 } return이 없으면? 정해진 동작(alert)만하고 결과값은 없음 undefined let result = sum(2,3) 아무 변수도 받지 않을 땐 그냥 빈괄호 -> mysum() undefined result 5
조건문
let age = 24 undefined if (age > 20) { console.log('성인입니다') 이 콘솔에 기록을 남겨줘 } else { console.log('청소년입니다') } VM2424:2 성인입니다 undefined let sex = '남성' undefined if (age > 20 && sex == '남성') { and : && / or : || /equal : == console.log('성인 남성입니다') } else { console.log('청소년입니다') } VM2568:2 성인 남성입니다 undefined if (age > 20) { console.log('성인입니다') } else if (age > 7) { if & else if 여러번 & else 쌉가넝 console.log('청소년입니다') } else { console.log('아동입니다') } VM2673:2 성인입니다
반복문 - 오타 주의! 오타 제일 많이 난담.
기본개념
for (let i = 0; i < 10; i++) { i는 0~9까지 하나씩 높아지는데 console.log(i) 그 값을 콘솔에 남겨줘. } 0 1 2 3 4 5 6 7 8 9 undefined예제1
let people = ['철수','영희','민수','형준','기남','동희'] undefined people.length people 리스트에 몇명있냐? 6 6명이요 for (let i = 0; i < people.length; i++) { console.log(people[i]) } 철수 영희 민수 형준 기남 동희예제2 - dict를 모아둔 list를 돌면서, 필요에 맞는 dict를 if문으로 값을 내는 문제
let scores = [ '학생,점수' 의 리스트 {'name':'철수', 'score':90}, {'name':'영희', 'score':85}, {'name':'민수', 'score':70}, {'name':'형준', 'score':50}, {'name':'기남', 'score':68}, {'name':'동희', 'score':30}, ] undefined scores[1]['score'] 리스트 두번째 학생의 점수는 뭐야? 85 scores (6) [{…}, {…}, {…}, {…}, {…}, {…}] for (let i = 0; i < scores.length; i++) { console.log(scores[i]) 리스트 0~5까지 콘솔에 남겨줘 } {name: '철수', score: 90} {name: '영희', score: 85} {name: '민수', score: 70} {name: '형준', score: 50} {name: '기남', score: 68} {name: '동희', score: 30} undefined for (let i = 0; i < scores.length; i++) { 리스트 0~5까지 중 이름을 콘솔에 남겨줘 console.log(scores[i]['name']) } 철수 영희 민수 형준 기남 동희 undefined for (let i = 0; i < scores.length; i++) { 리스트 0~5까지의 이름과 성적을 콘솔에 남겨줘 let name = scores[i]['name'] let score = scores[i]['score'] console.log(name,score) } 철수 90 영희 85 민수 70 형준 50 기남 68 동희 30 undefined for (let i = 0; i < scores.length; i++) { 리스트 0~5까지 중 성적이 70점 미만인 사람의 이름과 성적을 콘솔에 남겨줘 let name = scores[i]['name'] let score = scores[i]['score'] if (score < 70 ) { console.log(name,score) } } 형준 50 기남 68 동희 30 undefined
기타
.split : 글씨 분리하기 '도메인 추출'
let myemail = 'abc@naver.com' undefined myemail.split('@') @를 기준으로 분리해줘 (2) ['abc', 'naver.com'] myemail.split('@')[1] @를 기준으로 분리한 값 중 2번째꺼 'naver.com' myemail.split('@')[1].split('.') (2) ['naver', 'com'] myemail.split('@')[1].split('.')[0] 'naver'
Java script 연습하기
서울시 미세먼지 값
mise_list (25) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] for (let i = 0; i < mise_list.length; i++){ console.log(mise_list[i]) mise_list에 있는 dict를 0번째부터 마지막까지쭉 콘솔에 남겨줘 } {MSRDT: '201912052100', MSRRGN_NM: '도심권', MSRSTE_NM: '중구', PM10: 22, PM25: 14, …} {MSRDT: '201912052100', MSRRGN_NM: '도심권', MSRSTE_NM: '종로구', PM10: 24, PM25: 18, …} {MSRDT: '201912052100', MSRRGN_NM: '도심권', MSRSTE_NM: '용산구', PM10: 0, PM25: 15, …} {MSRDT: '201912052100', MSRRGN_NM: '서북권', MSRSTE_NM: '은평구', PM10: 36, PM25: 14, …} {MSRDT: '201912052100', MSRRGN_NM: '서북권', MSRSTE_NM: '서대문구', PM10: 28, PM25: 9, …} {MSRDT: '201912052100', MSRRGN_NM: '서북권', MSRSTE_NM: '마포구', PM10: 26, PM25: 8, …} {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '광진구', PM10: 17, PM25: 9, …} {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '성동구', PM10: 21, PM25: 12, …} {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '중랑구', PM10: 27, PM25: 10, …} {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '동대문구', PM10: 26, PM25: 9, …} {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '성북구', PM10: 27, PM25: 8, …} {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '도봉구', PM10: 25, PM25: 12, …} {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '강북구', PM10: 30, PM25: 15, …} {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '노원구', PM10: 21, PM25: 14, …} {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '강서구', PM10: 36, PM25: 16, …} {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '구로구', PM10: 23, PM25: 10, …} {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '영등포구', PM10: 29, PM25: 15, …} {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '동작구', PM10: 29, PM25: 15, …} {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '관악구', PM10: 27, PM25: 12, …} {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '금천구', PM10: 25, PM25: 15, …} {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '양천구', PM10: 0, PM25: 14, …} {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '강남구', PM10: 31, PM25: 16, …} {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '서초구', PM10: 34, PM25: 13, …} {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '송파구', PM10: 25, PM25: 6, …} {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '강동구', PM10: 24, PM25: 14, …}ARPLT_MAIN: "PM25"CO: 0.4IDEX_MVL: 39IDEX_NM: "좋음"MSRDT: "201912052100"MSRRGN_NM: "동남권"MSRSTE_NM: "강동구"NO2: 0.02O3: 0.016PM10: 24PM25: 14SO2: 0.002[[Prototype]]: Object undefined for (let i = 0; i < mise_list.length; i++){ let gu_name = mise_list[i]['MSRSTE_NM'] let gu_mise = mise_list[i]['IDEX_MVL'] console.log(gu_name,gu_mise) 리스트 0부터 마지막까지의 구이름과 미세먼지 수치를 콘솔에 남겨줘 } 중구 31 종로구 39 용산구 -99 은평구 42 서대문구 37 마포구 36 광진구 31 성동구 33 중랑구 34 동대문구 34 성북구 37 도봉구 41 강북구 39 노원구 36 강서구 42 구로구 37 영등포구 41 동작구 41 관악구 37 금천구 43 양천구 -99 강남구 39 서초구 41 송파구 42 강동구 39 undefined for (let i = 0; i < mise_list.length; i++){ let gu_name = mise_list[i]['MSRSTE_NM'] let gu_mise = mise_list[i]['IDEX_MVL'] if (gu_mise < 40){ console.log(gu_name,gu_mise) 리스트 0부터 마지막까지 중에 미세먼지 수치가 40보다 작은 구의 이름과 수치를 콘솔에 남겨줘 } } 중구 31 종로구 39 용산구 -99 서대문구 37 마포구 36 광진구 31 성동구 33 중랑구 34 동대문구 34 성북구 37 강북구 39 노원구 36 구로구 37 관악구 37 양천구 -99 강남구 39 강동구 39