물공'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이 안쪽 영역 이라고 앞에서 이야기를 하..

이번 포스팅에서는-동위 선택자-반응 선택자-상태 선택자에 대해 예제와 함께 알아보도록 하겠습니다. 가장 먼저 동위 선택자! 1. 동위 선택자동위.. 동위라는 뜻은 같은 위치에 있는 이라는 의미를 가지고 있습니다.(다들 아시겠지?;;)따라서 동위 선택자는 같은 위치에 있는 것들을 선택한다 라는 뜻 입니다. 사용 문법선택자A + 선택자B -> 선택자 A 바로 뒤에 위치하는 선택자 B를 선택 선택자A ~ 선택자B -> 선택자A 뒤에 위치한 선택자 B를 선택 예제를 통해서 한번 알아보도록 할게요 일단 결과는 이렇게 나왔어요 여기다가 이제 style을 입혀볼게요 이제 동위 선택자가 어떤 의미인지 아셨나요?? 이 동위 선택자는 CSS3 애니메션을 사용해 동적으로 움직이는 레이아웃을 구성할 때 동위 선택자를 사용한다..

이 번 시간에는 후손 선택자와 자손 선택자에 대해 알아보도록 할게요 자 일단! 후손과 자손이 무엇이냐? 우리 인간 관계랑 똑같아요 후손 : 어떠한 태그 아래에 위치한 모든 태그자손 : 어떠한 태그 바로 아래에 위치한 태그 1. 후손 선택자특정한 태그 아래에 있는 후손을 선택할때 사용 예제를 보면서 좀 더 자~~~세하게 자손과 후손에 대해 알아볼게요 자! 일단 이렇게 입력을 해줍니다. 그러면 출력 결과는 요렇게 나올거에요 이제 해석을 들어가도록 할게요 이 문장을 보시면 태그로 묶어져 있습니다.※div 태그는 간단하게 벽돌쌓기 라고 생각하기!!! 일단 첫번째 div의 id(이름) 은 header 이라고 정하였습니다.그리고 div 태그 내부에 포함되어 있는 h1 태그와 또 다른 div 태그들이 있는데요 여기서..

오랜만에 CSS에 대한 개념정리를 포스팅하네요(2일밖에 안됬찌만;;ㅋㅋ) 이번 포스팅에서는 속성 선택자에 대해 포스팅을 할건데요 이것은 크게 두개로 나누어 집니다. -기본 속성 선택자-문자열 속성 선택자 자~그럼 시작하겠습니다. 1.기본 속성 선택자 간단하게 예를 들어서 설명하자면input 태그를 사용시 input태그에만해도 많은 속성이 존재합니다.그래서 이 속성마다 스타일을 적용할때 사용이 되는것이 기본 속성 선택자 입니다. 사용형태 선택자[속성] -> 특정한 속성이 있는 태그를 선택 선택자[속성=값][속성=값] -> 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택 이제 코딩을 해보며 한번 알아보도록 할게요 이제 대충 감이 오시나요??"input 태그를 사용한 곳에서 type=text 또는 p..

선택자 중에서 전체 선택자는 이전 포스팅에서 설명을 해드렸습니다. 그래서 이번 CSS3 기본 선택자 -part1- 에는 전체 선택자를 제외한 -태그 선택자-아이디 선택자-클래스 선택자 에 대해 설명을 드리도록 하겠습니다. START~ 1. 태그 선택자 태그 선택자란 특정한 태그를 선택할때 사용이 되는 선택자 입니다.설명으로 하면 주구장창이니 예제를 통하여 설명을 하도록 하겠습니다. 일단 부분에다가 이렇게 HTML태그만 적어줍니다. 그러면 이렇게 뜨는게 맞는거죠?? 여기서 잠깐! P태그에 대해 간단하게 다시 설명하고 넘어갈게요 P태그 문단을 나누는 태그 완전 간단하게 설명했죠?ㅎㅎ HTML만 쓰면 저렇게 너무 허접해 보여요 그래서 저는 스타일 태그를 사용할거에요 요렇게 스타일 태그를 적용해 줍니다. 그러면..

이번 시간에는 전체를 선택하는 선택자에 대해 알아볼게요 전체 선택자란 무엇인가요? HTML 페이지 내부의 모든 태그를 선택하는걸 의미합니다. 그러면 사용 방법은? *을 사용합니다. 간단한 예제를 통해서 알아볼게요바로 이전시간에 포스팅한 내용은 h1태그만 css를 입혔습니다. 그치만 여기선!!! 요렇게 h1을 -> * 로 바꾸어 줍니다. "전체 태그들을 색을 빨강색 배경은 주황색 으로 바꿀래!!!" 실행을 할게요 짠~~~ *선택자를 쓰면 전체 태그를 선택합니다.

이번 포스팅에선 제목 글자 태그에 대해 설명하도록 할게요 h1 ~ h6는 무엇인가요? h라는 뜻은 header를 의미합니다. 그러면 뒤에 숫자 붙은건 뭐에요? 숫자는 크기 및 우선 순위를 나타내는 것 입니다.숫자가 작을수록 글자 크기가 커져요~^^ 예제를 통해 한번 알아보도록 할게요 뭐..특별히 설명 안해도 다 이해하시겠죠?