My log

HTML5 & CSS3 [CSS] Grid 사용하는 법 Grid란? Grid는 웹페이지의 구역을 나눌 때 사용하는 최신 기술입니다. div vs span div와 span은 어떠한 의미도 갖고 있지 않은 태그로 개발자는 이 태그들을 사용해 관련 있는 정보를 하나로 묶어 구역을 형성할 수 있습니다. 블록 레벨로 묶고 싶을 경우는 div를 인라인 레벨로 묶고 싶을 경우는 span을 사용하시면 됩니다. div와 span은 grid를 사용할 때 자주 사용하는 태그이니 꼭 기억해주시길 바랍니다. Grid 사용하기 Grid를 사용하기 위해서는 두가지 행위를 해야합니다. 먼저, 태그들을 감싸는 태그를 추가하고 이 태그의 display 속성의 값을 grid로 설정해야합니다. 그리고 grid-template-columns와 grid-template-rows 속성을 추가해야합..
HTML5 & CSS3 [CSS] 미디어쿼리 사용하는 법 화면의 크기에 따라 웹페이지의 요소가 바뀌는 반응형 웹 디자인을 만드는 방법은 의외로 간단합니다. 미디어쿼리를 사용한다면 누구나 쉽게 반응형 웹을 만들 수 있습니다. 미디어 쿼리 사용하기 미디어 쿼리를 사용하기 위해서는 미디어 쿼리 예제 800px을 기준으로 화면의 크기가 800px 이상일 경우와 800px 미만일 경우의 디자인을 다르게 해보겠습니다. 아래의 코드는 화면의 크기가 800px 이상일 경우의 화면 디자인을 정의하는 코드입니다. 이 코드에 미디어 쿼리를 추가해 화면의 크기가 800px 미만일 경우의 디자인을 새로 정의해야합니다. MediaQuery Menu1 Menu2 Menu3 Menu4 Menu5 화면이 800px보다 작다는 것은 화면의 최대 크기가 800px이라는 뜻입니다. 이 경우 조건..
Programming 윈도우에 Apache 설치하는 법 및 사용법 Apache를 직접 설치하는 것에는 많은 어려움이 따릅니다. 하지만 BitNami WAMP를 설치함으로써 Apache를 내 컴퓨터에 설치할 수 있습니다. BitNami WAMP에서 WAMP의 A는 Apache의 약자로 BitNami는 Apache를 사용하기 위한 기능들을 제공합니다. Apache 설치하는 법 먼저, 검색창에 BitNami wamp를 검색하신 후 사이트에 접속해주세요. 사이트에 접속해 아래의 사진과 같은 화면이 나타났다면 붉은색 화살표가 가리키는 부분을 클릭해주세요. 그럼, 다운로드할 수 있는 화면으로 넘어갑니다. 이제 'Download for Windows 53-bit'를 클릭해 다운로드를 진행해주세요. 만약, 아래의 사진과 같은 창이 나타났을 때 회원가입을 원하시지 않으신다면 아래쪽의 ..
Programming GitHub 사용하는 법 프로그래밍을 배우는 사람이라면 자신이 개발한 코드를 관리하는 것에 어려움을 느낄 수 있습니다. 이럴 때 깃허브를 사용한다면 코드를 손쉽게 관리할 수 있습니다. 지금부터 깃허브를 사용하는 방법에 대해 알려드리겠습니다. 회원가입 및 로그인 깃허브를 사용하기 위해서는 먼저 깃허브에 회원가입을 해야합니다. 검색창에 github를 검색해 github 사이트에 접속해주신 후 Sign Up을 눌러 회원가입을 해주세요. 회원가입을 마치셨다면 로그인을 해주세요. 저장소 생성 로그인을 하고나면 아래와 같은 화면이 나타납니다. 이제, 코드를 깃허브에 등록하기 위해서 저장소(repository)를 만들어야합니다. 우측 상단에 + 아이콘을 누른 후 New repository를 찾아 눌러주세요. Repository name에 사..
JavaScript [JavaScript] 버튼 클릭 이벤트 만들기 자바스크립트를 사용해 버튼 클릭 이벤트를 만들고자 하는 경우 html의 onclick 속성을 사용합니다. html의 onclick 속성은 onclick="" 형태로 사용하는데 큰따옴표("")안에 자바스크립트 코드가 들어가야합니다. 큰따옴표 안의 자바스크립트 코드에 따라 버튼 클릭 시 발생하는 동작이 달라집니다. 예를 들어, 화면의 버튼을 클릭했을 때 배경색과 글자색을 바꾸는 이벤트를 구현해보겠습니다. 배경색과 글자색 변경 위의 코드를 실행시킨 화면을 보시면 화면의 배경색과 글자색이 바뀌는 것을 확인하실 수 있습니다. 위의 코드를 실행시킨 화면을 보시면 화면의 배경색과 글자색이 바뀌는 것을 확인하실 수 있습니다. 위의 코드에서 색을 변경하는데 사용한 자바스크립트 코드는 다음과 같습니다. document.q..

티스토리툴바