본문 바로가기

분류 전체보기

티스토리에 링크 버튼 서식 만들기 CSS, HTML 링크 버튼 CSS 적용하기 1. 우선 버튼 디자인 고르면 HTML 과 CSS 코드를 주는 사이트에 접속한다. 👉버튼 디자인 사이트👈 👆이 링크 버튼 만드는 방법 알려드리는 거에요 :) (버튼은 모바일 화면에선 안보이고 PC화면에서만 보임) 2. 여러 템플릿들 중에 맘에 드는 것을 하나 선택한다. 3. Get Code 버튼을 누른다. 그럼 옆에 html 코드와 css 코드가 등장한다. 4. 일단 아래 네모친 부분만 복사해서 티스토리 관리 페이지 -> 스킨편집 -> html 편집 -> CSS 로 들어가 붙여넣기 한다. 이 CSS 화면에 빈 곳에 붙여넣기 해주고 적용 버튼 눌러준다. 링크 버튼 서식 만들기 이렇게 만든 것을 서식을 만들어서 그때그때 글쓸때마다 쉽게 사용할 수 있게 하자. 1. 서식관리에 들어가.. 2022. 4. 29.
파일, 폴더(디렉토리) 다루는 커맨드 - cat, less, head, tail, mv, cp, rm 이번 글에서는 cat, less, head, tail, mv, cp, rm 커맨드의 사용법과 예시를 설명하겠습니다. pwd, cd, ls, mkdir, touch 커맨드는 아래에서 확인해보세요! 👉파일, 폴더(디렉토리) 다루는 커맨드 - pwd, cd, ls, mkdir, touch 👈 cat (concatenate) 지정한 파일들의 내용을 출력해 보여줍니다. 파일이 여러 개인 경우엔 내용을 아래로 쭉 붙여서 출력해줍니다. 사용법: cat PATH1 PATH2 ... 사용 예: cat file1.txt cat file1.txt file2.txt less PATH에 해당하는 파일의 내용을 페이지 단위로 나눠서 출력해줍니다. 사용법: less PATH 사용 예: less file1.txt 페이지 이동 단축키.. 2022. 4. 29.
CSS - margin & padding 차이점, 사용법 Padding과 Margin의 차이 Padding과 Margin은 자칫 헷갈릴 수 있는 개념이기 때문에 차이를 정확히 알아봅시다. 요소는 아래 그림 처럼 내용(content), 패딩(padding), 테두리(border)로 이루어져 있습니다. 파란 부분이 내용이고, 초록색 부분이 패딩, 그 밖에가 테두리입니다. 패딩(Padding)은 내용(파란부분)과 테두리 사이의 '여유 공간' 입니다. border 까지가 요소이고, Margin은 요소 주위의 여백입니다. 다른 요소와의 사이 공간이라고 할 수 있습니다. Padding을 주는 4가지 방법 Padding을 주는 방법에는 몇 가지가 있습니다. 1. 우선 가장 직관적인 방법은 top, bottom, left, right 를 각각 적어주는 방법입니다. 예시 코드.. 2022. 4. 28.
언어별 주석 처리 방법 (C, JAVA, CSS, HTML, SQL, Python 등) 언어별 주석 처리 기호 모음 ! C, C++, C#, Objective-C ,JAVA, Javascript, R, Go, Kotlin, Swift 의 주석 처리 한 줄 주석은 // 여러 줄 주석은 /* */ // 한 줄 주석 /* 여러 줄 주석 */ HTML , XML 의 주석처리 한 줄도, 여러 줄도 CSS 의 주석처리 CSS 주석은 /* */ /* 영화 제목 */ .movie h1 { color: #4d9fff; text-align: center; font-size: 40px; } /* 영화 줄거리 */ .movie p { font-size: 20px; } Python, Ruby 의 주석처리 파이썬의 경우에 한줄 주석은 # 여러줄 주석은 작은따옴표 3개씩 ''' ''' or 큰 따옴표 3개씩 """ .. 2022. 4. 28.
CSS - '클래스(class)'와 '아이디(id)' 정리 HTML 요소에게 '이름' (별명? 닉네임?) 을 주는 방법은 두 가지가 있습니다 클래스 (class) 아이디 (id) 클래스 (class) 아래 코드에서 첫 번째 태그와 세 번째 태그는 "big" 이라는 이름의 클래스를 갖고 있습니다. 그러면 css에서 .big 에 스타일을 입혀주면 됩니다. 클래스 이름이라는 걸 나타내는 기호는 '.(마침표)' 입니다. First Second Third .big { color: blue; font-size: 48px; } 결과화면 > 아이디 (id) 아래 코드에서 첫 번째 태그는 "test"라는 이름의 id를 갖고 있습니다. 그러면 css에서 #test 에 스타일을 입혀주면 됩니다. 아이디(id) 를 나타내기 위한 기호는 '#(샾 표시)' 입니다. First Secon.. 2022. 4. 28.
CSS - 기본 속성 정리 style, 폰트크기, 텍스트 정렬, 색상, 여백 style 태그 사이트에 CSS 스타일을 입혀주기 위해서 보통 css 파일을 따로 두고 link로 연결해서 쓰지만, 가볍게 바로 확인해 보기 위해서 HTML 상에서 폰트 크기 CSS에서 폰트 크기를 표현할 수 있는 단위가 몇 가지 있는데, 그 중 픽셀(px)이 가장 많이 사용됩니다. Heading 1 Heading 2 결과 화면 > 텍스트 정렬 글은 왼쪽, 가운데, 오른쪽으로 정렬할 수 있습니다. Heading 1 Heading 2 Heading 3 결과 화면> 텍스트 색 글에 색을 입히고 싶을 땐, color 속성을 사용하면 됩니다. Heading 1 Heading 2 Heading 3 결과 화면> 여백 margin 속성을 사용하여, 요소 사이의 여백을 설정할 수 있습니다. 여백의 크기도 픽셀(px) .. 2022. 4. 28.
CSS - 속성 상속 개념과 예시 코드 CSS - 상속개념과 예시 CSS에는 '상속'이라는 개념이 있습니다. '상속'은 말 그대로 부모 요소의 속성들을 자식들한테 그대로 넘겨주는 것입니다. 아래 예시에서 '상속' 개념을 확인해봅시다. .div1의 폰트 색을 blue로 설정해주었습니다. 태그와 태그에 대해서는 별도의 설정을 하지 않았습니다. 그럼에도 불구하고 과 태그의 폰트 색이 파란색으로 설정되었습니다. 그 이유는 .div1 이라는 부모의 스타일이 자식들에게 상속되었기 때문입니다. 상속되는 속성들 모든 태그의 속성이 상속 되는 것은 아닙니다. 태그와 속성에 따라 상속이 되지 않는 경우들도 많이 있습니다. 예를 들어, 부모 태그에 설정한 margin이나 padding이 모든 자식들에게 적용되면 난리가 나겠죠? 아래는 웬만하면 상속되는 몇 가지 .. 2022. 4. 28.
CSS - 속성 단위 px, rem, em, % 사용예시, 계산 기준 CSS에는 폰트 크기, padding, margin, width 등 다양한 속성들에 사용할 수 있는 여러 단위가 있습니다. px, rem, em, % 등이 있습니다. px px는 절대적인 값입니다. 다른 요소의 값에 영향을 받지 않습니다. px 사용 예시 코드> .container { padding-top: 40px; background-color: lime; } rem rem 은 상대적인 값입니다. 어떤 값에 의해 결정 되느냐? 태그의 font-size에 의해 결정됩니다. 3rem은 태그의 font-size의 3배 크기입니다. rem 사용 예시 코드> html { font-size: 20px; } .container { padding-top: 3rem; /* html의 font-size * 3 = 60.. 2022. 4. 28.
구글 서치콘솔 - 사이트맵 제출했는데 색인 안된 URL 색인 시키는 2가지 방법 구글 서치콘솔 - 사이트맵 제출했는데 색인 안된 URL들 색인 시키는 방법 : 2가지 경우가 있음 1. 색인 -> 사이트맵 (Sitemaps) -> 제출한 사이트맵 클릭 2. 색인 생성 범위 보기 클릭 3. 제외됨 클릭 (제외됨 으로 되어있는게 이렇게나 많아...? ) 4. 제외된 유형들 하나씩 다 눌러서 아래 내용 반복 적용하기 5. URL 에 마우스 올려두면 생성되는 돋보기 아이콘 클릭 6. 그럼 두가지 경우가 나옵니다. 첫번째는, URL 이 구글에 등록 되어있다고 함. 그런데 색인이 생성되었으나 사이트맵에 제출되지 않았습니다. 라고 적혀있음. 이 경우엔 오른쪽 위에 "실제 URL 테스트" 버튼 클릭 1~2분 기다리면 "URL을 색인 생성할 수 있음" 이렇게 바뀜! 그러면 테스트 해봤을 때 문제가 없.. 2022. 4. 22.
UA에서 GA4 (Google Analytics 4) 로 업그레이드 하기 (셋팅 방법) 이 글에서 Google Analytics 4로 업그레이드하는 방법과 몇 가지 기본 설정 방법에 대해 설명하겠습니다. GA4와 UA의 차이 GA4 (Google Analytics 4) 로 업그레이드 하기 GA4 몇 가지 기본 설정 하기 (데이터보존기간, 내부ip차단) GA를 사용하기 위한 팁 (보고서 만들기) 우선, GA4와 UA의 차이는 무엇인가? GA4는 앱 + 웹 통합 으로 구축되었습니다. UA 는 앱과 웹이 각각 이지만 GA4 에서는 앱과 웹 구분 없이 데이터가 통합됩니다. GA4는 데이터 수집 및 보고 방식이 UA(Universal Analytics)와 다릅니다. GA4 '이벤트' 기반 모델을 사용합니다. 구글은 마케팅 담당자들이 '이벤트' 기반 모델로 사용자 데이터를 분석하기를 바라고 있습니다... 2022. 4. 21.
vim 설치, 사용 법, 단축키 (CLI 텍스트 에디터) GUI (graphical user interface) 환경에서는 텍스트 에디터로 메모장, word, Microsoft 등 다양한 프로그램을 사용한다. 그렇다면 CLI (Command-line interface) 환경에서는 ? CLI 환경에서 텍스트 에디터로 사용하는 것이 바로 vim 이다. 터미널에서 vim 이라고 입력하고 엔터를 누르면 텍스트 에디터 vim 이 켜진다. 근데 vim 이 없는 command 라고 하면서 안뜨면 vim 이 없는 것이다. 깔아주면 된다. sudo su apt-get update apt-get install vim 한 줄씩 실행 하면 vim 설치 완료. vim 커맨드를 사용하여 vim 을 실행시킨다. 파일경로를 아규먼트로 주면 해당하는 파일을 열어주고, .. 2022. 4. 6.
[용어설명] Terminal, Shell , bash , zsh Terminal 터미널 우리가 보통 생각하는 커맨드를 입력하는 '검은 화면' 인풋을 받고, 아웃풋을 출력해 주는 프로그램 Shell 셸 커맨드를 해석해 주는 프로그램 컴퓨터는 pwd 같은 커맨드들을 사실 이해하지 못함. 컴퓨터가 이해할 수 있는 형태로 바꿔줘야 하는데, 그게 바로 shell이 하는 역할. 셸은 커널과 사용자간의 다리역할을 하며 사용자로부터 받은 명령을 컴퓨터가 이해할 수 있는 형태로 바꿔서 전달해 줌. Shell은 여러 종류가 있고, 종류에 따라 커맨드를 해석하는 방식이나 제공하는 인터페이스가 조금은 다를 수 있지만 대부분의 경우 아주 비슷하거나 똑같이 작동함 Bash (Bourne again shell) 가장 보편적이고, 많은 유닉스 운영 체제에서 사용중인 Shell의 한 종류 Ubun.. 2022. 4. 5.
[엑셀, 구글 스프레드시트] 표에서 가로 세로 교차하는 지점 값 반환하기 (vlookup + match) 엑셀, 구글 스프레드시트에서 함수를 사용하여, 표에서 가로 세로 모두 맞는 값 찾는 방법 (vlookup + match) VLOOKUP 과 MATCH 함수를 중첩하면 표에서 가로 세로가 교차하는 지점의 값을 반환 할 수 있다. 배송비 테이블이 아래와 같이 있다. 오른쪽 표에 1지역, 무게 0.5kg 이면 배송비가 얼마인지 반환해주고 싶다면 ? =VLOOKUP (H4, A3:D11, match(G4,B3:D3,0)+1, 0) =VLOOKUP ( 0.5kg무게를 , 배송비테이블 A3:D11에서 검색, 반환해줄 열은 몇번째 열인지 , 일치검색 ) match(G4, B3:D3, 0 )+1 를 들여다 보면, match ( 검색할 지역, B3:D3 범위에서 몇번째 칸에 있는 단어인지, 일치검색 ) + 1 i4 셀을.. 2022. 4. 5.
WSL 에서 윈도우 탐색기 열기 (feat. Ubuntu) WSL 에서 윈도우 탐색기 열기 (Windows Subsystem for Linux) explorer.exe . explorer마침표exe 한칸 띄고 마침표 명령어 입력하고 엔터치면 윈도우 탐색기가 열린다 ​ 탐색기에서 편리하게 파일 관리하는 것이 가능! 2022. 4. 1.
파일 확장자 보이게 설정하기 (window) 확장자에 따라서 연결되는 것들이 다르기 때문에 개발을 할 때는 확장자가 매우 중요 파일 확장자 보이게 설정하는 방법 파일 탐색기 -> 보기 -> 옵션 -> 폴더 및 검색 옵션 변경 보기 탭에서 "알려진 파일 형식의 파일 확장명 숨기기" 체크 해제한 후 적용 버튼 -> 확인 버튼 확장자가 보이도록 설정 완료! 2022. 4. 1.
[구글 스프레드시트] 날짜 차이 구하기 DATEDIF 날짜 차이 DATE DIFFERENCE 의 약자 DATE DIF DATEDIF 함수 사용법 DATEDIF ( 시작일, 종료일, 차이를 계산할 단위 ) 차이를 계산할 단위는 Y, M, D, MD, YM, YD 중에 택 1 "Y": 시작일과 종료일 사이 전체 연도의 수 "M": 시작일과 종료일 사이 전체 개월의 수 "D": 시작일과 종료일 사이의 전체 일 수 "MD": 시작일과 종료일 사이의 기간에서 전체 개월 수를 무시한 일 수 "YM": 시작일과 종료일 사이의 기간에서 전체 연도 수를 무시한 개월 수 "YD": 시작일과 종료일 사이의 간격이 1년 이하라는 가정 하에 계산한 시작일과 종료일 사이의 일 수 EX ) '내 나이에서 만이 되는 연 수와 월 수를 빼면 며칠이 남는지' 확인하려면 단위 "MD"를 사.. 2022. 3. 31.
[SQL 예문] SQL 연습하기 3 (기초 쿼리문) 1) '회원 가입 경로' 테이블에 있는 모든 컬럼을 출력해보자 테이블명 : member_get SELECT 는 컬럼을 선택하는 명령어인데 * 를 뒤에쓰면 모든 컬럼 선택한다는 의미 SELECT * FROM member_get idx, mb_id, how_get, get_datetime 이렇게 4개 컬럼이 존재한다. how_get 컬럼이 가입경로 컬럼인데 빈칸은 고객이 가입경로 체크 안한 것 ㅎㅎ 2) how_get 컬럼이 빈칸인건 제외하고 값이 있는 것만 출력해보자 SELECT * FROM member_get WHERE how_get != '' WHERE 는 조건을 걸어주는 명령어 = 이 같다는 의미고 != 는 같지 않다는 의미다 작은 따옴표를 두번 써주면 빈칸을 의미. 즉 how_get 컬럼이 빈칸이 .. 2022. 3. 24.
[SQL 예문] SQL 연습하기 2 (기초 쿼리문) 1) member 테이블에 있는 모든 컬럼을 출력해보자 SELECT 는 컬럼을 선택하는 명령어인데 * 를 뒤에쓰면 모든 컬럼 선택한다는 의미 SELECT * FROM member 컬럼이 대략 20개 정도 있는 테이블이다. id, name, nick_name, 가입일(mb_datetime), email 기타등등 2) 가입일이 '2021-01-01' ~ '2021-01-10' 인 데이터들만 출력해보자 SELECT * FROM member WHERE mb_datetime BETWEEN '2021-01-01 00:00:00' AND '2021-01-10 23:59:59' WHERE 조건절에서 가입일 컬럼 mb_datetime 를 해당 기간으로 걸어준다 3) 가입일이 '2021-01-01' ~ '2021-01-1.. 2022. 3. 24.
[SQL 예문] SQL 연습하기 1 (기초 쿼리문) 입문용 예시 쿼리문 :) 1) visit_sum 테이블에 있는 모든 컬럼을 출력해보자 SELECT 는 컬럼을 선택하는 명령어인데 * 를 뒤에쓰면 모든 컬럼 선택한다는 의미 SELECT * FROM visit_sum 컬럼이 vs_date 와 vs_count 두개 존재하는 테이블 . vs_date 는 날짜이고 vs_count 는 방문자 count 한 숫자. 2) visit_sum 테이블에서 날짜조건을 걸어보자. - WHERE 2021-01-01 부터 2021-01-31 기간동안 일별 방문자수를 출력해보자 SELECT * FROM visit_sum WHERE vs_date BETWEEN '2021-01-01' AND '2021-01-31' 날짜가 정렬이 안되어 있다. 3) 날짜를 오름차순으로 정렬해보자 - O.. 2022. 3. 24.
[SQL 예문] 상품등록 후 최초 30일간 판매 데이터 (반응 좋은 신제품 알아보기) 잘나가는 신제품, 반응이 좋은 신제품을 알아보고 싶을 때 각 SKU 별 상품등록 후 최초 30일간의 판매 데이터를 보고 파악할 수 있다. 아래 캡쳐본 같은 형식의 데이터를 뽑아보기 위해 쿼리문을 작성했다. 쿼리문 ) SELECT it.s2_product_code AS SKU ,it.it_name AS product_name ,it_time AS reg_date ,TO_CHAR(SUM(ct.ct_qty) , '999,999,999') AS first_30days_od_qty ,TO_CHAR(SUM(ct.ct_price * ct.ct_qty), '999,999,999.99' ) AS first_30days_od_price FROM shop_order AS od JOIN shop_cart AS ct ON od.. 2022. 3. 21.
[SQL 예문] 브랜드별 매출 국가 순위 TOP 10 (ft. 서브쿼리, Round_number() Over () ) 브랜드별, 어느 국가에서 잘 팔리는지 매출 순으로 상위 국가 10개씩 추출하기 아래와 표와 같은 형식으로 데이터를 뽑아보자 JOIN 2번 하고 서브쿼리 쓰고 ROW_NUMBER() OVER (PARTITION BY _ ORDER BY _) 함수를 사용했다. SELECT it_brand ,od_b_country ,od_price FROM ( SELECT it.it_brand ,od.od_b_country ,TO_CHAR (SUM(ct.ct_qty) , '999,999,999') AS "od_qty" ,TO_CHAR (SUM(ct.ct_price * ct.ct_qty), '999,999,999.99' ) AS "od_price" ,ROW_NUMBER() OVER (PARTITION BY it_brand OR.. 2022. 3. 18.
[SQL 예문] 브랜드별 판매수량, 금액 구하기 (feat. JOIN) 우리 회사 DB 구조 상, 브랜드별 판매수량, 금액을 추출하기 위해서는 세 테이블을 조인 해야한다. ITEM 테이블 , CART 테이블, ORDER 테이블 왜 이렇게 세개가 필요하냐면, CART 와 ORDER 테이블엔 BRAND 명 칼럼이 없음 ORDER 테이블엔 주문번호별 총주문금액은 있어도 한 주문번호 안에 어떤 상품들을 담았는지는 없음 그건 CART테이블에 데이터 존재 ITEM 테이블에 BRAND 명 칼럼 존재. CART 테이블에 상품별 판매수량, 금액 칼럼 존재 ORDER 테이블에 주문번호 (od_id), 결제일시 (od_receipt_time) 칼럼 존재 우선 ORDER 테이블과 CART 테이블을 주문번호 (od_id) 를 key 로 해서 JOIN 한다. 이렇게 JOIN 한 결과와 ITEM 테이.. 2022. 3. 18.
[SQL 함수] RANK() OVER (Partition by _ Order by _ ) 그룹핑 한 후 순위를 매겨주는 함수 SELECT RANK( ) OVER ( PARTITION BY 그룹핑할 칼럼 ORDER BY 정렬할 칼럼 ) FROM 테이블명 ( ORDER BY 정렬할 칼럼 DESC or ASC or 생략하면 ASC가 디폴트값 ) 이 긴 함수가 한 세트~ PARTITION BY 에 지정한 칼럼 기준으로 그룹핑 해주고 ORDER BY 에 지정한 칼럼 기준으로 정렬해준담에 RANK 행 마다 순위를 매겨준다 ROW_NUMBER() OVER (Partition by _ Order by _) 와의 차이점은 ROW_NUMBER( ) : 1등이 2명이어도 1등, 2등으로 나눔 RANK( ) : 1등이 2명이면 그 다음 순위는 3등으로 매김 예시 쿼리문 ) SELECT s.ip, s.session.. 2022. 3. 14.
[SQL 함수] ROW_NUMBER() OVER (Partition by _ Order by _ ) 그룹핑 한 후 순번을 매겨주는 함수 SELECT ROW_NUMBER( ) OVER ( PARTITION BY 그룹핑할 칼럼 ORDER BY 정렬할 칼럼 ) FROM 테이블명 ( ORDER BY 정렬할 칼럼 DESC or ASC or 생략하면 ASC가 디폴트값 ) 이 긴 함수가 한 세트~ PARTITION BY 에 지정한 칼럼 기준으로 그룹핑 해주고 ORDER BY 에 지정한 칼럼 기준으로 정렬해준담에 ROW_NUMBER 행 마다 순서를 매겨준다 예를 들어 아래 왼쪽 테이블을 오른쪽 테이블 같이 그룹핑, 정렬 해주고 싶으면 이렇게 함수를 작성하면 된다. ROW_NUMBER( ) OVER (PARTITION BY '멤버 아이디' ORDER BY '주문한 날짜') 실무에 사용되는 쿼리문을 통해 한번 더 확인해.. 2022. 3. 11.
728x90
반응형
LIST