개발 아카이브/HTML, CSS
[HTML] 웹 컬러 도구 사이트
CSS로 웹을 디자인하면 색감에 대해 고민을 많이 하게 됩니다. 어떤 색이 예쁜 색인지, 어떤 색이 잘 보이는 색인지 잘 모를 때가 많습니다. 이번에 소개할 사이트 3가지는 html의 네임드컬러, RGB코드, Hex코드, Hsl코드 등 쉽게 정보를 얻을 수 있고, 색 선택에 도움을 주는 사이트입니다. ✅ 이 포스팅은 더 좋은 정보가 있으면 갱신하는 사이트입니다. 만약 소개드린 사이트 이외 좋은 내용 있어서 덧글로 알려주신다면 감사드립니다. w3schools HTML Color Picker www.w3schools.com/colors/colors_picker.asp HTML Color Picker Selected Color: Black Text Shadow White Text Shadow www.w3sch..
[CSS 프레임워크] CSS 프레임워크 모음
1. bootstrap bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드 bootstrapk.com getbootstrap.com/ Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life ..
[CSS] Flex를 사용하여 DIV 예쁘게 배치하기 (Container 편)
옛날에 웹 디자인은...? 옛날에는 웹 디자인을 하면서 position, float, display 등으로 레이아웃을 배치하고 콘텐츠들을 정렬했었습니다. 하지만 한계가 있었고, text-align이나 vertical-align 등을 사용하여 가로 세로를 배치하고 몇 픽셀 어긋나면 margin, padding, top, left, line-height를 써가며 위치를 옮겨 디자인을 했습니다. 더 나아가 원하는 위치에 알맞은 크기로 정렬하기 위해 태그를 사용하여 수많은 내용을 배치했었죠. 그 수많은 테이블 태그 안에 또 새로 시작되는 테이블 태그.. 그 안에 또... 어휴.. 상상하기 싫군요. 그리고 이러한 테이블 태그를 사용해서 레이아웃을 만들고, 원하는 곳에 글과 콘텐츠를 위치하고 정렬할 수 있어도, 요..
[HTML/CSS/JAVASCRIPT] 프론트엔드 개발 및 웹 디자인에 도움되는 사이트 10가지
codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 1. CodePen 아주아주 유명한 사이트라서 모르는 사람이 없을 정도지만, 예쁜 웹디자인을 위해서 아주 도움되는 사이트이기 때문에 넣었습니다. CodePen에선 다양한 예시들을 프로 개발자들이 만들고 공유하는 사이트입니다. 웹 디자인을 할 때, 예쁜 체크박스, 토글, 드롭다운 등을 추가하고 싶다면 여기 CodePen에 들어가세요. 사용하고 있는 프레임워크..
HTML Entity Tag Table
HTML 특수문자 코드표. HTML 엔터티 태그표 HTML Entity Tag Table 자주 사용하게 되어서 저장겸 포스팅 하게 되었습니다. 출처 : egloos.zum.com/keep/v/1030642 숫자표현 문자표현 표현문자 설명 - - - 사용하지 않음 - space 수평탭 - space 줄 삽입 - - - 사용하지 않음 - space 여백 ! - ! 느낌표 " " " 따옴표 # - # 숫자기호 $ - $ 달러 % - % 백분율 기호 & & & Ampersand ' - ' 작은 따옴표 ( - ( 왼쪽 괄호 ) - ) 오른쪽 괄호 * - * 아스트릭 + - + 더하기 기호 , - , 쉼표 - - - Hyphen . - . 마침표 / - / Solidus (slash) 0-9 - 0 - 9 0부..