물공's의 딥러닝

CSS3 버전부터 transform 속성이 사용 가능해 졌습니다. 그리하여 2차원 변환이 가능한데요 2차원 변환은 무엇이고 transform 속성은 무엇인지 바로 예제를 통해서 확인하도록 하겠습니다. 일던 이렇게 HTML페이지를 구성 해줍니다. 그다음 style 태그 내부에다가 이렇게 코딩을 해줘요 그러면 실행 결과가 위처럼 나옵니다. 여기까지는 별다르게 어려운것 느끼지 못하실거에요 이제! transform속성이 등장할거에요!!(긴장중..) 결과물에서 네모 박스가 잘려나와서 margin:20px 를 추가해주세요 그리고!!! 벤더 프릭스를 사용해 줍니다. 여기서 -ms, -moz, -o, -webkit 이 내용이 무슨 의미인지 모르시는 분들은 벤더프릭스 정리 [링크 Click] 위에 링크를 클릭해 주셔서 ..

벤더 프리픽스는 웹 브라우저마다 가지고 있습니다. 또 웹 브라우저마다 가지고 있는게 달라서 코딩을 할때 전부다 써 줘야 합니다. 이렇게 매번 -ms-, -webkit- 등과 같이 쓰기 귀찮을때 사용하는것이 바로 Prefix Free 플러그인 인데요 이 플러그인은 벤더 프리픽스를 사용하지 않아도 되게 만들어주는 라이브러리 입니다. Prefix Free 플러그인 홈페이지 : http://leaverou.github.io/prefixfree/

이번 포스팅에서는 스프라이트 이미지에 대해 설명을 하도록 하겠습니다. 비록 제목이 "스마트폰 어플 만들기" 이지만 어플은 안만들고 스마트폰 레이아웃이 어떻게 이루어지는가를 알아보는 포스팅입니다. 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. 상태 선택자를 사용할때 주의를 해야합니다.- 스마트폰은 터치를 사용하므로 화면을 누르는 순간 바로 클..

이번 포스팅에서는구조 선택자에 대해 알아볼건데요 구조 선택자는-일반 구조 선택자-형태 구조 선택자있습니다. 한번 알아보도록 하죠! 1. 일반 구조 선택자 음..뭐라 설명할지 모르겠네요 ㅎㅎ 그냥 특정한 위치에 있는 태그를 선택하는 선택자라고 기억해두세요바로 예제로 넘어갈게요 긴 설명은 하지 않겠습니다. 그치만 어떻게 변화하는지 잘 보시기 바랍니다. 아직까지는 그렇게 큰 변화는 없습니다. 저 overflow:hidden 이 무엇이냐?? 이전 포스팅에서도 말씀 드렸지만 정해진 박스에서 내용물이 박스를 넘어가면 넘어간 내용물을 보여주지 않겠다 라는 뜻 입니다. float:left -> 태그를 왼쪽에다가 위치 시킨다는 뜻 padding은 박스 안의 여백 입니다. 이와 친구인 애가 있쪄? 바로 margin인데요 ..

전 시간에 이어서 이번시간에도 상태 선택자에 대해 설명 하도록 하겠습니다. START~ focus선택자쪽만 보시기 바랍니다. 각각 input태그로 서로 다른 속성을 가진 네이버와 다음을 코딩 하였습니다. 그리고 CSS 부분에 input:focus+a 라고 입력을 하였습니다.focus는 초점이 맞추어진 input태그를 선택합니다.즉, css에서 선택한 곳에 마우스를 클릭하면 css에서 입력한 대로 style이 입혀져요 좀더 정확하게 알아보기 위해 내용을 약간 더 추가하도록 할게요 이렇게 속성이 기본값인 type=text인 input 태그를 작성을 해주고css에다가는 배경색을 갈색으로 해줍니다. 그러면 text입력창에 마우스를 클릭하면 위와같이 갈색으로 배경이 입힙니다. focus 상태 선택자에 대해 어느정..

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