다룰 내용
html - css - javascript - bootstrap - JQuery - Ajax
1. html - 문서
2. css - 꾸미기
3. bootstrap - 쉽고 세련된 꾸미기
4. javascript - 기능
5. JQuery - 길어질 수 있는 자바스크립트의 쉬운 사용을 위한 일종의 라이브러리, 부트스트랩 사용 전이라면 import 필수
6. Ajax - 통신규약, 오늘 수업에서는 GET 방식을 사용한 데이터 받기까지만 한다.
1. HTML
기본적으로 head와 body로 나뉨
body 태그는
<h(n)><h(n)/> 제목을 나타내는 태그, 구글 검색을 위해 써주는게 좋다.
<div></div> - 줄을 나눈다.
<span></span> - 줄 안에서 나눈다.
<p></p> - 문단
<br> - 줄바꿈
<hr> - 중간줄
<img src = ""/> - 이미지 삽입
<input type = "text /> - 텍스트 입력창
<button>버튼입니다.</button>
그 외 다수.
2. css
background-color
background-image
background-size
width
height
font-size
font-weight
font-famliy
color
margin - 바깥쪽 여백
padding - 안쪽 여백
html의 각 태그 안에 <div id = "example"> 이런식으로 넣으면
head 안의 스타일 태그를 만들고
<style>
.example{
color: white;
}
</style>
이런식으로 실행할 수 있다.
- 구글 폰트 사용
head에 link
style에
*{
font-family: 'Nanum Gothic';
}
적으면 폰트 적용이 가능하다.
bootstrap
- 부트스트랩 홈페이지에서 마음에 드는거 가져와서 쓰면 된다.
물론 head에 import해주는 과정 필요하다
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
javascript
head안에
<script> - </script>태그를 이용해 사용 가능
예를 들어
<script>
function key(){
alert('안녕')
}
</script>
- let을 이용한 변수 선언
- console.log('temp')를 이용한 콘솔 로그 남기기 가능
- list, dictionary 지원
list의 선언은 let b_list = [1, 2, 3, "ex"], 배열처럼 출력 가능
dictionary는 key-value형태로 순서가 중요하지 않다.
한 사람의 인적사항을 적듯이 사용 가능, Ajax통신시 list와 dictionary형태 모두 사용
파이썬과 달리 문자열과 int형을 더하면 string으로 뽑아준다.
let num = 05
let name = 'hojin'
name + num
-> hojin5if, for 사용가능
제이쿼리의 필요성
버튼의 색깔을 바꾸거나 div 박스 하나를 감추고 싶을 때 javascript만 사용한다면 코드가 길어지고, 브라우저간 호환성 문제 때문에 제이쿼리가 필요하다..
document.getElementById("element").style.display = "none";
->
$('#element').hide();
CSS는 class = "tag" 제이쿼리에서는 id = "tag"
input 박스의 값 가져오기 :
<script>
$('#post-url').val();
</script>
<body>
<input id = "post-url" type = "text">
</body>
카드박스 숨기기
숨기고 싶은 div에 id값을 넣어주고
스크립트에서 $('#cards-box').hide();
적으면 그 div를 숨길 수 있다.
$('#cards-box').show();를 통해 다시 볼 수 있고
$('#cards-box').css('display');를 이용해 cards-box가 id로 있는 태그의 css에 접근해 display값을 알 수 있다.
function openclose() {
if ($('#post-box').css('display') == 'block') {
$('#post-box').hide();
$('#btn-posting-box').text('박스 열기)
} else {
$('#post-box').show();
$('#btn-posting-box').text('박스 숨기기)
}
}버튼에 onclick = "openclose()" 속성을 넣어주면 버튼에 따라 나타나고 사라지는 구현이 가능하다.
넣어준 버튼의 text도 .text 함수로 바꿔줄 수 있다.
open Api를 통해 받은 ajax 정보를 for문을 통해 li로 추가
<script>
function q1() {
$('#names-q1').empty();
//empty를 사용한 li 비우기
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {},
success: function (response) {
let rows = response["RealtimeCityAir"]["row"];
for (let i = 0; i < rows.length; i++) {
let gu_name = rows[i]['MSRSTE_NM'];
let gu_mise = rows[i]['IDEX_MVL'];
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
//갯수만큼 li 추가
$('#names-q1').append(temp_html);
}
}
})
}
</script>
<div class="question-box">
<h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
<p>모든 구의 미세먼지를 표기해주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<ul id="names-q1">
//여기에 li 추가
</ul>
</div>
비슷한 ajax를 받아온 script에 style태그를 사용할 수도 있다.
if (bike_cnt < 5) {
temp_html = `<tr class="urgent">
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
}
$('#names-q1').append(temp_html);
img src는 아래와 같은 형식으로 변경 가능.
<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function(response){
let imgurl = response[0]['url'];
$("#img-cat").attr("src", imgurl);
}
})
}
</script>
<div>
<img id="img-cat" width="300" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
</div>
새로고침 할때마나 정보를 바꾸는 함수
$(document).ready(function(){
alert('다 로딩됐다!')
});