[학습단 완주 후기] | HTML·CSS·JS 기초를 ‘정리’한 4주

학습단 한 줄 요약 프로젝트 하면서 필요할 때만 찾아 쓰던 HTML/CSS/JS를, 이번에는 기초부터 다시 쌓으면서 머릿속 지식이 정돈되는 느낌을 확실히 받았어요. 기록까지 남기니까 나중에 다시 찾아보기 쉬운 내 레퍼런스가 생긴 것도 가장 큰 수확이었습니다. 참여 정보 시작하게 된 이유 저는 그동안 프로젝트를 하면서 필요한 부분만 검색해서 끼워 맞추는 방식이었어요. 동작은 하는데, 개념이 머릿속에서 정리되지 않아서 … 더 읽기

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

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

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

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

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

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

코딩자율학습단 19기 | 8일차 학습일지 – position/float 배치 + animation/transform 효과 + 웹/아이콘 폰트

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) 위치(배치) 속성: position / top·right·bottom·left 역할: 문서의 기본 흐름에서 요소를 원하는 위치에 배치 핵심 포인트: 기본 형식: 짧은 예시(코드): position 값 정리 역할: 배치 방식 선택 핵심 포인트: 기본 형식: 짧은 예시(코드): 2-2) float / clear: 흐름 제어 배치 역할: 요소를 좌/우로 띄워 배치하고 다음 … 더 읽기

코딩자율학습단 19기 | 7일차 학습일지 – 텍스트 스타일링·박스 모델 ·background 속성

오늘 학습 정보 오늘의 핵심 키워드 3개 개념 정리 2-1) CSS 선언 기본 구조(공통) 역할: “선택자”로 대상을 고르고, { } 안에 “속성: 값;” 형태로 스타일을 적용 핵심 포인트: 기본 형식: 예시(코드): 2-2) 텍스트 관련 속성(가독성 세팅의 핵심 묶음) color(글자 색) 역할: 텍스트(글자) 색상을 지정 핵심 포인트: 기본 형식: 예시(코드): font-size(글자 크기) 역할: 텍스트 크기를 지정 … 더 읽기

코딩자율학습단 19기 | 6일차 학습일지 – 구조적 가상 클래스, 가상 요소, 형제/하위 선택자

오늘 학습 정보 오늘의 핵심 키워드 3개 내용 정리 2-1) 기본 선택자(전체/태그/id/class) CSS에서 “어떤 요소에 스타일을 적용할지” 가장 기본적으로 고르는 방법이에요. 역할: 스타일 적용 대상을 가장 기본 규칙으로 선택 핵심 포인트: 전체/태그/id/class는 가장 자주 쓰는 출발점 기본 형식: 짧은 예시(코드): 2-2) 속성 선택자(기본/문자열 속성) 요소의 “속성”과 “속성값 조건”으로 대상 요소를 고르는 방식입니다. 링크(a), input 같은 … 더 읽기

「코딩 자율학습 HTML + CSS + 자바스크립트」 도서 후기: 입문자 친화적인 “설명 방식”이 강한 책

모든 입문서에서 가장 중요한 건 “내용이 많다”보다 끝까지 따라갈 수 있느냐라고 생각합니다. 「코딩 자율학습 HTML + CSS + 자바스크립트」는 설치부터 개념 정리, 실습 흐름까지 “입문자 시점”으로 구성되어 있어서 처음 시작하는 분들에게 부담이 적었습니다. 설치/환경 설정 안내가 정말 자세하다 처음 공부를 시작할 때 가장 많이 막히는 부분이 설치와 환경 설정인데, 이 책은 그 과정이 굉장히 친절합니다. … 더 읽기

코딩자율학습단 19기 | 1주차 총정리 – HTML 기초 + CSS 첫 적용

1주차 한 줄 결론 HTML로 웹페이지 구조(문서/텍스트/목록/링크/폼/시맨틱) 를 잡았고, 마지막 날에는 CSS를 처음 적용하면서 스타일을 붙이는 3가지 방법을 정리했습니다. 이번 주 진행 범위 일일 학습일지 인덱스 이번 주 핵심 개념 TOP 5 TOP 1) HTML 문서 기본 골격 TOP 2) 자주 쓰는 텍스트/구조 태그 정리 TOP 3) 목록과 링크/이미지 TOP 4) 폼(form)과 input 핵심 속성 … 더 읽기

코딩자율학습단 19기 | 3일차 학습일지 – 텍스트 태그, 목록, 링크/이미지

오늘 학습 정보 출처: 코딩 자율학습단 카카오톡 채널 메시지 캡처 오늘의 핵심 키워드 3개 태그/속성 정리 2-1. 텍스트/문단/줄바꿈 h1 ~ h6 (제목) 역할: 페이지/섹션 제목 표시 (숫자가 작을수록 더 중요한 제목 / h1부터 단계적으로 사용) 형식: <h1>제목</h1> p (문단) 역할: 본문 문단 작성 형식: <p>내용</p> br (줄 바꿈) 역할: 문단에서 줄 바꿈(단독 태그) 형식: <br> … 더 읽기