다양한 IT 기술에 대한 내용을 공유합니다.
![[Linux] 리눅스 MySQL 시작, 정지, 재시작, 상태확인](https://susukkekki.kr/wp-content/uploads/2017/02/web.png)
리눅스 MySQL 시작, 정지, 재시작, 상태확인
| 작업 | 우분투 명령어 | CentOS6 명령어 | CentOS7 명령어 |
|---|---|---|---|
| 시작 | # service mysql start | # service mysqld start | # systemctl start mysqld |
| 정지 | # service mysql stop | # service mysqld stop | # systemctl stop mysqld |
| 재시작 | # service mysql restart | # service mysqld restart | # systemctl restart mysqld |
| 상태확인 | # service mysql status | # service mysqld status | # systemctl status mysqld |
서버
로컬
원격 저장소 만들고 ssh 접속하여 root권한으로 변경
# su root
yum을 이용해서 git 설치
# yum install git-core
yum을 이용해서 git 설치
# yum install git-core
설치된 영카트 디렉토리로 이동
# cd /data/web_htdocs/
깃 초기화
# git init
파일 상태를 확인해 깃이 잘 설치되어 있는지 확인
# git status
전역 사용자 등록(원격 저장소에 있는 아이디와 메일이 일치하도록 설정)
# git config --global user.name "사용자 이름"
# git config --global user.email "사용자 메일"
원격 저장소 url을 복사하여 git에 연동
# git remote add origin `원격 저장소 url`
원격 저장소 url 복사
# git remote add origin `원격 저장소 url`
설치할 디렉토리 경로 맞춘 뒤 클론
# git remote add origin `원격 저장소 url`
Homestead.ymal 파일 열고 site 부분에
map: 로컬 도메인 주소
to: vagrant 경로 추가
$ vagrant reload --provision
$ sudo service nginx restart
// (nginx 백업 필수 설정 다시 해줄것!)
host 파일에 로컬주소 추가(관리자권한으로 실행)C:\windows\system32\drivers\etc
$ mysqldump -p db명 > 저장할 파일이름.sql
해당 파일 찾아서 local DB인 Homestead에 넣어주기symlink(): Protocol error 에러 뜰경우
Git Bash 를 관리자 권한으로 실행 후
$ php artisan storage:link
또는 관리자 권한으로 실행 후
$ vagrant up
한 다음 새로고침 해볼것
로컬에서 소스 수정 후 commit, push 하고 쉘 접속하여 수정 부분 받기
$ cd /data/web_htdocs/
$ git pull
error cannot open .git/fetch_head permission denied 에러 날경우 .git 파일의 권한이 root 여서 오류남, 일반 계정으로 변경 해야함, 루트 계정으로 접속
$ su root
Password: 패스워드 입력
chown -R webapp:webapp /data/web_htdocs/.git
ls -al 해당 파일 변경해준 권한인지 확인
exit
다시 git pull, 그래도 안된다면
$ git pull origin master
또는
$ git branch --set-upstream-to=origin/master master
$ git pull
핀터레스트 레이아웃 사용시 자바스크립트만으로 구현이 가능하다. Masonry 플러그인을 활용하면 좀더 다양한 인터렉션을 활용할 수 있지만 성능 및 블록 틀어짐 이슈 때문에 자바스크립트만 활용하였다.
posirion: absolute; top: y; left: x; 속성을 활용, 각 위치에 맞게 배치하여 제이쿼리 플러그인 필요 없이 자바스크립트만으로 구현하여 가볍다.top: y; left: x; 대신 transform: translate(x, y) 속성을 활용하면 성능이 좀 더 좋아진다.<div class="cntBox">
<div class="item">
<div class="inner">
<img src="img/img01.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img02.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img03.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img04.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of of Lorem Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img03.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img04.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img01.jpg" />
<p>Lorem Ipsum is simply dummy text of the of Lorem Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img02.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img01.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img02.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img03.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img04.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of of Lorem Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img03.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img04.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img01.jpg" />
<p>Lorem Ipsum is simply dummy text of the of Lorem Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img02.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img01.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s
with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img02.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img03.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img04.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of of Lorem Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img03.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only
five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem
Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img04.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img01.jpg" />
<p>Lorem Ipsum is simply dummy text of the of Lorem Ipsum</p>
</div>
</div>
<div class="item">
<div class="inner">
<img src="img/img02.jpg" />
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cntBox {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 1200px;
}
.item {
display: inline-block;
position: absolute;
width: 20%;
padding: 5px;
}
.item img {
width: 100%;
}
.item .inner {
border: 3px solid #ccc;
border-radius: 5px;
}
.item .inner p {
padding: 10px;
}
// 리사이즈 이벤트 한번만 실행
// var timer = null;
window.addEventListener('resize', function () {
// 리사이즈 이벤트 한번만 실행
// clearTimeout(timer);
// timer = setTimeout(boxLayout, 150);
boxLayout();
}, false);
window.addEventListener("load", function () {
boxLayout();
});
function boxLayout() {
var images = document.querySelectorAll(".item");
var imgStack = [0, 0, 0, 0, 0];
var boxW = document.querySelectorAll(".cntBox")[0].offsetWidth;
var colWidth = boxW / imgStack.length;
for (var i = 0; i < images.length; i++) {
var minIndex = imgStack.indexOf(Math.min.apply(0, imgStack));
var x = colWidth * minIndex;
var y = imgStack[minIndex];
imgStack[minIndex] += (images[i].offsetHeight);
// images[i].style.transform = 'translateX(' + x + 'px) translateY(' + y + 'px)';
images[i].style.left = x + 'px';
images[i].style.top = y + 'px';
if (i === images.length - 1) {
document.querySelector(".cntBox").style.height = Math.max.apply(0, imgStack) + 'px';
}
}
}
VIM 명령어 정리
| 명령어 | 동작 |
|---|---|
| # vi file | file을 연다. |
| # vi file1 file2 | file1 과 file2 를 차례로 연다. |
| # view file | file을 읽기 모드로 연다. |
| # vi -R file | file을 읽기 모드로 연다. |
| # vi + file | file을 열때 커서가 file 본문의 마지막 행에 위치한다. |
| # vi +n file | file을 열어 n행에 위치한다. |
| # vi -r file | 손상된 파일 회복 |
| 명령어 | 동작 |
|---|---|
| # i | 커서 있는데서 입력모드 전환 |
| # I | 커서 왼쪽, 행의 처음에 몬자 삽입 |
| # a | 커서 있는 줄 끝에서 입력모드 전환 |
| # A | 커서 오른쪽, 행의 끝에 문자 삽입 |
| # o | 커서 있는 줄 아래에 빈 줄 삽입 |
| # O | 커서 있는 줄 위에 빈 줄을 삽입 |
| # R | 덮어쓰기 모드로 전환 |
| 명령어 | 동작 |
|---|---|
| # ^, 0 | 줄의 처음으로 이동 |
| # $ | 줄의 끝으로 이동 |
| # H | 화면 맨 위로 이동 |
| # M | 화면의 중간으로 이동 |
| # L | 화면 맨 아래로 이동 |
| # w | 다음 단어 끝으로 커서 이동 |
| # e | 다음 단어 앞으로 커서 이동 |
| # b | 이전 단어로 이동 |
| # shift + ↑ | 한 페이지 앞으로 이동 |
| # shift + ↓ | 한 페이지 뒤로 이동 |
| # 3l, 3G | 현재 커서 위치한 행에서 3번째 행으로 이동 |
| # ctrl + i | 한 화면 위로 이동 |
| # ctrl + b | 한 화면 아래로 이동 |
| # ctrl + d | 반 화면 위로 이동 |
| # ctrl + u | 반 화면 아래로 이동 |
| # ctrl + e | 한 줄씩 위로 이동 |
| # ctrl + y | 한 줄씩 아래로 이동 |
| 명령어 | 동작 |
|---|---|
| # x | 한 문자 삭제 |
| # 5x | 커서가 있는 위치부터 5개의 문자를 삭제 |
| # d + ↑ | 커서있는 줄, 윗줄 2줄 삭제 |
| # d + ↓ | 커서잇는 줄, 아래줄 2줄 삭제 |
| # dw | 한 단어 삭제 |
| # dd | 한 줄 삭제 |
| # 5dd | 커서가 있는 라인부터 5개의 라인 삭제 |
| # db | 커서의 위치에서 거꾸로 한 단어 삭제 |
| # D | 한줄 내에서 커서있는 뒤 모두 삭제 |
| # u | 바로 전에 수행한 명령을 취소 |
| # :5,10 d | 5~10번째 행 삭제 |
| 명령어 | 동작 |
|---|---|
| # yy | 현재 줄을 버퍼로 복사 |
| # p | 버퍼에 있는 내용을 커서 뒤에 삽입 |
| # P | 버퍼에 있는 내용을 커서 앞에 삽입 |
| # 3y | 현재 줄에서부터 아래로 3줄 복사 |
| # :5, 10y | 5~10줄을 버퍼로 복사 |
| # :30pu | 30행에 버퍼 내용을 삽입 |
| # d | 현재 커서가 위치해 있는 단어 복사 |
| # 3yy | 현재 행을 기준으로 3번째 행까지 n행 복사 |
| 명령어 | 동작 |
|---|---|
| # /name | name 문자열 찾기 |
| # n | 다음 name으로 이동 |
| # N | n과 같으며 역방향으로 이동 |
| 명령어 | 동작 |
|---|---|
| # :s/str/rep | 현재 행의 str을 rep로 대체 |
| # :l,.s/str/rep/ | 1부터 현재 행의 str을 rep로 대체 |
| # :%s/str/rep/g | 파일 전체 str을 rep로 전부 대체 |
| # :.$/aaa/bbb | 커서의 위치로부터 파일의 끝까지 있는 모든 aaa를 bbb로 대체 |
| 명령어 | 동작 |
|---|---|
| # :w | 지정된 파일에 저장 |
| # :wq, :x, ZZ | 지정된 파일에 저장하고 vi를 종료 |
| # :w php.ini | php.ini 파일에 저장 |
| # :q | 저장하지 않고 종료 |
| # :q! | 저장하지 않고 강제 종료 |
| # :wq php.ini | php.ini에 저장하고 vi를 종료 |
| # :r php.ini | php.ini의 내용을 현재 커서가 있는데로 불러온다. |
| # :e php.ini | 현재의 화면을 지우고 새로운 파일 php.ini를 불러온다. |
| # :5,10 w php.ini | 5~10 줄까지의 내용을 php.ini에 저장 |
| 명령어 | 동작 |
|---|---|
| # :set nu | 행 번호 보여주기 |
| # :set nonu | 행 번호 보여주기 취소 |
| # . | 바로 전에 실행한 명령어 재 실행 |
| # ctrl + l | 불필요한 화면 정리후 다시 표시 |
2019년 11월 22일 정보접근성 기술 컨퍼런스를 다녀온뒤 세미나 내용을 정리 및 입력 서식 관련 접근성 대비에 관련한 내용이다.
<label>에 for와 <input>의 id를 동일하게 맞추어 준다. <label>을 클릭하면 해당 폼으로 커서가 이동한다.
HTML
<label for="usr_id">아이디</label>
<input type="text" id="usr_id" />
결과
<input>태그만 있는 경우는 title속성을 꼭 명시하여 스크린 리더기가 인식할 수 있도록 한다.
HTML
<input type="text" id="usr_id" title="아이디" />
스크린 리더기 소리: “아이디 편집 창”
title속성을 넣어주지 않으면 해당 편집 창의 제목을 건너 띄고 결과값만 읽는다. 꼭 title속성을 써주도록 한다.
HTML
<input type="text" readonly="readonly" value="25" />
스크린 리더기 소리: “25 읽기전용 편집 창”
<input type="text" readonly="readonly" value="25" title="나이" />
스크린 리더기 소리: “나이 25 읽기전용 편집 창”
placeholder는 보조 수단으로 레이블 대체가 불가능하다. 이 역시 title속성을 꼭 넣어주도록 한다.
HTML
<input type="text" placeholder="user@naver.com" />
스크린 리더기 소리: “user@naver.com 편집 창”
<input type="text" placeholder="user@naver.com" title="이메일" />
스크린 리더기 소리: “이메일 편집 창”
title속성에 입력 내용 및 자리수까지 상세히 명시한다.
HTML
<input type="text" placeholder="년(4자)" title="태어난 년도 4자리" />
<input type="text" placeholder="월" title="태어난 월" />
<input type="text" placeholder="일" title="태어난 일" />
최신 버전의 스크린 리더기는 암묵적 레이블을 읽어 주긴 하지만 역시 많은 스크린 리더기 사용에 문제가 발생하고 있어 꼭 명시적으로 레이블을 사용하기를 권장하고 있다.
HTML
<label>
아이디
<input type="text">
</label>
스크린 리더기 소리: “아이디 편집 창”
커스터마이징이 되어있는 입력서식의 경우 키보드를 이용한 조작이 필수며, 마크업 형태는 기본서식과 동일하도록 권장하고 있다.(예: 라디오 버튼의 경우 키보드 좌, 우 버튼으로 조작 가능)
복잡한 입력서식의 경우 아리아로 구현이 가능하지만 느리다는 단점이 있다.
웹 접근성 이해라는 사이트에서 웹 접근성 강의를 보다 쉽게 배울 수 있다.
2019년 11월 22일 정보접근성 기술 컨퍼런스를 다녀온뒤 세미나 내용을 정리 및 웹 접근성에 대해 작성한 글이다.
웹 접근성(Web Accessibility) 이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다. 법으로는 2017년 7월 26일부터 장애인차별금지법으로 시행되었다.
장애인 차별금지 및 권리구제 등에 관한 법률 제 2조(장애와 장애인)
- 이 법에서 금지하는 차별행위의 사유가 되는 장애라 함은 신처적, 정신적 손상 또는 기능상실이 장기간에 걸쳐 개인의 일상 또는 사회생활에 상당한 제약을 초래하는 상태를 말한다.
- 장애인이라 함은 제1항에 따른 장애가 있는 사람을 말한다.
웹 접근성은 정보와 사용자의 디지털정보격차를 줄인다는 개념으로도 볼 수 있다.
디지털정보격차(Digital Divide)란?
- 정보통신기술에서의 접근, 역량, 활용에 있어서의 불평등
- 사회자원에서의 접근, 역량, 활용에 있어서의 불평등
또한 접근성에서의 ‘장애’는 개인의 건강상태가 아니라 인간 상호작용이 일치하지 않는 상황으로 볼 수 있고, 접근성은 아래와 같은 의미로도 해석할 수 있다.
| 장애유형 | 특징 | 보완대책 |
|---|---|---|
| 시각장애(전맹) | 모니터를 볼 수 없음 | 스크린리더 |
| 시각장애(저시력) | 모니터 사용이 일부 가능함 | 화면확대/고대비 |
| 시각장애(색맹) | 색을 구별할 수 없음 | 색상에만 의존하지 않기/고대비 |
| 청각장애 | 사운드, 오디오 등을 창취할 수 없음 | 수화, 시각정보 제공 |
| 지체장애(상지장애) | 손을 사용할 수 없음 | 마우스 대체 방법, 키보드만 사용 |
| 지체장애(기타) | 움직임이 어려움 | 충분한 시간 제공 |
| 언어장애 | 복잡한 용어, 어려운 용어의 이해 불가능 | 쉬운 용어 사용 |
웹 접근성 한국표준이며 가이드는 한국형 웹 콘텐츠 접근성 지침 2.1 에서 확인해 볼 수 있다. 항목은 24가지 이며 국제표준(WCAG)은 더욱 엄격하여 항목으로는 78가지가 있다.
1. 적정한 대체 텍스트
텍스트 아닌 콘텐츠는 대체 가능한 텍스트와 함께 제공되어야 한다.
2. 자막, 수화 등의 제공
영상이나 음성 콘텐츠에는 동등한 내용의 자막, 원고 또는 수화가 제공되어야 한다.
3. 색에 무관한 콘텐츠 인식
화면에 표시되는 모든 정보는 색에 관계없이 인식될 수 있어야 한다.
4. 명확한 지시사항 제공
특정한 감각(시각, 청각 등)에 의존하여 지시사항을 제공할 경우 해당 감각에 장애가 있다면 인식할 수 없으므로, 다른 감각을 통해서도 인식할 수 있도록 지시사항을 제공해야 한다. (3, 4번 항목의 예: 콘텐츠 구분 접근성)
5. 텍스트 콘텐츠 명도 대비
화면에 표시되는 모든 사용자 인터페이스 컴포넌트와 텍스트는 전경색과 배경색이 구분될 수 있도록 제공되어야 한다.(예: 명도 대비 접근성)
6. 자동 재생 금지
자동으로 재생되는 배경음을 사용하지 않아야 한다. 구글은 사용자가 원치 않은 미디어가 자동 재생되면서 데이터와 전력을 소모하고, 웹 탐색 중 소음을 유발한다는 이유로 2018년 1월부터 크롬 브라우저는 웹 사이트에서 자동으로 재생되는 영상을 기본 설정에서 차단한 사례가 있다.
7. 콘텐츠 간의 구분
이웃한 콘텐츠는 구별될 수 있어야 한다.
1. 키보드 사용 보장
모든 기능은 키보드만으로도 사용할 수 있어야 한다.
2. 초점 이동
키보드의 Tab키(다음으로 이동)와 Shift + Tab(이전으로 이동)키로 확인해볼 수 있다.
초점 이동 순서가 순환적이며, 반복적이어야 한다.
페이지에 포함된 모든 링크, 버튼, 입력창에 초점이 가야한다.
사용자가 사용할 수 없는 비활성 요소(버튼, 입력창 등)에는 초점이 가지 않아야 한다.
3. 조작 가능
손떨림이 심하여 미세한 조작이 어려운 경우와 같이 운동 장애가 있는 경우에도 사용자 입력 및 컨트롤은 조작이 가능하도록 제공되어야 한다.
4. 응답시간 조절
웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 이를 회피할 수 있는 수단을 제공해야 한다.(일시 정지 등)
5. 정지기능 제공
자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
6. 깜빡임과 번쩍임 사용 제한
초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
7. 반복영역 건너뛰기
콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.(스킵 네비게이션)
8. 제목 제공
페이지, 프레임, 콘텐츠 블록에는 적절한 제목(헤딩 태그)을 제공해야 한다.
9. 적절한 링크 텍스트
링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.(새창 열림 및 더보기)
1. 기본언어 표시
주로 사용하는 언어를 명시해야 한다. 웹 페이지에 주로 사용하는 언어를 <html> 요소에 lang 속성을 지정하여 명시
2. 사용자 요구에 따른 실행
사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.
3. 콘텐츠 선형구조
콘텐츠는 논리적인 순서로 제공해야 한다. 콘텐츠 및 마크업이 논리적인 순서로 구성해야 한다.
4. 표의 구성
표는 이해하기 쉽게 구성 및 caption 및 scope을 꼭 명시해 준다. 복잡한 표의 경우 id, header 를 사용한다.
5. 레이블 제공
입력 서식에는 대응하는 레이블을 제공해야 한다.
6. 오류정정
입력 오류를 정정할 방법을 제공해야 한다.
1. 마크업 오류 방지
마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
2. 웹어플리케이션 접근성 준수
콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
W3C는 텍스트를 시각적으로 표현하는 태그보다 프로그램적으로 의미를 전달할 수 있는 시멘틱 마크업 사용을 권장한다. 웹 사이트는 결론적으로 ‘웹으로 된 문서’이기 때문이다.
예시
<i> 태그를 사용하지만 이 태그는 이태릭체를 의미하는 태그이다. 아이콘으로 쓰지 말도록 하자. 의미가 없는 태그는 가상선택자(:after, :before)를 이용하며, 의미가 있는 태그는 <span> 태그 등에 대체 텍스트를 활용해 준다.<b> 태그는 강조보단 두껍게를 의미하는 태그이다. <i> 태그와 마찬가지로 사용을 지양하며, 강조의 의미인 <strong> 및 <em> 태그를 사용하도록 하자.<del> 태그를 사용하면 스크린리더기가 10,000원 뒤에 ‘삭제’ 라고 읽어준다. 이런식으로 의미론적인 태그를 사용하여 마크업을 작성하도록 하자.W3C는 특별한 경우를 제외하고는 텍스트를 이미지 형태로 제공하지 않도록 권장한다.
텍스트 이미지는 사용자의 요구사항에 따라 시각적으로 사용자 정의될 수 있어야 한다. 예를 하나 들면 번역을 해야 되는 경우가 있다. 꼭 이미지로 사용해야 하는 경우에는 대체 텍스트를 꼭 사용해주도록 한다.(alt 속성 등)
W3C는 기본적으로 텍스트와 배경과의 명도대비는 최소한 4.5 : 1 을 제공하도록 권장한다. 대신 비활성 상태의 인터페이스 요소나 텍스트, 순수한 장식, 로고 또는 상표명에 포함된 텍스트의 경우, 그림의 일부인 텍스트의 경우 어떠한 명도대비 요구사항도 없다. 명도 대비 검사는 Contrast Finder에서 테스트해볼 수 있다.
W3C는 UI요소 및 그래픽 콘텐츠에 한에서 명도대비를 3:1을 제공하도록 권장하고 있다. 예를들어 그래프의 경우 명도가 비슷한 색 끼리 맞닿은 경우 닿는면 사이를 흰색 라인으로 처리를 해준다. 색애 무관한 콘텐츠 인식에서 예시를 확인할 수 있다.
정적인 HTML과 단순한 JavaScript 환경이 아닌 동적인 JavaScript 및 Ajax와 같은 기술을 사용한 환경에서 스크린리더 및 보조기기등이 접근성 및 상호 운용성을 향상시키기 위하여 탄생되었으며, 역할(Role), 속성(Property), 상태(State) 정보를 추가하여 이를 개선 할 수 있도록 제공하고 있다. W3C가 권장을 하고 있지만, 느리다는 단점이 있다.
콘텐츠는 정보 또는 기능 손실 없이, 2차원 스크롤 없이 제공해야 한다. 2차원 스크롤을 이용해 본 사람은 알겠지만 콘텐츠 이용이 상당히 불편하다. 2차원 스크롤은 아래을 의미한다.
동영상 제공 시 W3C는 특별한 경우를 제외하고 동기화된 자막을 제공하도록 권장한다. 단, 미디어가 텍스트에 대한 대체수단이 분명히 명시된 경우는 예외이다. 되도록이면 대화, 해설, 효과음 등의 자막 스타일을 다르게 하여 나타내는 것도 하나의 방법이다. 동영상 자막의 경우 게임 분야가 상당히 잘 되어있다. 청각 장애와 난청을 위한 게임 만들기에서 좋은 예시를 볼 수 있다.
입력칸의 목적성을 규정하여 각각의 입력 필드가 가지는 의미는 계획하에 결정되어야 한다. 다른 말로 하면, 사용자들로부터 어떤 값들이 입력되길 기대하는지, 혹은 입력된 정보의 의미가 무엇인지를 나타내는 코드가 필요하다. 이를 정확하게 하면 사용자의 브라우저가 이전에 사용자가 입력한 데이터들을 활용하여 미리 해당 입력 필드를 자동적으로 채우는 것을 가능하게 해준다.
기술이 필요한 궁극적인 이유는 사람이다. 정보 접근성 준수 기술은 사용자를 이해하고 배려하는 것에서 시작된다. 웹 접근성을 꼭 준수하도록 하자
네이버 접근성 가이드
다음 접근성 가이드
웹 접근성이란?
웹 접근성의 이해
장애인차별금지 및 권리구제 등에 관한 법률
한국형 웹 콘텐츠 접근성 지침 2.1
[인식의 용이성] 1.3.1. 색에 무관한 콘텐츠 인식
[웹표준]WCAG 2.1 가이드라인
한국웹접근성성인인증평가원
검색엔진이 이해하기 쉽도록 홈페이지 구조를 설정하여 포털 사이트 상위에 노출시키는 작업이다. jekyll으로 제작된 깃허브 블로그에 SEO 작업을 진행하겠다.
sitemap.xml 파일을 만들고 root 경로 넣어준다.
layout: post
title: "제목"
date: 0000-00-00 12:00:00
lastmod : 0000-00-00 12:00:00
sitemap :
changefreq : daily
priority : 1.0
---
robots.txt는 로봇 배제 표준을 따르는 일반 텍스트 파일이다. 쉽게 표현하면 검색 엔진이 해당 사이트의 콘텐츠를 가져가도 허락하는 부분과 가져가면 안된다 라는 설정을 하는 부분이라고 보면 된다. 위와 동일하게 root 경로에 위치한다.
User-agent: *
Allow: /
Sitemap: https://recordboy.github.io/sitemap.xml
본인 블로그를 등록 해야 구글 및 네이버에서 검색이 가능하다.
github blog를 google에서 검색되도록 설정하기
구글(Google) 검색에 내 사이트 등록하기
홈페이지 검색 잘 되도록 만들기
RSS피드란?
robots.txt 파일 만들기
# rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
# rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
# yum install nginx.x86_64
# systemctl start nginx
# systemctl enable nginx
# yum install yum-plugin-replace
# yum install mod_php71w php71w-common
# yum install php71w-gd
# yum install php71w-fpm
# yum install php71w-opcache
# yum install php71w-cli
# yum install php71w-mysqlnd
# yum install php71w-xml
# yum install php71w-mbstring
# sed -i 's/;date.timezone =/date.timezone = Asia\/Seoul/g' /etc/php.ini
# yum install -y make automake gcc gcc-c++ kernel-devel openssl-devel php php-devel php-pear bzip2-devel libvpx-devel yum-utils bison re2c libmcrypt-devel libpqxx-devel libxslt-devel pcre-devel libcurl-devel libgsasl-devel openldap-devel libmemcached-devel libjpeg-devel libpng-devel readline-devel
# systemctl start php-fpm
# systemctl enable php-fpm
nginx.conf 파일찾기
# sudo find / -name nginx.conf
nginx.conf 수정하기
# vi /etc/nginx/nginx.conf
nginx 다시 로드 하기
# sudo service nginx reload
어떤 디바이스로 접속했는지 확인 가능한 코드
var filter = "win16|win32|win64|macintel|mac|"; // PC일 경우 가능한 값
if (navigator.platform) {
if (filter.indexOf(navigator.platform.toLowerCase()) < 0) {
alert("모바일에서 접속하셨습니다");
} else {
alert("PC에서 접속하셨습니다");
}
}
정의 Vue Cli 2.x 버전을 이용하여 프로젝트를 생성하면 웹펙 설정파일이 자동으로 생성되지만 3.x 버전부터는 직접 만들어줘야 한다. 때문에 2.x 버전하고 방법이 약간 다르다.
설치할 디렉토리로 가서 프로젝트를 생성해 준다.
$ vue create 'ProjectName'
프로젝트 폴더로 이동하여 원격 저장소에 연결시켜 준 뒤 푸쉬해준다.
cd 'ProjectName'
git remote add origin 'url'
git push origin master
코드를 빌드하면 dist 디렉토리에 출력되어도록 되어있기 때문에 vue.config.js 파일을 만들어서 설정을 변경해둔다. 우선 최상단 디렉토리에 vue.config.js파일을 생성해 준 뒤 아래 코드를 입력해준다. 원격 저장소의 프로젝트명과 동일하게 publicPath를 수정해준다.
// vue.config.js
module.exports = {
publicPath: '/ProjectName/',
outputDir: 'docs'
}
빌드를 하면 /docs 디렉토리가 생성된다. 후에 최상단 디렉토리의 .gitignore 파일에 /dist 를 주석처리 해준다. 이제 깃에 푸쉬해준다.
git add ./
git commit -m "commit message"
git push origin
이제 깃허브로 들어가서 저장소 설정으로 간 뒤 GitHub Pages 항목에서 master branch /docs folder 를 셀렉해준다. 이제 https://[유저이름].github.io/[저장소이름] 으로 들어가면 뷰 페이지를 확인할 수 있다. (반영에 시간이 조금 걸린다. 당분간은 404가 표시되어있다.)
vue-cli で作ったサイトを GitHub Pages にデプロイする
Deploy vue-cli 3 project to github pages