반응형

분류 전체보기 231

gitingnore 파일 만들기 & gitignore 적용 안될 때

gitingnore 파일 만들기 gitignore 파일은 git으로 관리하지 않을 파일을 지정하는 파일이다. gitignore 파일은 git 저장소의 최상위 디렉토리에 생성한다. gitignore 파일 생성 gitignore 파일은 git 저장소의 최상위 디렉토리에 생성한다. gitignore 파일의 이름은 .gitignore이다. gitignore 파일 작성 # 폴더명/ : 폴더명의 모든 파일 무시 css/ # 파일명 : 파일명의 파일 무시 comm.css comm.css.map #폴더명/파일명 폴더명/파일명 # 확장자가 .txt인 파일 무시 *.txt # 윗 라인에서 확장자가 .txt인 파일은 무시하게 했지만 lib.a는 무시하지 않는다. !lib.txt gitignore 파일 적용이 안될 때 ign..

TOOL/Github 2024.01.19

스크롤 트리거 (Parallax Scrolling) 구현하기

Parallax Scrolling (CSS, JS, AOS, ScrollMagic, GSAP) 패럴랙스 스크롤링은 웹사이트의 요소들이 서로 다른 속도로 움직이는 것 레이어별 스크롤 속도를 다르게 하여 입체감을 주는 디자인 기법 게임, 애니메이션 등에서 주로 사용되던 기법으로 인터랙티브한 웹사이트를 만들 때 사용 javascript, css, 라이브러리 등을 이용하여 구현 CSS를 이용한 패럴랙스 스크롤링 css perspective 속성을 이용한 패럴랙스 스크롤링 mdn 해당 요소의 z = 0 평면과 사용자 사이의 거리 transform 효과를 주고자 하는 부모 요소에 적용 perspective에 따른 변형 효과 perspective: 100px; => 100px만큼 멀어져 보임 perspective가 ..

Front 2024.01.06

flexbox로 레이아웃 만들기

flexbox로 레이아웃 만들기 flexbox란? flexbox는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. Flexbox는 여러 요소들 사이의 공간 배분과 정렬 기능을 제공하여, 강력한 분산형 레이아웃을 제공합니다. flexbox의 구성 flex container: flexbox를 적용할 요소 flex item: flex container의 자식 요소 flexbox layout 만들기 1. layout1 - 스크롤 없는 100% 높이의 레이아웃 header main aside footer /* css */ :root { --hdH: 70px; --ftH: 70px; } #wrap { max-width: 1280px; margin: 0 auto; ..

Publishing/CSS3 2023.12.14

box model - css 배우기

box model - css 배우기 https://www.w3schools.com/css/css_boxmodel.asp 모든 HTML 요소는 박스 모델을 가지고 있다. width 요소의 너비를 지정한다. auto (기본값 100%) 브라우저가 너비를 계산한다. length px, cm, em 등 단위를 사용할 수 있다. inherit 부모 요소의 속성값을 상속받는다. div { width: 1280px; } height 요소의 높이를 지정한다. auto (기본값 0) 브라우저가 높이를 계산한다. length px, cm, em 등 단위를 사용할 수 있다. inherit 부모 요소의 속성값을 상속받는다. div { height: 500px; } max-width 요소의 최대 너비를 지정한다. none (기..

Publishing/CSS3 2023.12.05

background 속성 - css 배우기

background 속성 - css 배우기 background 배경 이미지를 지정한다. background: url('https://www.w3schools.com/css/img_fjords.jpg'); https://www.w3schools.com/css/css_background.asp background-color 배경 색상을 지정한다. background-color: red; background-image 배경 이미지를 지정한다. background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); background-repeat 배경 이미지 반복을 지정한다. background-repeat: repeat-x; ..

Publishing/CSS3 2023.12.04

font, text 관련 속성 - css 배우기

font & text 관련 css font https://www.w3schools.com/css/css_font.asp font-family 글꼴을 지정한다. font-family: 'Times New Roman', Times, serif; font-family: Arial, Helvetica, sans-serif; web font 웹폰트란 로컬에 설치된 글꼴이 아닌 서버에서 제공되는 글꼴을 말한다. - google font https://fonts.google.com/ 구글 폰트 사이트에서 사용하고 싶은 폰트의 상세페이지로 이동한다. font-weight, font-style을 선택한다. 장바구니에 담긴 CDN 주소를 복사해 html 파일 내 head 태그에 추가한다. 또는 @import..

Publishing/CSS3 2023.12.03

layout 관련 속성 - css 배우기

layout 관련 속성 block (기본값) width, height 속성을 가질 수 있다. margin, padding 속성을 가질 수 있다. div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, form, table, header, footer, section, article, nav, aside, blockquote, address 등 보였다 안보였다 .show { display: block; } .hide { display: none; } inline width, height 속성을 가질 수 없다. margin-top, margin-bottom, padding-top, padding-bottom 속성을 가질 수 없다. span, a, img, input, button, s..

Publishing/CSS3 2023.12.01

css의 기초 - css 배우기

CSS 기초 CSS란? Cascading Style Sheets (CSS)는 HTML이나 XML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. CSS는 HTML과 같은 마크업 언어가 실제 표시되는 방법을 기술하는 언어로, W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. CSS의 장점 HTML의 내용과 스타일을 분리할 수 있다. 스타일을 변경할 때 HTML을 수정할 필요가 없다. 웹 페이지의 로딩 속도를 향상시킬 수 있다. 스타일을 적용하는 방법이 다양하다. CSS의 구문 https://www.w3schools.com/css/css_selectors.asp 선택자 { 속성: 값; } 선택자(selector): HTML 요소를 선택한다. 속성(property): 스타일을 지정한..

Publishing/CSS3 2023.11.29

네이밍 가이드(Naming Guide) - css 배우기

Naming Guide 다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. Naming Guide는 크게 "Naming 규칙"과 "Prefix/Subfix/Suffix 정의" 두 부분으로 나뉩니다. Naming 규칙에서는 CSS와 HTML 및 각종 파일, 디렉토리들의 공통된 네이밍 규칙에 대해 정리합니다. Prefix/Subfix/Suffix 규칙에서는 다양한 개발환경에 대비한 예약단축어들을 소개하며 이를 조합하는 방식에 대해 설명합니다. Naming 표기법 - kebab-case(케밥 표기법) kebab-case, header-container, btn-list, menu-list ... (하이픈)으로 단어를..

Publishing/CSS3 2023.11.26

Layout 구성하기 - html 배우기

Layout 의미있는 마크업 리빙샵아울렛 인기모음전 수저모음 도마모음 그릇모음 접시모음 베스트상품 주방용품 설비제품 인덕션제품 실리콘제품 업종별샵 한식기물 양식기물 일식기물 중식기물 인덕션용품 냄비/솥 후라이팬/주물 인덕션렌지 기타제품 바로가기 바로가기1 바로가기2 바로가기3 바로가기4 바로가기5 바로가기6 바로가기7 공지사항 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 Lorem ipsum dolor sit amet. 2023.11.27 갤러리 겨울 내내 촉촉 이번에만 2..

Publishing/HTML 2023.11.26
반응형
티스토리 친구하기