GABOJOK 개린D

1. 태조 이성계가 태어난 년도를 맞추면 성공 alert, 3번 이상 틀리면 멍청이 alert 보여주기. 답은 1335임 태조 이성계가 태어난 년도는? 제출 태조이성계 년도 문제 실패 이유 1. JavaScript에서 입력한 값은 기본적으로 string 타입으로 처리. 그래서 변환이 필요 >> perseInt() 함수 사용하면 됨" 2. perseInt()함수 사용하면 이렇게 됨. if(perseInt(u.value) !== 1335) 3. 얄팍하고 쉬운 방법으로는 1335를 문자타입으로 바꿔주면 됨. -->

form 태그 왜쓸까?? 서버로 정보를 전송시키려고 쓰는거다. 그래서 해당 태그 안에 action = "어디로 전송될 것인지 URL 적기" 이렇게 하면, 작성한 URL로 form 태그 안에 적은 내용들이 전송된다. 이렇게도 이용이 가능하다. 새로운 HTML 페이지로 넘어가도록. 이때 form 태그 안에 버튼이 전송, 닫기 이렇게 있다면 전송버튼은 타입이 submit 이여야만 한다. 는 폼 데이터(form date)를 전송하는 제출 버튼(submit button)을 정의하기 때문이다. 또한 닫기 버튼은 타입이 button 이여야 한다. 비밀번호 글자수 제한. 1. minlength, maxlenght 를 이용 그러나, 이 방법은 input의 type이 'text, search, url, tel, email..

간단한 UI 를 만들기에 앞서, UI 만들기 법칙이 있다. UI 만들기 법칙 1.내가 만들고 싶은 ui의 디자인을 다 해놓기.(html.css로) 2. 필요할 때 보여달라고 코드 짜면 됨. (자바스크립트 활용) display : none UI를 평소에 숨기고 싶다. display : block UI를 다시 보여주고 싶다. visibility : hidden 그렇지만 이거는 UI를 숨기는 거라서, 안보이지만 공백이 존재. visibility: visible UI를 숨긴걸 보이게 하고싶다. 근데 다시 보기버튼을 눌러도 보이지 않는다. 왜냐면 display: none을 걸어둬서 그런걸로 추정. 이게 더 쎈듯. 그냥 css파일에 display: none이거 지우고 visibility: visible 만 걸면 먹..

저번 글에 이어서 이번에는 jQuery 이용시 알면 좋은 것들에 대해 살펴볼 예정인데, 일단 그전에 addEventListener 라는 것에 대해서 언급후 살펴보자. addEventListener 이런 코드를 본적이 있을거당. document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){}) 한눈에 봐도 굉장히 길고 복잡해 보이는데, 사실 이거 저번에 봣던거에서 .addEventListener('click', function(){})이거만 추가된거다. 해석하자면 className이 'navbar-toggler'인데 처음으로 나온 걔 있잖아. 그거 클릭 이벤트가 일어나면 이 함수 실행시켜줘. 한마디로 말하면..

언젠가 멘붕에 빠진날 document.getElementById 블라블라 이런 코드를 봤다. 도대체 이건 또 무슨 코드인가 싶었지만 당장 해결해야 했던 부분이 아니였기에 지나쳤다. 강의를 듣는데 이 코드가 나와서 반가웟다 ㅋㅋㅋ 개념에 대해 정리해 보자. 가려운데 콕 집어서 긁을수 있게 해주는 친구들 getElementById, querySelector, $ document.getElementById( ) 안녕하세요 위와 같은 코드가 잇다고 하자. 근데 나는 "안녕하세요" 를 "안녕"으로 바꾸고 싶다. 그럴땐 저 길고 솰라솰라 하는것처럼 보이는 것을 쓰면 된다. document.getElementById('hello').innerHTML = '안녕'; 이렇게. 이게 무슨말인지 풀어보자면, document..

1. BEM 방식 (Block Element Modifier) 블록(block), 요소(element), 상태(modifier)로 구분해서 작성 그 블록을 구성하는 단위 / 블록이나 요소의 속성 애플코딩님 강의에서는 이렇게 좀더 쉽게 정리해 주셧다. block__element--modifier 덩어리이름__역할--세부특징 특징으로는 어떠한 목적인지에 초점을 두고, 네이밍 규칙이 좀 엄격한 편이다. 장점 >> 어떤거를 지칭하는 class인지 한눈에 알수 있다. 단점 >> class명이 길고 복잡해져서 한눈에 보기 힘들수 있음 2. oocss 방식 (Object Oriented CSS) CSS를 모듈 방식으로 작성하여 중복을 줄이는 방식. 쉽게 말하면, class 명을 1개가 아닌 여러개로 나눠서 짓는 것...

https://releases.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr releases.jquery.com 해당 사이트 방문후, minified 를 클릭, 코드를 복사후, html에 붙여넣고, 그 붙여놓은 코드 아래부터 jQuery 사용 가능함. 자바스..

태그에서 링크를 아직 어디로 갈지 모를때 큰따옴표 안에 # 을 넣어준다. 단어의 밑줄 없애기 태그에 herf를 걸게 되면, 자동으로 그 단어 아래 밑줄이 쳐지게 되는데, text-decoration : none; 이렇게 입력하게 되면, 밑줄이 사라진다. 만약 href 태그에 걸린 링크를 눌렀을때 새창으로 띄우게 하고 싶다면?? target="_blank" 링크 이런 링크를 걸어둔 a href 태그가 있다고 쳐보자. 그 링크를 클릭했을때 새로운 창으로 띄워지게 하려면 링크 이걸 추가해 주면 된다. a href 태그에 걸린 링크 색깔 바꾸기. (peseudo-class 이용) 1. 기본색상 바꾸기. .a:link{ color: black; } 2. 방문 후 색상 바꾸기 .a:visited{ color:yel..

nav바 네비게이션바 라고도 하며, 네이버에 보면 선택할수 있는 그 바같은거를 말함. div랑 기능은 같은 nav 태그를 이용해서 명시적으로 보여줄 수 있다. div 태그와 기능은 같지만 다른 이름을 가지고 있는 태그들 1. nav 태그 : 네비게이션 바를 명시적으로 보여줄때 쓴다. 2. section 태그 : 페이지 내의 큰 덩어리. 하나의 섹션을 명시적으로 보여줄 때 쓴다. 3. footer 태그 : 페이지 하단의 부분을 명시적으로 보여줄때 쓴다.

1. float 속성 (div의 배치) float 요소들은 공중에 떠있어서, 그 아래 div에 아무리 margin-top을 주어도 안됨. 방법은 2개 1. margin-top을 많이 주던가 2. clear both를 주던가.(그 앞에 빈 div를 주고, 거기에 clear both주기) 좀더 설명하자면, (float:right) (float:left) 이렇게 되면, display 속성은 무시되면서, 붕 띄워서 왼쪽 혹은 오른쪽으로 배치시킨다. float속성을 쓴 태그 뒤에 오는 div들은 앞에 float 속성에 영향을 받기 때문에 해당 div에 백그라운드 컬러와 width, height를 주어도 보이지 않는다. clear : both; 를 쓰면 float로 발생하는 이상한 현상이 해결된다. both는 le..