본문 바로가기

HTML19

CSS3 - CSS 스타일 - position(포지션)속성의 정적 위치 설정 (static positioning) (25) CSS3 - CSS 스타일 - position(포지션)속성의 정적 위치 설정 (static positioning) (25) 오늘은 CSS3의 스물 다섯번째 내용으로는 position(포지션)속성의 정적 위치 설정 (static positioning)에 대해서 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살 타이핑 해보면 이해 되니! 꼭!)굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다. css 스타일 - position(포지션)속성의 정적 위치 설정 (static positioning)이란? 먼저 position(포지션)속성의 정적 위치 설정 (stat.. 2017. 7. 25.

CSS3 - CSS 스타일 - 박스 모델 (9) CSS3 - CSS 스타일 - 박스 모델 (9) 오늘은 CSS3의 아홉번째 내용으로 CSS 박스 모델이란 무엇인지 가볍게 알아 보도록 하겠습니다. CSS도 HTML처럼 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.) css 스타일 - 박스 모델이란? 먼저 박스 모델이란 웹 브라우저에서 각 HTML (태그)를 사각형으로 간주하는데이러한 태그를 박스 사각형 형태로 그리는 것을 박스 모델 이라고 부릅니다. 이 때 CSS는 각 박스의 특징 예를 들어 박스의 배치, 박스의 색상, 박스의 경계선등을 결정하게 되는데 기본적으.. 2017. 6. 2.

HTML - 입력양식 form태그와 그 속성 - 입력태그 (5) HTML - 입력양식 form태그와 그 속성입력태그 (5) 오늘은 HTML 마지막으로 앞서 배운 입력태그를 담는 form태그, 입력양식에 대해서 명확하게 알아 보고 HTML 부분 포스팅을 넘어 가도록 하겠습니다. (추후 HTML 태그가 더 추가되거나 바뀌지 않는 이상 여기서 마무리) 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) form태그와 그 속성이란? 먼저 form태그란 사용자로부터 데이터를 받어서 서버로 넘기는데 사용되는 태그이며 입력양식을 이용하면 쇼핑몰 같은 곳에서 주문을 받을수도 있고.. 2017. 5. 24.

HTML - input태그의 추가된 속성과 type 속성에 추가된 값 - 입력태그 (2) HTML - input태그의 추가된 속성과 type 속성에 추가된 값입력태그 (2) 오늘은 이전 포스팅에 이어 html5에서input태그의 추가된 속성과 type 속성에 추가된 값에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) input태그의 추가된 속성이란? html5에서 새로운 input 태그가 추가된 내용 입니다.그중 몇개의 내용은 아래와 같습니다. 추가된 속성 내용 pattern 허용하는 입력의 형태를 정규식으로 지정 required 입력양식 제출전에 반드.. 2017. 5. 21.

HTML - input태그와 그 속성 type, value, name - 입력태그 (1) HTML - input태그와 그 속성 type, value, name입력태그 (1) 오늘은 input태그와 그 속성 type, value, name에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 input태그란? input태그란 form 태그 안에서 추가되는 입력 요소들 중가장 중요한 태그 입니다. input태그는 사용자로 부터 정보를 받아들이는 용도로 사용되는데input 태그의 type이라는 속성을 이용해 입력 양식을 여러가지로 변경하여 사용됩.. 2017. 5. 20.

HTML - div태그 (블록)과 span태그 (인라인) - 멀티미디어 (4) HTML - div태그 (블록)과 span태그 (인라인)멀티미디어 (4) 오늘은 div태그 (블록)과 span태그 (인라인)에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 div태그 (블록)과 span태그 (인라인)란? div태그 (블록)는 과 span태그 (인라인) 는 웹 사이트를 만드는데무조건 적으로 필요한 태그 입니다. 먼저 div 내용입니다. div 같은 경우 divide 의 약자로 페이지를논리적인 세션으로 분리하는데 사용이 되는데 블록 .. 2017. 5. 19.

HTML - 비디오(video)태그와 그 속성 - 멀티미디어 (2) HTML - 비디오(video)태그와 그 속성멀티미디어 (2) 오늘은 비디오(video)태그와 그 속성에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 비디오(video)태그란? HTML5에서 비디오(동영상)을 재생할 수 있는 태그인데앞서 배웠던 오디오 태그와 적용방식의 거의 동일하기 때문에 설명은 아주 간단하게 하겠습니다. ^^ 비디오(video)태그 사용법 위 이미지를 보시면 아시곘지만 사용법은 오디오 태그와 동일합니다.단지 달라진게 있다면 속.. 2017. 5. 17.

