Frontend 를 담당하는 언어들
- HTML은 뼈대를, CSS는 옷을, Javascript는 움직이는 부분을 담당한다.
- HTML로 쓰고, CSS로 꾸미고, Javascript로 작동하게 한다.
- JQuery는 Javascript의 라이브러리. 자바스크립트의 복잡한 문법 대신 간결하고 직관적인 언어로 코딩할 수 있게 하려고 만들었다.
- Ajax (Asynchronous JavaScript and XML): 페이지를 전부 다시 받지 않아도 해당 부분이 업데이트 되도록 한다.
HTML문서에서 <body></body>에는 브라우저에 띄워지는 것들을 넣고,
ex. 로그인 페이지
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해 주세요.</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<p>
<button>로그인하기</button>
</p>
</div>
<head></head>에는 브라우저에 띄워지는 것들을 제어하는 것들을 넣는다.
- <style></style> 에는 CSS를 .class이름{ } 의 형태로 넣고 ( *{} 는 모두에게 적용한다는 뜻 )
ex. 위 로그인 페이지 꾸미기
*{
font-family: 'Do Hyeon', sans-serif;
}
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
/*안쪽 간격 조정은 padding, 바깥쪽 간격 조정은 margin*/
padding-top: 40px;
}위 *{} 에서처럼 폰트를 먹이려면 <head></head>에서 폰트 소스를 링크해줘야 함.
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Brush+Script&display=swap" rel="stylesheet">
- <script></script>에는 Javascript를 넣는다.
- JQuery를 사용하기 위해서는 <head></head>에서 따로 아래와 같이 JQuery를 import 해줘야 한다.
<!-- jQuery를 import 합니다 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
- JQuery는 $('id이름').펑션 형태로 사용한다.
-Ajax를 사용하려면 아래와 같이 Ajax 기본골격을 가지고 온다.
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
}
})
<script>
function q1() {
// 여기에 코드를 입력하세요
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
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']
console.log(gu_name,gu_mise)
let temp_html = ``
if(gu_mise>40){
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
}else{
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
// console.log(response['RealtimeCityAir']['row'])
}
})
}
</script>
- 기억해두면 좋을 JQuery 매소드
- 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
- 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");
'프로그래밍 스킬 되살리기' 카테고리의 다른 글
| 파이썬 가상환경 venv 만들기, 활성화, 비활성화 명령어 (0) | 2024.01.15 |
|---|---|
| 기초 SQL문 (0) | 2023.03.17 |
| 서버 만들고 클라이언트와 서버, DB 연결하기 (ft. flask) (1) | 2023.01.03 |
| Python Crawling (파이썬 크롤링) - ft. Mongodb (0) | 2023.01.02 |
| Javascript if문, for문 (0) | 2023.01.01 |