[TIL] 유데미 X 사람인 부트캠프 31일차 / html, css, js

카테고리 없음

상똥 2024. 1. 30. 16:49

[1. 오늘 배운 것]

오늘은 강사님께서 처음 오셔서, html css 그리고 javascript를 복습하는 시간을 가졌다.

1. 웹 개발

- 프로토콜 : 일종의 통신 규약, 웹이라는 정보 공유 체계 내에서 정보를 주고 받으려면 웹이 정한 통신 규약을 따라야 함

- http : 웹에서 정보를 주고 받을 때 사용하는 프로토콜, 클라이언트와 서버 사이에 이루어지는 요청과 응답에 대한 프로토콜

2. html

- 여는 태그와 닫는 태그로 구성

- 콘텐츠: 텍스트 또는 요소

<태그명 속성명="속성값">콘텐츠</태그명>
<태그명 속성명="속성값" />

예시)
<p id="paragraph">이건 문단이에요</p>
<hr class="divider" />

- 속성명과 속성값 : 태그 내에 필요

- heading : h1, h2, h3,,, 숫자가 커질수록 글자 작아짐

- ul, ol 등 목록 태그 (내부: li)

- a : 링크 태그

- input 태그 : type은 text, password, checkbox, date, color, file, range 등 다양함

- img : 이미지 태그, 오류시 alt로 대체

- button : 버튼을 생성해 사용자와 상호작용

- 각종 의미부여 태그 : header, main, footer, article, section, p 등

2. css

- width, height : 박스모델의 너비와 높이

- box

- border 다루기 : border-width, border-color, border-style, border-radius

- 글자 꾸미기 : color, font-family, font-size, line-height

- display 속성 : inline, block 등등

- position : 요소의 배치 방식

- flexbox

3. 자바스크립트 초급문법

- 함수

function sayHello() { // function 키워드와 함수명 그리고 소괄호와 중괄호를 사용해요.
	console.log("Hello~!");
}

- 함수 호출

sayHello(); // => "Hello~!"

- 배열

const numbers = [1, 2, 3, 4, 5];
console.log(numbers[2])	//3 출력
const numberOfNumbers = numbers.length	//numberOfNumbers = 5

- 다양한 메서드

numbers.push();
numbers.splice();
numbers.sort();
numbers.map();
numbers.filter();

4. 자바스크립트 중급 문법

- for문

for(let i = 0; i < 5; i++){
    console.log(i);
}

- forEach문 배열명.forEach(콜백함수) { ... }

const students = ["park", "kim", "lee", "kang"]

students.forEach(function(student)}{
    document.write(`${student}`)
});

- for(변수 in 객체) { ... }

const gitbook {
    title : "title",
    id : "1",
    num : "2"
}

for(key in book){
    document.write(`${key} : ${gitbook[key]}<br>`);
}

[2. 회고]

종환이가 놀렷다. 종환이때문에 강의에 나가고싶지 않다. 는 뻥이고 공부 열심히 하면서 지내고 있다

자바스크립트 기초 문법을 다뤘는데