최근 CSS 관련된 게시물을 올리다 보니 한눈에 보이는 결과물을 올리고 싶어졌다. 그럴 때 사용하는 유용한 사이트, Codepen!
오늘은 Codepen를 이용하여 어떻게 내 블로그에  HTML, CSS, JS 코드와 그 결과를 보여줄 지 알아볼 예정이다.

- 코드펜(Codepen) 이란?

  • HTML, CSS, JS를 직접 작성하고, 그 결과 화면을 바로 볼 수 있게 해주는 기능이 있는 사이트다.

 

- 사용방법

1. 로그인

Codepen 홈페이지에 접속하여, 회원 가입을 한다. 

 

https://codepen.io/trending

 

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

codepen.io

 

 2. 코드 작성

로그인을 한 후 좌측 상단에 [Pen]이라는 메뉴를 선택해 들어간다.

Pen 메뉴에 들어가게 되면 코드를 입력할 수 있는 화면이 나오는데, 원하는 내용을 입력하고 [Save] 버튼을 눌러 저장을 한다.

 

저장이 완료되면 화면 하단에 새로운 버튼들이 생성된다. 그 버튼 중에 [Embed]라는 버튼을 클릭해 보자.

 

3. 티스토리에 적용

2번 과정을 통해 코드펜 사이트 화면에 코드가 출력될 것이다.

설정할 부분이 있다면 여기서 설정하면 되고, 우측 하단에 나오는 코드를 복사해 주면 된다.
HTML, WordPressShortcode, Prefill Embed, Iframe 버전이 있는데 HTML 버전으로 코드를 복사했다.


코드를 복사한 후, 티스토리로 돌아와서 상단바에 "기본모드"라고 적혀있는걸 "HTML"모드로 변경한다.

그 후, 원하는 위치에 코드펜에서 복사한 코드를 붙여넣기 하면 끝난다.


4. 티스토리 적용완료

See the Pen Untitled by 손지인 (@tlyifual-the-bold) on CodePen.

 

 

 


Reference
https://mine-it-record.tistory.com/675
https://bio-info.tistory.com/71

- URL

URL(Uniform Resource Locator)은 자원이 실제로 존재하는 위치를 가리킨다.

- URI

URI(Uniform Resource Identifier)는 자원의 위치뿐만 아니라 자원에 대한 고유 식별자로서 URL을 의미를 포함한다.

 

- 자원을 식별하는 방식

URL과 URI의 개념을 명확히 알려면 우리가 인터넷 환경에서 자원을 식별하기위해 사용하는 방식을 알아야 한다.

Path Variable 방식

/user/1
/user/2
/user/3

Path Variable 방식은 위와 같다. 이는 어떤 특정한 자원을 보여줘야할때 사용된다.

Query Parameter 방식

/user?job=student
/user?job=student&age=10

Query Parameter 방식은 위와 같다. 이는 자원들을 필터링해서 보여줄때 사용된다.

 

 

- URL과 URI의 차이점

URI= 식별자, URL=식별자+위치

 

1. URL은 일종의 URI이다.

 

즉, URI가 더 포괄적인 개념이며 URL은 이 안에 포함된다.

 

2. URL은 프로토콜과 결합한 형태이다.

프로토콜(protocol)이란, 리소스에 접근하는 방법을 지정하는 방식이며, 일반적으로 https, http, ftp 또는 file 등을 말한다.

즉, 어떻게 위치를 찾고 도달할 수 있는지까지 포함되어야 하기 때문에 URL은 프로토콜 + 이름(또는 번호)의 형태이다. 

 

 

3. URI는 그 자체로 이름이 될 수 있다.

dev-record-levelup.tistory.com > URI

https://dev-record-levelup.tistory.com > URL, URI

 

URI는 그 자체로 이름이거나, 이름 + 위치를 나타낸 형태 모두가 해당된다. 



- URI URL 구조

