코딩자율학습단 19기 | 20일차 학습일지(END) – 최종프로젝트(2)_포트폴리오·컨택트 섹션 완성 + 반응형(Media Query) + 자바스크립트 효과 적용

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) Portfolio 섹션 구성(HTML/CSS) 역할: 작업 결과물을 “카드(썸네일+텍스트)” 형태로 보여주는 영역 구성 핵심 포인트: 반복되는 카드 구조를 일정한 래퍼/클래스로 통일해 스타일 적용이 쉬운 형태로 만듦 짧은 예시(코드): 2-2) Contact With Me 섹션 + 폼 UI 디테일(HTML/CSS) 역할: 연락처 정보 + 사용자 입력 폼을 한 화면에서 제공 … 더 읽기

코딩자율학습단 19기 | 19일차 학습일지 – 최종프로젝트(1)_헤더/메인 레이아웃, 섹션 구성, 배경 영역 고정 효과

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 프로젝트 기본 세팅(문서 뼈대/외부 리소스 연결) 역할: HTML 기본 문서 구조를 만들고(메타/타이틀), 아이콘 폰트(CDN)와 CSS 파일을 연결 핵심 포인트: lang, meta charset, viewport, link rel=”stylesheet” 흐름을 먼저 고정해두면 이후 작업이 안 정적 짧은 예시(코드): 2-2) 헤더 영역 만들기(로고 + 메뉴 배치) 역할: 상단 헤더에 로고/메뉴를 … 더 읽기

정상 사이트처럼 보이는 가짜 로그인 페이지 구별법: URL, 도메인, 자물쇠 아이콘의 함정

한 줄 요약: 가짜 로그인 페이지는 디자인보다 주소에서 흔적이 드러나는 경우가 많습니다. 눈으로 화면만 보지 말고, 접속 경로와 자동입력 반응까지 함께 보는 습관이 중요합니다. 들어가며 가짜 로그인 페이지는 요즘 점점 더 정교해지고 있습니다. 로고, 색상, 버튼 배치, 문구까지 원본과 거의 비슷하게 보이는 경우도 있어, 화면만 봐서는 구분하기 어려울 수 있습니다. 그래서 판단 기준을 ‘디자인’에 두면 … 더 읽기

피싱 사이트는 어떻게 로그인 정보를 훔칠까? 공격 원리를 알아야 막을 수 있다

한 줄 요약: 피싱 사이트는 기술보다 심리를 먼저 노립니다. 사용자가 믿을 만한 상황을 만들고, 스스로 아이디·비밀번호·코드를 입력하게 만드는 구조를 이해해야 예방이 가능합니다. 들어가며 피싱 사이트는 보통 아주 복잡한 해킹처럼 느껴지지만, 실제 핵심은 사용자가 스스로 정보를 입력하게 만드는 데 있습니다. 공격자는 완전히 새로운 기술을 발명하기보다, 이미 익숙한 로그인 화면과 긴급한 상황 연출을 결합해 신뢰를 빼앗습니다. 그래서 … 더 읽기

로그인 알림 메일이 왔을 때 가장 먼저 해야 할 일: 계정 이상 징후 대응 순서

한 줄 요약: 로그인 알림 메일은 무시해도 안 되고, 메일 속 링크부터 누르는 것도 위험합니다. 먼저 알림의 진위를 구분하고, 직접 서비스에 접속해 최근 로그인 기록과 세션을 점검하는 순서가 중요합니다. 들어가며 어느 날 갑자기 ‘새로운 기기에서 로그인되었습니다’라는 메일을 받으면 당황하기 쉽습니다. 문제는 이런 메일이 실제 보안 알림일 수도 있고, 사용자를 불안하게 만들어 가짜 로그인 페이지로 유도하는 … 더 읽기

코딩자율학습단 19기 | 18일차 학습일지 – 폼 요소 값 다루기, 이벤트 등록/객체(this)

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 폼 요소 값/상태 다루기 역할: 핵심 포인트 → 짧은 예시(코드) (1) 텍스트 입력 값 가져오기/설정하기 역할: input에 입력된 값을 읽거나 바꾸기 핵심 포인트: value 속성으로 접근/대입 짧은 예시(코드): (2) 체크박스/라디오 선택 상태 제어하기 역할: 체크/선택 상태 확인 및 기본 선택 지정 핵심 포인트: checked 속성으로 … 더 읽기

코딩자율학습단 19기 | 17일차 학습일지 – DOM 구조 이해, 노드 조작, 노드 추가·삭제

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) DOM(Document Object Model) 이해: “문서가 트리로 보인다” 역할: HTML 문서를 노드(Node)들의 트리 구조로 표현해서 JS로 접근/조작 가능하게 함 핵심 포인트: 짧은 예시(코드): 2-2) 요소 노드 선택: getElementById vs querySelector(All) 역할: DOM에서 “원하는 요소 노드”를 찾아 변수로 잡아두기 핵심 포인트: 짧은 예시(코드): 2-3) 콘텐츠 조작: textContent … 더 읽기

코딩자율학습단 19기 | 16일차 학습일지 – 표준 내장 객체(String·Array·Date·Math), BOM(window) 핵심 정리

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 표준 내장 객체 한 번에 잡기 역할: 자바스크립트에 “기본으로 내장된 객체”를 활용해 문자열/배열/날짜/수학 연산을 빠르게 처리 핵심 포인트: 짧은 예시(코드): 2-2) String 객체: “문자열 다루는 기본기” 역할: 문자열 길이 확인, 포함 여부 판단, 치환, 분리, 대/소문자 처리, 공백 제거 등 핵심 포인트: 짧은 예시(코드): 2-3) … 더 읽기

코딩자율학습단 19기 | 3주차 총정리 – JS 기본기 + 함수 + 객체/참조

3주차 한 줄 결론 이번 주는 자바스크립트를 “찍먹”하는 것이 아니라 언어의 뼈대(변수·자료형·연산·제어) 를 먼저 고정하고, 그 위에 함수(정의→매개변수/return→스코프·호이스팅·IIFE) 를 얹은 다음 객체(속성 접근/수정/추가/삭제 + 참조 자료형의 얕은 복사) 까지 연결해서 실수 포인트를 미리 차단하는 주였습니다. 이번 주 진행 범위 범위: JS 11~15일차 교재: 「코딩 자율학습 HTML + CSS + 자바스크립트」(김기수 지음, 길벗) 일일 학습일지 인덱스 … 더 읽기

코딩자율학습단 19기 | 15일차 학습일지 – 객체(Object) 기본, 속성 접근/수정, 참조

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 객체(Object) 기본: “키(key) – 값(value)” 묶음 데이터 역할: 여러 값을 하나의 덩어리로 구조화(속성들의 집합) 핵심 포인트: 짧은 예시(코드): 2-2) 객체 속성 접근: 대괄호([ ]) vs 마침표(.) 역할: 객체 안의 특정 속성값을 읽어오기 핵심 포인트: 짧은 예시(코드): 2-3) 속성값 변경/추가/삭제: “접근 후 할당 / delete” 역할: … 더 읽기