반응형 programming/web66 3번째 실시간 코드 에디터 동작 구현 만들기 how to make code editor 코드 에디터의 중요한 것은 동작구현이다. textarea에서 작성한 코드를 iframe에 동작이 되는 화면을 보여주면 된다. 이것만 할 줄알면 뼈대는 만들어진 것이다. 이번엔 자바스크립트를 이용한 동작구현을 해 보도록 한다. 동작만 구현되면 코드 에디터는 다 만들었다고 봐도 무방하다. 2번째 실시간 코드 에디터 동작 구현 만들기 how to make code editor 이전에 html5 태그를 이용해 웹페이지를 대충 만들었다. 이번엔 미리보기 버튼에 자바스크립트를 연결하여 미리보기를 만들어 보려고 한다. textarea에 작성한 태그나 css 자바스크립트를 읽어 미리보기를 할 수 있으면 된다. 조촐하게 만든 웹페이지를 어떻게 만들었는지 보려면 이전 내용을 참고해 본다. 2번째 실시간 코드 에디터 htm.. 2022. 3. 3. html5 p 문단 태그 사용하기 컨텐츠의 문단을 구분 using html5 p tag p태그는 html5에서 문단을 표시한다. 문장은 문장의 집합이고, 문장은 구와 절의 집합이다. p태그는 하나의 작은 주제를 표현하는 단위이다. 쉽게 말해 그냥 문단이다. 신문이나 웹페이지의 긴 기사들을 보면 긴 길을 여러 문단으로 나누고 있다. 문단으로 나누는 이유는 기승전결, 원인과 결과를 구분하여 읽기 쉬운 글을 만들기 위함이기도 하다. html5 p 문단 태그 사용하기 컨텐츠의 문단을 구분 using html5 p tag html5의 태그를 아는 것도 좋지만 의미를 아는 것도 중요하다. 태그의 의미도 너무 많이 알려고 하면 피곤하다. 혹자는 seo에 따라야 한다고도 하지만 굳이 그정도까지는 알 필요는 없다. 다만, seo까지 신경써야 한다면 웹페이지부터 먼저 만들고 천천히 업데이트를 하자. 일단 p.. 2022. 3. 1. 2번째 실시간 코드 에디터 html5 만들기 how to make code editor 실시간 코드 에디터를 만들기 위해 사용할 태그를 html5로 만들어 본다. 사용할 태그들은 몇 개 되지 않고 화면에 보이도록 배치만 할 것이다. 사용할 태그는 textarea, button, iframe 태그를 각각 하나씩만 사용할 것이다. 2번째 실시간 코드 에디터 html 만들기 how to make code editor 이전에 코드 에디터를 만들기 위해 필요한 것을 기술했었다. 약간의 html5 태그와 약간의 자바스크립트, 약간의 css3 정도만 알면 된다. 이번엔 html 태그를 직접 만들어 코딩을 해 보도록 하자. 한개의 textarea 태그와 button 태그, iframe 태그가 사용될 것이다. 이정도만 기술해도 어떻게 하면 되는지 대충 감이 올 것이다. 실시간 코드 에디터 만들기 1번째 준.. 2022. 3. 1. 실시간 코드 에디터 만들기 1번째 준비 how to make code editor 실시간 코드 에디터는 내가 직접 웹에서 코드를 만들어 실행시켜 볼 수 있는 괜찮은 도구이다. codepen이나 w3schools 의 웹에디터를 생각하면 쉽다. 만약 자신이 웹페이지를 운영하고 있다면 코드 에디터를 직접 만들어 또다른 웹컨텐츠들을 제공할 수 있다. 물론, ftp를 이용해 코드를 만들어야 하는것은 있다. 지금의 많은 실시간 코드 에디터들은 대표적으로 html, css, javascript 에 대한 학습의 도구로써 많이 사용된다. 코드 에디터 만들기 준비 how to make code editor w3schools 나 codepen 같은 곳들을 보면 내가 만든 코드를 만들고 테스트하고 공개하고 실행할 수 있다. 이런곳들은 실시간 코드 에디터를 제공하여 서비스를 하는 것이다. 다양한 형태의 웹과.. 2022. 2. 27. 이전 1 ··· 8 9 10 11 12 13 14 ··· 17 다음 반응형
