프론트엔드 복습(웹개발종합반 복습)

Thomas·2023년 5월 16일

회고

웹개발 종합반을 수강한지 2달이 지나고
첫 팀 프로젝트를 진행하였습니다
그떄는 벡엔드 부분이라서 크게 프론트엔드쪽을 건들 필요가 없었다.
하지만 백엔드 틀에 가두어 살았던 나는...
프론트엔드를 사용하여 효율적으로 코드를 짤수 있었던것을 몰랐고..
계속 백엔드 승부 볼라고 삽집을 하다가
크게 깨달았었다... 내가 너무 프론트엔드를 무시를 했구나
그래서 프론트엔드를 공부 하고 싶었던 마음이 커져버린 나...

Html,css,js,jQuery,bootstrap라는 다양한 기술스택을 사용하는데 대충 어떤 것인지만 알았는데 복습하면서 먼가 재정리된 느낌을 여기서 풀어보겠습니다

CSS

Css를 사용할 떄 html에 어느 부분인지 알수 있도록 명찰을 달아줘야한다
그게 class 속성값이다

< div class=“mytest”>

그런 다음 css 파일에서 해당 class를 사용하여 꾸밀수 있다

.mytest {
	color: ~~~
}

div 활용법

박스(구역) 부분 만들 div를 넣어서 구역을 나눠주고
백그라운드 색을 넣어서 구역 부분을 알수 있도록 해준다

만든 박스의 가운데 위치하고 싶으면
또 다른 div를 만들어서 만든 박스를 새로 만든 div에 넣어주고
백그라운드 색상을 주고 처음 만든 박스 사이즈에 맞게 맞추준다
Magin: 0px auto 0px auto 로 하면 가운대로 간다
마지막으로 백그라운드 색상 없애주면 끝!!

구글 웹 폰트 사용하기

https://fonts.google.com/?subset=korean

-> select regular
->@import 누르고 style 태그 사이에 복사하고 css파일에 첫줄에 넣어줍니다

@import 그 다음에 있는 Css 코드 복사하고

* { 여기에 넣어준다
   }

폰트 바꿀시 select remove all 눌러주고 다른거 사용!

부트스트랩

남이 만들어 둔 것을 쓸 떄는 잘 찾아다가 조금씩만 가져와서 고쳐쓰는게 답

jQuery

HTML의 요소들을 조작하는, 편리한 JS를 미리 작성해둔 것. 라이브러리!
그래서 쓰기 전에 import를 해여합니다

JS로 길고 복잡하게 써야 하는 것을

Document.getElementById(“element”).style.display = “none”;

JQuery로 보다 직관적으로 쓸 수 있습니다

$(‘#element’).hide();

Css애서는 class 속성값으로 html에 어느 부분인지 알수 있도록 명찰을 달아줬다면

jQuery는 id 속성값으로 지칭을 할 수 있는 명찰을 달아준다

$('#<html id속성값>') -> 지칭 해주기

그래서 $ ('#<html id속성값>').text()
$('#<html id속성값>').val() 등등 사용가능!

예시

Function checkResult() {
	let a = ’사과’
	$(‘#<id>’).text(a)
}

버튼 태그랑 쓰인다! 버튼을 클릭할 때 함수가 호출이 되면서 실행이 된다
< button onclick=“checkResult”>

응용편1 - 리스트 사용


Function checkResult() {
	Let a = [’사과’,’배’,’귤’]
	$(‘#<id>’).text(a[1]) // 배 호출
}

그래서 리스트 사용시 For loop을 돌릴수도 있다!!

응용편2 - 딕셔너리 사용

Function checkResult() {
	Let b = {‘name’ : ‘David’, ‘age’: 30}
    $(‘#<id>’).text(b['name']) // David 호출
}

응용편3 - 리스트 딕셔너리 사용

function checkResult() {
  Let c = [
      {‘name’ : ‘David’, ‘age’: 30}
      {‘name’ : ‘Thomas’, ‘age’: 30}
  ]
  $(‘#<id>’).text(c[1]['name']) // Thomas 호출
}

css 폰트 사이즈도 변경이 가능하다
$(‘#< id>’).css(‘front-size’,’40px’)

JS 반복문

Let fruits = [‘사과’,’배’,’감’]
fruits.forEach((a) => {
	// 여기에 if문도 들어가서 쓸수 있다
	console.log(a)
})

jQuery - append

많이 쓰임!!!!

Function checkResult() {
  Let fruits = [‘사과’,’배’,’감’]
  fruits.forEach((a) => {
      let temp_html = `<p>${a}</p>` // ${ } 안에 들어가면 문자열이 된다
      $(‘<id>’).append(temp_html)
  })
}