이 포스트에서는 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로 선형 그라디언트 구현하기” 더 읽기
이 포스트에서는 CSS로 웹 폰트를 설정하는 방법에 대해 설명합니다. 웹 폰트로 사용할 수 있는 폰트는 대개 TTF, OTF, WOFF, WOFF2, SVG, EOT의 6가지가 있습니다. TTF 여러 곳에서 두루 사용되는 표준 트루타입 글꼴입니다. 거의 모든 브라우저에서 지원합니다. 다만 인터넷 익스플로러에서는 9부터 지원합니다. OTF TTF를 기반으로 한 오픈타입 글꼴입니다. TTF와 마찬가지로 거의 모든 브라우저에서 지원합니다. 다만 인터넷 … “CSS로 웹 폰트 설정하기” 더 읽기