CSS 강좌 05강 - CSS font 스타일 font는 글꼴을 의미하는데, 쉽게 말하자면 글자의 서체.. 즉 모양입니다. ※Font Family ▷웹 페이지에서 스타일링 한 글꼴을 사용자가 보기 위해서는 사용자의 디바이스에 해당 글꼴이 포함되어 있어야 합니다. ▷그렇기 때문에 Font Family라는 것을 사용하는데요. ▷Font Family를 사용하여 여러개의 글꼴을 지정하고, 사용자에게 있는 글꼴로 적용을 합니다. 예제) Go Learning! ※Sans-serif/serif ▷serif란 문자를 디자인 하는 요소입니다. 문자의 획 끝부분을 장식하는 모양을 말합니다. ▷serif의 대표적인 글꼴은 바탕체, 궁서체, Time New Roman이 있습니다. ▷sans-serif란 serif처럼 획 끝부..

CSS 강좌 04강 - CSS 텍스트 스타일 ※SPAN 태그 ▷특정한 텍스트 영역에 특정한 스타일을 주기위해 SPAN태그를 이용합니다. ▷SPAN태그 시작태그와 종료태그 사이에 있는 요소에 스타일을 지정할 수 있습니다. 사용법) 스타일을 지정하지 않고자 하는 요소 스타일을 지정하는 요소 스타일을 지정하지 않고자 하는 요소 예제) 스타일을 지정하지 않고자 하는 요소 스타일을 지정하는 요소 스타일을 지정하지 않고자 하는 요소 ※색상 지정 ▷지금까지 많이 사용했던 스타일 코드입니다. 특정 텍스트에 색상을 지정합니다. ▷색상을 지정하는 방법은 다음과 같이 세 가지 방법이 있습니다. (1)Hex : 16진수를 이용한 표현 (예제 : #ff0000, #00ff00, #0000ff) (2)RGB : red, blue..

CSS 강좌 03강 - CSS 선택자 조합 ※하위 선택자 ▷어떠한 객체의 하위에 나오는 요소를 선택합니다. ▷하위 요소를 감싸고 있는 부모 객체가 먼저 입력하고 공백으로 구분한 후 하위 요소를 입력합니다. 사용법) 상위객체 하위요소{ } 예제) Go Learning! Go Learning! 예제를 보면 알겠지만, 첫 번째 div 객체의 h1 요소만 영향을 받고, 두 번째 h1 요소는 영향을 받지 않습니다. ※다중 선택자에 적용하기 ▷여러 요소나 객체를 동시에 선언하여 스타일을 지정할 수 있습니다. ▷선택자와 선택자는 , 로 구분하여 나열합니다. 사용법) 선택자, 선택자, 선택자{ } 예제) Go Learning! Go Learning! Go Learning! ※자식 선택자 ▷어떠한 요소의 자식이 되는 요..

CSS 강좌 02강 - CSS 선택자 ※CSS 선택자란.. CSS 선택자는 CSS를 이용해 스타일을 적용하고자 하는 태그를 지정해주는 것을 의미합니다. 태그명으로 선택자를 지정할 수 있고, 아이디나 클래스로 선택자를 지정할 수 있습니다. ※type 선택자 ▷특정 태그명을 가진 엘리먼트 전체를 제어하기 위해서 사용합니다. ▷type 선택자를 이용하여 스타일을 적용하게 될 경우 같은 type의 모든 태그에 스타일이 적용됩니다. 사용법) 태그명{ color:blue; } 예제) Go Learning! Funny Web! You Joking? 위와 같이 코딩을 하면 h1 type의 모든 태그에 스타일이 적용됩니다. 다른 type의 태그도 마찬가지 입니다. ※아이디 선택자 ▷아이디 선택자는 아이디를 가지고 있는 ..

CSS 강좌 01강 - CSS 시작하기(CSS개념) ※CSS란 무엇일까요? 지금까지 HTML, HTML5 강좌를 보셨거나 경험한 적이 있다면.. 적어도 한번 이상 CSS라는 단어를 본 적이 있을겁니다. CSS는 웹 페이지를 개발하는데 있어서 필수는 아니지만 웹 페이지를 꾸미는데 있어서 필수입니다. HTML이 웹페이지의 정보를 표현한다고 하면, CSS는 웹페이지를 시각적으로 꾸며주는 역할을 합니다. ※CSS를 왜 사용해야 할까요? CSS를 사용하여 웹페이지를 디자인 하는 경우 다음과 같은 효과를 얻을 수 있습니다. ▷정보(HTML)와 디자인(CSS)을 분리할 수 있습니다. ▷디자인만 독립적으로 수정할 수 있습니다. ▷검색엔진은 HTML을 해석할 수 있습니다. 그렇기에 많은 방문자들의 유입을 유도할 수 있습..

