Study (31) 썸네일형 리스트형 [Web] HTML5 시멘틱 구조 태그 1. 시멘틱 태그 일반적으로 HTML5 태그의 가장 큰 변화를 시멘틱 태그라고 말합니다. 그리고 이 때문에 일반적으로 HTML5 웹 페이지를 시멘틱 웹 페이지라고 말합니다. 일단 시멘틱 (semantic) 은 '의미론적인' 이라는 영어 단어입니다. 웹 페이지는 글자로 입력합니다. 스타일시트를 적용하고 사용자가 눈으로 볼 때 "이것은 제목이고 이것은 본문이다" 라는 식으로 구분할 수 있습니다. 우리는 눈으로 레이아웃을 구분하므로 빠르게 구분할 수 있지만 컴퓨터는 그렇지 않습니다. 따라서 기계적인 검색 엔진은 어떠한 태그가 어떠한 기능을 하는지 분별할 수 없고 웹 페이지에서 데이터를 효율적으로 추출할 수 없습니다. 이를 해결하고자 특정한 태그에 의미를 부여해서 웹 페이지를 만드는 시도가 시작되었습니다. 그리.. [HTML] 입력 양식 태그 1. from 태그 2. 기본 input 태크 2) input 태그의 type 속성값 HTML4 에서 지원 속성값 설명 button 버튼 생성 checkbox 체크박스 생성 file 파일 입력 양식 생성 hidden 보이지 않습니다 image 이미지 형태 생성 password 비밀번호 입력 양식 생성 radio 라디어 버튼 새성 reset 초기화 버튼 생성 submit 제출 버튼 생성 text 글라 입력 양식 생성 HTML5 에서 추가 지원 속성값 설명 color 색상 선택 양식 생성 date 일 선택 양식 생성 datetime 날짜 선택 양식 생성 datetime-local 지역 날짜 선택 양식 생성 email 이메일 입력 양식 생성 month 월 선택 양식 생성 number 숫자 생성 양식 생성 ra.. [HTML] CodePen 1. CodePen 회원가입없이 HTML/CSS/JavaScript 코드가 어떻게 출력되는지 간단히 테스트 할 수 있는 사이트가 있습니다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 2. CodePen 에서 HTML/CSS/JavaScript 코드 테스트 1) Start Coding 클릭 2) HTML/CSS/JS 영역에 코드 입력하면 출력 영역에서 바로 결과 확인 가능 [CSS] 복합 선택자 1. 복합 선택자 HTML Code Sample 1) 모든 태그 선택 img { ... } 모두 선택 2) 아래 모든 태그 선택 p img { ... } 만 선택 2. 복합 선택자의 문제점 복합 선택자는 유용하지만 문제점도 있습니다. 복합 선택자로 작성된 코드를 읽으면서 수정하려면 HTML 본문의 구조를 완전히 파악하고 있어야 한다는 점입니다. 혼자서 홈페이지를 만들 때는 별다른 문제가 되지 않을 수도 있겠습니다만, 회사에서 협업을 하는 등의 상황에서는 이것이 불편을 초래할 수도 있습니다. 여러분은 CSS 쪽에서 복합 선택자를 적극적으로 활용하기보다는 HTML 코드상에서 클래스를 적극적으로 활용하는 편이 좋습니다. 클래스 선택자를 활용할 때는 해당 클래스의 이름을 한눈에 파악할 수 있으며, 해당 클래스 .. [jQuery] Basic 1. jQuery 1) jQurey 란 jQuery는 오픈 소스 JavaScript 라이브러리입니다. jQuery를 사용하면 짧고 단순한 프로그램으로 웹 페이지에 다양한 효과나 연출을 추가할 수 있고 복잡하게 구성된 콘텐츠를 제어할 수 있습니다. jQuery는 2006년 존 레식(John Resig)이 처음으로 공개했으며, 현재는 'jQuery Team' 이라는 개발자 그룹이 개발과 유지 보수를 담당하고 있습니다. [2] (20) John Resig 가 개발한 JavaScript 라이브러리로 다음과 같은 특징이 있다. [1] (146) - 'Write Less, Do More (좀 더 단순한 코드로 더 많은 처리를)' 목표 - 기본적인 DOM 조작에서부터 애니메이션 기능, 이벤트 처리, Ajax 통신까지.. [Node.js] Express Web Server Framework 1. Express Web Server Framework npm 에는 서버 제작 시 불편함을 해소하고, 편의 기능을 추가한 웹 서버 프레임워크가 있습니다. 대표적인 것이 익스프레스입니다. 익스프레스는 http 모듈의 요청과 응답 객체에 추가 기능들을 부여했습니다. 기존 메서드들도 계속 사용할 수 있지만, 편리한 메서드들을 추가하여 기능을 보완하였습니다. 또한, 코드를 분리하기 쉽게 만들어 관리하기도 용이합니다. [1] (184) 2. express-generator 패키지로 express 설치 익스프레스 프레임워크는 익스프레스 외에도 많은 패키지를 사용하므로 입문자 입장에서는 필요한 패키지를 찾아서 설치하기 조금 어렵습니다. 다행히 프레임워크에 필요한 package.json 을 만들어주고 기본 폴더 구조.. [Node.js] npm 1. npm npm 은 Node Package Manager 의 약자로, 이름 그대로 노드 패키지 매니저입니다. 대부분의 자바스크립트 프로그램은 패키지라는 이름으로 npm 에 등록되어 있으므로 특정 기능을 하는 패키지가 필요하다면 npm 에서 찾아 설치하면 됩니다. 방대한 양의 패키지들은 노드와 자바스크립트의 생태계를 더욱 견고하게 만들고 있습니다. 게다가 대부분 오픈 소스여서 노드를 사용해 웹을 개발할 때 많은 도움이 됩니다. [1] (166) 2. npm 업데이트 1) npm 버전 확인 npm -v 2) npm 업데이트 npm install -g npm 3) npm 버전 재확인 npm -v 3. package.json 서비스에 필요한 패키지를 하나씩 추가하다 보면 패키지 수가 100개를 훌쩍 넘어 버.. [Node.js] HTTP Web Server 1. HTTP Web Server - Simple 1) createServer.js 파일 생성 const http = require('http'); const server = http.createServer((req, res) => { res.write('Hello, world!'); }); server.listen(8080); 2) createServer.js 파일 node 로 실행 node createServer.js 3) Web Browser 로 실행 확인 Web Browser에서 localhost:8080 (또는 http://127.0.0.1:8080) 에 접속 2. HTTP Web Server - HTML File 1) createServer.html 파일 생성 Hello, world! 2) c.. [Network] URL 1. URL 형식 1) 프로토콜 - 프로토콜은 사용자가 서버에 접속할 때 어떤 방식으로 통신할 것인지를 나타내는 부분 - HTTP (HyperText Transfer Protocol) 은 웹브라우저와 웹 서버가 서로 데이터를 주고받기 위해서 만든 통신 규칙 2) 호스트 (도메인 네임) - 호스트는 인터넷에 접속된 각각의 컴퓨터를 의미 3) 포트 번호 - 한 대의 컴퓨터 안에는 여러 대의 서버가 있을 수도 있습니다. 그러면 클라이언트가 접속했을 때 그중에 어떤 서버와 통신할지가 모호합니다. 그래서 접속할 때 포트 번호를 명시하면 해당 포트로 연결된 서버와 통신하게 됩니다. 4) 경로 - 경로는 해당 컴퓨터 안에 있는 어떤 디렉터리에서 어떤 파일을 불러올 것인지를 가리킵니다. 5) 쿼리스트링 - 쿼리스트링을.. [CSS] Basic 1. CSS 란 CSS라는 이름은 'Cascading Style Sheet'의 줄임말입니다. 영단어 cascade는 폭포라는 뜻입니다. 무언가가 위에서부터 아래로 콸콸 쏟아져 내리는 모습을 생각하면 되겠습니다. 캐스케이딩이라는 이름에서부터 우리는 한 가지 정보를 유추할 수 있게 되었습니다. '무언가가 위에서부터 아래로 쏟아져 내리는 것을 의미하는구나!' CSS에서 말하는 캐스케이딩은 스타일이 쏟아져 내리는 것을 의미합니다. [2] (172) 항상 위에서 아래로만 쏟아져 내리는 폭포와 같이 CSS 코드가 우선순위에 따라 적용되므로, 이를 캐스케이딩이라 부릅니다. [2] (175) 2. CSS 문법 (선택자) { (스타일 속성 1): (스타일 값); (스타일 속성 2): (스타일 값); ... } 3. 7... 이전 1 2 3 4 다음
