프론트엔드 기초

프론트엔드 기초

프론트엔드란 무엇인가?

웹 개발에서 사용되는 용어로, 사용자가 웹 사이트나 웹 애플리케이션과 상호 작용하는 부분. 즉, 프론트 엔드는 사용자가 직접 보고 조작할 수 있는 웹 화면의 디자인과 기능을 구현하는 역할

---

참고 사이트

https://www.w3schools.com/

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 : 체크박스에서 보여지는 글자
• <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>