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에 어떤 파일을 올릴지 선택하는 명령어인데 .(..

CSS transition 속성으로 엘레멘트의 위치, 크기, 컬러 등이 변경될 때 부드러운 전환 효과를 넣을 수 있다. 하지만 일반적인 백그라운드 컬러와 달리, linear-gradient 를 사용한 백그라운드 컬러에는 transition 속성값이 적용되지 않는다. 그래서 여기서 트릭을 사용해야 한다 - 부모 요소에 가상 요소인 ::before 혹은 ::after를 만든다. 변화 하고 싶은 색을 linear-gradient를 사용해 입력한다. transition의 time값을 지정한다. absolute을 사용해 부모 요소와 포지션이 완전히 겹치도록 만든다. opacity 값은 0으로 설정한다. (중요!!) - 마지막으로 hover했을때 opacity가 1이되도록 속성을 추가하면 끝이다. HTML 삽입 미..

웹에서 아이콘(icon)과 텍스트(text)를 함께 배치해야 하는 경우가 있다. 예를 들어, 버튼(button) 안에 아이콘과 텍스트가 같이 있으면 사용자에게 해당 버튼의 용도를 좀 더 빠르게 전달할 수 있고, 뿐만 아니라 같은 버튼인데 데스크탑 화면에서는 텍스트만 모바일 화면에서는 아이콘만 보여주어야 할 때도 있다.이럴 때 사용할 수 있는 CSS 스타일링 요령에 대해서 알아보았다. 1. HTML 마크업아이콘과 텍스트를 나란히 배치하는 HTML 코드를 작성하였다. 아이콘은 SVG를 텍스트는  태그를 사용하였다. 내 프로필  2. 기본 스타일링정렬을 하기 전에 중요한건 우선 SVG 이미지와 텍스트의 크기를 비슷하게 맞춰주는 것이다. 아이콘 크기와 텍스트 크기가 반드시 정확히 동일할 필요는..

grid의 정렬 속성에 대하여 알아보았다. 1. auto-fill과 auto-fit auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채울 수 있다. 따라서 반응형을 보다 쉽게 만들 수 있고 repeat() 함수와 minmax() 함수랑 궁합이 잘 맞는다. .container { grid-template-columns: repeat(auto-fill, minmax(20%, auto)); } auto-fil 의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어갑니다. auto-fill과 auto-fit 의 차이는 auto-fil은 크기보다 셀의 개수가 부족하면, 공간이 남게 되고 반대로 auto-fit을 사용하면, 남는 공간..

저번 포스팅에서는 그리드를 선언하고 작성하는 방법에 대해서 알아보았다. 이번에는 템플릿 레이아웃에 대하여 알아보도록 하자! 네모네모 블록쌓기 말고, 좀 더 다양한 형태의 레이아웃을 짜고 싶을 땐 어떻게 하면 좋을까? 1. grid-line 각 아이템의 위치와 크기를 조정하는 속성이다. 아이템이 4개 있는 컨테이너에게 column과 row를 지정해 주었다. .container { display: grid; grid-template-columns: 150px 150px 150px; grid-template-rows: 150px 150px; } 그런 다음 start와 end를 시용해 첫 번째 아이템이 1에서 시작해서 4에서 끝나도록 아래와 같은 속성을 추가하였다. .item1 { grid-column-star..

레이아웃을 구현할 때는 flex를 쓰면 편리할때가 많다. flex만으로 레이아웃을 구현하는 데 큰 문제는 없지만, 보다 정교하고 복잡한 레이아웃에 편리한 grid에 대해 알아보자. 1. flex와 grid의 차이점 flex와 grid의 가장 크 차이점은 flex는 한방향 grid는 양방향이라는 점이다. 따라서 flex보다 더 복잡한 레이아웃 표현이 가능하는 장점이 있다. 2. grid구성 알아보기 ‖ 그리드 컨테이너 (Grid Container) display: grid를 적용하는, grid의 전체 영역이다. grid 컨테이너 안의 요소들이 grid 규칙의 영향을 받아 정렬된다고 생각하면 되는데 위 코드는 가 grid 컨테이너이다. ‖ 그리드 아이템 (Grid Item) Grid 컨테이너의 자식 요소이다..

웹사이트에서 많이 사용되는 배너 방식이 '텍스트 롤링' 배너이다. 여러 개의 텍스트 내용 행, 또는 아이템을 가로나 세로 방향으로 무한 회전하면서 내용을 넘겨가면서 보여주는 배너이다. 무한 롤링 배너를 만드는 방법은 CSS 키프레임 애니메이션으로 만드는 방법과, 자바스크립트로 만드는 방법으로 구분할 수 있다. 각각 장단점이 있기 때문에 어떤 방법이 더 낫다고 할 수는 없고, 용도에 맞춰 구현 방법을 선택하면 된다. 구현 난이도는 CSS 키프레임 애니메이션을 이용하는 방식이 가장 쉽다. 1. 무한 롤링 배너의 동작 방식 이해하기 무한 롤링 배너는 배너가 돌면서 무한 회전하는 듯한 느낌을 만드는 것이 핵심이다. 배너가 한쪽 방향으로 끝까지 이동한 후 처음 시작 위치로 점프해서 다시 진행하는 배너보다는 훨씬 ..

HTML 삽입 미리보기할 수 없는 소스 1. URL로 SVG 내려받기 SVG 이미지를 내려받기 위해서는 background-image 에 url() 함수의 인자로 이미지의 주소를 넘겨주면 된다. 예를 들어, 체크 모양과 하트 모양 SVG url을 check와 heart 클래스에 넣어주면, 요소 앞에 각각 체크 모양과 하트 모양의 SVG 이미지가 나타나는 것을 볼 수 있다. .check { width: 50px; height: 50px; background-image: url("https://s2.svgbox.net/octicons.svg?ic=check"); background-repeat: no-repeat; background-position: center; background-size: contai..

공백 문자 바로 띄어쓰기(\s), 들여쓰기(\t), 줄바꿈(\n)이 대표적으로 공백을 나타내는 문자이다. 하지만 이러한 문자들을 아무리 연속해서 많이 사용하더라도 웹에서는 그냥 하나의 띄어쓰기로 처리가 되는 경우가 많다. 게다가 이러한 공백 문자가 HTML 요소 내에서 맨 앞이나 맨 뒤에 나오면 아예 없는 셈 치기도 한다. normal 위와 같은 현상이 발생하는 이유는 white-space 속성은 별도로 지정해주지 않으면 기본적으로 normal이 적용이되기 때문인데 white-space 속성이 normal로 설정된 요소 안에서는 연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시가 된다. 뿐만 아니라 normal 속성값은 텍스트가 너무 길어서 부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈을 해..

CSS로 웹사이트의 레이아웃을 잡다보면 어떤 HTML 요소의 높이는 브라우저의 화면에 맞춰야 할 때가 있다. 예를들면, 웹 페이지의 풋터(footer) 영역을 화면 하단에 붙이거나 네비게이션 버튼을 화면 하단에 두어야 할때가 있다. CSS의 heigh에 대해서 알아보았다. 1. height: 100% 의 의미 HTML 요소의 높이를 스타일할 때 하기 쉬운 실수가 있다. 바로 무작정 height 속성을 100%로 설정하고 해당 요소의 높이가 화면 높이만큼 커질 거라고 기대하는 것이다. .screen-height { height: 100%; } 사실 이렇게 해주면 대부분의 경우 아무런 변화도 일어나지 않는다. 왜냐하면 %는 '부모 요소 기준'으로 결정이 되는 상대 단위이며, 부모 요소의 height 속성은 ..