전체 글 777

레이아웃 구조 복습, display 속성(a태그 default : inline)

📌 레이아웃 구조 복습 레이아웃 레이아웃 안에 레이아웃 컨테이너 header(nav, banner 등...) 박스(.header 클래스로 생성) 클래스 header 박스 안에 header 관련 클래스를 만들기 🛴 display 속성 block : 태그 한 개가 한 줄 영역을 모두 잡아 먹는다. inline : 태그의 텍스트만큼 영역을 잡아먹어 다른 요소들을 옆으로 나열한다. padding이 제대로 먹지 않는 문제가 있다. display: inline; 의 padding이 적용되지 않는 문제를 해결할 방법은? display: inline-block; 을 사용하자🚀 a 태그에 inline-block을 사용하면 padding이 제대로 먹는다. 그리고 a태그의 경우, display가 inline이기 때문에 a ..

HTML, CSS 2021.06.14

스킵 네비게이션(Skip Navigation)을 사용해야 하는 이유와 사용 방법

스킵 네비게이션은 웹 표준을 준수하기 위해 그리고 장애인도 평등하게 웹을 사용하기 위한 웹 접근성을 위해 꼭 설정해야 하는 요소 중 하나이다. 웹 표준에 대한 자세한 내용은 아래 웹 표준 사이트 를 참고하자. 네이버 웹 표준 사이트 https://nuli.navercorp.com/ NULI nuli.navercorp.com 웹 접근성 연구소 https://www.wah.or.kr 웹 표준 준수를 위한 스킵 네비게이션(Skip Navigation)을 만드는 방법 See the Pen 스킵 네비게이션(Skip Navigation) 만드는 방법 by hyeryeonkim (@khr777) on CodePen.

IT 유용한 정보 2021.06.14

웹 사이트 표준 (utf-8, meta 태그, 언어 설정, link 태그 등 )

📢 utf-8 전 세계 언어를 사용할 수 있도록 해주는 utf-8 을 사용한다. meta 태그 사용법 name="author" content="hye-ryeon, Kim" : 사이트 작성자 설명 name="description" content="웹 표준을 준수한 사이트 예제입니다." : 사이트 설명 name="keywords" content="웹, 웹표준, 웹접근성, 사이트 만들기" : 사이트 검색 키워드(정말 많은 사이트가 있으므로 다 검색이 되는 않는다.) name="generator" content="visual studio code" : 개발툴 link 태그 사용해서 css 적용하기 reset을 담당하는 파일을 우선순위에 두고 다른 css 파일을 불러야 한다. reset은 보통 *(전체 선택자)를..

HTML, CSS 2021.06.14

vscode 에 filezilla ftp 계정 연동하는 방법 참고 링크

참고 링크 1 LAB0 : 닷홈 개설 + fileZilla 설치 + VScode에서 ftp로 리모트 서버연동 1. 닷홈 개설하기 https://www.dothome.co.kr/ 닷홈 - 호스팅은 닷홈 닷홈은 무제한 웹호스팅, 무료호스팅, 도메인, 홈페이지빌더, 무제한메일, SSL보안인증서, 서버호스팅, 코로케이션 서비스를 제공하고 study-ce.tistory.com 참고 링크 2 [tools] VS Code. Visual Studio Code 설치. FTP 설정 VS CODE Visual Studio Code 아래 사이트 접속해서 다운로드. 설치 하면 됩니다. code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studi..

IT 유용한 정보 2021.06.14

aws 도메인 연결, 서버 배포 방법

😅 나의 경험(프론트엔드) 잊지 않고 기록해두었다가 다음에 다시 활용하기 위해서 간략하게라도 정리를 해놓으려 한다. (백단은 공부를 조금 더 하고 시도를 해볼 계획이며, 현재 서비스한 프론트엔드 프로젝트에 백단도 함께 곁들여볼 계획이다...화이팅🤣) 🚩 순서 1 웹 서버를 구축해서 서비스를 제공하려면 먼저 서버를 대여해야 한다. 나는 AWS 에서 EC2를 대여했다. 🚩 순서 2 클라이언트가 나의 서비스(웹 페이지)에 접속할 때, IP 주소를 입력하고 들어오기 번거로우니 가비아에서 저렴한 도메인을 구매하였다. 🚩 순서 3 구매한 도메인을 나의 서버와 연결해주어야 한다. 작성해놓은 게시물 참고('가비아'로 검색) 🚩 순서 4 /etc/폴더 안에 nginx 관련 폴더로 이동해서 nginx.conf 을 수정해주..

