코딩각

pico css 프레임워크 리뷰 - 미니멀리즘 CSS 프레임워크

Pico Css Pico는 미니멀리즘을 추구하는 CSS 프레임워크입니다. 웹프레임워크의 선택은 항상 고민스러운 부분인데 특히 프론트엔드 같은 경우는 너무나 종류가 많아서 문제입니다. 어떻게 보면 종류가 많은 것 자체는 큰 문제가 아니고 그 경쟁이 치열한 시장이라 기술이 발전한다는 것으로 좋게 볼 수도 있습니다. 다만 프로그래머 개인의 입장에서 보면 학습 시간이 지나치게 늘어난다는 단점이 있습니다. 프론트엔드만 봐도 HTML/CSS/JS 이 세개를 시작으로 JQUERY, REACT, VUE, SWIFT, TYPESCRIPT, VANILA JAVASCRIPT 정도는 기본으로 다룰 수 있어야 하고 SASS, BOOTSTRAP 등 널리 사용되는 프레임워크도 알아야 합니다. 이 모든 언어들의 결과물은 다 똑같은 ..

코딩(CODING)/HTML | CSS 2023. 4. 8. 01:23

부트스트랩 학습 방법 - bootstrap 5 기초 2

부트스트랩은 전세계 프론트엔드 프레임워크에서 70%가 넘는 시장점유율을 가지고 있다고 합니다. 어쩐지 해외의 웹사이트를 돌아다니다 보면 비슷한 레이아웃의 디자인이 많아 보입니다. 심플한 디자인이지만 반응형 웹페이지 문제를 해결해주기 때문에 모바일 환경이 일상화된 시대에 좋은 솔루션입니다. 부트스트랩에서 디자인을 더 특화시키길 원한다면 SASS 컴파일로 커스터마이즈가 가능하다는 것도 장점입니다. 트래픽이 작은 웹사이트를 운영할 때는 CDN을 사용해 배포하여 호스팅 비용을 절감할 수도 있습니다. CDN은 브라우저에 캐시되니까 부트스트랩의 점유율이 높아질 수록 페이지 로딩속도도 빨라질 것으로 예상할 수 있지요. 페이지 로딩속도는 SEO에 중요합니다. 부트스트랩은 반응형 문제를 해결한 것, CDN배포로 비용을 ..

코딩(CODING)/HTML | CSS 2022. 4. 3. 23:06

비주얼 스튜디오 코드 beautify 설치와 단축키 설정

beautify는 소스코드를 정렬해주는 고마운 확장기능입니다. 주로 인터넷에서 가져온 코드를 복사 붙여넣기 한 후에 사용하면 기분적으로 순식간에 나의 코드로 흡수가 된 만족감이 있습니다. *atom 이나 bracket등의 IDE는 beautify 설치시 메뉴나 단축키로 바로 사용할 수 있는데 비주얼 스튜디오 코드의 경우 설치 후 별도 설치하는 과정이 필요합니다 간단한 과정이지만 모르면 헤메게 되는데 이 포스팅을 따라하면 해결할 수 있습니다. 우선 마켓플레이스에서 Beautify 를 설치합니다. 이미 VSC에서만 800만회가 넘게 설치되었습니다. 기능기여도 탭을 클릭하여 아래로 내려서 바로가기키가 비어있는 것을 확인합니다. VSC의 메뉴에서 파일 - 기본설정 - 바로가기키 를 클릭하면 키바인딩이 나오는데 ..

코딩(CODING)/HTML | CSS 2022. 3. 30. 03:33

color picker 온라인 / Chrome Extension / 데스크탑 앱 사용방법 - 윈도우11

