비전공자 개발일기

html SVG(Scalable Vector Graphics) xml 형식의 벡터 기반 그래픽을 정의하는 요소 svg는 확장 가능한 웹용 벡터 그래픽을 나타냄 svg는 xml 형식으로 그래픽을 정의 svg는 모든 요소와 속성에 에니메이션 정의 가능 ex) 경과 시간에 따른 스타일이 변화는 것 svg는 W3C(html을 표준화하는 곳)에서 권장하는 태그(요소) SVG 사각형 그리기 rect width: 도형의 너비 height: 도형의 높이 stroke: 테두리 색 stroke-width: 테두리 두께 fill: 도형의 배경색 opacity: 도형의 투명도 x: 사각형의 왼쪽 상단 x좌표 y: 사각형의 왼쪽 상단 y좌표 rx: 사각형 모서리 굴곡의 x축 반지름 ry: 사각형 모서리 굴곡의 y축 반지름 SV..

HTML Iframe(Inline frame) iframe은 다른 웹 페이지를 추가할 수 있음 src: 출력될 url, width: 넓이, height: 높이(모든 요소의 스타일 속성은 동일하게 적용 가능) 출력되지 않을 때.... iframe은 스타일이 적용되고 border 바꿀 수 있음(border: none -> 테두리 없음) iframe name: 은 a 요소의 target으로 지정할 수 있음(_self, _blank, iframeName-iframe으로 이동) target="targetTest" : 이동할 페이지는 L04_html_style.html 이동 target="_self" : 이동할 페이지는 L04_html_style.html 이동 target="_blank" : 이동할 페이지는 L04..

1. 변수 선언 var, let, const 혼용은 절대로 안됨! -> var 만 사용 또는 let, const 만 사용 2. 세미콜론(;) 세미콜론이 있는 코드 + 세미콜론이 없는 코드 혼용 절대로 안됨! -> 모든 코드에 넣기 또는 모든 코드에 넣지 않기 3. 일치 연산자 == 와 === 는 동일한 연산자가 아니기에 예상치 못한 오류가 발생하는 원인 -> === 만 사용 4. 불변성(객체의 원본 보정성) 개발자로서 중요한 사항 = 인자로 들어온 값을 수정하지 않는 것 -> 새 객체에 깊은 복사로 값을 복사 후 사용 5. 삼항연산자 return a? b : c 형태로 깔끔하게 처리할 수 있는 코드일 경우 사용 6. 코딩테스트 공부 주력 언어의 문법 공부 -> 코트업의 기초 100제 -> 백준 온라인 저..

알파벳 선택: a b c d e 선택된 옵션(순서(selectedIndex), value, text) -> Multi Option Select : a b c d e f SUBMIT 제출될 데이터를 확인하세요. // select option let bTag = document.getElementById('selectedOpt') let selectAlphabet = document.querySelector('select') function print() { // console.log(selectAlphabet) let selectAlphabetI = selectAlphabet.options.selectedIndex let selectValue = selectAlphabet[selectAlphabetI].v..

00:00:00 const clock = document.querySelector("h2#clock"); function getClock() { const date = new Date(); const hours = String(date.getHours()).padStart(2, "0"); const minutes = String(date.getMinutes()).padStart(2, "0"); const seconds = String(date.getSeconds()).padStart(2, "0"); clock.innerText = `${hours}:${minutes}:${seconds}`; } getClock(); setInterval(getClock, 1000);

const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; // 문자열 타입을 변수로 만든 이유 -> 오타로 인한 오류 방지 const USERNAME_KEY = "username"; function onLoginSubmit(event) { event.preventDefault(); // 이벤트의 기본 진행 차단 loginForm.classList.add(HIDDEN_CLASSNAME); co..

중첩 연산자 1. > div>ul>li 2. + div>p+bq 3. ^ div+div>p>span+em^bq div+div>p>span+em^^^bq 4. * ul>li*5 5. ( ) (div+dl>(dt+dd)*3)>footer>p 속성 연산자 1. 아이디와 클래스 div#header+div.page+div#footer.class1.class2.class3 2. 사용자 정의 속성 td[title="Hello world!" colspan=3] 3. 항목 번호 매기기: $ ul>li.item$5 ul>li.item$$$*5 $ 한 개당 자릿수 의미 ul>li.item$@-* 역방향 출력 ul>li.item$@3*5 기본값 변경시, $옆에 @n(n: 숫자) ul>li.item$@-3*5 4. 텍스트: {..

블록(BLOCK) 요소 블록 요소는 항상 새 줄에서 시작 블록 수준 요소는 항상 사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 늘어남) 블록 수준 요소에는 위쪽 여백과 아래쪽 여백이 있지만 인라인 요소에는 없음 ※ : 브라우저가 사용자에게 표시 할 수있는 대체 콘텐츠를 정의 인라인(INLINE) 요소 인라인 요소는 새 줄에서 시작하지 않음 인라인 요소는 필요한 만큼만 너비를 차지 ※ : 약어를 정의 ※ : 텍스트 양방향 재정의 ※ : 특정 단어 기울이면서 강조(미술 작품, 책, 노래 등) ※ : 콘텐츠 내에서 정의를 하기 위해 사용, 기울임으로 표시됨 ※ : 키보드 입력을 정의 Press Ctrl + C to copy text (Windows). Press Cmd + C to copy ..