[FE] HTML, CSS, Javascript, jQuery

HTML
- 뼈대로 여는 태그, 닫는 태그가 쌍으로 존재하며 태그는 교차가 불가능
- head, body로 구분되며 head는 CSS, Javascript 코드를 포함하고, boby는 뼈대 전체를 포함
- 대표적인 HTML 태그
  - h1 ~ h6 ➡️ headline의 약자, 신문 제목 같은 녀석
  - div ➡️ division의 약자, 나누는 녀석
  - p ➡️ paragraph의 약자, 신문 기사 단락과 같은 텍스트 내용을 담음
  - ul, ol, li ➡️ (un)ordered list, list의 약자, 글머리 기호
  - span ➡️ 글 중간에 잘라내서 색을 입혀주거나 할 때 사용
  - table, th, tr, td ➡️ 엑셀 같은 표를 그릴 때 사용
  - img ➡️ 이미지를 나타낼 때 사용

CSS
- head > style 태그 안에 작성하며, 세미콜론(;)으로 마무리
- 선택자
  - id: HTML 파일을 통틀어 단 하나만 존재하며, # 으로 표시(#contents)
  - class: 중복 적용이 가능하며, .으로 표시(.area-write)

Javascript

브라우저를 살아 숨쉬게 만드는 역할
클릭, 마우스 오버 시 색 변화, 숨기기, 나타내기 등 수많은 기능

기초 문법

/* 변수 */
// 변수를 처음 선언할 때 let 써줌. 자료형은 작성하지 않아도 됨
let a = 3;
let b = 2;
console.log(a + b)	// System.out.println()과 같음


/* 자료형 */
/* 문자, 숫자 */
let name = '문자';
let contents = "Java와 다르게 홑/쌍따옴표 상관없음";
let num = 10;
console.log(num + name)	// 문자 + 숫자를 하면 모두 문자로 묶음
/* boolean */
let age1 = 18;
let age2 = 20;
let isAdult = age1 > 19;
console.log(isAdult);	// false
isAdult = age2 > 19;
console.log(isAdult);	// true
/* 리스트 */
let fruits = ['사과', '딸기', 5];	// 서로 다른 자료형 혼합 가능
console.log(fruits[0]);	// 사과
console.log(fruits[1]);	// 딸기
console.log(fruits[2]);	// 5
/* 딕셔너리 */
let contents = {
	'title': 'Spring',
    'tutor': '박두식'
};
console.log(contents);	// Object {title: "Spring", tutor: "박두식"}

let fruits = ['사과', '딸기', '수박'];

// 반복문
for (let i = 0; i < fruits.length; i++) {
	let fruit = fruits[i];
    console.log(fruit);
}

// 조건문
for (let i = 0; i < fruits.length; i++) {
	let fruit = fruits[i];
    console.log(fruit == '수박');	// true / false 결과값
}

// 함수
funtion sample() {
	alert('얼럿');
}

// 백틱
// 영어 키보드 상태로 1 왼쪽 자판(`)
let name = '내 이름';
let text = `${name}님 안녕하세요.`;
console.log(text);

// 과일이 몇 개인지 세는 함수

let fruits = ['사과', '딸기', '수박', '감', '포도', '오렌지', '메론', '감'];

funtion countFruit(name) {
	let result = 0;
	 for (let i = 0; i < fruits.length; i++) {
     	let fruit = fruits[i];
        if (fruit == name) {
        	result += 1;
        }
    }
}

let count = countFruit('감');
console.log(count);	// 배열에 들어있는 감의 개수 인쇄

jQuery

미리 작성된 자바스크립트 함수 모음집 - 많이 사용하는 HTML, CSS 조작 함수를 미리 만들어서 제공

사용하기 전에 head 태그 사이에 임포트

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$ 로 시작하고, 괄호 안에 선택자로 대상을 적으면 됨

// HTML 나타내기/숨기기
$('#post-box').show();	// 나타내기
$('#post-box').hide();	// 숨기기

// HTML 없애기, 추가하기
$('#cards-box').empty();	// 없애기
$('#cards-box').append(`<div class="card">
    <img class="card-img-top"
         src="https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg"
         alt="Card image cap">
    <div class="card-body">
        <a href="#" class="card-title">여기 기사 제목이 들어가죠</a>
        <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
        <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
    </div>
</div>`);	// 추가하기

// input 값 가져오기/넣기
$('#post-url').val();	// 가져오기
$('#post-url').val('new text');	// 넣기

ฅ^._.^ฅ

[FE] HTML, CSS, Javascript, jQuery

티스토리툴바