[HTML+CSS+Front] Snippet+Tools 모음 (updated: 2024.04.17)

HTTP API

■ HTTP Status Dogs : https://http.dog/ HTTP Status Code별 강아지 이미지 제공 :)

HTTP Status Dogs API - A dog image for every HTTP Status Code

A free HTTP status code API with lots and lots of awesome dogs! Use it to show useful error messages in your website for HTTP response status codes. Support for AVIF, JXL, JPG, WEBP and JSON.

http.dog

웹에서 프론트 개발 Tools

■ 스택블리츠: https://stackblitz.com/?starters=fullstack

StackBlitz | Instant Dev Environments | Click. Code. Done. - StackBlitz

Instant dev experiences Wait, I can enjoy web dev again? Significantly reduce time to market with matchlessly secure, instantly reproducible, fullstack dev environments which boot in milliseconds.

stackblitz.com

■ CodePen: https://codepen.io/pen/

Create a New Pen

...

codepen.io

■ CodeSandbox: https://codesandbox.io/

https://codesandbox.io/

Reliable and secure We keep your code always private and secure. You get flexible permissions, access control, security monitoring, private npm, and more.

codesandbox.io

CSS 도구사이트

■ CSS Validator(표준화): https://jigsaw.w3.org/css-validator/

W3C CSS 검사 서비스

파일 업로드를 통한 검사 직접 입력을 통한 검사

jigsaw.w3.org

■ HTML Color Picker: https://www.webfx.com/web-design/color-picker/

Color Picker Tool | Free HEX Color Picker by WebFX

Use our free online color picker tool to generate beautiful color palettes. Manually adjust HEX codes, HSB, and RGB values as needed!

www.webfx.com

웹 개발 라이브러리

Popper.js (TOOLTIP & POPOVER POSITIONING ENGINE): https://popper.js.org/
활용예시 (in React)▶ CodeSandBox, Blog

Home

Positioning tooltips and popovers is difficult. Popper is here to help! Popper is the de facto standard to position tooltips and popovers in modern web applications.

popper.js.org

웹 개발 리소스

■ 구글 폰트(웹폰트): https://fonts.google.com/?hl=ko (무료)

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

■ 폰트어썸(웹폰트): https://fontawesome.com/ (회원가입 필요, 무료/유료)

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

CSS Snippet

■ CSS 기본 코드 (참고: https://webstudybasic.pe.kr/landing/index.html)

/* 기본 캐릭터 셋 */
@charset 'UTF-8';

/* CSS Reset:
   CSS속성을 초기화함으로써 브라우저 마다 동일하게 표현되도록한다. */
* {
  padding: 0; margin: 0; box-sizing: border-box;
  font-family: '맑은 고딕', sans-serif; color:#333333;
}
img { vertical-align: top; width: 100%; }
li { list-style: none; }
a { text-decoration: none; }

■ HTML5 기본 코드 (참고: https://webstudybasic.pe.kr/landing/index.html)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>브라우저 창 제목</title>
    <!-- ▼ CSS Reset or Normalize -->
    <link href="./css/normalize.css" rel="stylesheet" type="text/css">
    <!-- ▼ jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.7.0.js" defer></script>
    <!-- ※ defer키워드= HTML DOM생성될때까지 script 실행 지연(
            단, DOMContentLoaded 이벤트 발생 전에 실행 -->
    <!-- ▼ Bootstrap5 2023.06.13 --> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./script/script.js" defer type="text/javascript"></script>
</head>
<body>

</body>
</html>

■ clearfix

.clfix:after,.clfix:before {
    line-height: 0;
    display: table;
    content: ''
}
.clfix:after {
    clear: both
}

■ 주 사용 Selector (계속추가..)

/* class명에 "col"이 포함된 요소 */
[class|="col"] {
}

/* CSS Combinators(연결자)
   https://www.w3schools.com/css/css_combinators.asp
   ① descendant selector (space): 자손 선택자
   ② child selector (>): 자식 선택자
   ③ adjacent sibling selector (+): 인접 형제 선택자
   ④ general sibling selector (~): 일반 형제 선택자
 */
div p	/* <div> 요소 내의 모든 <p> 요소를 선택 */
div > p	/* 부모가 <div> 요소인 모든 <p> 요소를 선택 */
div + p	/* <div> 요소 바로 뒤에 배치된 모든 <p> 요소를 선택 */
p ~ ul	/* <p> 요소가 앞에 오는 모든 <ul> 요소를 선택 */

■ CSS Reset: 기기와 브라우저에 관계없이 동일한 사용자 경험을 제공하기 위한 CSS. 주로 대규모 프로젝트에서 사용.

■ CSS Normalize: 브라우저의 기본 스타일을 최대한 유지하면서 브라우저별로 다르거나 원하는 요소에 대해서만 스타일 설정. 주로 소규모/개인 프로젝트에서 사용.

reset.css (2023.05.26 download)		https://elad2412.github.io/the-new-css-reset/
normalize.css (2023.05.26 download)		https://necolas.github.io/normalize.css/
styled-normalize :React기반 styled component 사용시 (2023.05.26 download)		https://github.com/sergeysova/styled-normalize https://github.com/necolas/normalize.css

참고사이트

■ CSS Reset vs CSS Reset: https://www.daleseo.com/css-normalize-reset/

저작자표시 비영리

'HTML&CSS' 카테고리의 다른 글

svg test (0)	2023.06.09
HTML5 요소 판별법 (0)	2012.04.15
ActiveX 대체기술은? (0)	2012.04.05
HTML 특수문자표 (2011.04) (2)	2012.03.21
브라우저 파헤치기 (0)	2012.03.15

D:evelopment MOBI:le + Web ~♥