CoDing114
가상 클래스 선택자
개요 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :hover - 마우스를 롤오버 했을 때 :active - 마우스를 클릭했을 때 :focus - 포커스 되었을 때 (input 태그 등) :first - 첫번째 요소 :last - 마지막 요소 :first-child - 첫번째 자식 :last-child - 마지막 자식 :nth-child(2n+1) - 홀수 번째 자식 위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있습니다. 사용법 ...
Display&Position
Display&Position div:블럭 레벨이라 한줄에 하나씩 나온다 span: inline레벨이라 공간만되면 한줄에 여러개 나온다 display:레벨 기본값 변경이 가능하다 inline:한줄에 여러개가 들어갈수잇다 inline-block:한줄에 여러개가 들어갈수잇는 box block:한줄에 하나만 들어가는 box container box Position static: 기본적으로 가지고 잇고 HTML에 정의된 순서대로 브라우저 상에 자연스럽게 보여진다 relative: 원래 잇어야하는 자리에서 지정한 위치까지 이동 absolute: 내 아이템이 담겨 잇는 박스 안에서 원하는 위치까지 이동한다 fixed: 박스를 벗어나 윈도우 안에서 지정위치까지 이동 (flex-flow:아래 내용을 묶어서 사용가능 [..
DNS Record Type 레코드 종류와 역할
Dns 레코드 유형 및 간단한 dns zone 파일 분석 넷상의 존재하는 네트워크 장비들은 기본적으로 ip를 통해 통신을 하게 됩니다. 다만 이용자, 즉 우리 사람들은 모든 서버의 ip를 외울 순 없습니다. 이를 간단하게 외울 수 있도록 도와주는 것이 도메인(domain)입니다. ip를 외우는 것 대신 도메인을 외움으로써 좀 더 간단하게 원하는 웹페이지, 필요한 서버 등을 찾을 수가 있습니다. 이 과정에서 ip와 도메인을 매칭해주는 역할을 하는 서버가 필요한데 이를 도와주는 것이 DNS(Domain Name Service) 입니다. 내가 구매한 도메인의 네임서버를 지정해주면 해당 네임서버에서 갖고 있는 dns의 레코드를 통해 이용자가 찾고자 하는 도메인을 ip로 변경하여 통신을 하도록 도와주는 것입니다...
Visual Studio Code 비주얼스튜디오코드 단축키
Visual Studio Code 단축키 알아보기 (VS Code ) 최애 단축키 나눔합니당 ■ 모니터 최대화면: F11 ■ 사이드바 표시/숨김: Ctrl+ b ■ 터미널바 표시/숨김: Ctrl+ j , Ctrl+` 소스 편집 관련 단축키 Editing ■ 들여쓰기:Tab , 내어쓰기:Shift + Tab ■ 줄 이동: Ctrl+G ■ 라인 이동: Alt + ↑/↓ ■ 라인 복붙: Shift+ Alt + ↑/↓ (드래그하여 여러줄 복붙 가능) ■ 라인 복사: Ctrl+C ■ 라인 잘라내기: Ctrl + X ■ 라인 이동: Ctrl + G ■ 단어 별 이동: Ctrl+←/→ ■ 단어 별 선택: Ctrl+Shift+←/→ ■ 다음줄 바로가기: Ctrl+Enter ■ 단어 별 선택: Ctrl+Shift+←/→..
![[HTML]Emmet 사용법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdknFiC%2FbtraQqh8vfC%2FGsXYLuwc4nyPQyO63BGMC0%2Fimg.jpg)
[HTML]Emmet 사용법
Emmet이란? 강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인 Emmet (에밋)을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다!! 👏🏽👏🏼👏🏻 VS Code는 emmet을 기본적으로 지원하고 Tab키를 통해 사용한다. 🧶 HTML 구조화 하기 (Nesting operators) Emmet의 문법을 활용하여 요소들의 구조를 간편히 생성할 수 있다. Emmet 문법 요소 (Elements) 생성 생성하려는 요소의 이름을 입력한 뒤 tab을 누르면 태그가 자동 생성된다. Emmet에는 미리 정해진 태그 이름이 없다. 즉, 아무 이름으로나 태그를 생성할 수 있다.(에디터에 따라 그렇지 않은 경우도 있다.) html:5[tab] 결과: helloworld[..
POSIX CLI 실습 필기
수업소개 POSIX는 서로 다른 운영체제를 같은 방법으로 조작하기 할 수 있도록 만들어진 표준입니다. 이 표준을 준수하는 운영체제로는 unix, macos가 있습니다. linux는 posix를 100% 따르고 있지는 않지만 거의 호환된다고 보시면 됩니다. 윈도우나 모바일 운영체제는 posix를 따르고 있지 않습니다. 이 수업에서는 posix를 따르는 운영체제들을 Command Line Interface를 이용해서 다루는 방법을 살펴봅시다. 수업대상 이 수업은 아래와 같은 상황에 있는 분들을 위한 수업입니다. 컴퓨터를 명령어로 조작하고 싶은 분 컴퓨터의 관리를 자동화하고 싶은 분 CRUD Create 데이터 생성 Read 데이터 읽기 Update 데이터 수정 Delete 데이터 삭제 File Directo..
Node.js 실습 필기 라이브러리 설치
손쉬운 사용: 터미텅창 재부팅:Ctrl+C 이번 필기는 Node.js 설치후 VSCODE에서의 운용방법에 관한것이다. 라이브러리express를 설치해보자: VSCODE에서 작업영역을 설정한다. VSCODE에서 새터미널을 연다 터미넣에 npm init 입력 (여기서 npm은 라이브러리 설치를 도와주는 도구이다) -init은 내가 라이브러리르 어디에 설치햇느지 package.json이라는 파일에 저장을 해준다. 위 와 같이 나오면 여기서부터는 Enter만 잘 치면 된다 entry point: (index.js) server.js - entry point: (index.js) 엔트리 포인트만 내가 원하는 파일명으로 바꿔 주면 된다. Is this OK? (yes) 라는 창이 뜰때까지 계속 Enter를 누른다 ..
JavaScript 실습 필기 함수Function
WEB Console 창을 이용하여 모든 a태그 가져오기 consonle창에 > document.queryselectorAll('a') 검색 > document.queryselectorAll('a') 검색 >(4) [a,a,a,a] >(4) [a,a,a,a] 검색결과:노드리스트를 받을수잇음, 배열이라고 생각하면됨 var alist = document.queryselectorAll('a'); console.log console.log(alist[0]); 위결과를 alist라는 변수에 담는다 줄바꿈(Shift+Enter) console.log 를 사용하면 괄호안에 잇는 내용이 콘솔창에 출력된다 첫번째 태그 출력 >> HTML -length를 사용 하면 몇개의 a태그를 찾앗는지 출력된다 var alist = ..