frontend
1.HTML 태그
대표적인 HTML 태그들<header>: 책의 표지처럼, 문서나 섹션의 제목과 관련된 정보를 담는 부분이에요. 예를 들면, 페이지 상단에 있는 로고, 제목, 메뉴 같은 걸 넣을 때 사용해요.<nav>: navigation links책의 목차처럼, 웹사이트 안
2.CSS layout 종류
HTML의 Layout은 웹페이지를 구성하는 요소들을 배치하는 방법을 의미해요. 웹페이지에서 텍스트, 이미지, 버튼 같은 요소들이 어디에, 어떻게 놓일지를 정하는 거죠. HTML로 기본 구조를 만든 뒤, CSS를 사용해 레이아웃을 꾸미고 조정합니다.특징: 한 방향(가로
3.HTML와 CSS의 관계
HTML : 구조를 잡아요 (헤더 header, 본문 main, 푸터 footer를 정의)CSS : 그 구조를 배치하고 스타일링해요 (color, padding, center 등)
4.display 속성 : block vs. inline
display 속성 --> HTML 요소가 웹페이지에서 어떻게 배치되고 차지하는 공간을 결정.가장 기본적인 값은 block과 inline.특징:한 줄을 전체 차지합니다 (다른 요소가 옆에 올 수 없음).항상 새 줄에서 시작합니다.너비와 높이를 설정할 수 있습니다.사용
5.HTML의 박스 모델
HTML의 박스 모델(Box Model)은 웹페이지에서 각 요소가 차지하는 공간을 정의하는 기본 규칙!이걸 집에 비유하면 다음과 같이 이해할 수 있어요:Content (콘텐츠): 집 안의 방이에요. 글자, 이미지 같은 실제 내용이 들어가는 공간이에요.Padding (패
6.CSS selectors
CSS 선택자는 HTML에서 꾸미고 싶은 요소를 선택하는 방법이에요."어떤 요소를 꾸밀 것인지"를 정하는 역할을 하죠.예를 들어, 제목은 빨간색, 문단은 파란색으로 꾸미고 싶을 때, 선택자를 사용해 해당 요소를 선택해 스타일을 적용합니다.HTML 태그를 직접 선택해서
7.HTML의 id와 class
HTML에서 id와 class는 1️⃣요소(element)를 식별하고 스타일링하거나 2️⃣JavaScript로 조작하기 위해 사용됩니다. 고유 식별자: 하나의 HTML 문서에서 특정 요소에만 사용할 수 있어요. 즉, id는 "한 번만" 사용됩니다.특정 요소를 지목할 때
8.HTML의 기본구조와 애트리뷰트
HTML 파일은 웹 페이지의 내용을 작성하기 위한 언어로, 기본 구조는 다음과 같다.<!DOCTYPE html> HTML 문서임을 선언.브라우저가 HTML5를 사용할 수 있도록 알려줌.<html> 문서의 시작과 끝을 표시.<head> 웹 페이지의
9.HTML 모바일 및 반응형 디자인
다음은 내가 간단히 만든 자기소개 홈페이지다. html과 css만 사용해서 만들었는데 head 부분에이 코드가 이해가 안 되어 추가로 알아보았다.모바일 및 반응형 디자인을 위한 코드이다.Viewport(뷰포트):웹 페이지가 사용자의 화면에 보여지는 영역을 말합니다.예:
10.HTML <main>
요약 > HTML `` 요소는 웹 페이지나 애플리케이션에서 문서의 핵심 콘텐츠를 나타낸다. 한 문서에 한 번만 사용해야 하며, 접근성과 SEO를 높인다. 용어 설명 HTML 요소: 웹 페이지의 구조를 정의하는 코드 조각으로, 예를 들어 `, ` 같은 태그. 접근성 (Accessibility): 장애가 있는 사람들도 웹 콘텐츠를 쉽게 사용할 수 있도록 하는...
11.div vs. section
<div>: 콘텐츠를 그룹화할 때 사용하는 일반 박스. 의미 없이 단순히 묶는 데 사용. <section>: 주제나 목적이 있는 콘텐츠를 묶는 데 사용. <div>는 박스: 그냥 물건을 담는 상자처럼 아무 목적 없이 여러 콘텐츠를 묶는 데 써요.예:
12.<ul>에서의 margin과 padding
이를 제거하지 않으면 <ul>이 상단이나 좌우에 불필요한 공간을 차지할 수 있어 디자인이 어긋남.padding: 0;과 margin: 0;을 설정하면 이런 여백을 없애 깔끔한 디자인 가능.그래서 홈페이지 과제1 만들 때 구조적 의미를 위해 nav 안 ul안 li를
13.HTML의 form
form과 action은 GET과 POST와 직접적으로 관련되어 있음. 1.form = 데이터를 전달하는 '구조' form은 사용자로부터 입력받은 데이터를 서버로 전달하는 HTML 요소. method와 action 속성은 이 데이터를 어떻게, 어디로 보낼지를 정의합니
14.javascript 왕왕기초
DOM은 "Document Object Model"의 줄임말로, 웹 페이지를 자바스크립트로 조작할 수 있게 해주는 구조라고 생각하면 돼. 웹 페이지의 HTML 태그들이 모두 자바스크립트 객체로 변환되어 있기 때문에, 이걸 이용해서 내용을 바꾸거나, 새로운 요소를 추가하
15.let, const, var
옛날 방식: 자바스크립트 초창기부터 사용되던 방식입니다. 특징 1: 블록 스코프를 무시. (이유: 함수 스코프라서)블록 {} 안에서 선언하더라도, 블록 밖에서도 사용할 수 있습니다.특징 2: 같은 이름의 변수 선언 가능같은 이름으로 변수를 여러 번 선언해도 에러가 나
16.Array method (forEach, map, filter, reduce, some)
(\*ES5는 2009년에 나온 JavaScript 표준)배열의 모든 요소를 순회하며 함수 실행.주로 배열을 반복 처리할 때 사용.배열의 각 요소를 변환한 새로운 배열 반환.원본 배열은 변경되지 않음.조건에 맞는 요소만 선택해 새로운 배열 반환.원본 배열은 변경되지 않
17.rest parameter와 arrow function
Rest Parameter는 함수에 전달되는 여러 개의 값을 하나의 배열로 모아주는 기능.쉽게 말해, 함수가 얼마나 많은 값을 받을지 모를 때 유용.함수가 호출될 때 전달된 값(인자)을 배열로 처리할 수 있습니다. ... (점 세 개)를 사용합니다.함수에 여러 값을
18.1급 객체와 object
JavaScript에서 함수는 1급 객체입니다. 1급 객체란, 다른 값처럼 자유롭게 다룰 수 있는 객체를 말합니다.이게 무슨 뜻?함수를 변수에 저장할 수 있습니다.함수를 다른 함수의 인자로 전달할 수 있습니다.함수를 다른 함수의 반환값으로 사용할 수 있습니다.키-값
19.parameter (name, value) in HTML
HTML에서 parameter (name, value)는 태그에 정보를 추가하는 역할.쉽게 말해, 태그가 "어떻게 동작해야 하는지" 알려줌.\*태그의 형식: <와 >로 감싸여 있다.name: 설정의 이름 value: 설정의 값href (name): 링크의 주소를
20.justify-content VS text-align
justify-content vs text-align 두 속성 모두 수평 방향 정렬에 사용적용 대상Flexbox (display: flex):모든 자식 요소(block 요소: div, section 등, inline 요소: span, a 등)를 정렬할 수 있음.Text
21.BEM(Block Element Modifier) in CSS
BEM(BEM: Block, Element, Modifier)은 CSS를 체계적으로 쓰는 방법! 코드가 많아질수록 정리가 안 되고 헷갈리기 쉬운데, BEM은 그걸 깔끔하게 관리하도록 도와줌~쉽게 말하면, 블록(Block), 요소(Element), 수정자(Modifier
22.CSS의 구체성 w. html
.card\_\_button--primary와 .card\_\_button 중에서 누가 우선 적용되느냐(누가 "낮다")는 CSS의 "구체성"에 따라 달라져. 인라인 스타일: <div style="..."> → 가장 우선 적용됨아이디 선택자: 3. \*\*클래스,
23.스타일 초기화
스타일 초기화를 위한 간단한 reset.css 와 normalize.css완전히 리셋(초기화) 하는 스타일. 모든 브라우저의 기본 스타일(여백, 크기, 폰트 등)을 없애버려서 완전히 깨끗한 상태.쉽게 말해: "브라우저 기본 스타일 다 지우고, 내가 스타일을 처음부터
24.반응형 웹
반응형 웹은 화면 크기에 따라 웹사이트가 자동으로 예쁘게 변하는 거야.핸드폰에서는 글씨가 작아지고, 사진이 한 줄로 나오는 거지~CSS 레이아웃 화면을 어떻게 나눌지 정하는 방법이야. Float, Flexbox, Grid를 사용해서 정렬하고 배치해.미디어 쿼리 화
25.템플릿 리터럴
batteryStatus.textContent = \`배터리: ${batteryLevel}%\`; 이건 템플릿 리터럴(template literal)이라는 자바스크립트 문법~!이 부분은 HTML에 있는 특정 요소(여기선 batteryStatus라는 ID를 가진 요소)의
26.알람 설정 두가지 방법
위 코드는 알람 예약 선택지를 만드는 방법 중 하나이다.for문을 쓰기에 -> 내가 하나하나 모든 숫자를 입력할 필요가 없는 방법이 부분은 i를 문자열로 바꾸고, padStart는 말 그대로 패드가 2개라는 것이다. 앞이 비면 0으로 채우겠다. 이런 뜻!i가 3이면 0
27.html 속성값=문자열
HTML에서 value="1"와 value=1의 차이에 대해 설명하자면, 이 둘은 HTML 문법적으로 약간의 차이는 있지만, 브라우저에서 처리되는 방식은 동일합니다. 즉, 결과적으로 브라우저는 value="1"과 value=1을 동일하게 처리합니다.value="1" (
28.@keyframes in CSS
@keyframes example { ... } 여기서 example은 애니메이션의 이름입니다. 이 이름을 통해 나중에 CSS 규칙에서 애니메이션을 참조하게 됩니다.0% (시작 상태): background-color: red; 애니메이션 시작 시, 요소의 배경색을
29.grid-column-start in css
예) 4개의 열로 구성된 그리드 컨테이너가 있다고 가정해봅시다.위 HTML을 위한 CSS는 다음과 같습니다.그리드 컨테이너 설정: grid-template-columns: 100px 100px 100px 100px;는 컨테이너 안에 4개의 열을 만들고, 각각의 너비를
30.Switch 문의 기본 흐름
표현식 평가: switch(표현식) 내부의 값을 평가합니다.case 매칭: 평가된 값과 각 case에 작성된 값들을 엄격 비교(===)합니다.일치하는 case가 있으면, 그 위치로 점프하여 실행을 시작합니다.코드 실행 및 fall-through: 일치한 case부
31.get 메서드 vs. query 메서드
오래전부터 쓰여온 방법으로, 주로 id, class, 태그 이름 등 특정 기준으로 요소를 찾을 때 사용해요.예시: document.getElementById("myId"): id가 "myId"인 요소 하나를 찾아요. document.getElementsByClass
32.<form></form> 내 요소
form은 웹 페이지에서 사용자에게 정보를 입력받기 위해 사용됩니다. 예) 회원가입, 로그인, 설문조사, 검색 등input 사용자로부터 한 줄의 텍스트, 숫자, 이메일, 비밀번호 등 다양한 데이터를 입력받을 때 사용.select 드롭다운 목록을 만들어 사용자가 미
33.호이스팅 in javascript
함수 표현식으로 정의된 함수는 호이스팅에 의해 선언과 할당이 분리되므로참조하려는 함수가 ~보다 반드시 위에 작성되어야 합니다.여기서 ~는 중요한게 아니고. 암튼 먼저 작성되어야 한다는 사실인데함수를 변수에 할당하거나 다른 곳에 전달할 때 사용하는 표현 방식익명 함수 표
34.event 등록 방법
자바스크립트에서 이벤트를 등록하는 세 가지 방법예시 코드:장점: 간단함: HTML 태그에 바로 작성하므로 빠르게 이벤트를 설정할 수 있어요.예시 코드:장점: 직관적 관리: 자바스크립트 코드 내에서 요소의 프로퍼티를 사용해 이벤트를 등록할 수 있어요.예시 코드:장점: