1. 파일 및 디렉토리 관리ls : 현재 디렉토리의 파일 목록 보기cd 디렉토리명 : 디렉토리 이동pwd : 현재 위치 확인mkdir 디렉토리명 : 새 디렉토리 생성rm 파일명 : 파일 삭제rm -r 디렉토리명 : 디렉토리 삭제cp 원본 대상 : 파일 복사mv 원본 대상 : 파일 이동 또는 이름 변경2. 파일 내용 확인 및 편집cat 파일명 : 파일 내용 출력less 파일명 : 파일 내용 페이지 단위로 보기nano 파일명 : 간단한 텍스트 편집기vim 파일명 : 강력한 텍스트 편집기head 파일명 : 파일의 처음 몇 줄 보기tail 파일명 : 파일의 마지막 몇 줄 보기3. 사용자 및 권한 관리whoami : 현재 로그인한 사용자 확인who : 현재 로그인한 모든 사용자 확인chmod 권한설정 파일명 : ..

📍 기본 필터 선택자(Basic Filter) 선택자 예제 설명 :odd $("div:odd") 홀수 번째에 위치한 문서 객체를 선택함 :even $("div:even") 짝수 번째에 위치한 문서 객체를 선택함 :first $("div:first") 첫 번째 위치한 문서 객체를 선택함 :last $("div:last") 마지막에 위치한 문서 객체를 선택함 선택자 예제 설명 :root $("div:root") document의 루트 요소 선택 :target $("div:target") document의 URL의 flagment 식별자로 지정된 대상 요소를 선택 :header $("div:header") h1, h2, h3 등과 같이 헤더인 모든 요소를 선택 :empty $("div:empty") 자식이 없..

📍 기본 선택자 선택자 예제 설명 * $("*") 모든 요소를 선택 .class $(".class") 지정한 클래스를 가지는 모든 요소를 선택 element $("element") 지정된 태그명을 가지는 모든 요소를 선택 #id $("#id") 지정한 ID 속성을 가지는 하나의 요소를 선택 , $("selector1, selecotr2") 모든 지정한 선택자들의 결과들을 결합하여 선택 📍 자식 선택자 (child) 선택자 예제 설명 :first-child $("div:first-child") 부모의 첫 번째 자식인 모든 요소를 선택 :first-of-type $("div:first-of-type") 동일한 요소 이름의 형제 중 첫 번째 요소를 모두 선택 :last-child $("div:last-chil..

📁 올리브영 온라인몰 👉 사이트명 : 올리브영 온라인몰 👉 작업기간 : PC버전 7일, 모바일 1.5일 👉 사용언어 : HTML5, CSS3, Jquery, JSON 👉 라이브러리 : Swiper 👉 분류 : PC 적응형, Mobile 적응형 웹사이트 👉 URL : PC > https://codenablog.github.io/Oliveyoung-pc/ Mobile > https://codenablog.github.io/Oliveyoung-mo/ ✨ POINT ✔️ Fetch 비동기 통신을 활용해 JSON 파일의 정보 불러오기 ✔️ Filter로 원하는 값의 데이터를 분류 ✔️ 3단 카테고리 구성 ✔️ 다른상품 추천, 다른 키워드 더보기 버튼 클릭시 새로운 정보 불러오기 ✔️ Swiper 커스텀 - 내장 ..

보호되어 있는 글입니다.

오늘은 반응형 웹 디자인을 제작하기 위한 미디어 쿼리 해상도 분기점 리스트를 공유하려고 합니다. 👉 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해주어야 합니다. html 태그에 뷰포트 태그를 선언해줍니다. width=device-width : 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 기본 사이즈를 1로 지정함. 👉 디바이스별 분기점 👉 반응형 분기점 1. 낮은 해상도의 PC, 태블릿 가로 : ~1024px 2. 테블릿 가로 : 768px ~ 1023px 3. 모바일 가로, 태블릿 : 480px ~ 767px 4. 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-wid..

📁 엔터프라이즈 블록체인 👉 사이트명 : 엔터프라이즈 블록체인 👉 작업기간 : 6일 👉 사용언어 : HTML5, CSS3, JQuery 👉 라이브러리 : GSAP, Swiper 👉 분류 : PC 세미 반응형 웹사이트 👉 URL : https://codenablog.github.io/Enterprise-Blockchain/ ✨POINT ✔️ 모션의 분석과 이해 ✔️ GSAP + ScrollTriger를 활용한 애니메리션 구현 ✔️ Video Background로 사용 ✔️ Top 버튼 위치 변화 ✔️ 한 방향으로 계속 흘러가는 텍스트 베너 💡 구조 살펴보기 1. 전체 태그를 wrapper로 감싸주기 세미 반응형이지만 PC만 지원하도록 만들었기 때문에, 최소너비를 1300픽셀로 잡아주었다. 이때, 컨텐츠의 ..

💡 github 업로드를 위한 핵심 코드 1. git init (맨 처음만) 2. git add . 2-2. git status (생략가능) 3. git commit -m "first commit" 4. git remote add origin https://github.com/CodenaBlog/파일 이름.git 4-2. git remote -v (생략가능) 5. git push origin master 💡 코드 자세히 살펴보기 📍 1. git init init = initialize = 초기화 (git을 쓰기 위해 초기화를 한다는 의미이다.) 맨 처음 프로잭트를 올릴때는 git init을 해주어야 함 📍 2. git add . git add는 git hub에 어떤 파일을 올릴지 선택하는 명령어인데 .(..