#2/HTML
전 세계의 수많은 '웹페이지'들을 분석한 결과를 정리한 사이트가 있다. 바로가기 >> https://www.advancedwebranking.com/html/ 참 구글다운 분석이다. 구글을 통해 볼 수 있는 웹페이지들이 몇종류의 태그로 이루어져 있는지 보여주고 있다. 전반적으로 25개 정도의 태그를 사용하는 웹페이지들이 가장 많다는 통계결과를 확인할 수 있고, 그 25개의 태그들은 아래와 같다. 여기 티스토리 블로그 소스보기를 통해서도 쉽게 볼 수 있는 태그들이다. 한글 기본 자모 24개만으로 수없이 다양한 단어와 말을 만들어내는 것과 비슷하게 기본 태그들을 주로 활용해 다양한 웹페이지들이 만들어졌다(실제로는 한글모다 HTML이 훨~씬 쉽겠다).
계정이 필요한 웹사이트에 접속하면 가장 먼저 하는 일이 로그인이다. 아이디와 비밀번호를 맞게 입력하면 특정 페이지에 접근할 수 있는 권한이 생긴다. 이번 코딩야학에서는 이 로그인 기능을 자바스크립트와 PHP로 간단하게 구현하는 방법을 알 수 있었다(링크). 1. 자바스크립트로 로그인 기능 구현하기 일단 결과를 보면 이렇다. 크롬 브라우저를 새로고침 하면 비밀번호 입력 창이 뜨고, 미리 설정해 둔 비밀번호(=123456)를 입력하면 '로그인 되었습니다.'라고 출력된다. 이때, 미리 설정해 둔 비밀번호와 다르게 입력하면 '비밀번호를 확인해주세요.'라고 출력된다. 이렇게 사용자의 입력 값을 전달받아 그에 반응해 특정 결과를 출력하는 기능은 HTML에서는 할 수 없고 자바스크립트나 PHP에서는 가능하다. 코드를..
보통 버그라고 하면 한마디로 에러, 프로그램이 오작동하는 것이다. 그렇다면 디버깅(Debugging)이란, 이런 버그 즉 오동작되는 현상을 해결하는 것을 말하며 오류들을 찾아내기 위한 테스트 과정을 뜻한다. 카카오톡, 라인 등의 메신저앱에서도 발생하는 버그들을 해결하기 위해 지속적으로 업데이트를 하고 있으며, 게임 앱에서도 원활한 게임진행(?)을 위해 계속 버그를 찾고 프로그램을 수정한다. 이렇게 버그가 없는 프로그램은 거의 없으며 마찬가지로 웹페이지에서도 버그가 발생하기 마련이다. 이번 강의에서는 아주 간단하게 웹페이지에서 고의로 오류를 발생(=버그)시키고, 디버깅을 해보는 과정을 배웠다. 코드 안에서 의도적인 오타를 작성했다. 1234567891011121314 documant.write("hello..
JavaScript와 PHP는 프로그래밍 언어로, 두 언어는 경쟁적인 관계이자 협력적인 관계이다. 작성된 문서만을 출력하는 정적인 언어인 HTML이나 CSS와는 달리 사용자의 동작에 반응하는 동적인 언어라고 할 수 있다. JavaScript와 PHP를 각각 알아보면 다음과 같다. 123456789101112 JavaScript document.write(10+10); csJavaScript는 웹브라우저, 클라이언트 측에서 실행되고 처리되는 프로그래밍 언어로 웹브라우저와 상호작용 하도록 만들어진 스크립트 언어이다. 정적인 HTML 코드로는 처리가 불가능한 기능들을 구현할 수 있으며 사용자의 입력을 받아 동작이 가능하다. 8~10번째의 에 해당하는 코드가 자바스크립트 실행 코드이다. 1234567891011..
CSS는 Cascading Style Sheets의 약자로 정보를 전달하는 HTML 문서에 미적인 요소를 더해주는 언어라고 보면 된다. 쉽게 말해서 웹페이지의 레이아웃이나 텍스트의 색상, 크기 등의 디자인이 가능하다. 바로 예를 들어 살펴보자. * CSS 코드가 없는 HTML 문서HTML 문서라고 하기도 뭐하지만... 무튼 웹을 공부할 때 나오는 개념들을 몇 가지 적어보았는데, 크기가 조금 다를 뿐 미적인 요소는 전혀 없다(기본적인 크기는 h1, h2, h3 ... 등에 의해 정해진다). HTML 문서에 CSS의 디자인 요소를 추가하려면 태그 안에 속성을 사용하여 CSS 소스코드를 작성해주면 된다. 아래를 참고. * CSS 기초 실습코드12345678910111213141516171819202122232..
이번 코딩야학 강의에서는 앞에 배웠던 기초를 토대로 아주 간단한 웹사이트를 만들어 보았다. 정말 심플한 구성이지만 결국 모든 웹사이트가 이런 구조로 이루어져있고 동작한다. 간단하게 웹사이트를 구축하는 순서는,1. 웹사이트의 대문 페이지, 보통 Index.html 파일이 대문 페이지 2. 네비게이션에 있는 각각의 항목들을 본문 페이지 링크로 연결3. 링크로 연결될 본문 내용 작성 웹사이트는 위와 같이 생성되는 것을 기본으로 그 복잡도가 계속 늘어난다. 우리가 흔히 이용하는 다음, 티스토리, 네이버 등의 웹사이트들도 결국 이런 순서이긴 하지만, 담고 있는 정보는 아주 아주 상당히 많다. 간단한 예제로 이 블로그를 소개하는 초간단 페이지를 만들어보았다. 미니도날드의 블로그가 있고, 그 아래 각각의 게시판 이름..
