AimHo

소스코드 관리를 위한 툴 Git 소개 및 사용법Git을 사용하는 이유?Git이라면 보통 개발자라면 많이 들어봤을텐데 이것은 프로젝트의 소스코드 관리를 위한 툴이다. 내가 언제 어떤 부분의 소스를 수정했는지 알 수 있게 해주고, 다른 프로그래머와 협업하는데 많은 도움을 주는 툴이다. 예를 들어 하나의 프로젝트를 수정하는데 프로그래머 A와 프로그래머 B가 각자 다른 작업을 수행하고 있다고 할 때, Git과 같은 툴을 사용하지 않는다면 A의 작업이 끝나고 B가 작업을 시작해야 한다. 하지만 Git과 같은 툴을 사용하면 동시에 작업을 시작할 수 있다. Git과 비슷한 도구로는 SVN이 있다. 참고: SVN과 Git의 차이점(http://rojhw.tistory.com/27) Git 기능소스 관리(rest, co..

CSS 속성공부 #4 / 배경 속성배경 속성을 사용하면 해당 태그의 배경이미지 or 색상을 지정할 수 있다. 배경 속성 키워드 들은 다음과 같다. 1. background-image: 배경 이미지 지정. 2. background-size: 배경 이미지의 크기 지정. 3. background-repeat: 배경 이미지의 반복 형태 지정. 4. background-attachment: 배경 이미지의 부착 형태 지정. 5. background-position: 배경 이미지의 위치 지정. 6. background: 한 번에 모든 배경 속성(image, size, repeat 등)을 입력할 수 있음. 실전 예제 1. 배경 이미지를 지정하는 속성으로 스타일 값에 URL 단위 or 그레이디언트를 입력한다. 그레이디언..

CSS 속성공부 #3 / display 속성HTML5가 등장하면서 display 속성에 입력할 수 있는 다양한 키워드가 등장했다. 하지만 모든 display 속성을 제대로 지원하는 웹 브라우저는 아직 없다. 그러므로 우리는 모든 웹 브라우저가 지원하는 display 속성을 중심으로 살펴보도록 하자. 여기서 다룰 속성 키워드들은 다음과 같다. 1. none: 태그를 화면에서 보이지 않게 만듦. 2. block: 태그를 블록 형식으로 지정함. 3. inline: 태그를 인라인 형식으로 지정함. 4. inline-block: 태그를 인라인-블록 형식으로 지정함. 실전예제 더미 객체 대상 객체 더미 객체 더미 객체 대상 객체 더미 객체 더미 객체 대상 객체 더미 객체 더미 객체 대상 객체 더미 객체 더미 객체 ..

CSS 속성공부 #2 / 박스에 대해 알아보자 / AimHo이번에는 웹 페이지의 레이아웃을 구성할 때 가장 중요한 박스에 대해 공부하려 한다. 박스는 아래 이미지에 표시된 속성을 모두 합쳐 박스 속성이라 이야기한다. 이미지출처: 한빛미디어 width, height 속성 여기서 글자를 글자라고 생각하면 된다. width와 height는 글자를 감싸는 영역의 크기를 지정한다. 단어 해석만 해봐도 어떤 속성인지 쉽게 알 수 있을것이다. margin, padding 속성 margin과 padding는 웹 페이지에서 여백을 만들때 많이 사용한다. 박스속성을 설명한 이미지를 다시 확인해보자. margin, padding의 차이가 보이는가?? 두 속성 모두 여백을 만드는 속성이지만, 테두리를 만드는 border를 기..

CSS 속성공부 #1 / 단위에 대해 알아보자 / AimHo이전에는 CSS 선택자를 살펴보았다. 이번에는 CSS 스타일 속성과 값을 이용해 웹 페이지를 디자인하는 방법에 대해 공부하도록 하겠다. 굉장히 많은 내용이 나오지만 외우려고 생각하지 말고, 이런게 있구나~ 하고 넘어가면 된다. 사용하고 싶은 속성의 코드를 모르면 구글링을 통해 이렇게 쓰는구나 하고 사용하면 된다. 코드를 여러 번 입력하다 보면 저절로 외워지기 마련이다. CSS 단위란? CSS의 스타일 값으로 입력할 수 있는 단위를 말한다. 여기에는 키워드, 크기, 색상, URL 총 4가지가 있다. 속성별로 한 가지 단위만 사용할 수 있는 건은 아니므로 우선 스타일의 값의 단위 종류부터 알아보자. 키워드단위 키워드는 W3C에서 미리 정의한 단어이다..

CSS 입문 / CSS 선택자에 대해 알아보자!HTML 항목의 [간단한 웹 페이지 만들기!] 글을 기억하는가? 저기서 웹 페이지는 굉장히 투박한 모양을 하고 있다. 저 투박한 웹 페이지에 앞으로 공부할 CSS(Cascading Style Sheets)를 적용해야 이쁜 웹 페이지를 완성할 수 있다. HTML 첫 글에서 언급했었는데, 네이버도 CSS가 빠지게 되면 투박한 형태로 보여지게 된다. 이제 CSS를 공부해볼건데, 가장 기본인 CSS 선택자를 다뤄보려고 한다. 실질적으로 화면에 있는 무언가를 조작하는 것이 아니므로 지루하게 느낄 수도 있지만, CSS 선택자를 모르면 이후의 내용을 진행할 수 없으니 차근차근 익혀보기를 바란다. CSS 선택자란? CSS 선택자는 특정한 HTML 태그를 선택할 때 사용하는..

HTML / 기본태그를 활용한 웹 페이지 틀 만들기자 이제 앞서 공부한 것을 토대로 간단한 텍스트형 웹 페이지를 만들어 보겠다. 최종 목표는 기본 블로그 형태로 웹 페이지를 꾸미는 것인데, 아직 CSS를 배우지 않아서 불가능하다. 따라서 HTML5를 사용해서 기본 구조만 짜보려고 한다. 위와 같은 형태의 웹 페이지를 만드려고 한다. 일단 위 페이지의 레이아웃을 다음과 같이 단순화 시키고 분리한다. 이렇게 영역을 구분했으면 이 레이아웃을 행 기준(가로로 선을 그릴 수 있는 부분)으로 분리한다. 1. Header2. Navigation3. Section, Aside4. Footer 이제 공간 분할 태그 를 사용해서 레이아웃을 구분한다. 공간 분할(레이아웃 구분) 공간 분할을 완료했으면 안의 내용을 입력해준다..

HTML 입력 양식 태그 / select 태그 익히기[참고] HTML 입력 양식 태그 지난글1. 개요 바로가기2. 간단한 입력 양식 만들기 정말 간만에 HTML 포스팅을 한다. 최근 공부도 안하고 게을렀다.... 이번에는 입력 양식 태그의 마지막 를 진행하려고 한다. select 태그 select 태그는 목록으로 보여주는 항목 중 하나 or 여러 개를 선택할 수 있는 입력 양식 요소 이다. 기본적으로는 하나만 선택할 수 있다. select 태그를 사용할 때는 optgroup, option 태그를 함께 사용한다. 예제코드로 바로 확인해보자! one two three four one two three four 옵션을 선택할 수 있는 요소가 생성된게 보인다. 스마트폰에서는 내장된 옵션 선택화면을 사용하는데, ..

HTML 입력 양식 태그 / 간단한 입력 양식, 쉽게 만들 수 있습니다.안녕하세요 AimHo 입니다. 지난번 [입력 양식 태그 / 개요] 이어서 공부 하겠습니다. 입력 양식 태그 익히기 HTML5는 다양한 입력 양식 태그를 지원하는데, 아래에 주요 태그와 속성, 모양을 정리해보았습니다. 예제 코드를 통해 어떤 모습으로 보이는지 확인해보겠습니다. > 이 외에도 HTML5에서 새로 지원하는 입력 양식 태그도 굉장히 많다고 합니다. 하지만, 오페라 웹 브라우저를 제외하면 거의 지원하지 않는다고 하니 생략하도록 하겠습니다. 간단한 입력 양식 만들기 라디오 버튼의 name 속성을 이용하면 여러 대상 중 하나만 선택하도록 하는 형태를 손쉽게 구현할 수 있습니다. 예제 코드를 작성해서 바로 확인해보도록 하겠습니다. ..

GIF 파일 쉽게 만드는 방법안녕하세요 AimHo 입니다. 이번에는 흔히들 움짤로 알고있는 GIF 파일 만드는 방법 간략하게 적어보겠습니다. 제가 알고 있는 방법은 총 2가지 입니다. GIF 파일을 만드는 웹 페이지를 이용해 만드는 방법과 GifCam이라는 프로그램을 이용해서 만드는 방법입니다. GIF 란? GIF(Graphics Interchange Format)는 비트맵 그래픽 파일 포맷입니다. 간단하게 말하면 이미지 파일의 형식 중 하나입니다. 특별한 플러그인을 요구하지 않고 여러 환경에서 쉽게 쓸 수 있는 까닭에 다 중 프레임 애니메이션을 이용한 배너 광고 등에 널리 쓰였으나, 수많은 웹 사이트에서는 GIF 대신 Adobe Flash를 사용하기도 합니다. 더 자세한 내용은 위키백과를 참고하시기 바..