HTML5 강좌 23강 - 위치 정보(Geolocation API), 지도 서비스 요즘 스마트폰이 대중화 되면서, 위치기반 APP이 아주 많이 개발됐죠. HTML5에서도 위치를 찾고, 지도를 만들 수 있습니다. *Geolocation API : 현재의 위치 정보를 검색할 때 사용 GPS가 내장된 스마트폰에서 훨씬 정확한 위치 정보 파악이 가능하여 모바일 브라우저에서 유용한 API 입니다. 위치 정보는 개인 정보 이므로 사용자의 동의가 필요하죠. *현재 위치 현재 위치를 알아내기 위해서 navigator 객체의 getCurrentPosition() 메소드를 사용합니다. -사용법- navigator.geolocation.getCurrentPosition( successCallback, errorCallbac..

HTML5 강좌 22강 - 파일접근, 파일정보 파일을 읽고, 파일에 대한 정보를 읽는 파일접근에 대해 알아보도록 하겠습니다. 1. 파일 접근(1)파일의 데이터에 대한 직접 읽기가 가능(수정/삭제 불가)(2)읽기 가능한 파일-사용자가 드래그 앤 드롭한 파일-input 요소(type=“file”)에서 선택한 파일 2. 파일 정보(1)선택한 파일의 객체를 구함-선택한 파일에 대해 속성/메소드 사용(2)FileList 객체선택한 파일의 객체가 저장되어 있는 객체 -> 배열 형식, 인덱스 사용파일 객체를 가져올 수 있는 경우 -> 드래그 앤 드롭에서 드롭 이벤트가 발생할 경우->input 요소 사용 시 change 이벤트가 발생할 경우 파일의 이름을 읽는 예제 파일을 불러오는 태그를 사용하였고 onchange 이..

HTML5 강좌 21강 - 웹 스토리지 웹 스토리지란? 클라이언트에 간단한 정보를 저장하기 위한 저장 공간입니다. 예를 들면 내가 어떤 사이트에 접속을 했는지, 몇 번째 접속인지.. 이러한 정보들을 기록할 수 있습니다. 쿠키는 저장공간이 4kb를 차지하고 유효기간이 존재하는 반면.. 웹 스토리지는 용량과, 유효기간에 대한 제한이 없습니다. 웹 스토리지의 저장 데이터는 키와 값으로 저장합니다. 데이터 = (키,값) 웹 스토리지는 용도에 따라 로컬 스토리지, 세션 스토리지로 나눌 수 있습니다. 먼저 로컬 스토리지에 대해 알아보도록 하겠습니다. 1. 특징 (1)데이터 저장 시간에 제한이 없어 영구적 보관이 가능 (2)도메인마다 별도의 저장 영역을 생성 -도메인마다 생성된 로컬 스토리지에 서로 접근 불가 -같은..

HTML5 강좌 20강 - HTML5 태그 - 드래그 앤 드롭 이번 강좌에선 드래그 앤 드롭에 대해 알아보겠습니다.아마도 인터넷을 사용하다보면 종종 봤을텐데요..마우스를 이용하여 어떠한 콘텐츠를 끌어다 놓는 것을 의미합니다. *드래그 앤 드롭 처리 과정(1)드래그할 요소에 드래그 속성 지정(2)이벤트 지정 및 컨트롤(3)교환할 데이터에 대한 처리 드래그 앤 드롭 기능을 위해서는 이벤트 컨트롤이 필요한데요.이동 대상이 되는 요소 안에 이벤트에서 처리할 메소드를 속성으로 지정합니다. *드래그 앤 드롭 관련 이벤트(1)dragstart : 드래그 시작시 발생(2)drag : 드래그 중에 발생(3)dragend : 드래그 종료했을 때 발생(4)dragenter : 드래그 요소가 드롭 요소 범위 안에 들어올 때 ..

HTML5 강좌 19강 - HTML5 태그 - 입력양식 form 사용 예제 이번엔 지난 강좌에서 테스트 했던 form 입력양식을 이용하여회원가입 페이지를 하나 만들어 보겠습니다. 예제는 학교에서 동아리에 가입을 신청하는 신청서로 만들어보겠습니다.가입 신청서에 들어가는 일반적인 항목들을 넣어볼까요~ (1)이름(2)학부/학과(3)학년(4)학번(5)대학 입학 년도(6)이메일(7)주소(8)연락처(9)취미(10)SNS 주소(11)가입 동기(2)자기 소개 이정도 항목을 넣어보겠습니다. 테이블 태그와 입력양식 이용하여 form을 만들었습니다.지난 강좌들에서 배웠던 입력양식 타입들을 이용했죠.붉은색 * 표시는 required 타입의 항목들 입니다.그리고 이메일이나 전화번호 같은 항목은 양식을 정해주었습니다. requi..