본문 바로가기

전체 글160

CSS Position 속성 이해하기 CSS의 핵심 Position속성 이해하기 position 속성은 이해하기 조금은 어렵지만 꼭! 알아두어야 할 부분입니다. 그래서 이번 포스팅에서는 position의 설정 값에 대한 특징들에 대하여 알아보고, 설정값의 특징을 서로 비교해 가며 설명을 드려보고자 합니다. position 속성의 4가지 설정 값 - static(정적) : 기본값으로 position이 지정되지 않은 상태와 동일 합니다. - fixed(고정) : 화면의 절대적 위치로 설정 합니다. 위치는 top, right, bottom, left 속성을 이용합니다. - absolute(절대) : 화면이 아닌 에 의해 위치가 설정 됩니다. - relative(상대) : 안의 가장 가까운 요소에 의해 위치가 설정 됩니다. static 과 rela.. 2018. 3. 22.
CSS를 이용한 DIV 슬라이드 효과 주기 DIV 슬라이드 효과 만드는 방법 3단계로 나누어서 슬라이드 효과 만드는 방법에 대하여 알아 보겠습니다. 그리고 4단계에서는 적요 된 모습을 확인 해 보도록 하겠습니다. 적용 된 모습을 먼저 알고 싶다면 Step4 부분을 확인하시면 됩니다. Step1 먼저 div를 이용하여 효과를 적용 할 버튼 모양을 만들어 보도록 하겠습니다. 단순하게 사각형 모양의 중앙에는 '슬라이드 효과 버튼' 이라는 텍스트를 입력 하였습니다. 슬라이드 효과 버튼 ※ CSS 속성 참고 -webkit- : 크롬, 사파리에서 적용 -moz- : 모질라(FireFox)에 적용 -ms- : 마이크로소프트사의 인터넷익스플로러 에 적용 -o- : 오페라 웹 브라우저에 적용 box-sizing : border-box → border-box값으로.. 2018. 3. 13.
티스토리 친구하기(링크) 추가 하는 법 티스토리 친구하기 추가하는 법 티스토리에서 방문자에게 자신의 블로그를 쉽게 링크 추가 할 수 있도록 버튼을 추가하는 방법에 대하여 알아보도록 하겠습니다. 1단계 가장 먼저 관리화면에서 꾸미기에서 스킨편집으로 들어가야 합니다. 2단계 스킨편집화면에서 다시 html편집 으로 이동합니다. 3단계 HTML과 CSS 소스를 추가 해야 합니다. HTML 티스토리 친구하기 CSS .button_base { margin: 0; border: 0; font-size: 14px; text-align: center; vertical-align:middle; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-u.. 2018. 3. 9.
[스크래치코딩] 숫자 암기 테스트 구현하기 머리가 똑똑해지는 코딩 이야기 암기력 테스트 스크래치 코딩하기 설명 숫자를 보여주고 그 숫자들을 순서대로 맞추는 암기력 테스트 입니다. 기능설명 1. Start 버튼을 클릭하면 몇자리에 도전 할지 물어 보게되고, 숫자로 입력을 받게 됩니다. 2. 입력받은 숫자만큼 랜덤하게 숫자가 보여지고, 숫자를 클릭하여 그 숫자들을 순서대로 맞추면 됩니다. 스프라이트 구성 1. 맞추기위해 클릭하는 숫자 스프라이트가 0에서 부터 9까지 있습니다. 2. 문제를 보여주는 스프라이트가 하나 있습니다.(결과를 보여주는 코딩 포함) 3. 시작 버튼 스프라이트가 있습니다. 코딩 1. 시작버튼 스프라이트 코딩 ● 이 스프라이트가 클릭될 때(시작 버튼이 클릭 될 때) - 초기화 함수 호출 - 입력받은 수 만큼 반복하며 램덤으로 숫자를.. 2018. 3. 7.