프론트엔드 기초
프론트엔드란 무엇인가?
웹 개발에서 사용되는 용어로, 사용자가 웹 사이트나 웹 애플리케이션과 상호 작용하는 부분. 즉, 프론트 엔드는 사용자가 직접 보고 조작할 수 있는 웹 화면의 디자인과 기능을 구현하는 역할
참고 사이트
https://codesandbox.io/s/github/codesandbox-app/static-template/tree/master/
HTML
head
<style>
: css에 대한 내용을 입력<link>
: 주로 css 파일을 연결 할 때 사용<script>
: javascript를 연결하거나 내용을 입력
body
<h1>
<h2>
<h3>
<h4>
<h5>
: 제목<a>
: 하이퍼링크(웹 주소링크)<img>
: 이미지 연결<ul>
<li>
: 목록<div>
: 블록 형식 (태그들의 묶음 - 주로 다른 태그들)<span>
: 라인 형식 (태그들의 묶음 - 주로 텍스트)<br>
: 한칸<hr>
: 경계선<table>
: 테이블<tr>
: 행<td>
: 열
<input>
: 사용자로부터 받을 수 있는 입력 필드- type
- text : 텍스트
- password : 텍스트(마스킹 처리 되어서 보임)
- button : 버튼
- radio : 라디오 버튼
- label : 라디오에서 보여지는 글자
- checkbox : 체크박스
- label : 체크박스에서 보여지는 글자
- type
<textarea>
: 여러줄의 문자를 입력
CSS
종류
width
: 넓이height
: 높이font-size
: 글자 크기font-weight
: 글자 굵기color
: 글자 색상backgroud-color
: 태그 배경 색상margin
: 현재 태그에서 다른 태그와의 거리 조정padding
: 현재 태그 내의 컨텐츠와의 거리 조정
스타일 적용 방법
- 태그(inline)를 활용한 방법
- selector를 활용한 방법
- 태그
- class
- id
jQuery(javascript)
javascript 기본 문법
/*변수*/
var str = "문자열"; //문자열
var num = 1; //숫자
var list = [1, 2, 3, 4, 5]; //리스트(배열)
var person = { //객체(클래스)
name : "도준혁",
age : 33,
skills : ["java", "javascript", "mysql"]
}
console.log(str);
console.log(num);
console.log(list);
console.log(list[0]);
console.log(person);
console.log(person.name);
console.log(person.age);
console.log(person.skills[0]);
/*반복문*/
function print() {
for(var i=0; i<list.length; i++) {
console.log(list[i]);
/*조건문*/
if(list[i] > 3) {
console.log("3보다 큰 숫자 입니다.");
} else if(list[i] == 3) {
console.log("3입니다.");
} else {
console.log("3미만의 숫자 입니다.");
}
}
}
Jquery 사용법
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
//태그 선택
$("#idName"); //태그 id 선택
$(".className"); //태그 class 선택
/**
* 텍스트
*/
//[값 가져오기]
$("#idName").text();
//[값 설정하기]
$("#idName").text("텍스트 변경");
/**
* Input Value
*/
//[값 가져오기]
$("#idName").val(); //type:text
$("input[name=skills]:checked").val(); //type:checkbox, radiobox
//[값 설정하기]
$("#idName").val("도준혁"); //type:text
//속성(attribute) 설정
$("#idName").attr("disabled", true); //해당 태그 사용 불가
$("#idName").attr("checked", true); //해당 태그 선택(checkbox, radiobox)
//스타일 설정(css)
$("#idName").css("display", "none"); //해당 태그 숨기기
$("#idName").css("display", "block"); //해당 태그 보이기
$("#idName").css("background-color", "##FFCDD2"); //배경 설정
/**
* html 태그 넣기
*/
$("#divName").html("<span style='color:blue'>글자 태그</span>"); //#divName 태그안에 span태그 생성
$("#divName").append("<span style='color:yellow'>요소 제일 아래에 추가</span>"); //#divName 태그안의 제일 마지막 영역에 span태그 생성
$("#divName").prepend("<span style='color:yellow'>요소 제일 위에 추가</span>"); //#divName 태그안의 제일 처음 영역에 span태그 생성
기능 구현
<script>
function sum(a, b) {
return a + b;
}
$(document).on("click", "#idName", function() {
console.log("click 되었습니다.");
console.log(sum(1, 2));
});
$(document).on("change", "#idName", function() {
console.log("값이 변경 되었습니다.");
});
$(document).on("click", "#loginBtn", function(){
var idVal = $("#idInput").val();
var passwordVal = $("#pwInput").val();
var data = {
id : idVal,
pw : passwordVal
}
console.log("클릭 되었습니다");
console.log(data);
});
</script>
'WEB' 카테고리의 다른 글
SOP(Same-Origin Policy) / CORS(Cross-Origin Resource Sharing) (1) | 2023.05.18 |
---|---|
HTTP / HTTP Thread / HTTP Connection Pool (0) | 2023.04.03 |
MicroService Architecture(MSA) (0) | 2023.02.23 |