Amazing Story

OK캐쉬백 적립하고 계시다면,꼭 알아야 할 꿀팁입니다. 오늘 소개할 어플은 OK캐쉬백 락_오락(오케이캐쉬백 포인트 잠금화면 Locker 시럽 Syrup월렛) 입니다.(클릭하시면 구글플레이스토어로 이동합니다) 이름이 어마어마하게 길지만,그냥 잠금화면 어플이에요 저번에 소개했던돈버는 만보기 잠금화면 캐시워크처럼잠금화면에서 포인트를 적립할 수 있는 어플입니다^^ OK캐쉬백 포인트를 쉽게 자주 많이 적립할 수 있는 어플이에요OK캐쉬백 포인트를 모으는 분이라면사용하면 좋은 어플이라고 생각합니다. 요즘 잠금화면으로 나오는 어플이 많아서조금 귀찮으실 수도 있지만, 잠금화면 어플 깔아놓으면 하루에 100~ 200포인트는 기본으로 쌓이는 것 같아요. 휴대폰 화면을 껐다 켤 때마다 포인트가 적립되는 형태에요(항상 포인트가..

사무실에 꼭 있는 맥심 믹스커피~달달해서 점심먹구 한번씩 생각나는데요, (이왕이면 화이트골드^^)그냥 커피만 먹을 게 아니라포인트도 적립해보면 어떨까요? 오늘은 OK캐쉬백 적립 어플을 소개해드릴까 합니다.정식 명칭은 OK캐쉬백 [즐거움이 포인트다] 입니다. (클릭하시면, 구글플레이스토어로 이동합니다) 어플을 실행하시면 이렇게 생긴 홈화면을 만나보실 수 있어요. 아래로 스크롤 하면 훨씬 많은 광고와 적립가능한 포인트가 많지만, 패스하구요맥심커피 박스에 붙어있는 OK캐쉬백 쿠폰을 적립해 볼께요~ 1. 먼저 쿠폰을 준비해주세요. 제가 모은건 이렇게 생겼네용~ 2. 상품쿠폰적립 탭으로 이동하세요.(홈화면에서 메뉴탭이 있는 부분을 오른쪽으로 좀 많이 움직여야돼요. 아니면 메뉴탭 오른쪽 끝의 화살표 버튼을 눌러서 ..

오늘은 코딩 기초를 공부하기에 좋은 사이트를 추천해드리려고 합니다.이고잉님의 강의도 들을 수 있고,웹의 개념에 대해서도 잘 정리 할 수 있는 완전 강추바로생활코딩 입니다. 메인 페이지는 다음과 같습니다.생활코딩에서 볼 수 있는 강의목록은 다음과 같습니다. 한눈에 봐도 언어별로, 서버-클라이언트 별로, 개발도구 및 프로젝트 관리까지!!정말 다양하게 준비가 되어 있는데요. 저도 웹 프로그래밍에 처음 입문할 때 한 차례씩 보기 시작했던 HTML 코스!새록새록하네요물론 완전 졸업은 아니에요~ 모르는 거 있을 때마다 잠깐잠깐 찾아보거나, 강의 듣기가 좋답니다.영상도 너무 길지도 짧지도 않게 10분이라~짬짬히 공부하기가 참 좋습니다. 특히, 먼저 공부하셔야 할 것들입니다없습니다. 여기서 시작하시면 됩니다! 아무 준..

8. z-index- 포지션을 적용한 요소는 z-index(레이어개념)를 사용할 수 있음- z-index 미적용시 가장 마지막에 작성한 요소가 가장 상위에 배치됨- z-index는 0을 기준으로 음수 양수 입력이 가능하며 수치값이 높을 수록 상위에 배치- 일반적인 z-index입력수치는 양수값을 기준으로 작성- 계층구조에서 z-index는 상위요소의 z-index에 종속됨. 즉 상위요소의 z-index보다 수치가 높더라도 상위요소의 z-index보다 우선하지 않음 ■ 예시 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162z-index *{margin..

7. 포지션이란- 요소를 화면에 배치하기 위한 기법으로 기준점을 이용하여 요소를 특정 위치에 배치하는 방법- 기준점 및 배치방법에 따라 절대포지션, 상대포지션, 고정포지션 세가지 방법을 사용(1) Position 종류- Absolute Position(브라우저 또는 상위요소를 기준으로 배치하는 방법)- Relative Position(자기자신을 기준으로 배치하는 방법)- Fixed Position(스크린을 기준으로 배치하는 방법) (2) Position사용시 기준좌표 입력방법- 포지션 적용시 기준이 되는 요소의 Edge중(이때 Edge는 top, right, bottom, left)로부터 자기자신의 Edge까지의 거리값을 입력(3) Position 요소 z-index- 포지션을 적용한 요소는 포토샵의 레..

6. 디스플레이- 브라우저가 요소를 화면에 나타내는 방법을 제어하는 속성으로 block, inline, inline-block 등이 있다. (1) Block 요소- 블록요소는 줄바꿈이 되어 표현됨- 블록요소의 가로크기는 부모요소만큼 적용- 블록요소의 높이는 콘텐츠 크기만큼 적용- 블록요소에 width값을 적용하여 부모요소의 가로 크기보다 작더라도 가로전체는 해당요소의 영역으로 유지- 블록요소는 마진과 패딩을 적용할 수 있고 다른 블록요소에 영향을 줌 ■ 예시1 123456789101112131415161718192021디스플레이 속성 .box{border: 10px solid #000;} .box p{border: 3px solid #f00;} .box .b1{width: 500px;} .box .b2{..

(8) text-align- 인라인 요소의 가로정렬을 표시- 인라인 요소는 텍스트, 이미지, 폼요소- 스타일은 인라인 요소를 감싸는 "블록" 요소에 작성- 사용하는 값은 left, center, right, justify를 사용한다. ■ 예시1 12345678910111213141516171819202122232425262728text 스타일 *{margin:0; padding: 0;} .align{border:2px solid #333;} .right{text-align: right;} .center{text-align: center;} .justify{text-align: justify;} text-align 왼쪽 오른쪽 가운데 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌우 정렬 좌..

5. 타이포그래피(Typhography)- 글자와 문단의 속성을 제어하며 다음과 같은 스타일을 사용한다(1) 스타일 종류 1) 글자가. font-family나. font-size다. line-height라. font-weight마. font-style바. font-variant 2) 문단가. text-align(인라인 요소의 가로정렬 셋팅)나. text-indent(들여쓰기)다. text-decoration(글자장식 밑줄)라. text-transform(대문자 소문자)마. vertical-align(인라인 요소의 수직위치 정렬)바. letter-spacing(자간)사. word-spacing(단어와 단어사이)아. white-space(공백문자처리)자. word-break(줄바꿈처리) (참고)상속이란- 부..

(7) 배경(background)- 배경속성은 마진영역을 제외한 박스영역에 설정할 수 있고 다음과 같은 속성이 있음 (요약) 배경속성의 종류가. background-color나. background-image다. background-repeat라. background-position마. background-attachment바. background-size ※ 예제를 시작하기 전에 준비물을 알려드리려고 합니다. 저는 설명을 위해 20px*20px의 하트 이미지를 사용했어요. 크기는 상관없고, 실습용 이미지를 준비해주세요^^ 가. background-color- 모든박스의 배경색은 투명이며, 폼요소는 배경색이 미리 지정되어 있음- 요소를 투명하게 만들려면, background-color: transpare..

(6) 박스모델 정리 1) width - 입력한 크기만큼만 적용됨- 부모요소의 width값을 그대로 사용2) 배경색 : 콘텐츠 영역(width, height) + padding + 테두리※ margin, padding, border를 각 크기를 주지 않을 경우에는 배경색을 주었을 때, 모두를 포함해서 배경색으로 나타납니다. ■ 예시1 1234567891011121314151617박스모델 정리 *{margin:0; padding:0;} .test1{background-color:#f00;} .test2{background-color:#0f0; width:300px;} width 콘텐츠 width값 입력한 경우 ■ 실행결과1 3) 자식요소는 부모요소의 width값을 사용함. 상속받음. 4) 자식의 넓이가 부..