웹 개발자 & 디자이너 PJW48의 생각보관창고 블로그입니다.
이 포스트에서는 PHP에서 MySQL 데이터를 간단히 읽어들이는 방법에 대해 포스팅합니다. 우선 데이터베이스 이름이 ‘hello’이고 그 안에서 ‘product’라는 이름의 테이블이 다음과 같이 있다고 가정해 봅시다. name category price 신라면 라면 700 새우깡 과자 1000 안성탕면 라면 650 새우탕 라면 1100 포스틱 과자 1300 너구리 라면 900 감자깡 과자 700 육개장 라면 800 양파링 과자 1200 짜파게티 … 더 보기 “PHP에서 MySQL 데이터 읽어보기”
이 포스트에서는 PHP에서 JSON 데이터를 파싱하는 방법을 설명합니다. 일단 다음과 같은 JSON 파일이 gfriend.json이라는 이름으로 존재한다고 가정을 해 봅시다. { “name”: “여자친구”, “alias”: “GFRIEND”, “members”: [ “소원”, “예린”, “은하”, “유주”, “신비”, “엄지” ], “albums”: { “EP 1집”: “Season of Glass”, “EP 2집”: “Flower Bud”, “EP 3집”: “Snowflake”, “정규 1집”: “LOL”, “EP 4집”: “THE AWAKENING” } … 더 보기 “PHP로 JSON 파싱하기”
이 포스트에서는 HTML의 6가지 구절 태그에 대한 내용을 다룹니다. HTML에서 쓸 수 있는 구절 태그는 어떤 구절 내에서 해당 태그로 감싼 내용에 어떤 효과를 주면서 그 의미를 분명히 하는 데 쓰입니다. HTML5에서 추가된 <mark> 태그도 같은 이유로 추가되었습니다. HTML5 전부터 쓰여 지금도 표준으로 쓰이는 6가지 구절 태그들은 다음과 같습니다. <em> 글에서 중요한 부분을 표시합니다. 기본적으로 … 더 보기 “HTML의 구절 태그 6가지”
이 포스트에서는 PHP에서 문자열 결합하는 방법에 대해 포스팅합니다. 일단 간단한 예제 코드를 서술하자면 다음과 같습니다. <?php $str_a = ‘Hello, ‘; $str_b = ‘world!’; echo $str_a . $str_b; ?> 이는 ‘Hello, ’와 ‘world!’를 결합해서 ‘Hello, world!’로 출력하는 예제입니다. 잘 보면 결합될 문자열 사이에 점(.)이 찍혀 있습니다. 다른 프로그래밍 언어에서는 문자열끼리 결합할 때 대부분 덧셈(+) 기호를 쓰지만 … 더 보기 “PHP 문자열 결합하기”
이 포스트에서는 <blockquote> … </blockquote> 태그와 <q> … </q> 태그에 관한 내용을 설명합니다. 이 두 태그는 인용문을 표현하기 위해 사용하는 태그라는 공통점이 있습니다. 하지만 다른 점이 있는데, 이 두 태그의 차이는 요약하자면 <div> 태그와 <span> 태그의 차이와 비슷합니다. <blockquote> 태그는 이름이 block과 quote의 합성어라는 특징에 걸맞게 인용문을 통째로 하나의 블록으로 할당합니다. 반면에 <q> 태그는 인용문을 … 더 보기 “HTML의 <blockquote> 태그와 <q> 태그”
이 포스트에서는 CSS의 그라디언트 기능을 이용하여 줄무늬를 만드는 방법에 대해 설명합니다. 일단 다음 코드를 봅시다. selector { background: #55aaff; background: -webkit-linear-gradient(left, #55ffff 0, #55ffff 50%, #5555ff 50%, #5555ff 100%); background: -moz-linear-gradient(right, #55ffff 0, #55ffff 50%, #5555ff 50%, #5555ff 100%); background: -o-linear-gradient(right, #55ffff 0, #55ffff 50%, #5555ff 50%, #5555ff 100%); background: linear-gradient(to right, #55ffff 0, #55ffff … 더 보기 “CSS 그라디언트 기능을 응용하여 줄무늬 만들기”
이 포스트는 HTML5에서 추가된 <details> … </details> 태그에 관한 내용입니다. 이 태그는 기존에 자바스크립트를 이용해서 구현하였던 내용 접기/펼치기 기능을 자바스크립트 없이 구현하기 위한 태그입니다. 블로그 등을 보면 ‘더 보기’ 단추가 있고 누르면 숨겨져 있던 내용들이 나오며 ‘접기’ 버튼을 누르면 내용이 다시 숨겨지는 기능이 있었는데 바로 이 기능을 자바스크립트 없이 구현하기 위해 이 태그가 추가된 것입니다. … 더 보기 “HTML5에서 추가된 유용한 태그 <details>”
이 포스트에서는 CSS로 그라데이션 텍스트를 구현하는 방법을 설명합니다. 예전에는 텍스트에 그라데이션을 입히려면 이미지 파일을 사용하거나 텍스트 한 글자씩 색을 입히는 방식을 사용해야만 했으나, CSS를 이용하면 이런 방식을 쓰지 않고도 간단하게 그라데이션 텍스트를 구현할 수 있습니다. 다음 CSS 코드를 봅시다. .gradtext { background: #55ffaa; background: -webkit-linear-gradient(left, #55ff55, #55ffff); background: -moz-linear-gradient(right, #55ff55, #55ffff); background: -o-linear-gradient(right, #55ff55, #55ffff); … 더 보기 “CSS로 텍스트에 그라데이션 입히기”
이 포스트에서는 CSS로 방사형 그라디언트를 구현하는 방법을 설명합니다. CSS로 선형 그라디언트 구현하기 포스트에서 CSS를 사용하여 선형 그라디언트(색이 끝에서 다른 끝으로 가면서 변하는 형식)를 구현한 바 있는데, 방사형 그라디언트(색이 한 중심점에서 둥글게 퍼져 나가면서 변하는 방식)도 같은 방식으로 가능합니다. 기본적으로 다음과 같은 형식의 코드를 사용합니다. selector { background: #55ffff; background: -webkit-radial-gradient(#55ff55, #55ffff, #5555ff); background: -moz-radial-gradient(#55ff55, #55ffff, … 더 보기 “CSS로 방사형 그라디언트 구현하기”
이 포스트에서는 CSS로 선형 그라디언트를 구현하는 방법을 설명합니다. 예전에는 배경색을 단색으로밖에 지정할 수 없어서 그라디언트를 구현하려면 이미지를 이용해야만 했습니다. 하지만 CSS3에서 그라디언트 기능이 추가되면서 그라디언트는 이미지 없이 구현할 수도 있게 되었습니다. 우선, 그라디언트를 구현하려면 다음과 같은 CSS를 사용합니다. selector { background: #55aaff; background: -webkit-linear-gradient(#55ffff, #5555ff); background: -moz-linear-gradient(#55ffff, #5555ff); background: -o-linear-gradient(#55ffff, #5555ff); background: linear-gradient(#55ffff, #5555ff); } … 더 보기 “CSS로 선형 그라디언트 구현하기”