비전공자 개발일기

HTML CSS body { margin: 0; } .div1 { background-color: #ff0000; width: 100%; height: 60px; } .div2 { background-color: #ffa500; width: 100%; height: 350px; } .div3 { background-color: #ffff00; width: 100%; height: 320px; } .div4 { background-color: #008000; width: 100%; height: 385px; } .div5 { background-color: #0000ff; width: 100%; height: 200px; } .div6 { background-color: #4b0082; width: 100..

CSS 속성(Properties) 박스 모델 글꼴 & 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터 1. 박스 모델( 내부 & 외부 여백, 가로 & 세로 등) width / height : 요소의 가로 / 세로 너비 기본값(요소에 이미 들어있는 속성의 값): auto(브라우저가 너비를 계산) 단위: px, em, vw 등 span(인라인 요소) vs div(블록 요소) span(인라인 요소) div(블록 요소) 가로 콘텐츠의 크기만큼 자동으로 줄어듬 부모 요소의 크기만큼 자동으로 늘어남 세로 콘텐츠의 크기만큼 자동으로 줄어듬 콘텐츠의 크기만큼 자동으로 줄어듬 max-width / max-height: 요소가 커질 수 있는 최대 가로 / 세로 너비 기본값: none(최대 너비 ..

선택자 { 속성1: 값1; 속성2: 값2; /* 주석 */ ... } 선택자: 스타일을 적용할 대상 속성: 스타일의 종류 값: 스타일의 값 선언 방식 내장 방식: 의 내용으로 스타일을 작성(HTML) 인라인방식: 요소의 style 속성에 직접 스타일을 작성(선택자 없음, HTML) 링크방식:로 외부 css문서를 가져와서 연결하는 방식(병렬 방식) @import방식: css의 @import규칙으로 css문서 안에서 또 다른 css 문서를 가져와서 연결하는 방식(직렬 방식) @import url("") div { .... } CSS 선택자 기본선택자 전체 선택자: 모든 요소를 선택(*) 태그 선택자: 태그를 선택 (태그명) 클래스 선택자: (.class명) 아이디 선택자: (#아이디명) 복합선택자 일치 선택..

프론트 엔드 개발자: HTML, CSS, Javascript를 사용해 데이터를 그래픽 사용자 인터페이스로 변환하고, 그것으로 사용자와 상호작용 할 수 있도록 하는 것 HTML: 웹의 구조 CSS: 웹의 정적 표현(시각적) Javascripit: 웹의 동적표현 특수 문자 ` : 백틱, 그레이브(Tab 위의 키) ~ : 틸드, 물결 표시(Tab 위의 키) ! : 느낌표, 엑스클러메이션 @ : 앳, 골뱅이 # : 샾, 넘버, 우물점 $ : 달러 % : 퍼센트 ^ : 캐럿 & : 앰퍼센드 * : 에스터리스크, 별표 - : 하이픈, 대쉬 _ : 언더스코어, 로우대쉬 = : 이퀄, 동등 " : 쿼테이션, 큰 따옴표 ' : 아포스트로피, 작은 따옴표 : : 콜론 ; : 세미콜론 , : 콤마, 쉼표 . : 피리어드, ..

나는 구역을 나누죠 나는 문단이에요 bullet point!1 bullet point!2 h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요. h2는 소제목입니다. h3~h6도 각자의 역할이 있죠. 비중은 작지만.. span 태그입니다: 특정 글자를 꾸밀 때 써요 a 태그입니다: 하이퍼링크 img 태그입니다: input 태그입니다: button 태그입니다: 버튼입니다 textarea 태그입니다: 나는 무엇일까요?

제목: 끝말잇기 목표: Javascript 와 html, css를 활용하여 끝말잇기 코드 작성 let body = document.createElement('h1'); document.body.append(body); body.textContent = '끝말잇기'; let firstWord = document.createElement('div'); firstWord.textContent = '컴퓨터'; document.body.append(firstWord); let form = document.createElement('form'); document.body.append(form); let input = document.createElement('input'); form.append(input); le..

MOMENTUM CLONE CODING 작업환경 VS CODE HTML, CSS, JAVASCRIPT OPENWEATHER 들어간 기능 현재 날짜, 시간 표시 (빨간색) 현재 지역, 기온, 날씨 표시 (주황색) 사용자 이름을 입력 받음 (노랑색) To-Do-List 입력, 삭제 (초록색) 랜덤 명언 (파란색) 랜덤 배경 사진 (보라색)

개요 Javascript with HTML Javascript with CSS Event localStorage Javascript with HTML console에서 document라고 입력하면, 본인이 작성한 HTML 코드가 나옴 이를 활용해, HTML의 정보 변경도 가능(새로고침을 하게 되면 변경한 기록은 다 지워짐) document = Web page HTML에 Javascript 연동시, 에 삽입 getElementById(" ") = querySelector("# ") const a = document.getElementById("아이디명") const a = document.querySelector("#아이디명") querySelector( ) VS querySelectorAll( ) VS ..