본문 바로가기

분류 전체보기

(79)
[CSS] 추가 클래스 - Multiple Class https://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes Can a CSS class inherit one or more other classes? Is it possible to make a CSS class that "inherits" from another CSS class (or more than one). For example, say we had: .something { display:inline } .else { background:red } What I'... stackoverflow.com https://velog.io/@sophia9901/CSS%EC%8A%A4%ED%83%80..
웹 개발 플러스 3 - 맛집지도 만들기 0. 목표 Selenium을 활용한 브라우저 제어 및 웹 스크래핑 네이버 지도 API 적용 네이버 지도 API의 다양한 기능을 활용 8000원 미만 가성비 지도 가능? 브라우저 제어? : 로그인, 스크롤 내리기 등 브라우저의 동작을 할 때 Selenium 같은 브라우저 제어 프로그램을 이용해 정해진 시간에 게시판 글을 작성하는 등 자동화에 쓰일 수 있다. 프로젝트 셋팅 : requests, bs4, pymongo, flask, selenium 패키지 설치 필요한 기능 : 맛집 정보 스크래핑, 지도 보여주기, 각 맛지 별 마커, 정보창, 카드 만들기 from flask import Flask, render_template, request, jsonify, redirect, url_for from pymon..
Table CSS 테이블 정렬하기 .table { width: 80%; max-width: 800px; margin: auto; table-layout: fixed; border-collapse: collapse; } td { background-color: white; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } 둥글게 깎기 thead:first-child tr:first-child th:first-child { border-radius: 10px 0 0 0; } thead:first-child tr:first-child th:last-child { border-radius: 0 10px 0 0; } tbody:last-child tr:last-c..
개발자들을 위한 유용한 커맨드 모음 공통 : Ctrl + A : 전체 선택 파이참 : Ctrl + D : 한 줄 복사하기 Ctrl + Alt + L : 줄 맞춤 브라우저 : Ctrl + Shift + R : 캐시를 모두 지운 후 다시 로딩하기 -> css 파일 분리 등 경로 변경이 있을 때 로딩에 이상이 있다면 캐시 삭제 하기
웹 개발 시 유용한 사이트 모음 - 1 : 폰트, 아이콘, HTML 1. 폰트 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 아이콘 https://fontawesome.com/v4/icons/ Font Awesome Icons Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG..
내 마음대로 적는 CSS - 2 : background 관련 CSS 총집합! background-color: white; background-image: url('image.jpg'); background-position: center; background-size: contain; background-repeat: no-repeat; background-attachment: fixed;
내 마음대로 적는 CSS -1 : 의사요소, 의사클래스, box-sizing, margin, overflow *, ::after, ::before{ box-sizing: border-box; margin: 0; } 위 CSS 규칙은 '*' (모든요소), '::after', '::befre' 두 가지 의사요소(pseudo-element)에 적용합니다. 규칙 내용은 먼저 'box-sizing' 속성을 'border-box'로 설정합니다. 요소의 총 너비와 높이를 계산할 시 패딩(padding)과 테두리(border) 너비를 포함시키도록 지시합니다. 또한 'margin' 속성을 0으로 설정하여 기본 마진을 제거합니다. 1. 의사요소 (pseudo-element) 의사요소란 CSS 선택자의 일종으로서, 선택한 요소의 일부분에 가상의 요소를 생성합니다. HTML 코드 상에는 존재하지 않지만 CSS를 사용해 내부 특정 위..
웹 개발 플러스 2 - 나만의 단어장 0. 동적 웹 페이지, 정적 웹 페이지 정적 웹 페이지란 서버에 저장되어 있는 HTML + CSS 파일을 그대로 보여 주는 것입니다. 반면 동적 웹 페이지는 데이터의 추가/ 가공을 통해 저장된 HTML의 모습이 변합니다. 정적인 웹 페이지는 추가적 통신, 계산이 필요가 없기 때문에 속도가 빠르고 서버의 부담이 적지만 추가, 수정, 삭제 등의 내용 변경이 필요하면 HTML 자체를 수정해야 하기 때문에 번거로우며 서비스가 한정적입니다. 따라서 변화가 적은 회사 소개, 음식메뉴, 포트폴리오 등이 정적인 웹 페이지로 만들기에 적합합니다. 반면 동적 웹 페이지는 상황, 시간, 사용자의 요청에 따라 다른 모습을 보여줘야 합니다. 하지만 보안에 취약하고 모습이 계속 변하기 때문에 검색엔진 최적화(SEO, Search..