HTML,CSS 부분은 전에 했던 기억때문 인지 쉽고 재밌게 다가 왔다.
JavaScript는 파이썬과 비슷해서 파이썬하기전에 비해 이해하기 쉬웠다.
jQuery를 처음 사용해 봤지만 어렵지 않게 사용한거같다. 튜터님께서 쉽게 알려주셔서 그런가..?
1.html 정리
<div></div> <-구역을 나눠준다.
<p></p> <-문단
<ul></ul> <-black_point
<h1></h1> <-제목
<h2></h2> <-소제목(글차 크기 : h1>h2>...h5>h6)
<hr> <-가로선
<span></span> <-특정 글자를 집어 줄때 사용
<a href="url"></a> <-하이퍼링크태그
<img src="url" /> <-이미지 태그
<input type="text" /> <-button 태그
<textarea></textarea>
<div class="이름1 이름2 ..."></div> <-class: 명찰을 부여해줌(여러 명찰 입력가능)2.CSS 정리
배경관련(style에서 적용할시 세트로 온다.)
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-famliy
color
간격
margin (바깥쪽 여백): 20px 0px 0px 100px; <- 순서 위 오 아 왼
margin: auto; <- 양옆 간격 동일하게 맞춰주기(가운데정렬)
padding (안쪽 여백)
텍스트
text-align: center; <-글자 가운데정렬
모서리
border-radius: 10px; <-모서리 둥글게
박스
display: block; <- 박스로 묶어준다.
전체 선택
*{}3.폰트 설정방법
<link href="폰트 url"> <-폰트설정1
<style>
*{font-family: 'Gugi', cursive;} <-폰트설정
</style>4.CSS 부트스트랩 템플릿
다음 코드를 추가하고 부트스트랩에서 원하는 코드를 가져와 css로 살짝 다듬으면 된다.(편리함)
<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>
</head>
<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>
</head>-
JavaScript기초는 파이썬과 거의 비슷하다.
조건문(==, and : &&, or : ||) -
jQuery 정리
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> //부트 스트랩 템플릿으로 사용할시 이미 포함되어 있으므로 따로 적어주지 않아도 된다. $('#id 값').val(); <- 값 읽어오기 $('#id 값').val('이후의 값'); <- 값 바꾸기 $('#id 값').hide(); <- 숨기기 $('#id 값').show(); <- 보이기 $('#id 값').css(읽어올 style 속성); <- 해당 css값 읽어오기 $('#id 값').css(변경할 style 속성, 변경 값); <- css편집 $('#id 값').text('유후') <- text 값 변경 $('#id 값').empty() <- 비우기 let temp_html = `<button>나는 버튼이다</button>` $('#id').append(temp_html) <- #id 값 구역 안에 temp_html 추가(추가 되는건 뭐든 상관없는듯)
