물공's의 딥러닝

이번 포스팅에서는 스프라이트 이미지에 대해 설명을 하도록 하겠습니다. 비록 제목이 "스마트폰 어플 만들기" 이지만 어플은 안만들고 스마트폰 레이아웃이 어떻게 이루어지는가를 알아보는 포스팅입니다. STEP1. 스프라이트 이미지가 무엇인가?스프라이트 이미지란 이미지를 여러개 뭉쳐놓은 것 입니다. 스프라이트 이미지가 무엇인지 한번 사진을 통해 알아보도록 할게요 위 이미지가 바로 스프라이트 이미지 입니다.물론 실제 사용할때는 이렇게 붙여서 사용하지는 않아요~ 1. 일단 사용할 이미지를 포토샵으로 만들어 놓습니다. 이렇게 따로 따로 만들어 줘요~ 2. http://csssprites.com 에서 스프라이트 이미지를 만듭니다. 이렇게 파일을 순서대로 넣어주시고 설정을 해줍니다. 설정을 완료하고 GENERATE를 클..

STEP 1. 페이지 구성하기 가장 먼저 Visual Studio Express 2013 for Web 프로그램을 이요해서 HTML파일을 만들어 줘요 그 다음에 style 부분에 페이지를 구성을 해줘요 이렇게 태그를 많이 사용한 이유는 공부를 목적으로 어떻게 스마트폰 어플이 이루어지나 좀 더 자세하게 알아보기 위해서 이렇게 사용한 것 이에요 STEP 2. 초기화 하기 페이지 구성을 해보았으니 이제 스마트폰 어플리케이션을 만들기 전에 초기화를 먼져 해볼게요 태그 내부에 초기화 코드를 입력을 해주었어요 *{ margin:0; padding:0;} 이 부분은 전체 선택자가 사용이 되었는데요margin:0 과 padding:0 는 margin이 밭깥쪽 영역, padding이 안쪽 영역 이라고 앞에서 이야기를 하..

Section #1 안드로이드의 웹 브라우저는 모두 같은 브라우저인가? No. 아닙니다. 안드로이드 OS(운영체제)마다 버전 같아도 브라우저는 다룰 수 있습니다. 쉽게 말해서 어떤 스마트폰에는 지원하는 브라우저가 있는 반면 어떤 스마트폰에는 지원하지 않는 브라우저도 있습니다. Section #2 그러면 이제 대표적인 스마트폰 웹 페이지를 만들때 주의해야할 점에 대해 말씀드리겠습니다. 1. overflow 속성을 사용해 스크롤(scroll)을 넣을 수 없습니다.- 스마트폰 웹 브라우저는 대부분 overflow 속성에 scroll을 적용할 수 없습니다.(물론 가능한 스마트폰 웹 브라우저도 존재합니다.) 2. 상태 선택자를 사용할때 주의를 해야합니다.- 스마트폰은 터치를 사용하므로 화면을 누르는 순간 바로 클..

이번 포스팅에서는 컨텐츠를 작성할게요 ㅎㅎ그냥 내용물을 적는다고 생각하시면 되요 홈페이지 만드는거 아직 내용이 더 남았찌만 나중에 정리할게요ㅠㅠ 힘드네요 ㅋㅋ

이번에는 전 시간까지 만든 헤더를 폰트도 변경하고 nav를 수평으로 정렬하는 시간을 가져볼까해요 ㅎㅎ 일단 폰트먼저 바꿔보도록 할게요 http://www.google.com/fonts/여기 들어가셔서 원하는 폰트를 선택하세요 ㅎㅎ 여기 나와있는 소스를 복사해서 붙여넣기 해주세요 여기다가 붙여넣기!!! 그리고 밑에 보이는 소스를 복사해 주세요 그런 다음에 바꾸고싶은 폰트 위치에다가 아래처럼 붙여넣기 해주세요 ㅎㅎ 저는 타이틀의 폰트를 바꿀거니까 이렇게 해줄게요 ㅎㅎ 그러면 이렇게 보입니다. ㅎㅎ 이제 옆에 navigation영역을 좀 더 이쁘게 바꾸어보도록 할게요 해석해 보자면"main_gnb라는 id를 가진 HTML태그의 자손인 ul태그에서 내용물이 넘쳐나면 숨김표시(hidden)으로 해주고main_gn..

전 시간에 HTML로 기본적인 내용을 짯으니이번에는 CSS를 사용해서 좀 더 이쁘기 설정을 해보도록 할게요 위에 보이는 사진이 CSS 적용하기 전 입니다. 이제 적용을 해보도록 할게요 ㅎㅎ 중앙 정렬하는 내용은 암기해주세요! 여기서 /* 절대 좌표*/이 부분 있쬬? 지금은 아무런 변화가 없을거에요 그치만 좀있다가 nav들의 위치를 절대 적으로 위치를 지정해 주기 위해서 사용하는 것 입니다. 여기서 잠깐 개념 위치 속성에 대해 개념정리좀 하고 넘어가도록 할게요 절대적 좌표와 상대적 좌표가 무슨 뜻 인가요?절대적 좌표는 x, y 좌표를 설정하여 절대적 위치를 지정해 주는 것 입니다.쉽게 말해서 요소의 위치를 개발자가 마음대로 정해줄 수 있어요 상대적 좌표는 요소를 입력한 순서대로 상대적으로 위치를 지정해 주..

들어 가기 전에 모두 NAVER에 들어가셔서 오른쪽 마우스 클릭후 요소검사를 클릭해 주시기 바랍니다.[저는 Chrome 브라우저 사용중] 좀..잘 안보이죠?밑에 사진을 분리해서 다시 보여드릴게요 이 헤더부분이 위 사진에서 보여지는 부분 입니다. 오늘 이번 포스팅에서 저도 이 헤더 구조를 작성해보도록 할거에요 ㅎ 먼저 header영역의 내용을 입력하기 전에 영역 분리를 먼저 합니다. hgroup -> 제목 영역 그룹nav -> 고정 페이지 이제 내용을 입력해보도록 할게요 여기서 list앞에 어떠한 모양 표시도 안붙은 이유는style태그에서 초기화를 body 태그에 list-style:none; 으로 해주었기 때문에 아무런 표시가 안나타는 것 입니다. 그리고 a태그의 은 어떠한 내용을 클릭히 원래는 # 공간..

전 시간에 이어서 할게요전 시간에는 레이아웃을 행 영역으로 분리를 하고 그 분리한 행 영역의 내부 영역을 또 분리 해 주었어요 이번에는 음..그냥 따라와요ㅋㅋㅋ 먼저 각 부분을 쪼개어서 설명을 할거에요 WHY?? 공부하는 학생이니까 ㅋㅋㅋ 실제로는 이렇게 style태그를 여러개 만들어서 쪼개지 않는다고 합니다. 그러면 따라와요 이렇게 페이지를 스타일 태그를 이용하여 먼저 쪼개어 줍니다.이제 본격적으로 들어가기 전에 웹 페이지를 초기화를 가장 먼저 해준다음에 들어갈 거에요 예전에 포스팅했던 CSS3 기본 선택자 -part1-에서 언급한것처럼 HTML태그들은 브라우저에서 설정된 기본 스타일 값을 가지고 있습니다.그래서! 이런 기본 스타일 값을 없애주어야 하기 때문에 초기화를 가장 먼저 하는 것 입니다. [해..