전체 글47 HTML - input type tag는 그 자체보다는 다양한 속성으로 인해 화면상에 보여지는 것을 더 명확하게 해줍니다. 따라서 input type을 좀 더 자세히 다뤄보려고 합니다. 1. 2. 3. 밥먹기 진짜로 체크할 수 있다. 4. 5. (hidden이라 시각적으로 제공할 자료가 없다. ) 6. 7. 8. Male Female 9. 10. 11. 12. 13. 14. 15. 16. 17. / 18. 19. *"pattern"이라는 속성을 이용하여 전화번호의 형식을 지정할 수 있다. 이렇게 범위를 지정하게되면 지정된 형식으로 작성해야만 정보를 전달할 수 있다. 20. 21. 22. 2019. 5. 13. HTML - fontawesome 연결하기 이번에는 "fontawesome"을 html에 연결하는 법을 알아보겠습니다. 1. 구글 검색창에 "fontawesome"을 검색하거나 https://fontawesome.com/ 에 접속합니다. 2. "Starting Using Free"를 클릭합니다 (무료로 이용 가능하죠) 3. 이렇게 생긴 페이지가 나오면 작성된 코드 전체를 복사합니다. (혹은) 오른쪽 아래 아이콘을 누르면 저절로 복사됩니다. 4. 복사한 링크를 "html"파일 부분에 붙여 넣기 합니다. #SVG의 경우 좀 더 icon 관련하여 자세한 부분까지 컨트롤할 수 있는 기능이 있으며 개인적으로 설정해야 하고 렌더링 과정이 필요한 부분이라 "Webfont"부분을 이용하시는 것이 좋습니다. 혹 더 자세한 내용이 궁금하시다면 SVG우측의 "?"부.. 2019. 5. 12. [왕초보JavaScript] 증감 연산자 왕초보를 위한 증감 연산자를 좀 더 쉽게 이해하기 증감 연산자 (increment and decrement operator) 증감 연산자는 피연산자를 1씩 증가하거나 1씩 감소시킬 때 사용하는 연산자고, 이 연산자는 피연산자가 단 하나뿐인 단항 연산자입니다. 라는 말과 함께 다음과 같은 표를 많이 보셨을 것입니다. *증감 연산자 쉽게 말하자면 전위 : 출력 전에 연산 / 후위 : 출력 후에 연산 10을 출력한 다음에 +1을 한다. | 출력 후에 +1을 하므로, 출력은 10, 현재number(변수)값은 11 11에 +1을 더한 후에 출력한다. | 출력 전에 +1을 하므로, 출력값은 12, 현재 number(변수) 값은 12 12를 출력한 후 -1을 한다. | 출력 후에 -1을 하므로, 출력값은 12, 현재.. 2019. 5. 11. HTML에 CSS파일 적용하기 그리고 @import [HTML 문서에 CSS파일을 적용하기] HTML 문서에 CSS파일을 적용하는 방식에는 3가지가 있습니다. 1. Inline style sheet - HTML 태그의 style속성에 css 코드를 넣는 방식 2. Internal style sheet - HTML 문서 안에 태그를 넣어서 그 안에 css코드를 작성하는 방식 - 일반적으로 태그 가장 상단에 작성합니다. 3. External style sheet - CSS파일을 만들어 HTML 문서와 연결하는 방식 가장 많이 사용되는 세번째 방식인 외부 링크로 연결하는 방식은 다음과 같습니다. inline style의 경우에는 html에 하나하나 입력하는 방식이므로 작성할 때뿐만 아니라, 추후 수정 시 매우 번거롭고 어렵습니다. internal style s.. 2019. 5. 10. to do list 만들기 영상에 나와 있는 예시를 토대로 to do list를 만들기를 시작했습니다. html, css, JavaScript로만 만들어졌습니다. 1. HTML 구획 나누기 html을 작성하는 것 차제는 생각보다 간단합니다. 크게 그림이 있는 부분 / 실질적으로 실행될 부분 / 안에 기록될 부분 + 작성하는 부분으로 나눌 수 있었습니다. 2. CSS css는 단순해 보이지만 막상 하려고 하면 복잡해지는 것 같습니다. 저는 flex가 좀 더 익숙한데 여기에서는 position: relative와 absolute를 주로 사용하였습니다. flex에 비해서 코드도 더 짧아지고 괜찮은 듯싶지만, 정렬이 정확하지 않아서 flex를 사용하는 것이 그 부분에 있어서는 더 좋은 것 같습니다. 뭔가 CSS 어렵다 ㅜㅜ -> 이 부분.. 2019. 5. 9. [왕초보JavaScript] addEventListener() addEventListener()는 이벤트를 등록하는 가장 권장되는 방식으로, 하나의 이벤트를 만들어 두면, 각각의 다른 타깃에 동일한 이벤트를 적용할 수 있습니다. t라는 객체에 위와 같은 addEventLstener를 등록하면, [click]하면 두 번째 인자에 있는 함수가 실행됩니다. 위와 같이, 하나의 이벤트를 만들어 두고, 이것을 다른 타깃에 적용할 수 있습니다. 동일한 이벤트인데 위와 같은 함수를 여러 번 만들어서 사용해야 한다면 더 많은 시간을 들이고 더 긴 코드를 작성해야 할 것입니다. 더 자세한 내용이 궁금하시다면 생활코딩 오픈 튜토 리얼스를 방문해주세요 출처: https://www.opentutorials.org/course/1375/6761 2019. 5. 9. [왕초보JavaScript] insertAdjacentHTML 과 innerHTML의 차이 JavaScript에서 insertAdjacentHTML innerHTML의 차이를 설명하기 전에, 먼저 innerHTML과 insertAdjacentHTML에 대해서 알아보겠습니다. innerHTML innerHTML 속성은 JavaScript를 통해서 html의 content를 가져와서 그 값을 화면상에 보여주거나 직접 변경하여 보여주는 것을 말합니다. 다음의 예시를 보면 좀 더 이해하기 쉬울 겁니다. See the Pen arRYxZ by kim jihae (@saea) on CodePen. 우선, 저 문장을 해석하자면 다음과 같습니다. var x = / document / .getElementById("myP") / .innerHTML; var x = : "x라는 변수는 =뒤에 것을 의미해" do.. 2019. 5. 9. 컴파일러 Compiler / 어셈블러 Assembler / 인터프리터 Interpreter Compiler란? 간단하게 말해 번역기입니다. 우리는 프로그램 코드를 고급언어(high-level language)라고 하는 Java, C, C++ 등으로 작성합니다. 하지만 컴퓨터는 기계 언어(Machin language)인 0과 1만 알아듣기 때문에 실행되지 않습니다. 따라서 우리가 작성한 코드(source code)를 컴퓨터가 알아듣게 하기 위해 컴퓨터 언어(0,1)로 변환시켜주는 역할을 하는 것이 compiler입니다. 추가로, Compiler는 Interpreter, Assembler와 함께 Language Processors의 하나입니다. 큰 틀에서는 비슷한 역할을 하지만 각각의 차이가 있습니다. 앞서 설명드린 것 처럼 compiler는 소스코드를 object code(객체 코드)로 변환하는.. 2019. 5. 9. To do list in Javascript for beginners Javascript 공부를 위한 첫 프로젝트 - TO DO LIST 만들기 - 처음 시작하는 사람은 다양한 라이브러리를 배우는 것보단, vanilla JavaScript로 배우는 것이 추후 학습에 훨씬 도움이 된다고 합니다. 겉만 번지르르하냐, 그 언어의 기본기를 다지느냐의 차이라고 생각합니다. 학습을 위해 참고한 영상 https://youtu.be/b8sUhU_eq3g 2019. 5. 8. 이전 1 2 3 4 5 6 다음
