Html/css 구성하는데 유용한 사이트

마크업/Html & Css

Html/css 구성하는데 유용한 사이트

Rainbow🌈Coder 2022. 4. 23. 12:26

728x90

0. 아이디어/웹 레이아웃 브레인 스토밍 https://excalidraw.com/

1. 실시간 Html/css/js 적용상태 볼 수 있는 사이트 JS Bin - Collaborative JavaScript Debugging

2. 색깔을 고르고 싶을 때, 색깔 고르면 uI 컬러 배치구성까지 미리보여준다 Color Tool - Material Design

3. 이미지 파일을 원하는 크기로 변경, 16x16 / 32x32 / 64x64 / 128x128 / 256x256등 https://www.iloveimg.com/ko

4. 이미지 파일로 파비콘 생성 https://www.websiteplanet.com/

5. 디자이너들이 제공해주는 무료 아이콘 모음 https://fontawesome.com/

svg to png 은 검색하면 나옴

로그인 하면 받을 수 있는 이 코드를

<script src="https://kit.fontawesome.com/3f40333451.js" crossorigin="anonymous"></script>

아래와 같이 붙여넣어주세요 :)

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      src="https://kit.fontawesome.com/3f40333451.js"
      crossorigin="anonymous"
    ></script>
  </head>

6. 구글 폰트 : (무난)로보토, 오픈산스 https://fonts.google.com/

가져가고 싶은 폰트를 고른 뒤에 생선된 링크 태그를 자신의 프로젝트에 복붙!

예시

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://kit.fontawesome.com/3f40333451.js" crossorigin="anonymous"></script>
	<title>Today I Learned</title>
	<link rel="icon" type="imgs/png" href="imgs/til-logo.png">
	<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
	<style> @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Open+Sans:wght@400;500;600;700&display=swap'); </style>

</head>

link 태그를 복사해서 <head> ~ </head>사이에, CSS를 복사해서 <style> ~ </style> 사이에 넣는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700&display=swap" rel="stylesheet">
    <title>로그인페이지 마크업</title>
    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }
        div {
            color: black;
        }

        .login-title > div {
            color: white;
            background-size : 16px;
            background-image: url('https://avatars.githubusercontent.com/u/93479286?v=4');
            background-position: center;
            background-size: 300px;
            width: 300px;
            height: 300px;
            border-radius: 10px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin : auto;
            margin-top: 100px;
        }
        .wrap {
            width: 300px;
            margin : auto;
        }


    </style>
</head>
<body>
<div class="login-title">
<div>
    <h1>로그인 페이지</h1>
    <h5>아이디, 비밀번호를 입력해주세요.</h5>
</div>
</div>
    <div class="wrap">
        <div>
            <h3>로그인</h3>
            <p>
                ID = <input type="text" class="">
            </p>
            <p>
                PW = <input type="text" class="">
            </p>
            <button>로그인하기</button>
        </div>
    </div>
        
</body>
</html>

7. 나만의 로고 만들기 Canva: 무료 디자인 도구: 프레젠테이션, 동영상, 소셜 미디어 등

Image cropping online tool: https://resizeimage.net/

9번 링크를 이용하여 뒷 흰배경을 삭제해주자.

8. color picker https://www.google.com/search?q=color+picker

9. 흰배경 PNG 투명배경으로 바꾸기 이미지 배경 제거, 투명 배경 만들기 – remove.bg

10. HTML element reference : HTML 태그가 헷갈릴 때마다 찾아보기 좋은 링크

(1) https://developer.mozilla.org/ko/docs/Web/HTML/Element

(2) https://www.w3schools.com/TAgs/default.asp

이렇게 만들어진 멋진 이미지들을 favicon으로도 활용할 수 있다!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://kit.fontawesome.com/3f40333451.js" crossorigin="anonymous"></script>
	<title>Today I Learned</title>
	<link rel="icon" type="imgs/png" href="imgs/til-logo.png">
	<style> @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Open+Sans:wght@400;500;600;700&display=swap'); </style>
</head>

10. 무료 사진 사이트: https://unsplash.com/

11. 스케치 부트스트랩 : 감성 풀풀 나는 사이드 프로젝트에 적합할듯 :)

https://bootswatch.com/sketchy/

Bootswatch: Sketchy

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater

bootswatch.com

12. 유저 프로필 사진 무료

https://cdn.expcloud.co/life/uploads/2020/04/27135731/Fee-gentry-hed-shot-1.jpg

https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-1.png

https://widgetwhats.com/app/uploads/2019/11/free-profile-photo-whatsapp-4-300x300.png

13. 프로젝트 명 자동 생성기

https://namelix.com/

Business Name Generator - free AI-powered naming tool - Namelix

namelix.com

위의 링크들을 이용하여 저만의 멋진 로고와 웹페이지를 만들 수 있었답니다!

디자인 툴이 어색한 개발자 분들도 도전해보시면 좋을 것 같습니다 :D

728x90