Color Picker Color Picker는 프론트엔드 개발자나 디자이너들이 사용하는 프로그램입니다. 꼭 디자이너가 아니더라도 배경색이나 글자색을 입히기 위해서는 6자리로된 16진수 RGB 코드가 필요하기 때문에 대단한 프로그램은 아니지만 항상 찾게 되는 프로그램입니다. 윈도우 환경에서는 WPF의 color picker 컨트롤을 쉽게 구현할 수 있지만 시중에 워낙 color picker가 많이 나와있어서 직접만들기 보다는 자신에게 맞는 앱을 선택해서 사용하면 좋을 듯 합니다. 여기서는 세가지 방법에 대해서 알아보겠습니다. 1. 온라인 인터넷에서 제일 쉬운 방법은 google에 color picker 라고 검색하면 첫 페이지에 color picker가 나옵니다. 색상을 선택한 후 HEX 코드를 복사해서..

코딩(CODING)/HTML | CSS 2022. 3. 23. 01:00

absolute position의 사용 - HTML/CSS

absolute position CSS의 포지션 속성은 다양한 변형이 있어서 한번에 모든 것을 이해하기는 조금 어렵습니다. 포지션은 설명도 중요하지만 실제 CSS를 가지고 놀면서 (play around) 체감적으로 깨닫는 부분이 많기 때문에 에디터로 직접 해보는 방법이 좋습니다. 개발환경을 셋팅하지 않아도 코드펜 등의 온라인 에디터로 똑같이 실습이 가능합니다. 코드팬(codepen)을 활용한 프론트엔드 웹개발 학습 (HTML/CSS) 포지션의 기본 값 static 포지션 시스템을 이해하는 방법은 여러가지가 있는데, 여기서는 기본값부터 설명을 시작해 보겠습니다. 아래는 div 로 박스를 만들어 놓은 모습입니다. HTML상에서는 parent와 child 관계가 분명하게 보입니다. 이것은 parent와 chi..

코딩(CODING)/HTML | CSS 2022. 3. 18. 16:39
◀ 1 2 3 4 ··· 8 ▶

블로그정보

  • 블로그 이미지
  • ⟪코딩갘 - 100°⟫

    코딩 (파이썬, C언어, 자바) 및 IT정보 블로그

카테고리

  • 분류 전체보기 (1291)
    • IT뉴스 (94)
    • IT일반 (227)
    • IT출판 (161)
      • 워드프레스 | 티스토리 (136)
      • 유튜브 (Youtube) (17)
    • 블록체인 - Blockchain (31)
    • 암호화폐 투자 (191)
    • 운영체제 메뉴얼과 팁 (31)
      • 윈도우11 (10)
      • 리눅스 일반 (21)
    • 코딩(CODING) (380)
      • 자바(JAVA) (82)
      • 파이썬(PYTHON) (92)
      • C# .NET Core (42)
      • 러스트(Rust) (3)
      • C언어(C Language) (41)
      • C++ (41)
      • 자바스크립트(JS) (20)
      • HTML | CSS (36)
      • 루아(Lua) (15)
      • 어셈블리어 MASM (6)
      • PHP (2)
    • 컴퓨터구조 (10)
      • 운영체제 | OS (6)
      • 컴퓨터 하드웨어 (4)
    • FRAMEWORK (58)
      • 자바 | JavaFX (17)
      • 파이썬 | PYGAME (18)
      • 파이썬 | PyQt5 (16)
      • 파이썬 | kivy (5)
      • GDScript(GODOT) (2)
    • 모바일 게임 (8)
    • 알고리즘(Algorithm) (13)
      • C언어 알고리즘 (13)
    • IT 수학 (25)
      • 대수 기초 (9)
      • 지오지브라 계산기 (1)
      • 이산수학 | Discrete Mathematics (2)
      • 수학기초 (13)
    • IT 서적 리뷰 (23)
    • 로블록스(Roblox) (2)
    • 일본어 (8)
    • 영화 (1)
    • IT상품평 (14)
    • 과학일반 (1)
    • 컴퓨터보안 (2)

방문자 카운터

  • 어제 :
  • 오늘 :
  • 누적 :

방문자 그래프

공지사항

  • 비트코인 선물 초보 가이드 모음
  • 하스켈 입문 튜토리얼 모음 - 진행중
  • 코딩 전문 블로그 워드프레스 개설

Copyright © ⟪코딩갘 - 100°⟫. All Right Reserved.

  • 글쓰기
  • 관리자
  • 카테고리
  • 맨위로

티스토리툴바