전체 글 (17) 썸네일형 리스트형 FE 기능 - CSS 앵커 포지셔닝 API 사용하기 CSS 앵커 포지셔닝(Anchor Positioning) API는 HTML 요소를 특정 기준(anchor) 요소를 기준으로 위치를 지정할 수 있도록 해주는 새로운 CSS 기능입니다. 이를 활용하면 툴팁, 팝오버, 주석 라벨, 동적 차트 레이블 등을 쉽게 구현할 수 있습니다.CSS 앵커 포지셔닝 API의 주요 특징기준(anchor) 요소 설정특정 HTML 요소를 기준(anchor)으로 지정하고, 다른 요소(자식 요소)를 이 기준에 상대적으로 배치할 수 있습니다.예를 들어, 버튼 위에 툴팁을 띄우거나, 특정 위치에 팝오버를 표시할 때 유용합니다.레이어 인터페이스 구현이 API를 사용하면 제3자 라이브러리 없이도 툴팁이나 팝오버 같은 레이어 기반 인터페이스를 간단히 만들 수 있습니다.여러 기준 요소 연결하나의.. flask(python)로 Android/iOS API 구현하기(파일 첨부 추가) android, iOS 모바일 앱 구현 시 BE API를 구현해야할 일이 생깁니다. 그런데 iOS의 경우에는 장비들이 어느 정도 정해져 있지만 android의 경우에는 많이 파편화 되어 있습니다. 그래서 파일 첨부 시 다양한 사이즈 형태의 파일을 접하게 됩니다. 모든 기기에서 앨범, 카메라 사용 시 처리하게 대응할 수 있지만 모든 장비를 대응할 수는 없기 때문에 BE 서버에서 처리하는게 더 효율적일 수 있습니다. flask로 파일을 처리하는 API 코드 입니다. import iofrom flask import Flask, request, redirect, url_for, render_templatefrom werkzeug.utils import secure_filenamefrom PIL import .. macos(맥북) docker에 MSSQL 설치하기 환경 : MacBook 2019(Intel)OS : Sonoma(14.4.1)docker desktop, DBbeaver 기준(설치 과정 생략) 이미지 다운로드docker pull mcr.microsoft.com/mssql/server:2019-latest 컨테이너 실행 docker run -e 'ACCEPT_EULA=Y' -e 'SA_PASSWORD=' -p 1433:1433 -d mcr.microsoft.com/mssql/server:2019-latest ODBC driver & SqlCmd 설치하기(로컬 개발환경에서 필요, 실제 운영 시 불필요)brew tap microsoft/mssql-release https://github.com/Microsoft/homebrew-mssql-releasebre.. macos(맥북) docker에 OpenLDAP 설치하기 환경 : MacBook 2019(Intel)OS : Sonoma(14.4.1)docker desktop, ApacheDirectoryStudio 기준(설치 과정 생략) 이미지 다운로드docker pull bitnami/openldap:latest 실행 docker run --name openldap \--env LDAP_ADMIN_USERNAME=admin \--env LDAP_ADMIN_PASSWORD=adminpassword \--env LDAP_USERS=shko \--env LDAP_PASSWORDS=tnwjd486 \--env LDAP_ROOT=dc=example,dc=org \--env LDAP_ADMIN_DN=cn=admin,dc=example,dc=org \-p 1389:1389 \bitn.. macos(맥북) Oracle docker에 설치하는 방법 환경 : MacBook 2019(Intel)OS : Sonoma(14.4.1)docker desktop, DBbeaver 기준(설치 과정 생략) 오라클 이미지 다운로드 시 도커허브 로그인 필요함(계정 생성 필요)로그인 이후 진행 안될 경우 터미널을 재실행 하면 됨 docker login 오라클 이미지 검색합니다.docker search oracle-xe-11g 도커 이미지 pulldocker pull oracleinanutshell/oracle-xe-11g 도커 이미지 실행docker run -d -p 1521:1521 oracleinanutshell/oracle-xe-11g docker 이름 확인 docker ps sqlplus 접속 (docker ps 조회된 NAME 사용), 초기 관리자 정보 s.. SCSS 활용 팁 4. @extend를 이용한 스타일 상속 중복된 스타일을 여러번 반복해서 써야하는 경우 유용하게 사용할 수 있는 @extend에 대해 알아보겠습니다.@extend@extend는 SCSS에서 스타일 코드의 재사용성을 높이기 위해 제공되는 기능 중 하나로, 스타일을 복사해서 사용하는 @mixin과 달리 선택자가 다른 선택자의 스타일을 상속받는 방식으로 동작합니다. /* SCSS */.button { padding: 10px 20px; font-size: 16px; background-color: blue; color: white;}.primary-button { @extend .button; background-color: darkblue;}/* css */.button, .primary-button { padding: 10px 20p.. SCSS 활용 팁 3. 변수와 믹스인 사용으로 배경 이미지 경로 관리하기 css 작업시 이미지 경로를 여러곳에 써야 할때, 어찌보면 별거 아닌 일이지만 매우 귀찮은 일임에는 틀림 없을 것입니다. 거기다가 중간에 경로가 변경이라도 된다면, 작업한 경로를 하나하나 찾아 바꿔줘야 하겠지요. 이럴 경우에도 scss가 도움을 줄 수 있습니다. 변수로 이미지 경로 관리하기scss에서 이미지 경로를 변수로 정의해 둔다면, 경로를 반복해서 입력할 필요 없이 변수만 입력하면 됩니다. 경로가 바뀌었을 경우에도, 변수를 정의한 부분만 수정해주면 되니 유지보수에도 유리합니다.// 이미지경로 변수 정의$image-path: "../assets/images";// 변수 사용.background { background-image: url("#{$image-path}/background.jpg");.. SCSS 활용 팁 2. @if/@else를 포함한 @mixin으로 텍스트 말줄임 쉽게 처리하기 한정된 공간에서 너무 긴 텍스트를 보여주게되면 로딩속도와 가독성이 떨어지는 것은 물론이고 디자인의 일관성까지 해치게 됩니다. 그래서 중요한 텍스트만 간결하게 보여주고 필요시 상세페이지로 유도하기 위해 말줄임 처리: ellipsis를 사용하게 되는데요. css에서 ellipsis 처리하는 방법도 간편하긴 하지만, 여러군데에 처리가 필요한 경우에는 관리가 힘들어질 수 있습니다. 그래서 scss @mixin을 활용하여 반복 사용이 가능한 코드를 만들어 처리해 보려고 합니다.🚨주의사항🚨본 게시물의 예제에서는 코드의 변환된 모습 위주로 보여주기 위해 생략했지만, 텍스트 말줄임을 처리하기 위해서는 고정된 width값이 반드시 필요합니다. width가 지정되지 않을 경우 말줄임이 동작하지 않습니다.@mixin@m.. 이전 1 2 3 다음
