🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

요약 - .gnb-sub-wrap에 css를 준다. max-height : 0; overflow : hidden; 속성으로 컨텐츠가 안보이도록 transition : 보여질 때 애니메이션 효과 - gnb > li 를 클릭하면 max-height 값 true ? max-height : 0 : max-height : 컨텐츠의 높이 1. semantic html tag 작성 메뉴소개 샌드위치 재료 주문연습 랭킹/게시판 랭킹 게시판 이벤트/뉴스 2. CSS 작성 #gnb > li:hover{ cursor : pointer; background-color : skyblue; } #gnb .gnb-sub-wrap{ max-height : 0; overflow : hidden; transition : max-heig..

SSH ssh는 원격지에 있는 컴퓨터를 안전하게 제어하기 위한 프로토콜이다. ssh client: 지금 사용하고 있는 나의 컴퓨터 하고 싶은 것 : 지금 내 노트북을 가지고 원격지에 있는 서버에 접속하고 싶음. 프로토콜 필요 > ssh 이용 무엇으로 접속 : shell을 통해 * shelll : 명령어로 컴퓨터를 제어하는 방식 기존에는 telnet을 주로 이용해서 통신을 했는데 보안상의 문제점으로 나온 것이 SSH이다. SSH는 강력한 암호화 방식을 사용해 client와 server를 연결시켜 데이터를 중간에서 가로채도 해석할 수 없는 암호화된 문자만을 노출시킨다. 윈도우는 SSH Client가 기본적으로 설치되어 있지 않음. 유닉스 계열에만 기본적으로 설치되어 있음. SSH Client 종류 - PuT..

1. The 4 Basic Parts of Computer 컴퓨터는 크게 4가지로 구성되어 있다. - input - cpu - output - memory 그리고 각 파트는 CPU를 중심으로 상호작용한다. 2. More Computer Hardware - Input : mouse, keyboard와 같이 컴퓨터에 내가 연결한 장치들 - Output : 모니터와 스피커처럼 출력해내는 것 - CPU : 컴퓨터의 중심. 컴퓨터를 작동시키게 하는 core 장치이다. - Memory : short term memory(LAM) or longer term memory(hard drive, cd-ROM) 3 more things 1. motherboard(also called mainboard) 모든 것과 연결된 b..

변경 전 1. gnome-tweaks 다운받기 what is GNOME? 그놈은 GNU Network Object Model Environment의 약자로 리눅스 시스템에서 사용자가 쉽게 컴퓨터 어플리케이션을 설정할 수 있도록 도와주는 GUI이다. 리눅스는 윈도우와 다르게 설정을 할 때 주로 GUI 가 아닌 CLI(command-line interface)를 이용한다. 그놈은 윈도우에서처럼 쉽게 세팅을 GUI 환경에서 할 수 있도록 도와준다. GNOME tweaks 도구를 이용하면 리눅스 데스크탑을 쉽게 커스터마이징 할 수 있다. $sudo apt install gnome-tweaks 2. ocs-url 다운받기 ocs-url은 우분투 환경에서 install을 도와주는 프로그램이다. ocs-url을 통해..

1. setup 깃 설치하기 git : all the commands git --version .gitconfig : 모든 git에 관한 설정 ! git config --list config 파일 열기 git config --global -e config 파일을 에디터와 연결하기 git config --global core.editor "code" code 명령어를 입력하면 gitconfig 파일이 에디터에서 열림 code . 기본 정보 설정하기 git config --global user.name "sinyoung" //name 설정 git config --global user.email "sinyoung@naver.com" //email 설정 git config userr.name //sinyoung..

1. semantic html tag 작성 ⏱️STOPWATCH 00:00:00 시작 2. CSS 작성 *{ margin : 0; padding : 0; box-sizing: border-box; } main{ position : absolute; top : 50%; left : 50%; transform : translate(-50%, -50%); width : 551px; border : 1px solid #ccc; border-radius : 10px; } main h1{ font-size : 15px; color :#4285f4; font-weight : lighter; border-bottom : 1px solid #4285f4; padding : 10px; } main section.stopw..

요약 - nav 안에 버튼 태그를 생성한다. - 버튼 태그 안에 span 태그를 넣어 css로 라인을 생성해준다. - 버튼을 클릭하면 gnb 태그에 open 클래스가 있다면 ? open을 삭제해준다 : open을 붙여준다 1. semantic html tag 작성 News Contact About 2. JS 작성 const hamburgerToggle = document.querySelector(".hamburger-btn"); const nav = document.querySelector("nav"); hamburgetToggle.addEventListener("click", () => { nav.classList.toggle("open"); this.classList.toggle("toggled");..

용어 정리 - 이벤트 버블링(event bubbling) : 이벤트 타깃 요소에 이벤트가 발생하면, 최상단의 부모 요소까지 각각 할당된 이벤트가 발생되는 것. - 이벤트 캡처링(event capturing) 3단계의 이벤트 흐름에서 첫 번째 단계이다. 1. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계 2. 타깃 단계 3. 버블링 단계 가장 최상위 조상에서 아래(타깃 요소)로 이벤트가 전달되는 단계이다. 이벤트(Event) 브라우저에서 로그인 버튼을 클릭했을 때, 뒤로 가기 버튼을 클릭했을 때 브라우저는 버튼의 역할에 맞게 동작을 수행한다. 사용자가 어떤 사건(버튼 클릭, 더블클릭, enter 등)을 발생시켰을 때 브라우저가 이를 감지하여 이벤트(로그인을 한다, 다음 페이지로 넘긴다 등)를 발생시킨..