오늘은 div 태그를 이용해서 초간단 웹페이지 레이아웃을 구성하는 것을 살펴 보겠습니다. div 태그에 대해서는 아래 포스팅 참조 해주세요. [HTML5/CSS3] span 태그 & div 태그의 차이 1. 웹페이지 레이아웃 웹페이지는 일반적으로 Header 영역 / Navigation 영역 / Content 영역 / Footer 영역으로 나누어집니다. (모든 웹페이지가 그런것은 아닙니다) Header 영역 : 웹페이지를 나타내는 로고 또는 소개글이 위치합니다.Navigation 영역 : 웹페이지에서 다른 페이지로 이동하는 Menu Bar가 옵니다.Content 영역 : 웹 페이지의 내용Footer 영역 : 웹 페이지와 관련된 정보 그럼 이러한 4개의 영역으로 나누어지는 간단한 샘플예제를 살펴보겠습니다...
div 태그와 span 태그는 웹 페이지의 영역을 설정 할 때 사용하는 태그입니다. 웹 페이지의 전체적인 레이아웃을 설정 할 때 사용하는 태그인셈이죠. 예전에는 table 태그를 사용하여 웹 페이지에 대한 전체적인 레이아웃을 구성하였던 반면 요즘 트렌드는 오늘 배울 div 태그와 span 태그를 통해서 구성을 하는 것이 일반적입니다. [HTML5/CSS3] HTML 기초 강좌 - 테이블 태그 ( 태그) 알아보러 가기!! 그럼 div 태그와 span 태그의 차이점과 사용법을 살펴보겠습니다. 1. div 태그와 span 태그 비교 먼저 두 태그의 차이점은 줄바꿈입니다. div 태그의 경우 자동으로 줄바꿈이 되지만 span 태그의 경우네는 자동으로 줄바꿈이 되지 않습니다. 아래 샘플 소스를 참조해주세요. 12..
form 태그는 웹 페이지의 내용을 다른 웹페이지 또는 웹 서버에 전송 할 때 사용됩니다. 단순히 텍스트만 보여주는 웹 페이지일 경우 필요가 없지만 데이터를 보낼 필요가 있는 웹 페이지에서는 반드시 사용해야 하는 태그입니다. 예를들어 회원가입을 하는 웹 페이지의 경우 회원가입을 위해 입력했던 정보를 서버로 전송을 해줘야지 회원가입 요청에 대한 처리가 이루어 질 수 있습니다. 1. form 태그 먼저 form 태그의 중요 속성들에 대해서 알아 보겠습니다. action : form 내부의 데이터를 보내는 url 경로를 지정합니다.method : 데이터를 보내는 방식을 지정합니다. post와 get 방식이 있습니다.action : action에 의한 새로운 웹페이지가 열리는 방식을 지정합니다. autocomp..
오늘은 웹 페이지에서 테이블 태그를 활용하여 테이블을 표현하는 방법에 대해 알아보겠습니다. 테이블 태그는 단순히 테이블을 보여줄 때 사용이 되지만 웹 페이지의 전체적인 레이아웃을 구성 할 때도 사용이 됩니다. 사실 테이블 태그의 경우는 요즘 잘 사용되지 않는 추세이긴 하지만 (웹 페이지의 레이아웃 구성도 div 태그를 활용하여 구성합니다) 그래도 모르고 넘어가면 안되기 때문에 한번 살펴보도록 하겠습니다. 1. Table 태그 기본 먼저 테이블 태그 영역에 사용 될 수 있는 하위 태그들에 대해 정리 해보겠습니다. : table을 생성하는데 사용되는 가장 상위의 태그 : 새로운 행을 시작하는 태그 : 새로운 열을 시작하는 태그기본적으로 이렇게만 알고 시작해보도록 하겠습니다. 123456789101112131..
웹 컨텐츠에서 제목을 작성하는 h 태그와 다른 웹페이지로 이동을 시켜주는 하이퍼링크 인 a태그에 이어서 오늘은 리스트 태그와 이미지 태그에 대해서 정리해보도록 하겠습니다. [Programming/HTML&CSS] - [HTML5/CSS3] HTML 기초 강좌 - h태그와 a태그에 대해 알아보자[Programming/HTML&CSS] - [HTML5/CSS] HTML과 CSS 기초 개념 이해하기 1. 리스트 태그 - 태그 html에서는 목록을 작성 할 수 있는 태그들이 있는데요. 먼저 ul 태그에 대해서 살펴 보겠습니다. ul 태그는 unordered list의 약자로 순서가 없는 리스트를 작성 할 때 사용됩니다. 순서가 없기 때문에 글머리 기호를 사용해서 나타내는게 특징입니다. 태그의 경우는 사이에 정의..
오늘부터 HTML에서 사용하는 태그들에 대해서 하나씩 정리해 나가도록 하겠습니다. 오늘 게시글 주제는 컨텐츠에서 제목을 표현하는 h태그와 본문 내용을 작성 할 때 사용하는 a 태그에 대해서 알아보도록 하겠습니다. 1. 제목 요소에 해당하는 h 태그 H 태그들은 웹 페이지의 컨텐츠 내에서 제목을 표시 할 때 사용하는 헤드라인 태그입니다. 컨텐츠내에서 제목을 작성 할 때 사용되는 태그들로 웹 페이지의 내용만큼이나 중요한 요소입니다. h 태그는 h1을 시작으로 h6까지 있으며 상위번호로 갈수록 글자크기가 작아집니다. 보통 h1 태그가 웹 페이지 컨텐츠상에서 주 제목을 쓸때 쓰이며 h1을 제외한 상위번호를 통해 부제목을 작성을 하게 됩니다. 태그 사용방법은 앞서 게시글에서 얘기했던대로 제목 요소 와 같이 사용하..
1. HTML 이란 ? HTML은 Hyper Text Markup Language의 약자로 웹 페이지를 만들기 위해 사용되는 마크업 언어로 확장자를 *.htm 또는 *.html로 지정하면 웹 브라우저를 이를 html 문서로 인식하고 로딩을 하게 됩니다. HTML은 아무 Text Editor를 사용해서 확장자만 제대로 지정해주면 브라우저로 곧바로 실행 해 볼수 있습니다. (참고로 저는 Visual Studio Code Editor를 사용하여 실습을 진행해 나갈 생각입니다. 아래 링크 게시글을 통해 확인 바랍니다. ) [Programming/JavaScript] - [JavaScript] Visual Studio Code 설치 및 시작 1.1 HTML 기본 구조 123456789101112 Document ..
1. 왜 CRA를 사용하는가 ? React Code의 경우 최신 자바스크립트 코드로 작성하는 것이 일반적입니다. 여기서 최신 자바스크립트란 ES6 기반의 코드를 의미하는데 이러한 ES6 기반의 자바 스크립트를 모든 브라우저에서 지원을 해주고 있지 않습니다. 따라서 정식으로는 웹팩이라는 녀석을 설치하고 설정을 따로 해줘야 합니다. 하지만 고맙게도(?) 페이스북에서 초보자를 위해 웹팩을 따로 설치하지 않고도 사용 할 수 있도록 CRA라는 툴을 제공하고 있습니다. CRA는 ES6 자바 스크립트를 브라우저가 이해 할 수 있는 ES5 코드로 변경을 해주는 고마운 툴입니다. 2. ES6 Style의 자바 스크립트 소스 1_TestFunction = function() { console.log("Test Code")..
1. Visual Studio Code 시작하기JavaScript를 시작하기에 앞서 먼저 편지기인 Visual Studio Code를 설치하도록 하겠습니다. https://code.visualstudio.com/ 위 Red Marking 된 부분의 Download for Windows를 Click하여 Setup 파일을 다운로드 합니다.설치과정은 머 없으니 생략하도록 하겠습니다. 설치가 끝나고 아래와 같이 Visual Studio Code가 정상적으로 실행되는 것을 확인하시면 됩니다. 2. Visual Studio Code 알아보기 Visual Studio Code에서 작업 할 폴더를 불러와야 합니다. 위 View Bar 에서 맨 위에 있는 것을 클릭 한 뒤 Open Folder를 Click하여 작업 할 ..
TCP 소켓 프로그래밍 02 - 채팅 앞선 소켓 프로그래밍 포스팅에서는 Server와 Client 사이에 1:1 통신 구현에 대해서 공부 하였습니다. 하지만 이번 포스팅에서 다룰 내용은 서버가 여러명의 Client의 접속을 받고, 접속한 Client끼리 메세지를 주고 받을 수 있는 1간단한 채팅 프로그램에 대해 구현을 해볼 생각입니다. 간단한 TCP 소켓 프로그래밍에 대한 공부는 아래 포스팅을 참조해주세요. http://lktprogrammer.tistory.com/62 ■ 서버 구현 방식 ▶기본적으로 앞에서 1:1 통신 방식에서는 메인 쓰레드 영역에서 Client의 접속을 받고 동시에 데이터를 주고 받았습니다. 일 대 다 통신으로 구현되어야 하는 채팅 프로그램에서 마찬가지 방식으로 구현 될 경우 문제점..
[JAVA] 예외처리하기 예외란 프로그램 실행 시에 예쌍치 못한 일로 에러를 말합니다. 예외처리는 이러한 예외를 프로그래머가 원하는 방향으로 움직이도록 만드는 일을 말합니다. 1. try~catch~finally Colored By Color Scripter™ 1 2 3 4 5 6 7 8 try { //예외 발생 예상 지역 }catch(예외_발생_예상_클래스 객체) { //예외 발생시 처리할 내용 }finally { //예외 발생 여부와 상관없이 무조건 처리해야 할 내용 } 예외처리 구문은 총 3개의 구문으로 나누어집니다. 첫 번째 try{} 구문안에는 예외가 발생 될 것으로 예상되는 코드가 들어갑니다. 예를 들어 배열을 사용하는 경우 범위를 벗어나는 인덱스를 사용하는 경우, 정수를 0으로 나눌려는 경우..
TCP 소켓 프로그래밍 01 - 일대일 연결 이번 포스팅에서는 Socket을 활용하여 Clinet측에서 Server로 일대일 연결을 유지하면서 Client측에서 보낸 메세지를 Server측에서 수신하여 수신 받은 메세지를 다시 Client측으로 송신하는 프로그램 구현에 대해 알아보겠습니다. ■ TCP 소켓 프로그래밍 구현 과정 1. Server측에서는 ServerSocket을 생성하고 accept() 메서드를 호출함으로써 Client의 접속을 대기합니다. 2. Client측에서는 Server에 접속을 함으로써 Server와의 통신을 위한 Socket을 생성합니다. 3. 마찬가지로 Server측에서 Client 접속이 이루어지면 해당 Client와 통신 할 수 있는 Socket을 반환받습니다. 4. Cli..
1. 파일의 개방과 종결 파일로부터 데이터를 입출력하기 위해서는 제일 먼저 파일을 열어야 합니다. 파일을 열겠다는 의미는 파일과 데이터를 주고 받을 수 있는 스트림을 생성한다는 의미입니다. C언어에서 파일을 열기 위한 함수로 fopen_s 함수를 제공합니다. Colored By Color Scripter™ 1 2 3 4 5 int main() { FILE* f; //파일포인터 변수 fopen_s(&f,"Test.txt","rt"); //fopen_s 함수 호출 } fopen_s 함수는 총 3개의 인자를 가집니다. 첫 번째 인자는 파일이 성공적으로 개방하면 리턴되는 파일 구조체의 포인터 값을 저장 할 변수가 옵니다. 두 번째로는 열고자 하는 파일의 경로가 오게 되고 프로젝트와 같은 위치에 존재한다면 파일 ..
■ 함수의 인자로 구조체 전달하기 함수 호출에 의한 구조체 변수의 전달은 크게 두 가지로 나누어 집니다. 하나는 값에 의한 전달 (Call-By-Value)이고 다른 하나는 주소 값에 의한 전달(Call-By-Reference)입니다. Colored By Color Scripter™ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 void show(struct Data st); //Call-By-Value void swap(struct Data* st); //Call-By-Reference struct Data { int data1; int data2; }; int main() { Data st1 = { 10,20 };..
구조체의 정의 구조체란 하나 이상의 변수를 그룹 지어서 새로운 자료형을 정의하는 것을 의미합니다. 그룹 지어진 변수는 서로 다른 자료형의 변수라도 상관없고 포인터 변수나 배열도 그룹에 속할 수 있습니다. 프로그램 내에서 만약 학생에 대한 정보 (이름, 나이, 성별)를 가지기 위해서는 3개의 변수가 필요합니다. 이 세 개의 변수는 서로 독립 된 정보를 나타내는 것이 아니라, 하나의 정보를 나타내는 변수들입니다. 즉 학생의 정보' 나타내기 위해 늘 붙어 다녀야 하는 것입니다. Colored By Color Scripter™ 1 2 3 4 5 6 struct Student //Student 구조체를 정의 { char *name; //char* 타입의 구조체 멤버 int age; //int 타입의 구조체 멤버 ..