// href 추출
jQuery('.target').attr('href');
// href 추출
jQuery('.target').attr('href');
// 현재 페이지의 경로와 파일 이름 반환
var pathName = window.location.pathname;
//
function submit(event) {
event.preventDefault();
}
const input = form.querySelector("input"),
currentValue = input.value;
console.log(input.placeholder);
// console
localStorage.setItem("name", "chanh");
lacalStorage.getItem("name"); // "chanh"
<hr>태그에는 기본적으로 높이가 없는 박스에 border가 들어가있는 구조라는 것을 확인했다.margin: 0.5em auto: 상하 마진 + 중앙 정렬2px의 가로줄이 생성된다: Chrome의 경우, border-top과 border-left는 1px solid #eee, border-bottom과 border-right는 1px solid #9a9a9aheight)와 너비(width)를 모두 줄 수 있기 때문에 단순한 모양으로도 사용 가능하다.border-radius로 원도 만들 수 있다.border: none을 준 후, border-top: 1px solid #000을 주면 된다.Jekyll 블로그는 페이지와 포스트의 머리말을 통해 layout, tag 등의 환경설정 값을 조정할 수 있다. 또한 기본값 설정을 통해 원하는 범위에 환경설정 값을 기본값으로 설정하여 반복 입력을 막을 수 있다.
기본값은 _config.yml 파일에 defaults라는 키를 사용하여 정의할 수 있다.
# 컬렉션
collections:
notes:
output: true
# 기본값
defaults:
- scope:
path: "" # 빈 문자열은 프로젝트의 모든 파일을 의미.
type: "posts"
values:
layout: 'default'
- scope:
path: ''
type: 'posts'
values:
layout: 'post'
- scope:
path: ''
type: 'notes'
values:
layout: 'note'
scope: 이 경로scope 안에 존재하는 모든 파일로 values의 범위를 제한.path: 반드시 정의해야 함.type: pages, posts, drafts 또는 사이트 내의 컬렉션 이름을 사용할 수 있음.notes라는 이름의 컬렉션 안에서는 layout이 note로 설정됨.원래 있던 sitemap.xml이 노트 페이지는 긁어오지 못해서 플러그인을 이용하기로 했다. 설치 방법은 아주 간단했다.
Gemfile에 gem 'jekyll-sitemap'을 추가하고bundle install을 실행한다._config.yml을 수정한다.
```yml
plugin:
_site 디렉토리 안에 sitemap.xml 파일이 자동으로 생성된다.div > pdiv + p
div요소 바로 다음에 위치한 p요소div ~ p
div요소 이후에 등장하는 모든 p요소a[target=_blank]a[href^="https"]
href속성의 값이 https로 시작하는 a태그href속성의 값이 .pdf로 끝나는 a태그title속성의 값에 area라는 단어가 포함된 요소href속성의 값이 w3s라는 문자열을 포함하는 a태그현재의 URL이 a태그의 href보다 길어지는 경우가 있어서 일정 부분에서 분할을 해줘야 했다.
// string.split( separator, limit )
const urlPath = $(location).attr('pathname'),
splitUrlPath = urlPath.split("_");
limit 인수는 선택 사항으로, 최대 분할 개수를 정할 수 있다.
분할 최대 개수를 정하면, 그 개수를 넘어가는 문자열은 반환되지 않습니다.
reverse()를 이용해 원소의 순서를 반대로 만들 수 있다.출처: JavaScript / Object / String.split() / 문자열 분할하는 메서드 - CODING FACTORY
현재의 URL과 a태그의 href가 동일할 때, a태그에 .addClass('on')을 하기 위해서 경로를 가져오는 방법을 확인해보았다.
window.location.host // returns host
window.location.hostname // returns hostname
window.location.pathname // returns pathname
window.location.href // returns full current url
window.location.port // returns the port
window.location.protocol // returns the protocol
window.location.origin
$(location).attr('host'); // returns host
$(location).attr('hostname'); // returns hostname
$(location).attr('pathname'); // returns pathname
$(location).attr('href'); // returns href
$(location).attr('port'); // returns port
$(location).attr('protocol'); // returns protocol
$(location).attr('origin');
a 태그를 선택하여 href 등을 가져올 수 있다.반응형에서 table의 td를 아래로 떨어뜨려야 하는데 아무리 검색해도 안 나와서 못했었는데 팀장님이 알려주셨다. :D
table td{
width: 100%;
display:block;
}
background: color -> image -> repeat -> position -> attachment)background-color: 요소의 배경색background-image: 이미지를 배경으로 사용할 때background-repeat: 배경이미지의 반복 여부와 방향 지정background-position: 배경의 위치를 지정background-attatchment: 배경이미지를 화면에 고정하거나 움직이게
fixed, local, scroll(초기값)background-size: 배경이미지의 크기를 설정background-origin: 배경이미지를 어느 영역부터 채워나갈지 정하는 속성
border-box: 배경을 테두리 박스에 상대적으로 배치padding-box: 초기값. 배경을 안쪽 여백 박스에 상대적으로 배치content-box: 배경을 콘텐츠 박스에 상대적으로 배치background-clip: 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할지 지정
border-box: 초기값. 배경이 테두리의 바깥 경계까지 차지(z축 순서 상 테두리 아래 위치)padding-box: 배경이 안쪽 여백의 바깥 경계까지 차지content-box: 배경을 콘텐츠 상자에 맞춰text: 배경을 전경 텍스트 위에만background-blend-modeSpotlight 기능을 사용할 수 있고 Color Picker, 창 크기 조절 기능 등을 사용할 수 있다.RaiDrive는 에디터 사용할 때 쓰고 FileZila는 한번에 많은 파일을 옮길 때 주로 사용한다.GitHub Desktop이 편하기는 한 것 같다.div{
background-size: 30% auto; /* 가로 세로 */
}
background-size는 보통 contain이나 cover를 쓰지만 가끔 가로와 세로를 따로 제어해야 하는 경우도 있다. 이럴 때 띄어쓰기로 구분을 주고 값을 2개를 넣어주면 앞에 쓴 값은 가로 값, 뒤에 쓴 값은 세로 값이 된다.
휴, SFTP를 사용하는 것에 있어 큰 문제가 있었다. 내 컴퓨터(로컬)에서 수정한 파일은 서버(리모트)에 자동으로 업로드가 되었는데 서버에서 수정한 사항은 내 컴퓨터에 자동으로 다운로드 되지 않았다. 그것도 모르고 파일을 CSS 파일을 하나 수정해서 다른 사람이 작업한 내용을 날려버렸다. (다행히 서버 측에 요청해서 백업된 파일을 받아 해결되었다.)
RaiDrive를 사용할 것 같다.// javascript의 경우
window.addEventListener('DOMContentLoaded', function() { });
jQuery
// jQuery의 경우
$(document).ready(function() { });
$(function() { });
github blog에 POST 외에 다른 메뉴를 추가하느라 정말 고생을 많이 했다. POST를 카테고리로 나누는 기능은 전에 추가했지만 POST와는 별개로 운영되는 NOTE 기능을 갖고 싶었다.
기본적으로 지원하는 기능인 Collections 기능을 사용해야 했다.
_config.yml 파일에 collections이라는 속성과 컬렉션명을 지정하면 된다. 이때 컬렉션명과 폴더명은 동일해야 ㅎ나다.Collections 기능을 추가하니 site.notes라는 변수가 사용이 가능해졌다._post 파일이나 기타 다른 파일들은 변경 사항이 생기면 지킬 서비스 중에도 해당 내용이 자동 반영이 된다. 하지만 _config.yml 파일만큼은 지킬 서비스를 중단하고 다시 사이트 빌드가 필요하다. _config.yml 파일 안에는 여러 환경설정과 변수들이 저장되어 있는데 사이트가 빌드될 때 한 번만 읽어들이기 때문이다. (출처: GitHub 블로그 기본 설정하기)
RaiDrive로 FTP에 접속하여 작업을 했었는데 무료 버전에는 FTP 연결이 8개로 제한이 되어 있어서 VSCode에서 FTP를 바로 연결해서 사용하는 확장 프로그램을 설치하고 사용해봤다.
ftp-simple과 SFTP를 설치해봤는데 ftp-simple은 한 개의 config 파일에 모든 FTP를 작성하여 사용했으며 SFTP는 FTP마다 각각 config 파일을 사용해야 했다. config 파일을 분산하여 관리하는 것이 더 좋을 것 같아서 최종적으로 SFTP를 사용하기로 했다.RaiDrive와 회사 사람들이 많이 사용하는 Edit Plus는 FTP를 연결하면 파일을 직접 다운로드 하지 않고 제어가 가능하다. 하지만 ftp-simple과 SFTP는 파일을 직접 다운 받아서 사용해야 하는 불편함과 위험성이 있다. (21로 해야 한다. 이미 정해진 포트 번호라고 한다. (참고사이트)Adobe Flash Player가 2020년 12월 31일부터 어도비 공식 지원이 종료되면서 웹 사이트에 Flash가 들어가 있으면 그 부분이 보이지 않게 되었다. 하지만 회사에서 Flash가 들어간 사이트를 리뉴얼 할 일 있어서 Flash를 확인해야 했다. Flash Player를 활성화하는 것은 불편했지만 어렵지는 않았다.
Creative Cloud 플랜 문제로 Adobe 프로그램이 열리지 않거나 https 사이트에서 인증서 오류가 발생한다. 날짜를 과거로 갔다가 현재로 갔다가 작업하기 불편하다..
날짜를 2021년 01월 12일 이전으로 되돌린다. 킬 스위치의 기준은 01월 12일이므로 이 이전의 날짜로 되돌리면 이용할 수 있다. 너무 예전으로 되돌리는 경우, https 사이트에서 인증서 오류가 발생하여 정상적인 인터넷 사용이 불가능할 수 있다.(출처: Adobe Flash Player 강제로 활성화하는 방법)