HTML - 오디오(audio)태그와 그 속성 - 멀티미디어 (1) HTML - 오디오(audio)태그와 그 속성 멀티미디어 (1) 오늘은 HTML - 오디오(audio)태그와 그 속성에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 오디오(audio)태그란? HTML5에서 오디오를 재생할 수 있는 태그태그를 지원 하는데 흔히 웹 페이지에서 자신이 좋아하는오디오 파일 음원을 배경음으로 재생할때 사용하는 태그입니다. 위 이미지는 오디오 태그 src 속성으로 오디오 파일 music.mp3 를 지정 후속성 outopla.. 2017. 5. 16.

HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 캡션(caption) 태그 - 텍스트 표시 (7) HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 캡션(caption) 태그 - 텍스트 표시 (7) 오늘은 HTML - 테이블(itable), tr, th, td, 열과 행의 병합, 캡션(caption) 태그에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 테이블(itable)태그란? 표 형태의 데이터를 표시하는 데 사용 되는 태그 이며예전 초기 웹 페이지에서는 레이아웃에도 테이블을 사용하였으며테이블(itable)로 정의 .. 2017. 5. 15.

HTML - 이미지(img) 태그 와 src, width, height, alt 속성 - 텍스트 표시 (6) HTML - 이미지(img) 태그 와 src, width, height, alt 속성 텍스트 표시 (6) 오늘은 HTML - img 태그 와 src, width, height, alt 속성에 대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 이미지(img) 태그란? 웹 페이지에 이미지를 넣을 수 있게 하는 태그로서 말 그대로 이미지(img)태그로 정의 됩니다. 1. img 태그는 다시 말하지만 이미지를 웹페이지에 삽입할때 사용됩니다. ^^ 2. src.. 2017. 5. 14.

HTML - 링크, a태그 와 href, target, id 속성 - 텍스트 표시 (5) HTML - 링크, a태그 와 href, target, id 속성 텍스트 표시 (5) 오늘은 HTML - 링크 a태그 와 href, target, id 속성에대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 a 태그란? 하이퍼 링크를 정의 하는 내용으로 사용자가 커서를 웹 페이지의 링크 위에올리면서 커서의 모양이 화살표에서 손 모양으로 변화합니다. a태그를 사용하기 위해서는 속성이 있어야 하는데이 속성은 href로 링크 주소를 입력하는 부분을 정의 합.. 2017. 5. 13.

HTML - 리스트 태그 중 - ul태그, ol태그, li태그 - 텍스트 표시 (4) HTML - 리스트 태그 중 - ul태그, ol태그, li태그 텍스트 표시 (4) 오늘은 HTML - 헤딩 태그 , 텍스트 서식 , hr 태그 및 주석 처리에대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML에서 리스트 태그란?리스트 태그는 말 그대로 항목을 나열하는데 사용하는 태그이며이 태그 안에는 텍스트 말고도 이미지, 비디오, 링크를 넣을 수도 있으며태그에 따라 번호가 있는 리스트가 있고 태그에 따라 번호가 없는 리스트도 있고태그에 따라 정의 리스트라.. 2017. 5. 12.

HTML - 특수 문자 사용법 텍스트 표시 (3) HTML - 특수 문자 사용법 텍스트 표시 (3) 오늘은 HTML - 특수 문자 사용법에대해서 알아 보도록 하겠습니다. 태그 기초부터 알아보기 전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 HTML 에서 특수문자란 예를들어'' 같은 한개 이상의 공백을 만들경우 등 여러 경우에서 사용하게 되는데이때 일반 키보드나 스페이스로는 먹히지 않기 때문에 이를 화면에 표시가 되게끔 쓰는 HTML 태그 안에 쓰는 문구를 말합니다. ※ 키보드나 스페이스로 한개이상의 공백과 특수문자가 사용 안되는 이유 ※ 예를 들면 '' 같은 경우.. 2017. 5. 11.

HTML - 헤딩과 텍스트 서식, 수평선 태그, 주석 - 텍스트 표시 (2) HTML - 헤딩과 텍스트 서식, 수평선 태그 및 주석텍스트 표시 (2) 오늘은 HTML - 헤딩 태그 , 텍스트 서식 , hr 태그 및 주석 처리에대해서 알아 보도록 하겠습니다. 먼저 태그 기초부터 알아보기 이전에 압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 HTML 툴이 있으시다면 사용하시기 바랍니다.) 먼저 헤딩 태그 입니다.해딩 태그란 웹 페이지의 머릿글 같은 말인데요.웹페이지를 신문이라고 친다면 헤드라인? 같은 말을 의미합니다.(상단 가장 큰 글자 같은것!) 그 다음 헤딩도 머리글 처럼 크기가 있듯이 표시도 제각각 인데요 위와 같이 ~ 까지의 6개의 태그로 숫자.. 2017. 5. 10.

