학습단 한 줄 요약 프로젝트 하면서 필요할 때만 찾아 쓰던 HTML/CSS/JS를, 이번에는 기초부터 다시 쌓으면서 머릿속 지식이 정돈되는 느낌을 확실히 받았어요. 기록까지 남기니까 나중에 다시 찾아보기 쉬운 내 레퍼런스가 생긴 것도 가장 큰 수확이었습니다. 참여 정보 시작하게 된 이유 저는 그동안 프로젝트를 하면서 필요한 부분만 검색해서 끼워 맞추는 방식이었어요. 동작은 하는데, 개념이 머릿속에서 정리되지 않아서 … 더 읽기
4주차 한 줄 결론 이번 주는 자바스크립트의 내장 객체(String/Array/Date/Math)와 BOM(window)로 기능을 빠르게 뽑아쓰는 방법을 익히고, DOM(선택→조작→추가/삭제) + 폼/이벤트 처리로 브라우저 상호작용을 완성한 뒤, 마지막에는 최종 프로젝트를 반응형+JS 효과까지 붙여 끝내고 유효성 검증으로 마무리한 주였습니다. 이번 주 진행 범위 일일 학습일지 인덱스 이번 주 핵심 개념 TOP 5 TOP 1) 표준 내장 객체로 기본 기능을 빨리 … 더 읽기
오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) Portfolio 섹션 구성(HTML/CSS) 역할: 작업 결과물을 “카드(썸네일+텍스트)” 형태로 보여주는 영역 구성 핵심 포인트: 반복되는 카드 구조를 일정한 래퍼/클래스로 통일해 스타일 적용이 쉬운 형태로 만듦 짧은 예시(코드): 2-2) Contact With Me 섹션 + 폼 UI 디테일(HTML/CSS) 역할: 연락처 정보 + 사용자 입력 폼을 한 화면에서 제공 … 더 읽기
오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 프로젝트 기본 세팅(문서 뼈대/외부 리소스 연결) 역할: HTML 기본 문서 구조를 만들고(메타/타이틀), 아이콘 폰트(CDN)와 CSS 파일을 연결 핵심 포인트: lang, meta charset, viewport, link rel=”stylesheet” 흐름을 먼저 고정해두면 이후 작업이 안 정적 짧은 예시(코드): 2-2) 헤더 영역 만들기(로고 + 메뉴 배치) 역할: 상단 헤더에 로고/메뉴를 … 더 읽기
오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 폼 요소 값/상태 다루기 역할: 핵심 포인트 → 짧은 예시(코드) (1) 텍스트 입력 값 가져오기/설정하기 역할: input에 입력된 값을 읽거나 바꾸기 핵심 포인트: value 속성으로 접근/대입 짧은 예시(코드): (2) 체크박스/라디오 선택 상태 제어하기 역할: 체크/선택 상태 확인 및 기본 선택 지정 핵심 포인트: checked 속성으로 … 더 읽기
오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 스코프: “어디서 선언했는가”가 접근 범위를 결정 역할: 식별자(변수/함수)를 어느 범위에서 참조할 수 있는지 결정하는 규칙 핵심 포인트: 짧은 예시(코드): 2-2) 호이스팅: “선언이 위로 끌어올려진 것처럼” 동작 역할: 코드 실행 전에 선언 정보를 미리 처리해, 실행 흐름에 영향을 주는 동작 핵심 포인트: 짧은 예시(코드): 2-3) 즉시 … 더 읽기
2주차 한 줄 결론 CSS에서 “선택자 → 배치(레이아웃) → 효과(애니메이션/변형) → 반응형(뷰포트/미디어 쿼리)” 흐름으로 웹 화면을 설계하는 감각을 잡았고, 마지막에는 자바스크립트의 기본 연결 방식과 오류 확인 루틴까지 시작했습니다. 이번 주 진행 범위 일일 학습일지 인덱스 이번 주 핵심 개념 TOP 5 TOP 1)CSS 선택자 심화 TOP 2)CSS 스타일 속성 기본기 TOP 3)레이아웃 배치 TOP 4)효과 … 더 읽기
오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) HTML에 자바스크립트 적용(내부 스크립트) 역할: HTML 문서 내부에서 즉시 자바스크립트를 실행/적용 핵심 포인트: 기본 형식 짧은 예시(코드): 2-2) HTML에 자바스크립트 적용(외부 스크립트) 역할: JS 코드를 별도 .js 파일로 분리해 HTML과 연결(유지보수/관리 용이) 핵심 포인트: 기본 형식: 짧은 예시(코드): 2-3) script 태그 사용 위치(권장 위치) 역할: … 더 읽기
오늘 학습 정보 오늘의 핵심 키워드 3개 태그/속성/개념 정리(가장 중요) 2-1) 플렉스 박스 레이아웃(Flexbox) 핵심 플렉스 박스 구성 요소 역할: 1차원(가로 또는 세로) 레이아웃 정렬/배치를 쉽게 만드는 모델 핵심 포인트: 기본 형식: 짧은 예시(코드): flex-direction (주축 방향 결정) 역할: 아이템이 쌓이는 방향(주축)을 지정 핵심 포인트: 기본 형식: 짧은 예시(코드): flex-wrap (줄 바꿈 여부) 역할: 아이템이 … 더 읽기
오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 위치(배치) 속성: position / top·right·bottom·left 역할: 문서의 기본 흐름에서 요소를 원하는 위치에 배치 핵심 포인트: 기본 형식: 짧은 예시(코드): position 값 정리 역할: 배치 방식 선택 핵심 포인트: 기본 형식: 짧은 예시(코드): 2-2) float / clear: 흐름 제어 배치 역할: 요소를 좌/우로 띄워 배치하고 다음 … 더 읽기