css4 adobe xd 퍼블리싱 (css) adobe xd 퍼블리싱하기 (CSS) 기존에 피그마에서 작업을 할 때는 바로바로 CSS 값을 볼 수 있어 편했지만 이번엔 adobe xd를 이용하게 되었다. 그래서 adobe xd에서 css 값을 확인하는 방법을 정리해 보려고 한다. 1. 공유 탭으로 이동 이렇게 프로젝트를 열고 공유 탭으로 이동한다. 2. 보기설정과 링크 액세스 확인하기 보기 설정을 개발로 설정하고, 링크를 통해 접속할 수 있도록 한다. 이후 생성된 링크로 이동한다. 3. 링크로 이동한 뒤 오른쪽에 탭을 누르면 CSS 정보를 확인할 수 있다. 4. 원하는 object를 클릭 후 다른 요소 위에 올리면 상대거리가 나타나게 된다. 끝! 2021. 8. 20. css 반응형 웹 만들기 css파일에 미디어쿼리 적용하기 @media only screen and (min-width:100px) { } 컴퓨터 화면에 적용 : screen 속성 설정 : (min-width or max-width) /* test.css */ html, body, div{ width: 100%; height: 100%; } @media screen and (max-width:500px){ body { display: flex; flex-direction: row; } #test1 { background-color: antiquewhite; } #test2 { background-color: red; } #test3 { background-color: blueviolet; } } @media screen and (.. 2021. 6. 6. VSCODE HTML 자동완성 snippets 설정 및 안될 때 오늘은 vscode의 Extension인 HTML Snippets를 설치해보겠습니다. 공식 페이지에서 알려주는 설치방법은 다음과 같습니다. 공식 페이지 링크 : https://github.com/abusaidm/html-snippets Installation Install Visual Studio Code 0.10.1 or higher Launch Code From the command palette Ctrl-Shift-P (Windows, Linux) or Cmd-Shift-P (OSX) Select Install Extension Type HTML-Snippets Choose the extension Reload Visual Studio Code 설치방법 Visual Studio Code를 설치한 뒤.. 2020. 9. 2. FLASK static 설정 \FLASK에서 html파일이 js, css 파일을 가져오기 위해서는 -> 이렇게 가져오면 안된다. 이렇게 가져와야 한다고 한다... 왜 그럴까..? 암튼 그럼 css,js파일은 templates와 같은 위치에 static에 들어있어야 한다. url_for('static') 여기를 아무리 수정해도 수정되지 않는다...ㅠ 그래서 static경로를 바꾸기 위해서는 app = FLASK(__name__, static_folder='./static') 여기 설정을 바꿔야 한다. 흐음.. 귀찮구만 2020. 8. 11. 이전 1 다음
