You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
📑 자바스크립트로 XML 다루기
XML DOM XML DOM은 XML 문서에 접근하여, 해당 문서를 조작할 수 있는 표준화된 방법을 정의합니다. 모든 XML 요소는 XML DOM을 통해 접근할 수 있습니다. XML DOM은 XML 문서 내의 모든 요소의 객체, 속성 그리고 메소드를 정의합니다. 이러한 XML DOM은 플랫폼이나 프로그래밍 언어에 상관없이 언제나 사용할 수 있습니다. 선행으로 JS의 DOM문법을 익히시면 손쉽게 익히실수 있습니다. 문법이 거의 똑같습니다. XML 파서(parser) 현재 대부분의 주요 웹 브라우저는 XML 문서에 접근하고 조작하기 위한 XML 파서를 별도로 내장하고 있습니다. XML DOM은 XML 문서에 접근하고 조작할 수 있는 다양한 메소드를 포함하고 있습니다. 하지만 이러한 메소드를 이용하려면 우선 ..
📑 XML 기초 문법 정리
XML (EXtensible Markup Language) XML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어입니다. XML 특징 XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어입니다. XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해줍니다. XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋습니다. XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 합니다. XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어집니다. XML 목적 서로 호환되지 않는 데이터 타입을 사용하는 시스템 간의 데이터 교환에는 많은 시간과 노력이..
🎨 Flex에도 Grid와 같이 gap(여백)을 쓰자
CSS Flex gap 예전에는 flex box를 사용할때, 각 item들의 사이 공간을 주기 위해서는 margin을 사용해야 했다. 하지만 margin 과 gap의 차이점은 margin은 무조건 여백을 줘서 불필요한 공간을 만들지만, gap의 경우 엘리먼트 요소들의 사이에 인접한 요소가 있을때만 공간(space)을 만들기 때문에 훨씬 모던하다. 하지만 이제 flexbox도 grid와 같이 gap를 사용할 수 있게 되었다. 문법은 그리드와 완전히 판박이니 그대로 사용하면 된다. gap: [상하좌우 전체의 값]; gap: [상하 사이의값] [좌우 사이의값]; 동일한 여백 주기 1 2 3 4 5 6 7 8 9 .test-parent { display: flex; flex-wrap: wrap; gap: 10p..
🤬 공동인증서 아주 쉽게 인증하기 (KICASignPlus)
실패 발단 휴대폰에 공동인증서가 저장되어있어서, 가져오려니까 확장자 .p12, .pfx 파일이 필요하단다. 구글링 결과 openssl로 변환해줘야 한다던데, 별짓을 해봐도 맞는 비밀번호 쳤는데 자꾸 틀리다고 나와서 샷건 거하게 쳤다.. 1분컷 공동인증서 인증하기 pre-condition : 휴대폰에 공동인증서를 이미 발급한 상태여야 한다. 1. 먼저 KICASignPlus 앱을 깐다. 2. 앱 화면에서 내보내기를 클릭한다. 3. 해당 url에 들어가 휴대폰에서 인증서 가져오기 버튼을 누른다. https://www.signgate.com/kicasignplus/appFunc03.sg 한국정보인증 지번주소 입력 도로명과 건물번호 또는 동·리와 번지를 입력하십시오. ( ex : 세종대로 110, 연지동 219..
🎨 스크롤을 부드럽게 - Scroll Snap 속성
CSS Scroll snap CSS Scroll snap은 웹 페이지에서 스크롤을 할 때, 요소가 스크롤되는 위치에 자동으로 스냅되도록 하는 CSS 속성이다. 예를들어 용자가 웹 페이지를 스크롤할 때 중간에 멈춰버리면 콘텐츠의 중간에서 멈춰 주요 콘텐츠의 일부만 보이게 되는데, 이를 미리 설정한 위치로 자동 스냅하여 자연스러운 스크롤 움직임과 함께 사용자 경험을 더욱 향상시키는 것이다. 스크롤 스냅이 없던 시절에는 자바스크립트로 일일히 요소 위치를 계산해서 조정해야 됬지만, CSS 속성을 통해 공식 지원함으로써 개발의 편리함과 더불어 성능도 비약적으로 상승했다고 볼 수 있다. Scroll snap 사용법 우선 스크롤 스냅을 적용할 부모 컨테이너 영역을 만들고, 그 안에 스냅될 자식 요소 영역을 만들어 준..
🔮 BootStrap5 반응형 시스템 - 컨테이너
컨테이너(Container) 컨테이너는 Bootstrap에서 가장 기본적인 레이아웃 요소이며 기본 그리드 시스템을 사용할 때 필요합니다. 컨테이너는 내용을 포함하고 채우고 (때로는) 내용을 중앙 정렬하는 데에 사용됩니다. Bootstrap에는 세 가지 다른 컨테이너가 있습니다: 각 반응형 중단점에 max-width를 설정하는 .container 모든 중단점에 width: 100%를 설정하는 .container-fluid 정의된 중단점까지 width: 100%를 설정하는 .container-{breakpoint} 아래 표는 각 중단점에서 각 컨테이너의 max-width가 원래 .container와 ‘.container-fluid’가 어떻게 비교되는지 보여줍니다. 브라우저 반응형 컨테이너 예시 아래 링크 홈..
🔮 BootStrap5 반응형 시스템 - 중단점 (미디어 쿼리)
중단점 Breakpoints Breakpoints는 Bootstrap의 반응형 레이아웃이 뷰포트 크기 또는 기기에서 어떻게 작동 할지 결정하는 사용자가 정의 가능한 넓이입니다. Bootstrap에는 반응형 제작을 위해 grid tiers 라고 하는 6개의 Breakpoints가 포함되어 있습니다. 이러한 breakpoints는 Sass 소스 파일을 사용할 경우 사용자가 지정할 수 있습니다. Breakpoint Class infix Dimensions X-Small None
🔮 BootStrap5 SCSS 커스터마이징 방법
부트스트랩 SCSS 커스터마이징 변수, 맵, 믹스인 그리고 함수를 활용한 소스의 Sass 파일을 이용하여 프로젝트 구축을 고속화하고 재정의 할 수 있습니다. 부트스트랩5는 변수, 맵, 믹스인 등을 활용한 소스의 Sass 파일을 이용합니다. 'Style Sheet/Sass' 카테고리의 글 목록 안녕하세요. 열심히 공부하는 초보 개발자로서 기술블로그를 운영하고 있습니다. inpa.tistory.com SCSS 파일 구조 가능한 한, Bootstrap의 핵심 파일은 직접 수정하지 마세요. Sass에서는 Bootstrap을 가져와 자체 스타일 시트를 생성함으로써 간접적으로 Bootstrap을 수정하고 확장할 수 있습니다. npm과 같은 패키지 매니저를 사용하는 경우 다음과 같은 파일 구조가 됩니다. your-p..
![[CSS] 📚 최신 CSS 기능 지원여부 확인 🎨 @supports](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbJht3R%2Fbtrijq1eqZU%2FCmThKK4BKkjkSaLbSB28sK%2Fimg.png)
[CSS] 📚 최신 CSS 기능 지원여부 확인 🎨 @supports
@supports 최신 스펙의 css값을 사용할 때, 해당 css를 제공하는 브라우저에 따라 맞춤형으로 적용할 수 있게 css를 선언할 수 있다. 방법은 바로 @supports 문법(기능 쿼리, feature query)을 이용하는 것이다. @supports 문법은 미디어 쿼리 문법을 사용하는 것과 유사하다. @supports (display:flex) { /* 만약 해당 브라우저가 flex를 지원 할 경우 아랫값을 적용 시킨다. */ .contents { display: flex; margin: 0 5px; align-items: center; justify-content: space-between; } .contents div { flex-grow: 1; } } @supports not (displa..
🐱 톰캣 자바(JRE) 버전 간편 변경 방법
톰캣 JRE 버젼 간편 변경 자바 버젼에 따라 톰캣 WAS 환경을 맞추고 테스트해야 하는 때가 있다. 이때 자바 자체를 재설치 하지말고, 여러 버젼의 자바를 OS에 깔고 환경변수를 수정해서 사용하는 것으로 가능하다. 톰캣은 자체적으로 자바 버젼을 지정해주는 기능을 지원해줘서, 톰캣 배치 파일에서 특정 자바 버젼 경로만 지정해주면 간편하게 다양한 자바 버젼에서 서버를 구동할 수 있다. 톰캣 현재 자바 JRE 버젼 확인 톰캣 bin폴더에서 version.bat 파일을 실행하면 현재 톰캣 정보가 나온다. > cd C:\Program Files\Apache Software Foundation\apache-tomcat-9.0.52\bin > version.bat catalina 설정 catalina.bat 을 메..
🔮 BootStrap5 듀토리얼 입문 강좌
BootStrap 듀토리얼 Bootstrap 이란? 부트스트랩은 전세계적으로 가장 많이 사용되는 오픈소스 CSS 프레임워크 입니다. 부트스트랩을 기반으로 하는 다양한 응용 라이브러리가 있으며 부트스트랩에 일부를 보완해 여러분들만의 CSS 라이브러리를 구축해 나갈수 있습니다. 부트스트랩을 제대로 사용하기 위해서는 앞에서 배운 HTML과 CSS 의 기본개념을 확실하게 이해하고 있어야 합니다. 특히 DOM, CSS의 상속관계, 선택자, 블럭/인라인, position 등에 대한 완전한 이해가 필요 합니다. 만일 부트스트랩을 잘 사용할 수 있게 된다면 다른 CSS라이브러리들도 얼마든지 도입해 사용할 수 있는 능력을 갖추게 되었다고 볼 수 있습니다. 부트스트랩의 세부 설정이나 테마를 수정해 개발하거나 react, ..
🔍 크롬으로 자바스크립트 디버깅 하기
디버깅(Debugging) 디버깅(Debugging)은 컴퓨터에서 발생한 오류를 찾기 위해 소스 코드를 한 줄씩 따라가면서 변수값의 변화를 검사하는 과정입니다. 중단점 (breakpoint) 기능 단위로 구현하는 경우가 많으므로 하나의 기능이 끝날 때마다 여러가지 테스트, 디버깅이 필요할 수 있습니다. 여기서 중단점(Breakpoint)은 스크립트의 동작을 잠시 멈추도록하여 디버깅이 가능하게 해줍니다. 이때 원하는 위치에 중단점을 설정하여야 하는데 중단점을 추가하는 방법은 아래와 같이 두 가지 방법을 사용합니다. i. 작성한 코드의 필요한 부분에 debugger 키워드를 추가하기 코드에 직접 debugger;라는 코드를 추가하는 방법입니다. 개발을 하는 도중 필요하다고 판단 즉시 코드를 추가하므로..