IT 유용한 정보 2021.06.08

가상 선택자

사용자 정보 이름 : 신청 과목 이 달에 신청할 과목을 선택하세요. 회화 문법 작문 🙄 기억하기 fieldset legend label input type="radio" radio checkbox를 사용할 때는 name을 모두 일치시켜야 한가지만을 선택하게 된다. value에는 서버에 전송할 데이터를 입력하도록 한다. input 속성 : disabled css 속성 : input:checked(선택된), input:disabled 위와 같이 css에서 사용할 수 있다. 컬러피커 크롬에서 컬러피커를 검색하면 CSS 색상을 아주 유용하게 사용할 수 있다.

HTML, CSS 2021.06.08

CSS 속성 선택자

1.선택자[속성] , 선택자[속성=값]-특정한 속성이 있는 태그 선택 img[alt] img 중에 alt 속성을 가진 것만 찾는다. input[type=password] input 중에 type이 password 인 것만 찾는다. div#header 아이디가 header 인 div 선택하는 같은 방법이다. div[id=header] div[id="header"] 2.선택자[속성~=값] , 선택자[속성|=값] -속성 안의 값이 특정 값을 단어로 포함하는 문서 객체를 선택(띄어쓰기 포함) img[alt~="test"] test 뒤에 띄어쓰기가 있는경우도 찾는다. test 앞에 띄어쓰기가 있는경우도 찾는다. img[alt|="test"] test 뒤에 - 있는 경우 찾는다. 3.선택자[속성^=값] , 선택자[..

HTML, CSS 2021.06.08

github default branch 변경하는 방법

순서 1 repository를 생성한 계정으로 로그인하기 🧁 순서 2 settings 접속 순서 3 Branches 를 클릭한 후에 우측의 연필 아이콘을 클릭하면 이름을 바꿀 수도 있고 오른쪽에 버튼을 클릭하면 다른 브랜치를 Deafult branch로 변경할 수 있다! 참고사항🍓 github의 기본 브랜치명인 master가 노예제를 연상시킨다는 이유로 main 으로 변경되었다고 한다. 이제 새로운 사용자나 조직, repository를 만들면 기본 브랜치 이름은 master 대신 main으로 생성되며 master 링크는 자동으로 main으로 redirect 된다고 한다. ( 🎈 내가 최근에 생성했던 repository는 default branch가 master였던것 같다...) 😎 Default bran..

GIT, github, gitlab 2021.06.08

[ Git ] branch 이름 변경하기

개발 브랜치를 따고 작업을 하다가 이름을 변경하고 싶은 경우가 종종있다. 작업하던 내용이 github에 oldname이라고 올라가 있는데 이 브랜치 이름을 newname으로 바꿔보자. git branch 이름 변경 우선 로컬 환경에서 브랜치 이름을 변경해야한다. git 명령을 이용해서 브랜치 이름을 바꿀 수 있다. git branch -m oldname newname mv 이전이름 새로운이름 을 이용해서 리눅스 파일의 이름을 변경하는 것처럼 쓰면 된다. 원격 저장소에 반영 로컬 저장소에서는 이름을 변경했다. 이제 변경 사항을 원격 저장소인 github에 push하면 된다. 현 상태는 oldname이라는 브랜치가 삭제되고 newname이라는 브랜치가 새로 생성된 상태다. oldname이라는 브랜치의 삭제 ..

GIT, github, gitlab 2021.06.08

숫자, 문자, 특수문자,한글 체크하는 정규식 문자

var pattern_num = /[0-9]/; // 숫자 var pattern_eng = /[a-zA-Z]/; // 문자 var pattern_spc = /[~!@#$%^&*()_+|?:{}]/; // 특수문자 var pattern_kor = /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/; // 한글체크 if(!((pattern_num.test($("#career").val())) && !(pattern_eng.test($("#career").val())) && !(pattern_spc.test($("#career").val())) && !(pattern_kor.test($("#career").val()))) ){ alert("경력은 숫자만 입력 가능합니다."); return false; }

javascript 2021.06.08
728x90
반응형
LIST