HTML - 텍스트 태그, p태그, br태그, pre태그 - 텍스트 표시 (1) HTML - 텍스트 태그, p태그, br태그, pre태그 텍스트 표시 (1) 오늘 포스팅은 HTML 태그 중 텍스트를 표시에 대해서 알아 보도록 하겠습니다.먼저 태그 기초부터 알아보기 전에 이전 포스팅 중 압타나 스튜디오 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!) 먼저 HTML의 텍스트 표시란 ?말 그대로 HTML 문서에서 텍스트를 작성하는 것이며 특별한 태그 없이도 안에서 표시 할 수 있습니다. 그러나! 여러 줄로 되어 있는 텍스트는 단락을 생성한 후에 단락 안에서 표시하는 것이 좋습니다! 왜냐 하면 단락을 생성하지 않으면 모든 텍스트가 하나로 연결이 되어하나의 긴 줄로 표시가 되기 때문 입니다. 위 사진 처럼 HTML 문서를 작성.. 2017. 5. 9.

압타나 스튜디오 3 (Aptana Studio 3) - HTML 문서 편집 및 상대경로 절대경로 #4 압타나 스튜디오 3 (Aptana Studio 3) HTML 문서 편집 및 상대경로 절대경로 #4 안녕하세요 긴냥입니다. 이번 포스팅은 이전 포스팅에 이어 압타나 스튜디오 3 (Aptana Studio 3)의HTML 문서 편집 및 상대경로 절대경로 에 관련된 내용에 대해서 알아 보도록 하겠습니다. 먼저 이 전 포스팅에서 만든 파일을 가지고 설명 하겠습니다. 위 사진은 현재 html파일 css파일 js파일이 열려 있으며 html 파일이 선택되어있는 모습입니다. html 파일이 선택되어 있지 않으신 분들은마우스로 오른쪽 상단 main.html을 선택합니다. 여기서 추가적으로압타나 툴은 html파일 생성시 위처럼 기본적인 탬플릿을 지원합니다. 하지만 복잡하니 지울건 지우고 쓰도록 하겠습니다.위 마우스 커서 드.. 2017. 5. 3.

압타나 스튜디오 3 (Aptana Studio 3) - 파일생성 #3 압타나 스튜디오 3 (Aptana Studio 3)파일생성 #3 안녕하세요 긴냥입니다. 이번 포스팅은 압타나 스튜디오 3 (Aptana Studio 3) 파일생성 에 관련된 내용에 대해서 알아 보도록 하겠습니다. 제일먼저 위 사진 처럼 압타나 스튜디오를 실행합니다. 압타나가 실행 되었다면 위 사진 처럼 contents(컨텐츠) 폴더를 선택한 상태에서 오른쪽 마우스를 클릭 후 New From Template > HTML > HTML5 Template 을 선택합니다. 선택 후 위 사진 처럼 New File 창이 뜹니다. 위사진 하단에 File name (파일 이름) 을 적는 부분이 있는데요거기다 main.html 이라 파일 이름을 적겠습니다. 여기서 main. (메인.) 뒤에 html 은 파일의 확장자 이기.. 2017. 5. 3.

압타나 스튜디오 3 (Aptana Studio 3) - 웹 프로젝트 생성 #2 압타나 스튜디오 3 (Aptana Studio 3)웹프로젝트 생성 #2 안녕하세요 긴냥입니다. 이번 포스팅은 압타나 스튜디오 3 (Aptana Studio 3)웹 프로젝트 생성에 관련된 내용에 대해서 알아 보도록 하겠습니다. 먼저 위와 같이 압타나를 실행 합니다. 실행이 되었다면 위와 같이File(파일) > NEW(새로운) > Web Project (웹 프로젝트)를 선택합니다. 웹프로젝트 클릭 시 위와 같은 화면이 나오는데 여기서 HTML5 Boilerplate (Cached)를 선택후 > NEW(새로운)을 클릭합니다. 그럼 위와 같이 프로젝트 이름을 기입하라는 창이 열리게됩니다. 이때 Project name 부분에 저는 임의로 test-page (테스트 페이지)라는 프로젝트명을 적었습니다. 여기서 잠깐.. 2017. 5. 3.

압타나 스튜디오 3 (Aptana Studio 3) - 설치 하기 #1 압타나 스튜디오 3 (Aptana Studio 3)설치 하기 #1 안녕하세요 긴냥입니다. 이번 포스팅은 압타나 스튜디오 3 (Aptana Studio 3) 설치에 관련된 내용에 대해서 알아보도록 하겠습니다. 먼저 압타나 스튜디오 3 (Aptana Studio 3)란 HTML + CSS 개발하는 툴중 하나 입니다. 먼저 압타나 설치 전! node.js 설치를 합니다. node.js 란 자바스크립트와 동일한 언어로 PHP,JSP,ASP처럼 서버내에서 컨트롤 역할을 하는 그런 개념입니다. ^^ node.js 홈페이지 주소 Home : https://nodejs.org(클릭시 이동) (설치 과정은 그냥 다운받고 실행이라... 생략!!) 위 링크를 통해서 node.js를 설치하셨다면이제부터 본격적으로 압타나 스튜.. 2017. 5. 3.

이전 1 다음

티스토리툴바