티스토리

< Code diaries />

검색하기

블로그 홈

< Code diaries />

codediaries.tistory.com/m

Html, Css, Scss, Javascript 에 관련 기록

구독자: 1

방명록 방문하기

주요 글 목록

서버 port 이슈 1. 현재 포트 점유상태 확인8080포트를 사용중인 프로세스를 확인한다. 결과에서 PID값을 확인하여 종료시킬 수 있다.lsof -i :8080 2. 위에서 확인한 PID 숫자를 적어서 해당 프로세스를 종료하여 포트를 비워줄 수 있다.kill -9 [PID]// 예를들어 PID 가 381이면 // kill -9 381 하면된다. 공감수 0 댓글수 0 2024. 11. 30.
[ git ] 이슈 해결 1. 방금 한 커밋 취소(push 이전)git reset --soft HEAD git log로 커밋이 존재할 때에만 삭제 가능 git loggit reset --soft git log로 커밋아이디를 확인 후, 원하는 것만 삭제 가능 2. git 저장소 삭제rm -rf .git rm : remove-r : 폴더와 하위 파일까지 삭제-f : 강제실행.git : 삭제할 폴더 공감수 0 댓글수 0 2024. 11. 30.
HTML Quiz - 01 1. 다음중 설명과 맞는 것을 모두 고르시오 ( A, C )A. 제목을 나타내는 태그는 총 6가지가 있으며, ~ 까지 이다.B. 문단을 나타내는 태그는 이다.C. 문서의 제목을 나타내는 태그는 안에 있다D. , 태그는 내용중 중요하거나 경고하는 것의 역할을 하는 태그이다. 2. 제목을 나타내는 헤딩요소들에 대한 설명으로 바르지 않은 것을 모두 고르시오. (C, D) A. 블럭레벨 요소 이다.B. 내부에 인라인레벨 요소를 컨텐츠 요소로 포함 할 수 있다.C. 내부에 블럭레벨 요소를 컨텐츠 요소로 포함 할 수 있다.D. 계층구조를 지키지 않아도 무방하며, 제목이 필요시 언제든지 사용할 수 있다. 3. VS code 문제입니다. HTML template을 불러오는 단축키는? ! + Tab ke.. 공감수 0 댓글수 0 2024. 11. 7.
CSS - Sizing 관련 속성과 메소드 fit-content()는 CSS에서 사용하는 함수로, 요소의 크기를 컨텐츠의 크기에 맞게 조정할 수 있는 방법을 제공합니다. 이 함수는 주로 레이아웃을 다루는 데 유용하며, 특히 CSS Grid와 Flexbox에서 많이 사용됩니다.주요 특징컨텐츠 기반 크기 조정:fit-content()는 요소의 크기를 그 안에 포함된 컨텐츠에 맞추어 조정합니다.이를 통해 컨텐츠의 크기가 변할 때 요소의 크기도 동적으로 조정될 수 있습니다.최대 크기 제한:fit-content()는 최대 크기를 설정할 수 있으며, 이 최대 크기를 초과하지 않는 범위 내에서 컨텐츠 크기에 따라 요소의 크기를 결정합니다.예를 들어, fit-content(300px)와 같이 설정하면, 요소는 컨텐츠 크기에 따라 300px까지 커질 수 있습니다.. 공감수 0 댓글수 0 2024. 10. 29.
CSS Filter CSS의 filter 속성을 사용하면 요소에 다양한 시각적 효과를 적용할 수 있습니다. 다음은 filter에 사용할 수 있는 주요 CSS 함수 목록입니다:1. Blurblur(radius): 요소를 흐리게 합니다.예: filter: blur(5px);2. Brightnessbrightness(factor): 요소의 밝기를 조정합니다. 값이 1일 때 원래 밝기, 0보다 작으면 어두워지고, 1보다 크면 밝아집니다.예: filter: brightness(1.5);3. Contrastcontrast(factor): 요소의 대비를 조정합니다. 값이 1일 때 원래 대비, 0이면 회색으로 변하고, 1보다 크면 대비가 높아집니다.예: filter: contrast(200%);4. Drop Shadowdrop-shado.. 공감수 0 댓글수 0 2024. 10. 29.
CSS function - env() - UI 측면에서 꼭 필요한 함수 CSS의 env() 함수는 브라우저 또는 기기에서 제공하는 환경 변수를 참조하는 함수로, 화면 안전 영역이나 특정 기기의 특성에 맞춰 레이아웃을 동적으로 조정할 때 유용합니다. env() 함수는 특히 모바일 기기에서 노치, 하단바 등으로 인해 안전 영역이 필요한 경우 여백을 설정할 때 자주 사용됩니다. CSS env() 함수 예제 이 페이지는 브라우저의 안전 영역을 자동으로 감안하여 여백을 설정합니다. 주요 env() 변수를 사용한 예기본적으로 아래와 같은 safe-area-inset-* 변수를 제공합니다:safe-area-inset-top: 화면 상단의 안전 영역 여백safe-area-inset-right: 화면 오른쪽의 안전 영역 여백safe-area-inset-bottom:.. 공감수 1 댓글수 1 2024. 10. 29.
웹문서 로딩 상태 실시간으로 체크하기 - document.readyState function stateCheck(e) { let status = e.target.readyState; let msg = ''; switch (status) { case 'loading': msg = '웹문서 로딩중'; break; case 'interactive' : msg = '웹문서 로딩완료, 리소스 로딩중'; break; case 'complete' : msg = '모든 리소스 로딩 완료' break; default : msg = '상태를 체크할 수 없습니다.' } console.log(.. 공감수 0 댓글수 2 2024. 9. 18.
Event 종류 정리 이벤트란?웹사이트 이용시 사용자가 조작하는 어떤 동작이나, 브라우저 자체에서 상태를 캐치하여 일어날 수 있는 동작들을 말한다.예를 들면 문서를 불러들이는 순간(온로딩), 마우스를 요소에 올리는 동작, 클릭하는 동작, 스크롤링 등이 대표적인 이벤트 이다. 웹브라우저에서 일어날 수 있는 이벤트를 3가지로 나누어 정리 해보자. 1. 문서로딩 이벤트Event이벤트가 발생하는 순간DOMContentLoaded웹브라우저가 HTML을 리딩하여 DOM 트리구조를 만든 직후에 발생하며,CSS 및 Image, Video, Audio등의 자원이 로딩될때까지 기다리지는 않는다.Document객체에서 발생한다. 그래서 on 이벤트는 적용되지 않고, addEventListener를 사용해야 한다.document.addEventL.. 공감수 0 댓글수 0 2024. 9. 18.
NodeType 이란? Node의 유형을 지정하는 정수타입의 값이다.nodeType(Value)definiationincludes..1Node.ELEMENT_NODE, ...2Node.ATTRIBUTE_NODE요소의 속성3Node.TEXT_NODE요소 또는 속성의 실제 텍스트4Node.CDATA_SECTION_NODECDATASection, 5Node.ENTITY_REFERENCE_NODE더이상 사용하지 않음6Node.ENTITY_NODE더이상 사용하지 않음7Node.PROCESSING_INSTRUCTION_NODE와 같은 XML 문서의 처리 지침8Node.COMMENT_NODE 주석문 노드9Node.DOCUMENT_NODEDocument node10Node.DOCUMENT_TYPE_NODE11Node.DOCUMENT_FRA.. 공감수 2 댓글수 0 2024. 9. 14.
[ Discord ] - 디스코드 채팅할 때 단축키 모음 1. HTML 코드 입력하기사용방법 : 백틱기호 ```html 로 시작 + 원하는 코드 적기 + ``` 로 마무리하여 끝낸다.( 맥인경우 백틱기호가 한글모드에서는 동작하지 않으니 주의 ) 2. CSS 코드 입력하기사용방법 : 백틱기호 ```css 로 시작 + 원하는 코드 적기 + ``` 로 마무리하여 끝낸다.( 맥인경우 백틱기호가 한글모드에서는 동작하지 않으니 주의 ) 그 외의 다른 언어들도 내가 다 해보진 않았지만, 같은방식으로 시도해 보면 되지 않을까 싶다 ^^ 3. 채팅 글자 숨기기사용방법 : ||원하는글자||퀴즈에 답을 맞추거나 할때 용이하다. 블럭처리된 곳은 다시 클릭하면 보이게 된다. 4. 마크다운 적용하기사용방법 : # 글자#다음에 공백이 꼭 있어야하며, 해시(#)의 개수는.. 공감수 4 댓글수 0 2024. 9. 14.
HTML문서에서 프린트 설정하기 - @media print CSS 설정 및 @page 사용법 오늘은 HTML문서에서의 프린트 설정에 대하여 알아볼게요웹 페이지를 디자인 할때 Screen 에서 보이는 모습을 CSS로 스타일링 하게 되는데요,페이지 중 인쇄를 제공해야하는 페이지들은 별도로 인쇄용 CSS를 정의하게 됩니다.그 방법을 몇가지 소개해볼게요 1. CSS 파일 내부에서 @media로 프린트 css 지정하기css 내부에서 사용할때에 할 수 있는 방법입니다.아래 코드를 보면 @media print 구문을 이용하여 프린트할때에 문서의 배경색과 글자색을 변경하고 있습니다. * { margin:0;padding:0}body { background-color:black; color:#fff;}p { line-height:2; max-width:800px; margin:0 auto;}@m.. 공감수 0 댓글수 0 2024. 9. 10.
VS CODE - 코드 프린트(인쇄)하기 extension STEP 1. Extension에서 'Print'라고 검색해서 설치합니다. STEP 2. 인쇄하고싶은 코드화면에서 마우스 우클릭하여 프린트화면을 미리보기합니다.(Print preview) STEP 3. 브라우저에 코드가 보이면 마우스 우클릭하여 'Print'메뉴를 선택하여 설정에 맞게 인쇄합니다. 공감수 0 댓글수 0 2024. 9. 5.
HTML Node list를 Array로 converting 하기 NodeList와 HTML Collection은 유사배열객체라서 배열의 모든 메소드를 사용할 수는 없다. NodeList우리가 document.querySelectorAll()로 HTML elements를 가져오면 Nodelist로 들어온다. apple mango blueberry HTML Collectionchildren 속성으로 가져온 것은 유사배열객체이다. A B Cconst ul = document.querySelector('ul')const lis = ul.children;console.log(lis)// HTMLCollection(3) [ li, li, li ] 공감수 0 댓글수 0 2024. 8. 8.
Sass에서의 계산식 정리 1. 일반적인 수학식으로 계산하기 가능- percentage로 변환하기$size : 100 * 1% // 100%- 일반적인 계산$size : 100 - 3 * 5 // 90- pixel 계산$size : 100 * 2px // 200px 2. 같은단위의 계산식A. 단위가 같더라도 sass 에서는 곱하기 '*' 와 나누기 '/' 연산은 되지 않는다.$size : 100px * 3px- 위와같은 경우 숫자를 먼저 계산후 단위를 문자열로 이어붙인다.- 결과값 : 300px*px$size : 100px / 3- 에러 B. 더하기 '+' 와 빼기 '-'는 정상으로 연산이 가능하다.$size : 100px - 20px- 결과값 : 80px$size : 100px + 20px- 결과값 : 120px 3. .. 공감수 0 댓글수 0 2024. 8. 6.
[ HTML ] Emmet 문법 정리 궁모닝 에브리원~!! ^^ 오늘은 HTML을 마크업할때 VS code에서 사용하는Emmet 문법을 정리해 볼게요 Emmet HTML 마크업을 조금 손쉽게 해줄 수있는 기능이며 알게모르게 우리가 쓰고있는 것도 있어요.방법 몇가지를 소개 해 봅니다. 맨 하단에 Emmet 단축키를 정리해놓은 사이트를 링크 걸어 두었어요~! 1. VS Code에서 설정하기Emmet 기능이 적용되지 않는다면, 아래의 화면에서 확인한다. - cmd + shift + p 눌러서 emmet을 검색한다.- 첫번째 나오는 Emmet:Balance(inward)을 선택한다.- 사용시 주의할 점은 띄어쓰기를 하지 않는다.- 단축키를 띄어쓰기없이 입력후 Tab키를 눌러 실행한다. 2. 다양한 사용방법을 알아보자. css 선택자.. 공감수 0 댓글수 0 2024. 7. 26.
Hash Hash 테스트 사이트 https://emn178.github.io/online-tools/sha256.html SHA256This SHA256 online tool helps you calculate hash from string or binary. You can input UTF-8, UTF-16, Hex to SHA256. It also supports HMAC.emn178.github.io 공감수 0 댓글수 0 2024. 6. 24.
Tailwindcss - sites https://tailwindcomponents.com/ Tailwind CSS Components - 600+ Free Examples and TemplatesA free repository of open source Tailwind CSS components and templates to bootstrap your new apps, projects or landing sites!tailwindcomponents.com https://tailwindcomponents.com/cheatsheet/ Tailwind CSS Cheat Sheet tailwindcomponents.com 공감수 0 댓글수 0 2024. 6. 15.
Node.js에서 tailwind 설치 및 사용하기 아래의 순서대로 3가지를 모두 설치한다.package.json에서 버전확인npm i -D tailwindcss@latestnpm i -D postcss@latestnpm i -D autoprefixer@10.4.5 tailwind.config.js 파일 생성하기npx tailwindcss init 참고영상https://www.youtube.com/watch?v=YTwOhrVbf-c autoprefixer 설치에러 정리https://xpectation.tistory.com/224 [CSS] 'autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.' 해결방au.. 공감수 0 댓글수 0 2024. 6. 14.
정규표현식(RegExp) 연습 사이트 https://www.regexpal.com/ Regex Tester - Javascript, PCRE, PHPRegexPal requires a modern browser. Please update your browser to the latest version and try again.www.regexpal.com https://regexr.com/ RegExr: Learn, Build, & Test RegExRegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).regexr.com https://regexone.com/ RegexOne - Learn Regular Expressions - Lesson .. 공감수 0 댓글수 0 2024. 6. 12.
HTMX - Installing & usage https://htmx.org/ htmx - high power tools for html" data-og-description="" data-og-host="htmx.org" data-og-source-url="https://htmx.org/" data-og-url="https://htmx.org/" data-og-image="https://scrap.kakaocdn.net/dn/fcg3U/hyWg1CkL02/F7N8m8nkkrk21MyDImFCP0/img.png?width=293&height=400&face=0_0_293_400,https://scrap.kakaocdn.net/dn/nOn4P/hyWlj88Krv/Xn9g5tjvOK2Irex9f5rku0/img.png?width=323&height=33.. 공감수 0 댓글수 0 2024. 6. 11.
웹폰트 변환 사이트 https://transfonter.org/ Online @font-face generatorThe @font-face CSS rule allows web developers to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, @font-face eliminates the need to depend on the limited number of fonts users have installed on theirtransfonter.org 공감수 0 댓글수 0 2024. 6. 11.
Tailwind CSS 사용하기 1. 연결하기CDN 코드 - 사이트 바로가기 2. VS code Extension 설치하기- 설치하면 tailwind css guide안내를 받을 수 있다.Tailwind CSS IntelliSense 3. FONT 관련 선언Docs - 바로가기 공감수 0 댓글수 0 2024. 6. 11.
CSS Property - Background 이미지, 그라디언트 넣기 CSS Background CSS에서 Background관련된 속성은 정말정말 중요합니다.그냥 배경이미지를 넣는것으로 생각할 수도 있지만, 웹페이지의 수많은 곳이 background-image로 표현되고 있습니다. 기본 사용법과 접근방식 등 HTML의 기본적인 내용을 살펴봅시다. Overview HTML element에 컨텐츠요소가 아닌 배경으로 이미지를 배치 할 수 있는 속성입니다. 작은 아이콘부터 배경까지 다양한방법으로 사용할 수 있습니다. 또한, 웹 접근성을 위한 IR(Image Replace)기법으로 사용이 많이 됩니다. Background property - 주요 속성- 굉장히 자주 사용이 된다.property{ value }Descriptionbackgroundgold url('') no.. 공감수 0 댓글수 0 2024. 6. 10.
TAG 03 - 링크와 이미지관련 태그 HTML(Hyper Text Markup Language) - 웹페이지에서 가장 중요한 부분인 링크 태그와 이미지 삽입 태그에 대하여 공부해 봅시다.- HTML은 텍스트로 이루어진 문서이기 때문에 어떠한 미디어 파일도 포함하지 않습니다. 하여 모든 미디어 파일들은 각자의 태그를 이용해 소스의 위치를 지정해주어야 웹문서에 표시가 됩니다., , , 태그 살펴보기 OVERVIEWTagDescriptionMeaning클릭하여 다른 웹페이지로 이동하게 해주는 태그이며, 필수 속성으로는 href 가 있다. 이미지파일을 웹문서에 넣을때 사용하는 태그이며, 필수 속성으로는 src와 alt가 있다. 이미지, 표, 그래프 등 다양한 정보를 담고있는 미디어들을 묶어서 그룹 잡을 수 있는 태그이다. 태그와 함께 사.. 공감수 0 댓글수 0 2024. 6. 10.
코딩을 시작하기 전에.. ^^ VS code 다운로드 Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.code.visualstudio.com 크롬브라우저에 web developer 확장프로그램 설치 Web DeveloperAdds a toolbar button with variou.. 공감수 0 댓글수 0 2024. 6. 10.
SASS - Overview & Install & Usage 시작해봅시다~! SASS(SCSS) Sass is the most mature, stable, and powerful professional grade CSS extension language in the worldSass는 sass-lang.com 이 공식 사이트이며, 세상에서 가장 안정적이며 파워풀한 css 확장언어라고 말하고 있고, 내 생각도 비슷하다. ^^Sass를 왜 써야하는지에 대해서는 많은 유튜브나 사이트에서 이미 보고 왔거나 알고있을 거라고 생각합니다.이 페이지에서는 간단한 소개와 설치 방법 및 초기 사용방법등에 대해서만 정리해 보겠습니다.또한 Vs code extention이 아닌 Terminal 사용방법을 기본으로 하고 있습니다. 드디어 SASS를 시작하게 되었군요. 축하드립니다~!! A. Over.. 공감수 0 댓글수 0 2024. 6. 10.
CSS Property - 반응형 작업하기(Media query) CSS Responsible 반응형웹사이트를 만들려면 각각의 디바이스 해상도에 따라 대응할 수 있어야 하는데, 이때에 Media query를 사용하면 잘 만들 수 있습니다.반응형웹은 모바일을 기준으로 할때에는 (min-width)를 먼저 사용하고, PC를 기준으로 할 때에는 (max-width)를 먼저 사용하면 됩니다. @media 를 정리해 놓은 사이트 - w3schools 바로가기 / Mdn 바로가기 Media 속성@media { } - MDN 참조 바로가기 /* 최상위 코드 레벨 */@media screen and (min-width: 900px) { article { padding: 1rem 3rem; }}/* 다른 조건부 @규칙 내에 중첩 */@supports (disp.. 공감수 0 댓글수 0 2024. 6. 10.
CSS Property - Animation 애니메이션 적용하기~! CSS Animation(애니메이션) Transition의 효과와는 다르게 실제로 시간순서대로 애니메이션을 적용할 수 있는 속성입니다.Transform과 같이 사용하면, 반복되는 애니메이션 또는 스크롤이벤트때 나타나는 이벤트 등 다양하게 인터렉션을 만들 수 있습니다.웬만한 인터렉션 효과는 CSS로 처리해 놓고 javascript에서 classList 속성을이용하여 제어하는 것이 좋습니다. 자, 한번 해봅시다~! Animation 속성- CSS animation은 자주 사용된다.- 참조사이트 - 바로가기propertyvaluedescriptionanimation축약형아래의 속성들을 축약형으로 쓸 수 있으며, 이때에 필수 속성은 animation-name 과 animation-duration이다.an.. 공감수 0 댓글수 0 2024. 6. 10.
CSS Property - Transform, Transition 움직이기~! CSS Transform(변형), Transition(전이효과) Transform은 '변형'이라는 뜻으로 그래픽툴에서 많이 사용되는 메뉴명입니다.HTML Element를 변형한다는 것은, 크기조절, 회전, 기울임, 이동 등을 의미합니다.Transform(트랜스폼)과 Transition(트랜지션)을 잘 사용하면, animation 효과나 보기좋은 인터렉션을 줄 수 있습니다. 자, 한번 해봅시다~! A. Transform(트랜스폼) 속성- 모든 속성은 x,y 같이 또는 x,y를 별도로 지정할 수 있다.- Transform속성은 하나이며, 값을여러개로 나열하여 지정한다. - 참조사이트 - 바로가기propertyvaluedescriptiontransformscale()크기 지정skew()기울임 각도ro.. 공감수 0 댓글수 0 2024. 6. 10.
CSS Property - Display : grid 속성 CSS Grid Flex보다 조금은 더 어려워하는 Grid 속성다루기에 오신 것을 환영합니다.Flex를 이해했다면, Grid도 어렵지 않습니다.한번 시작해 봅시다~~!! CSS Grid 에 대하여 알아봅시다~! 출발~! Grid Overview- Flex box에서는할 수 없는 그리드 방식을 레이아웃을 구현할 수 있는 속성입니다.- 참조사이트 - 바로가기 A. Grid container- 참조사이트 - 바로가기- Grid연습을 위해 많은 학생들이 한번씩은 해보는 그리드 가든 게임~! - 바로가기 B. Grid items- 참조사이트 - 바로가기 C. Flex, Grid 공통 속성PropertyValueDescriptionnotegapNumber축약형으로 gap : row-gap column-gap.. 공감수 0 댓글수 0 2024. 6. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.