URI, URL, URN 비교

 

  • Scheme: 리소스에 접근하는 데 사용할 프로토콜. 웹에서는 http 또는 https를 사용
  • Host: 접근할 대상(서버)의 호스트 명
  • Path: 접근할 대상(서버)의 경로에 대한 상세 정보

이처럼 크게 세 파트로 나눌 수 있으며, 참고로 경로(Path)에 해당하는 부분은 URN이라고 한다. 

 

 

 

 


Reference
https://www.elancer.co.kr/blog/view?seq=74
https://velog.io/@torang/URL%EA%B3%BC-URI%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

See the Pen Untitled by 손지인 (@tlyifual-the-bold) on CodePen.

 

- HTML

<label for="agree1" class="radio_box">
	<input type="radio" id="agree1" name="agree" value="동의" checked="checked" />
	<span class="on"></span>
	동의
</label>
<label for="agree2" class="radio_box">
	<input type="radio" id="agree2" name="agree" value="미동의" />
	<span class="on"></span>
	미동의
</label>

- CSS

.radio_box { display: inline-block; *display: inline; *zoom: 1; position: relative; padding-left: 25px; margin-right: 10px; cursor: pointer; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

/* 기본 라디오 버튼 숨기기 */
.radio_box input[type="radio"] { display: none; }

/* 선택되지 않은 라디오 버튼 스타일 꾸미기 */
.on { width: 20px; height: 20px; background: #ddd; border-radius: 50%; position: absolute; top: 0; left: 0; }

/* 선택된 라디오 버튼 스타일 꾸미기 */
.radio_box input[type="radio"]:checked + .on { background: #f86480; }
.on:after { content: ""; position: absolute; display: none; }
.radio_box input[type="radio"]:checked + .on:after { display: block; }
.on:after { width: 10px; height: 10px; background: #fff; border-radius: 50%; position: absolute; left: 5px; top: 5px; }

 


 
 


Reference
https://webdee.tistory.com/55

'Programming > css' 카테고리의 다른 글

[CSS] 스크롤바 스타일 커스텀  (0) 2023.08.03

- 스크롤바 커스텀

각 아래에 대한 CSS 코드를 추가해 주면 커스텀을 할 수 있다.

  • ::-webkit-scrollbar : 스크롤바 영역에 대한 설정
  • ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정
  • ::-webkit-scrollbar-track  : 스크롤바 뒷 배경에 대한 설정


* 영역::코드로 적용 대상을 제한하여 사용할 수 있다.


See the Pen Untitled by 손지인 (@tlyifual-the-bold) on CodePen.

 

- CSS

body::-webkit-scrollbar {
    width: 15px;  /* 스크롤바의 너비 */
}

body::-webkit-scrollbar-thumb {
    height: 10%; /* 스크롤바의 길이 */
    background: #BA55D3; /* 스크롤바의 색상 */
    
    border-radius: 10px;
}

body::-webkit-scrollbar-track {
    background: rgba(88, 50, 120, .1);  /*스크롤바 뒷 배경 색상*/
}

 

- 참고로 IE(익스플로러) 환경에서는 적용이 안될 수 있다고 한다.


 
 

 


Reference
https://gurtn.tistory.com/120

'Programming > css' 카테고리의 다른 글

[CSS] 라디오 버튼 - 커스텀 스타일  (0) 2023.08.07

개발자라면 한 번쯤은 써본 VSCode!
VSCode를 본격적으로 사용하기에 앞서 유용한 확장 프로그램 몇 가지를 추천하고자 한다.
(개인적으로 추천하고자 하는 익스텐션은 주황색으로 표시했으니 참고 바랍니다.)
 
* tips)
확장 프로그램 검색 및 추가하기 위해서는

[Ctrl + Shift + x] 단축키를 눌러주거나, 좌측 메뉴에 블럭처럼 생긴걸 눌러주면 이동할 수 있다.


- Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

 

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

marketplace.visualstudio.com

Auto Close Tag의 단짝태그
HTML에서 여는 태그나 닫는 태그 중 한 가지만 수정을 해도 두 가지 동시에 수정이 된다.

- Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

 

Auto Close Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text

marketplace.visualstudio.com

Auto Rename Tag와 함께 사용하는 유용한 플러그인이다. 여는 태그와 닫는 태그를 일일이 입력해야 하던 것을 입력태그만 입력하게 해 준다.

- Bracket Pair Colorizer 2
괄호 여러개가 겹쳐있는 경우에 어디가 어디로 연결되어 있는지 알기 힘들다. 그럴 때 사용하는 확장 플러그인으로 쌍이 되는 괄호에 맞춰서 색이 변하게 된다.
현재 커서의 위치가 어느 괄호 안에 있는지도 색으로 표시해준다.
-> VScode가 최신버전인지 확인하고 아래 설정에 들어가 "bracket" 이라고 검색해주면 내장된 기능을 사용할 수 있다고 한다!

- Color Highlight
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

 

Color Highlight - Visual Studio Marketplace

Extension for Visual Studio Code - Highlight web colors in your editor

marketplace.visualstudio.com

색을 지정할 때 rgb나 16진수(#F699CC) 등 색상코드로 입력하면 해당하는 색을 코드의 배경색으로 보여준다.
CSS를 입히는 과정에서 현재 무슨 색으로 적용하였는지 바로바로 볼 수 있다.

 - indent-rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

 

indent-rainbow - Visual Studio Marketplace

Extension for Visual Studio Code - Makes indentation easier to read

marketplace.visualstudio.com

들여쓰기를 무지개 색상으로 표현되어 코딩에 도움을 주는 프로그램이다.

- Highlight Matching Tag
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

 

Highlight Matching Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Highlights matching closing and opening tags

marketplace.visualstudio.com

페어 태그를 하이라이트 해주는 확장프로그램이다.
중첩되어 있거나 복잡한 태그 지옥을 분석할 때 유용하다.

- Korean Language Pack for Visual Studio Code
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko

 

Korean Language Pack for Visual Studio Code - Visual Studio Marketplace

Extension for Visual Studio Code - Language pack extension for Korean

marketplace.visualstudio.com

필요시 한국어 팩을 설치해 한국어로 설정할 수 있다.

- Material Icon Theme
https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

 

Material Icon Theme - Visual Studio Marketplace

Extension for Visual Studio Code - Material Design Icons for Visual Studio Code

marketplace.visualstudio.com

아이콘 테마를 설정할수 있다. 머티리얼 외에도 많은 테마가 있으니 취향에 맞게 선택하면 된다.

- Image Preview
https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

 

Image preview - Visual Studio Marketplace

Extension for Visual Studio Code - Shows image preview in the gutter and on hover

marketplace.visualstudio.com

이미지 URL 코드에 마우스를 올려놓으면 미리보기 이미지를 제공하는 확장 프로그램이다.

- Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

 

Live Server - Visual Studio Marketplace

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

marketplace.visualstudio.com

웹 개발을 한다면 정말 필수적으로 설치해야하는 확장프로그램이다.
플러그인 설치를 하게 되면 VSCode 우측 하단에 Go Live라는 버튼이 생기는데 이 버튼을 눌러주면, 현재 코딩을 브라우저에서 바로 확인할 수 있다.

- Live Preview
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

 

Live Preview - Visual Studio Marketplace

Extension for Visual Studio Code - Hosts a local server in your workspace for you to preview your webpages on.

marketplace.visualstudio.com

HTML을 작성하며 확인하기 위해 빈번하게 브라우저를 켜지 않고 VScode 프로그램 자체에서 라이브 화면을 볼수 있다.

- Active File In StatusBar
https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar

 

Active File In StatusBar - Visual Studio Marketplace

Extension for Visual Studio Code - Add statusbar entry to show path for currently active file.

marketplace.visualstudio.com

현재 작업중인 파일의 경로를 상태표시줄에 출력

- CSS Variable Autocomplete
https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables

 

CSS Variable Autocomplete - Visual Studio Marketplace

Extension for Visual Studio Code - Autocomplete CSS Variable support CSS, SCSS, LESS, PostCSS, VueJS, ReactJS and more

marketplace.visualstudio.com

CSS 변수에 대한 자동 완성 기능을 제공, 모든 css와 유사한 파일(SASS, LESS, CSS 지원)을 스캔하고 모든 변수에 대해 자동 완성 시킨다.

- GitLens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

 

GitLens — Git supercharged - Visual Studio Marketplace

Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerfu

marketplace.visualstudio.com

코드의 특정 단락이나 라인에 해당 내용이 언제, 어떤 사람에 의해 작성된 내역인지 커밋 정보를 흐린 글씨로 자동 표시. 코드상에 커서를 올릴때 마다 확인 가능하다.
또한, 코드 작성 중 바로 저장소를 탐색 및 비교도 할 수 있다.

- IntelliCode
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

 

IntelliCode - Visual Studio Marketplace

Extension for Visual Studio Code - AI-assisted development

marketplace.visualstudio.com

코드 추천 완성 기능
개발자가 IDE 에디터에 코드를 입력 중인 해당 행에 가장 알맞은 어플리케이션 프로그램 인터페이스 (API) 를 추천해줍니다. 스마트폰 키보드 앱의 자동완성 단어 추천기능과 흡사한 기능

- Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

 

Path Intellisense - Visual Studio Marketplace

Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames

marketplace.visualstudio.com

파일명 자동완성을 지원하는 익스텐션.
파일이나 이미지 등의 경로를 지정할 때 자동으로 경로를 보여주며, 이를 선택해서 지정할 수 있는 확장 플러그인
이미지 태그 경로나 CSS 배경 이미지 경로를 찾아갈 때 매우 편리하다.

- Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

 

Code Spell Checker - Visual Studio Marketplace

Extension for Visual Studio Code - Spelling checker for source code

marketplace.visualstudio.com

code spell checker 란 코딩 할 때 오타를 방지하는 에디터 플러그인이다.

 
 
 


Reference
https://velog.io/@kimheewon/%EB%82%B4%EA%B0%80-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-VS-code-%ED%99%95%EC%9E%A5-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8
https://mine-it-record.tistory.com/498https://cheershennah.tistory.com/m/131

- 정규 표현식이란? (Regular Expressions)

  • 문자열에 포함된 문자 조합을 찾기 위해 사용되는 패턴이다.
  • 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식 언어, 문자열의 검색과 치환을 위한 용도로 사용된다.

 

- 생성

-  정규 표현식 리터럴을 이용한 생성

  • 정규 표현식 리터럴은 슬래시(/) 기호로 시작하여, 슬래시(/) 기호로 끝난다. 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경할 수도 있다.

- RegExp 객체를 이용한 생성

 

- 예제

var regStr = /a+bc/;             // 정규 표현식 리터럴을 이용한 생성
var regObj = new RegExp("a+bc"); // RegExp 객체를 이용한 생성
regStr;                          // /a+bc/
regObj;                          // /a+bc/

 

 

- 검색(search)

var string = "Please visit Tistory!"
var position = string.search("Tistory"); // 13
  • 변수 string에는 (검색 대상이 될) 전체 문자열이 들어있다.
  • 찾으려는 문자열은 "Tistory"이며, search()를 이용하여 그 위치를 찾는다.
  • 검색에 성공하면, 해당 단어(Tistory)의 위치값이 변수 position에 저장된다. 해당 단어가 없으면, 변수 position에 저장되는 숫자는 -1이다.
  • search()의 위치값은, 제로(0)에서부터 계산해 나간다. 이 위치값에는, 띄어쓰기한 빈칸(공백)도 포함된다.

 

 

- 플래그(flags)

  • 정규 표현식을 생성할 때 플래그를 사용하여 기본 검색 설정을 변경할 수 있다.
  • 이렇게 설정된 플래그는 나중에 추가되거나 삭제될 수 없다.
플래그 설명
i 검색 패턴을 비교할 때 대소문자를 구분하지 않도록 설정함.
g 검색 패턴을 비교할 때 일치하는 모든 부분을 선택하도록 설정함.
m 검색 패턴을 비교할 때 여러 줄의 입력 문자열을 그 상태 그대로 여러 줄로 비교하도록 설정함.
y 대상 문자열의 현재 위치부터 비교를 시작하도록 설정함.

- 예제

var targetStr = "bcabcAB";
var strReg = /AB/;              // 검색 패턴 비교 시 기본 설정으로 대소문자를 구분함.
var strUsingFlag = /AB/i;       // new RegExp("AB", "i")와 동일함.
targetStr.search(strReg);       // 5
targetStr.search(strUsingFlag); // 2 -> 대소문자를 구분하지 않고 검색함.

 

 

- 특수 문자(special characters)

  • 문자열을 찾을 때, 숫자만을 검색하거나, 띄어쓰기를 찾는 등 정확히 일치하는 패턴보다 더 복잡한 조건을 사용하려면 특수 문자를 사용해야 한다.
특수 문자 설명
\ 슬래시(\) 다음에 일반 문자가 나오면 이스케이프 문자로 해석하고, 특수 문자가 나오면 일반 문자로 해석함.
\d 숫자를 검색함. /[0-9]/와 같음.
\D 숫자가 아닌 문자를 검색함. /[^0-9]/와 같음.
\w 언더스코어(_)를 포함한 영문자 및 숫자를 검색함. /[A-Za-z0-9_]/와 같음.
\W 언더스코어(_), 영문자, 숫자가 아닌 문자를 검색함. /[^A-Za-z0-9_]/와 같음.
\s 띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자를 검색함.
\S 띄어쓰기, 탭, 줄 바꿈 문자 등의 공백 문자가 아닌 문자를 검색함.
\b 단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색함.
\xhh 16진수 hh에 해당하는 유니코드 문자를 검색함.
\uhhhh 16진수 hhhh에 해당하는 유니코드 문자를 검색함.

- 예제(\d)

var targetStr = "ab1bc2cd3de";
var reg1 = /\d/;    // 2 -> 0부터 9까지의 숫자를 검색함.
var reg2 = /[3-9]/; // 8 -> 3부터 9까지의 숫자를 검색함.

- 예제( \s, \w)

var targetStr = "abc 123";
// 공백 문자를 사이에 두는 언더스코어(_)를 포함한 영문자 및 숫자로 이루어진 문자열을 검색함.
var reg = /\w\s\w/; // c 1

 

 

- 양화사(quantifier)

  • 정규 표현식에서는 특수 문자로 수량을 나타내는 다양한 양화사를 사용할 수 있다.
괄호 설명
n* 바로 앞의 문자가 0번 이상 나타나는 경우를 검색함. /{0, }/와 같음.
n+ 바로 앞의 문자가 1번 이상 나타나는 경우를 검색함. /{1, }/과 같음.
n? 바로 앞의 문자가 0번 또는 1번만 나타나는 경우를 검색함. /{0,1}/과 같음.

- 예제

var targetStr = "Hello World!";
var zeroReg = /lo*/;          // 문자 'l' 다음에 문자 'o'가 0번 이상 나타나는 경우를 검색함.
var oneReg = /lo+/;           // 문자 'l' 다음에 문자 'o'가 1번 이상 나타나는 경우를 검색함.
var zeroOneReg = /lo?/;       // 문자 'l' 다음에 문자 'o'가 0 또는 1번만 나타나는 경우를 검색함.
 
targetStr.search(zeroReg);    // 2
targetStr.search(oneReg);     // 3
targetStr.search(zeroOneReg); // 2

 

  • 또한, 물음표(?) 기호가 정규 표현식의 양화사(*, +, ?, {}) 바로 다음에 위치하게 되면, 가능한 많은 문자를 가지도록 패턴을 찾는 기본 설정과는 달리 해당 양화사가 가능한 적은 수의 문자만을 가지는 패턴을 찾도록 변경시킨다.

- 예제

var targetStr = "123abc";
var oneReg = /\d+/;           // 숫자를 검색함. /[0-9]/와 같음.
var anotherReg = /\d+?/;      // 숫자를 검색하지만, 가능한 적은 수의 문자를 가지는 패턴을 검색함.


targetStr.search(oneReg);     // 123
targetStr.search(anotherReg); // 1

 

 

- 괄호(bracket)

괄호 설명
a(b)c 전체 패턴을 검색한 후에 괄호 안에 명시된 문자열을 저장함. (ex : "abc"를 검색한 후에 b를 저장함.)
[abc] 꺾쇠 괄호([]) 안에 명시된 문자를 검색함. (ex : "abc"를 검색함.)
[0-3] 꺾쇠 괄호([]) 안에 명시된 숫자를 검색함. (ex : 0부터 3까지의 숫자를 검색함.)
[\b] 백스페이스 문자를 검색함.
{n} 앞의 문자가 정확히 n번 나타나는 경우를 검색함. n은 반드시 양의 정수이어야만 함.
{m,n} 앞의 문자가 최소 m번 이상 최대 n번 이하로 나타나는 경우를 검색함. m과 n은 반드시 양의 정수이어야만 함.
  • \b는 단어의 맨 앞이나 맨 뒤가 패턴과 일치하는지를 검색하는 특수 문자이고, [\b]는 백스페이스 문자를 검색하는 정규표현식이다. 이 둘을 혼동해서는 안 된다.

- 예제

var targetStr = "abc 123 abc 123";
var oneReg = /(\w+) (\d+)/;
var anotherReg = /(\w+) (\d+) \1 \2/;

targetStr.match(oneReg);     // abc 123, abc, 123
targetStr.match(anotherReg); // abc 123 abc 123, abc, 123

 

 

- 위치 문자

  • 정규 표현식에서는 패턴을 검색할 단어의 위치를 지정할 수 있다.
위치 문자 설명
^a 단어의 맨 앞에 위치한 해당 패턴만을 검색함. (ex : 'a'로 시작하는 단어의 'a'만을 검색함.)
a$ 단어의 맨 뒤에 위치한 해당 패턴만을 검색함. (ex : 'a'로 끝나는 단어의 'a'만을 검색함.)

- 예제

var firstStr = "Php";
var secondStr = "phP";
var strReg = /^p/;       // 'p'로 시작하는 단어의 'p'만을 검색함.
firstStr.match(strReg);  // null
secondStr.match(strReg); // p

 


 
 


Reference

http://www.tcpschool.com/javascript/js_regularExpression_concept

 

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] BroadcastChannel API란?  (1) 2022.11.24

php 모듈인 ZipArchive를 사용하여 압축파일을 생성할 수 있는데, 코드로 어떻게 사용하는지 살펴보자.

 

- ZipArchive

// 가상의 경로를 가진 배열 생성
$files = ['upload/zipFile_1.txt', 'upload/zipFile_2.txt'];
$filePath = $_SERVER['DOCUMENT_ROOT']."/";

$zip = new ZipArchive();

// zip 아카이브 생성하기 위한 고유값
$zipName = time()."zip";

// zip 아카이브 생성 여부 확인
if (!$zip->open($zipName, ZipArchive::CREATE)) {
    exit("error");
}

// addFile ( 파일이 존재하는 경로, 저장될 이름 )
foreach ($files as $fileName) {
  $zip->addFile($filePath.$fileName, $fileName);
}

// 아카이브 닫아주기
$zip->close();

// 다운로드 될 zip 파일명
$downZipName = "zip_test.zip";

// 생성한 zip 파일을 다운로드하기
header("Content-type: application/zip");
header("Content-Disposition: attachment; filename=$downZipName"); 
readfile($zipName);
unlink($zipName);

 

  • 고유의 ziparchive를 생성해주고 ziparchive 객체에 addFile 함수를 이용해서 파일을 넣어주는 작업을 거쳐 생성한다
  • 파일을 담은 ziparchive를 readfile 함수로 읽어 다운로드 시켜주고, unlink 함수로 readfile되어 생성된 파일을 지워준다.

 

-  만약 ZIP 파일에서의 올바른 형식이 아니란 오류가 발생한다면? 

  • addFile 과정에서 첫 번째 매게 변수로 넘긴 파일 경로에 파일이 존재하지 않아 파일을 찾지 못해 제대로 추가 되지 않아 발생하는 오류이다.
  • 아래 코드로 해당 경로에 정상적으로 일이 존재하는 것을 확인한 후 다시 원 코드를 작동시켜보자.
foreach ($files as $fileName) {
  echo file_get_contents($filePath.$fileName); // 해당 경로에 있는 파일 데이터를 가져옵니다.
}

- 다른 오류가 발생할 경우

  • 먼저 PHP 버전을 확인해보자. (PHP 5 >= 5.2.0, PHP 7, PECL zip >= 1.1.0)
  • 만약 아예 쓸 수 없는 클래스라는 오류가 발생한다면 php에서 이 클래스를 사용하겠다는 옵션을 php.ini 파일에서 풀어줘야한다고 한다. php.ini 경로는 phpinfo(); 를 통해 알 수 있으며, 여기서 아래의 주석을 제거해준다.
extension=php_zip.dll // 주석제거

설정 변경 후, 아파치 재시작 필수!

 

- 만약 내 서버에 ZipArchive 모듈이 없다면, 아래와 같이 설치가 필요하다.

apt-get install php-zip

설치 후, 아파치 재시작 필수!

 

 


 
 


Reference
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=asianchairshot&logNo=221483481842
https://gurtn.tistory.com/64

https://www.php.net/manual/en/class.ziparchive.php

'Programming > php' 카테고리의 다른 글

[php] 서버에서 이미지 수정하기  (1) 2023.01.19

PostgreSQL에서 시퀀스(Sequence)를 사용하는 방법에 대해 알아보자.

 

 

- create : 시퀀스 생성

CREATE SEQUENCE [시퀀스명];

 

- alter :  시퀀스명 변경

ALTER SEQUENCE [기존 시퀀스명] rename to [새 시퀀스명];

 

- drop : 시퀀스 삭제

DROP SEQUENCE [시퀀스명];

 

- currval : 시퀀스 현재값

SELECT currval('시퀀스명');

 

- nextval : 시퀀스 다음값

SELECT nextval('시퀀스명');

 

ERROR: 오류:  "시퀀스명" 시퀀스의 currval 값이 현재 세션에 지정되어 있지 않습니다.
SQL state: 55000

  • 여기서 currval()를 사용하다가 위와 같은 에러가 발생할 수 있다.
  • 이럴 때는 nextval()를 한번 실행해주고 다시 한번 currval()을 실행시켜주면 정상적으로 작동한다.

 


- setval : 시퀀스 초기화

SELECT setval('시퀀스명', 1, true); -- nextval('시퀀스명') = 2
SELECT setval('시퀀스명', 1, false); -- nextval('시퀀스명') = 1
  • true : 초기화 후 nextval를 사용할때 초기화된 값(1)에서 +1을 하여 사용된다.
  • false : 초기화 후 nextval를 사용할때 초기화된 값(1)을 그대로 사용한다.

     


 
 


Reference
https://mine-it-record.tistory.com/341

+ Recent posts