본문 바로가기

Programming

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

티스토리툴바