지인의 헬로우월드

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

- 코드펜(Codepen) 이란?

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

- 사용방법

1. 로그인

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

https://codepen.io/trending

 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

프로젝트를 진행하면서 선언하는 변수명, 함수명, 클래스명 등 여러가지 이름들의 명명법에는 그들만의 규칙이 있는데, 대표적으로 카멜표기법, 파스칼표기법, 스네이크 표기법이 있다.

- 카멜(Camel) 표기법

ex) 'helloJiinWorld'	- 첫 문자 hello, 그 이후 문자 Jiin, World

• 카멜표기법은 말그대로 낙타등처럼 내려갔다 올라가는 모양을 말한다.
• 예를들어 단어 여러개가 붙을때 맨 앞에오는 단어는 소문자, 그 뒤 단어는 대문자로 표기한다.

- 파스칼(pascal) 표기법

ex) 'HelloJiinWorld'	- 모든 문자 대문자로 시작 Hello, Jiin, World

• 파스칼 표기법은 단어의 수와 상괸 없이 모든 단어의 앞자가 대문자로 시작한다.
• 함수명이나 클래스명을 파스칼표기법으로 작성하는 경우가 많은데, 보통 카멜과 파스칼표기법을 섞어 적절히 사용하기도한다.
• 네임스페이스, 이벤트, 프로퍼티, 클레스 네임을 지정할 때 주로 사용한다.

- 스네이크(snake) 표기법

ex) 'hello_jiin_world'	- 모든 문자 소문자로 시작 hello, jiin, world

• 언더바(_) 를 붙여 단어를 구분지으며, 단어 사이의 ‘_’가 뱀처럼 보인다고 해서 유래한 표기법이다.
• 모든 단어가 소문자로 표시된다.

Reference

• https://m.blog.naver.com/PostView.naver?blogId=nkind&logNo=222017581135&proxyReferer=