728x90
사이트 제작하기 : 📝 텍스트 유형01
텍스트 유형은 이미지가 아닌 말 그대로 텍스트로 이루어진 유형입니다.
아이콘이 들어가므로 아이콘을 어떤 방법으로 넣어줄지 생각해보아야 합니다.
오늘 만들 사이트 형식
사이트 제작 방법
1. Figma 사용해서 레이아웃 설정
사이트를 만들기 위해서는 먼저 사이트 레이아웃을 설정해야 합니다. (그리드 이용)
밑의 이미지와 같이 figma를 이용하여 레이아웃을 설정해줄 수 있습니다. " shift + R " 로 자 기능을 활용하여 레이아웃을 만들어줍니다.
※ 이 때, 칸이나 줄이 확실하게 맞아야 하며 오차없이 레이아웃을 설정해주는 것이 중요합니다.
2. vscode를 통해 코딩해주기! : HTML편
레이아웃을 다 설정해줬다면 코딩을 해봅시다!
html의 body 부분에 레이아웃 구역을 정해줍니다.
저는 svg를 통해 아이콘을 넣어주는 방식을 택했는데 코드가 자칫 더러울 수 있으니...주의하세요!
코드 보기
<section id="textType01" class="text__wrap nexon section gray">
<p>텍스트 유형01</p>
<h2>요즘 핫한 인기 어플들</h2>
<div class="card__inner container"> <!--가운데 영역 container-->
<article class="card">
<div class="circle1 ir">어플
<svg class="facebook" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1870_1909)">
<path d="M35 17.5C35 7.83501 27.165 0 17.5 0C7.83501 0 0 7.83501 0 17.5C0 26.2346 6.39946 33.4746 14.7656 34.7874V22.5586H10.3223V17.5H14.7656V13.6445C14.7656 9.25859 17.3783 6.83594 21.3756 6.83594C23.2897 6.83594 25.293 7.17773 25.293 7.17773V11.4844H23.0863C20.9125 11.4844 20.2344 12.8334 20.2344 14.2188V17.5H25.0879L24.312 22.5586H20.2344V34.7874C28.6005 33.4746 35 26.2346 35 17.5Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_1870_1909">
<rect width="35" height="35" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<h3 class="tit">페이스북</h3>
<p class="desc">요즘 어플들 중 핫한 어플들입니다. SNS로 소통 시대에 이 어플들은 필수 어플이기도 하며 소통을 하는 데 굉장히 유용합니다.</p>
<a href="#" class="more"><span>더보기</span></a> <!--ir효과 : 화면상에는 안 나오나 웹표준과 접근성을 위해 시간장애인 스크린 리더기에는 보이게하는 효과임-->
</article>
<article class="card">
<div class="circle2 ir">어플
<svg class="insta" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.5103 3.15198C22.1888 3.15198 22.7428 3.17249 24.5828 3.25454C26.2927 3.32975 27.2161 3.61692 27.8317 3.85622C28.6457 4.17074 29.2339 4.55362 29.8427 5.16214C30.4583 5.7775 30.8345 6.35866 31.1491 7.1723C31.3885 7.78765 31.6758 8.71752 31.751 10.42C31.8331 12.2661 31.8536 12.8199 31.8536 17.4897C31.8536 22.1664 31.8331 22.7203 31.751 24.5595C31.6758 26.2688 31.3885 27.1918 31.1491 27.8072C30.8345 28.6208 30.4514 29.2088 29.8427 29.8174C29.2271 30.4327 28.6457 30.8088 27.8317 31.1233C27.2161 31.3626 26.2859 31.6497 24.5828 31.7249C22.736 31.807 22.1819 31.8275 17.5103 31.8275C12.8317 31.8275 12.2777 31.807 10.4378 31.7249C8.72777 31.6497 7.80438 31.3626 7.18878 31.1233C6.37483 30.8088 5.78659 30.4259 5.17784 29.8174C4.56224 29.202 4.18605 28.6208 3.87141 27.8072C3.63201 27.1918 3.34473 26.262 3.26949 24.5595C3.18741 22.7134 3.16689 22.1596 3.16689 17.4897C3.16689 12.8131 3.18741 12.2592 3.26949 10.42C3.34473 8.71069 3.63201 7.78765 3.87141 7.1723C4.18605 6.35866 4.56908 5.77066 5.17784 5.16214C5.79343 4.54679 6.37483 4.17074 7.18878 3.85622C7.80438 3.61692 8.73461 3.32975 10.4378 3.25454C12.2777 3.17249 12.8317 3.15198 17.5103 3.15198ZM17.5103 0C12.7565 0 12.1614 0.0205118 10.2941 0.102559C8.43365 0.184606 7.15458 0.485446 6.04651 0.916195C4.89056 1.36745 3.91245 1.9623 2.94118 2.94003C1.96306 3.91092 1.36799 4.88865 0.916553 6.03731C0.485636 7.15179 0.184679 8.42352 0.102599 10.2833C0.0205198 12.1567 0 12.7515 0 17.5034C0 22.2553 0.0205198 22.8502 0.102599 24.7167C0.184679 26.5765 0.485636 27.8551 0.916553 28.9627C1.36799 30.1182 1.96306 31.0959 2.94118 32.0668C3.91245 33.0377 4.89056 33.6394 6.03967 34.0838C7.15458 34.5146 8.42681 34.8154 10.2873 34.8974C12.1546 34.9795 12.7497 35 17.5034 35C22.2572 35 22.8523 34.9795 24.7196 34.8974C26.58 34.8154 27.8591 34.5146 28.9672 34.0838C30.1163 33.6394 31.0944 33.0377 32.0657 32.0668C33.0369 31.0959 33.6388 30.1182 34.0834 28.9695C34.5144 27.8551 34.8153 26.5833 34.8974 24.7236C34.9795 22.857 35 22.2622 35 17.5103C35 12.7584 34.9795 12.1635 34.8974 10.2969C34.8153 8.4372 34.5144 7.15863 34.0834 6.05099C33.6525 4.88865 33.0575 3.91092 32.0793 2.94003C31.1081 1.96913 30.13 1.36745 28.9808 0.923032C27.8659 0.492284 26.5937 0.191444 24.7332 0.109396C22.8591 0.0205118 22.264 0 17.5103 0Z" fill="black"/>
<path d="M17.5103 8.51241C12.5445 8.51241 8.51573 12.5396 8.51573 17.5034C8.51573 22.4673 12.5445 26.4944 17.5103 26.4944C22.4761 26.4944 26.5048 22.4673 26.5048 17.5034C26.5048 12.5396 22.4761 8.51241 17.5103 8.51241ZM17.5103 23.3356C14.2886 23.3356 11.6758 20.7238 11.6758 17.5034C11.6758 14.2831 14.2886 11.6712 17.5103 11.6712C20.7319 11.6712 23.3447 14.2831 23.3447 17.5034C23.3447 20.7238 20.7319 23.3356 17.5103 23.3356Z" fill="black"/>
<path d="M28.9603 8.1568C28.9603 9.31914 28.0164 10.2558 26.8605 10.2558C25.6977 10.2558 24.7606 9.3123 24.7606 8.1568C24.7606 6.99446 25.7045 6.05775 26.8605 6.05775C28.0164 6.05775 28.9603 7.0013 28.9603 8.1568Z" fill="black"/>
</svg>
</div>
<h3 class="tit">인스타</h3>
<p class="desc">요즘 어플들 중 핫한 어플들입니다. SNS로 소통 시대에 이 어플들은 필수 어플이기도 하며 소통을 하는 데 굉장히 유용합니다.</p>
<a href="#" class="more"><span>더보기</span></a>
</article>
<article class="card">
<div class="circle3 ir">어플
<svg class="youtube"width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M34.6514 10.5001C34.6514 10.5001 34.3096 8.08698 33.2568 7.02741C31.9238 5.63288 30.4336 5.62604 29.75 5.54401C24.8555 5.18855 17.5068 5.18855 17.5068 5.18855H17.4932C17.4932 5.18855 10.1445 5.18855 5.25 5.54401C4.56641 5.62604 3.07617 5.63288 1.74316 7.02741C0.69043 8.08698 0.355469 10.5001 0.355469 10.5001C0.355469 10.5001 0 13.337 0 16.1671V18.8194C0 21.6495 0.348633 24.4864 0.348633 24.4864C0.348633 24.4864 0.69043 26.8995 1.73633 27.9591C3.06934 29.3536 4.81934 29.3057 5.59863 29.4561C8.40137 29.7227 17.5 29.8048 17.5 29.8048C17.5 29.8048 24.8555 29.7911 29.75 29.4425C30.4336 29.3604 31.9238 29.3536 33.2568 27.9591C34.3096 26.8995 34.6514 24.4864 34.6514 24.4864C34.6514 24.4864 35 21.6563 35 18.8194V16.1671C35 13.337 34.6514 10.5001 34.6514 10.5001ZM13.8838 22.0391V12.2022L23.3379 17.1378L13.8838 22.0391Z" fill="black"/>
</svg>
</div>
<h3 class="tit">유튜브</h3>
<p class="desc">요즘 어플들 중 핫한 어플들입니다. SNS로 소통 시대에 이 어플들은 필수 어플이기도 하며 소통을 하는 데 굉장히 유용합니다.</p>
<a href="#" class="more"><span>더보기</span></a>
</article>
<article class="card">
<div class="circle4 ir">어플
<svg class="kakaotalk" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="17.5" cy="17.5" r="17.5" fill="black"/>
<rect x="8.75" y="8.11447" width="18.0469" height="18.0469" fill="white"/>
<path d="M6.49323 6.03206C6.85748 6.01015 7.22273 6.01015 7.58698 6.03206H28.1987C28.3043 6.01807 28.4118 6.02797 28.5131 6.0611C28.6144 6.09423 28.7069 6.14973 28.7839 6.22346C29.0573 6.50236 28.9589 6.91801 28.9753 7.26801C28.9753 14.2826 28.9753 21.3008 28.9753 28.3227C28.9731 28.419 28.9506 28.5137 28.9092 28.6007C28.8678 28.6877 28.8085 28.765 28.7352 28.8274C28.6619 28.8899 28.5762 28.9363 28.4837 28.9633C28.3913 28.9903 28.2941 28.9975 28.1987 28.9844H6.68464C6.59646 28.9882 6.50846 28.9738 6.42614 28.9419C6.34383 28.9101 6.26899 28.8616 6.20632 28.7994C6.14366 28.7373 6.09454 28.6628 6.06203 28.5808C6.02953 28.4987 6.01435 28.4109 6.01745 28.3227V6.69923C6.00616 6.54993 6.04758 6.40137 6.13452 6.27946C6.22145 6.15756 6.34839 6.07003 6.49323 6.03206V6.03206ZM11.2018 11.7414C11.2018 15.5695 11.2018 19.3977 11.2018 23.2258H15.5112C15.5112 21.3281 15.4839 19.3976 15.5112 17.5273C15.9815 18.1836 16.4135 18.8726 16.8948 19.5234C17.6987 20.7703 18.6065 21.9461 19.3776 23.2148C20.8214 23.2531 22.2651 23.2148 23.7143 23.2148C23.7143 23.0344 23.7417 22.8539 23.7417 22.668C23.7417 19.0148 23.7417 15.3562 23.7417 11.7305C22.3089 11.7305 20.8815 11.7305 19.4542 11.7305C19.4542 13.6391 19.4542 15.5586 19.4542 17.4562C18.1253 15.5695 16.8729 13.6281 15.5112 11.7578C14.0784 11.6977 12.6237 11.7414 11.2018 11.7414V11.7414Z" fill="black"/>
<path d="M8.77542 7.10938H26.2295C26.6701 7.10938 27.0926 7.28439 27.4041 7.59591C27.7156 7.90743 27.8906 8.32994 27.8906 8.77049V26.2246C27.8906 26.4434 27.8475 26.66 27.7638 26.8621C27.6801 27.0643 27.5574 27.2479 27.4026 27.4026C27.2479 27.5574 27.0643 27.6801 26.8621 27.7638C26.66 27.8475 26.4434 27.8906 26.2246 27.8906H8.77542C8.55664 27.8906 8.33999 27.8475 8.13785 27.7638C7.93572 27.6801 7.75206 27.5574 7.59735 27.4026C7.44264 27.2479 7.31992 27.0643 7.23619 26.8621C7.15247 26.66 7.10937 26.4434 7.10938 26.2246V8.77049C7.11068 8.32948 7.28679 7.90699 7.59909 7.59561C7.91139 7.28423 8.33441 7.10937 8.77542 7.10938V7.10938Z" fill="black"/>
<path d="M17.5506 8.44601C12.106 8.44601 7.71515 11.9586 7.71515 16.223C7.71515 18.991 9.54173 21.4147 12.2816 22.7987L11.3543 26.2622C11.3368 26.3141 11.3341 26.3698 11.3465 26.4232C11.3589 26.4765 11.3859 26.5254 11.4245 26.5642C11.4808 26.6139 11.5532 26.6413 11.6282 26.6415C11.6905 26.6365 11.7495 26.6119 11.7969 26.5713L15.7872 23.8806C16.3763 23.9619 16.97 24.0041 17.5646 24.007C23.0022 24.007 27.4001 20.4944 27.4001 16.223C27.4001 11.9516 22.9882 8.44601 17.5506 8.44601Z" fill="white"/>
<path d="M11.1572 14.9935H10.0824C9.94913 14.9974 9.81756 14.9633 9.70299 14.8952C9.65213 14.8633 9.6084 14.8213 9.57455 14.7717C9.5407 14.7221 9.51746 14.6661 9.50628 14.6071C9.50287 14.5697 9.50287 14.5322 9.50628 14.4948C9.50294 14.4248 9.51652 14.355 9.54588 14.2914C9.57523 14.2278 9.61948 14.1723 9.67489 14.1294C9.79737 14.0407 9.9452 13.9939 10.0964 13.9959H13.3351C13.4694 13.9912 13.6018 14.028 13.7144 14.1013C13.7665 14.1318 13.8112 14.1735 13.8452 14.2233C13.8792 14.2731 13.9017 14.3298 13.9112 14.3894C13.9146 14.4244 13.9146 14.4597 13.9112 14.4948C13.9145 14.5657 13.9009 14.6365 13.8716 14.7012C13.8423 14.7659 13.7981 14.8227 13.7425 14.867C13.623 14.9556 13.4766 15.0003 13.328 14.9935H12.2883V18.6889C12.2925 18.7676 12.2803 18.8463 12.2525 18.9201C12.2247 18.9938 12.1819 19.0611 12.1267 19.1174C12.0738 19.1713 12.0103 19.2135 11.9401 19.2413C11.8699 19.2691 11.7947 19.282 11.7193 19.279C11.5873 19.2827 11.4582 19.2406 11.3539 19.1596C11.2547 19.0805 11.1874 18.9682 11.1643 18.8434C11.1573 18.7921 11.1573 18.7401 11.1643 18.6889L11.1572 14.9935Z" fill="black"/>
<path d="M14.2213 14.2699C14.2522 14.1543 14.3247 14.0542 14.425 13.9889C14.5318 13.9283 14.6536 13.8991 14.7763 13.9046H15.0432C15.1734 13.8999 15.3023 13.9315 15.4156 13.9959C15.5356 14.0766 15.6208 14.1995 15.6544 14.3401L17.0595 18.3095C17.0959 18.413 17.1264 18.5186 17.1508 18.6257C17.1532 18.6701 17.1532 18.7146 17.1508 18.7591C17.1532 18.8276 17.1406 18.8957 17.1139 18.9588C17.0872 19.0219 17.0471 19.0784 16.9963 19.1244C16.947 19.1749 16.888 19.2146 16.8227 19.2412C16.7574 19.2678 16.6874 19.2806 16.6169 19.279C16.5085 19.2897 16.3997 19.2637 16.3079 19.2051C16.2162 19.1465 16.1468 19.0587 16.1111 18.9558L15.816 18.0917H13.9684L13.6733 18.9558C13.6384 19.0607 13.5682 19.1502 13.4747 19.2092C13.3812 19.2681 13.2701 19.2927 13.1604 19.279C13.0416 19.2821 12.9253 19.2449 12.8302 19.1736C12.7377 19.0999 12.6752 18.995 12.6546 18.8786C12.6509 18.8388 12.6509 18.7988 12.6546 18.7591C12.6426 18.6894 12.6426 18.6181 12.6546 18.5484C12.6546 18.4711 12.7038 18.3867 12.7319 18.3095L14.2213 14.2699ZM14.9238 15.1903L14.2564 17.2979H15.5842L14.9238 15.1903Z" fill="black"/>
<path d="M17.3117 14.4949C17.3046 14.3372 17.3601 14.1831 17.4663 14.0663C17.5202 14.0119 17.585 13.9694 17.6564 13.9415C17.7278 13.9137 17.8042 13.9011 17.8808 13.9047C18.0124 13.9031 18.1408 13.9451 18.2461 14.0241C18.3436 14.1065 18.4085 14.2212 18.4287 14.3473C18.4356 14.3962 18.4356 14.4459 18.4287 14.4949V18.1902H20.3607C20.4946 18.1884 20.6262 18.2249 20.7401 18.2955C20.7912 18.327 20.8352 18.369 20.869 18.4186C20.9029 18.4683 20.926 18.5244 20.9368 18.5835C20.9368 18.5835 20.9368 18.6538 20.9368 18.6889C20.9401 18.7589 20.9265 18.8286 20.8972 18.8922C20.8678 18.9558 20.8236 19.0114 20.7682 19.0543C20.6457 19.143 20.4979 19.1897 20.3466 19.1877H17.9721C17.8209 19.1974 17.6705 19.1581 17.5435 19.0754C17.43 18.9904 17.3543 18.8643 17.3328 18.7241C17.3276 18.6469 17.3276 18.5694 17.3328 18.4922L17.3117 14.4949Z" fill="black"/>
<path d="M21.0633 14.4949C21.0591 14.3377 21.1143 14.1847 21.2179 14.0664C21.3232 13.9707 21.4583 13.9142 21.6003 13.9065C21.7424 13.8988 21.8827 13.9404 21.9977 14.0242C22.0974 14.1058 22.1647 14.2204 22.1874 14.3473C22.1909 14.3964 22.1909 14.4458 22.1874 14.4949V16.2161L23.9648 14.1646C24.0333 14.0947 24.106 14.029 24.1826 13.968C24.2547 13.925 24.3375 13.9031 24.4214 13.9047C24.5442 13.904 24.6643 13.9408 24.7657 14.0101C24.8135 14.0423 24.8542 14.0838 24.8856 14.132C24.917 14.1803 24.9383 14.2344 24.9483 14.2911C24.9512 14.305 24.9512 14.3194 24.9483 14.3333C24.9449 14.3495 24.9449 14.3662 24.9483 14.3825C24.9481 14.4564 24.9287 14.529 24.8921 14.5933C24.8549 14.6613 24.8101 14.7248 24.7587 14.7829L23.5925 16.0615L24.9975 18.2394V18.3096C25.0705 18.4103 25.1274 18.5217 25.1661 18.6398V18.6749C25.1743 18.7563 25.1625 18.8385 25.1319 18.9144C25.1013 18.9902 25.0528 19.0575 24.9905 19.1105C24.8733 19.1991 24.7299 19.2461 24.583 19.244C24.4854 19.248 24.3885 19.2262 24.302 19.1807C24.2084 19.118 24.1313 19.0337 24.0772 18.9348L22.7705 16.8273L22.1452 17.4806V18.6538C22.1495 18.811 22.0943 18.964 21.9907 19.0824C21.9352 19.1366 21.8691 19.179 21.7966 19.2068C21.7241 19.2346 21.6467 19.2473 21.5692 19.244C21.4395 19.2467 21.313 19.2045 21.2109 19.1245C21.1116 19.0454 21.0443 18.9332 21.0212 18.8084C21.0143 18.7572 21.0143 18.7051 21.0212 18.6538L21.0633 14.4949Z" fill="black"/>
</svg>
</div>
<h3 class="tit">카카오톡</h3>
<p class="desc">요즘 어플들 중 핫한 어플들입니다. SNS로 소통 시대에 이 어플들은 필수 어플이기도 하며 소통을 하는 데 굉장히 유용합니다.</p>
<a href="#" class="more"><span>더보기</span></a>
</article>
<article class="card">
<div class="circle5 ir">어플
<svg class="notion" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1870_1720)">
<g clip-path="url(#clip1_1870_1720)">
<path d="M6.50273 6.13666C7.59065 7.02041 7.99898 6.95332 10.0436 6.81624L29.3154 5.65978C29.7238 5.65978 29.384 5.25145 29.2484 5.18437L26.0459 2.86999C25.4334 2.39457 24.6152 1.84916 23.049 1.98478L4.38961 3.34686C3.71002 3.41395 3.57294 3.7552 3.84419 4.02645L6.50273 6.13666ZM7.65919 10.6283V30.905C7.65919 31.9944 8.20315 32.4027 9.42961 32.3342L30.609 31.1092C31.8354 31.0421 31.9725 30.2925 31.9725 29.4073V9.26624C31.9725 8.38249 31.6327 7.90562 30.8817 7.9727L8.74857 9.26624C7.9319 9.33478 7.65919 9.74312 7.65919 10.6269V10.6283ZM28.5673 11.7148C28.7029 12.3273 28.5673 12.9398 27.9548 13.0098L26.934 13.2139V28.1823C26.0473 28.6592 25.2306 28.9319 24.5496 28.9319C23.4588 28.9319 23.1861 28.5906 22.3694 27.5712L15.6946 17.0917V27.23L17.8063 27.7083C17.8063 27.7083 17.8063 28.9333 16.1029 28.9333L11.4042 29.2046C11.2686 28.9333 11.4042 28.2523 11.8811 28.1167L13.1061 27.7769V14.3704L11.4071 14.2333C11.27 13.6208 11.6113 12.7371 12.5636 12.6685L17.6036 12.3287L24.5511 22.944V13.5523L22.7792 13.3496C22.6436 12.6 23.1875 12.056 23.8686 11.9889L28.5673 11.7148ZM2.82336 1.50936L22.2338 0.0801976C24.6167 -0.123969 25.2306 0.0116559 26.7284 1.10103L32.9248 5.45562C33.9456 6.20374 34.2869 6.40791 34.2869 7.22457V31.1092C34.2869 32.6054 33.7429 33.4921 31.8369 33.6262L9.29398 34.9883C7.86482 35.0569 7.18232 34.8527 6.43273 33.899L1.86961 27.9781C1.05294 26.8887 0.71315 26.0735 0.71315 25.1198V3.88936C0.71315 2.66582 1.25857 1.64353 2.82336 1.50936Z" fill="black"/>
</g>
</g>
<defs>
<clipPath id="clip0_1870_1720">
<rect width="35" height="35" fill="white"/>
</clipPath>
<clipPath id="clip1_1870_1720">
<rect width="35" height="35" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<h3 class="tit">노션</h3>
<p class="desc">요즘 어플들 중 핫한 어플들입니다. SNS로 소통 시대에 이 어플들은 필수 어플이기도 하며 소통을 하는 데 굉장히 유용합니다.</p>
<a href="#" class="more"><span>더보기</span></a>
</article>
<article class="card">
<div class="circle6 ir">어플
<svg class="pinterest" width="35" height="35" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1870_1734)">
<path d="M17.5 0C7.83398 0 0 7.83398 0 17.5C0 24.917 4.61426 31.2471 11.1221 33.7969C10.9717 32.4092 10.8281 30.29 11.1836 28.7793C11.5049 27.4121 13.2344 20.084 13.2344 20.084C13.2344 20.084 12.708 19.0381 12.708 17.4863C12.708 15.0527 14.1162 13.2344 15.873 13.2344C17.3633 13.2344 18.0879 14.3555 18.0879 15.7021C18.0879 17.2061 17.1309 19.4482 16.6387 21.5264C16.2285 23.2695 17.5137 24.6914 19.2295 24.6914C22.3398 24.6914 24.7324 21.4102 24.7324 16.6797C24.7324 12.4893 21.7246 9.55664 17.4248 9.55664C12.4482 9.55664 9.52246 13.2891 9.52246 17.1514C9.52246 18.6553 10.1035 20.2686 10.8281 21.1436C10.9717 21.3145 10.9922 21.4717 10.9512 21.6426C10.8213 22.1963 10.5205 23.3857 10.4658 23.625C10.3906 23.9463 10.2129 24.0146 9.87793 23.8574C7.69043 22.8389 6.32324 19.6465 6.32324 17.0762C6.32324 11.5527 10.3359 6.48731 17.8828 6.48731C23.9531 6.48731 28.6699 10.8145 28.6699 16.5977C28.6699 22.627 24.8691 27.4805 19.5918 27.4805C17.8213 27.4805 16.1533 26.5576 15.5791 25.4707C15.5791 25.4707 14.7041 28.8135 14.4922 29.6338C14.0957 31.1514 13.0293 33.0586 12.3184 34.2207C13.959 34.7266 15.6953 35 17.5 35C27.166 35 35 27.166 35 17.5C35 7.83398 27.166 0 17.5 0Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_1870_1734">
<rect width="35" height="35" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
<h3 class="tit">핀터레스트</h3>
<p class="desc">요즘 어플들 중 핫한 어플들입니다. SNS로 소통 시대에 이 어플들은 필수 어플이기도 하며 소통을 하는 데 굉장히 유용합니다.</p>
<a href="#" class="more"><span>더보기</span></a>
</article>
</div>
</section>
3. vscode를 통해 코딩해주기! : CSS편
style을 통해 CSS를 설정해줍니다.
피그마로 만들어 놓은 레이아웃을 보며 HTML로 구역을 정해준 후 CSS로 하나하나 디자인해 나가는 것이 중요합니다!
코드 보기
/* fonts */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
.nexon {
font-family: "NexonLv1Gothic";
font-weight: 400;
}
/* reset */
* {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
a {
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
/* common */
.container {
width: 1160px;
padding: 0 20px;
margin: 0 auto;
}
.section {
padding: 120px 0;
}
.section > h2 { /* +는 형제 바로 밑에 있는 자식은 > */
font-size: 50px;
line-height: 1;
text-align: center;
margin-bottom: 70px;
}
.section > p {
font-size: 16px;
font-weight: 300;
color: #666;
text-align: center;
margin-bottom: 10px;
}
.gray {
background-color: #f5f5f5;
}
/* ir 효과 (이미지 대체 효과 == art) */
.ir {
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
text-indent: -9999px;
}
/* textType */
.card__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.card {
width: 32%;
height: 260px;
box-sizing: border-box;
/* background-color: #ccc; */
margin-bottom: 20px;
padding: 20px;
}
.card .tit{
margin: 10px 0;
font-size: 24px;
}
.card .desc{
font-size: 18px;
font-weight: 300;
margin-bottom: 20px;
line-height: 1.4;
font-weight: 300;
}
.card .more {
font-weight: 300;
text-decoration: underline;
}
.card a:hover {
cursor: pointer;
}
.circle1 {
width: 60px;
height: 60px;
border-radius: 50%;
background: #6388BF;
position: relative;
}
.facebook {
position: absolute;
top: 22%;
left: 22%;
}
.circle2 {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #F6B4E0;
position: relative;
}
.insta {
position: absolute;
top: 22%;
left: 22%;
}
.circle3 {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #DB2424;
position: relative;
}
.youtube {
position: absolute;
top: 22%;
left: 22%;
}
.circle4 {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #BC6EB9;
position: relative;
}
.kakaotalk {
position: absolute;
top: 22%;
left: 22%;
}
.circle5 {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #C6C8C8;
position: relative;
}
.notion {
position: absolute;
top: 22%;
left: 22%;
}
.circle6 {
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #B96666;
position: relative;
}
.pinterest{
position: absolute;
top: 22%;
left: 22%;
}
▶완성본
'사이트 제작하기 > Text Type 텍스트 유형' 카테고리의 다른 글
| [사이트 제작] 세번째 : 텍스트 유형 TYPE.03 (7) | 2022.09.01 |
|---|---|
| [사이트 제작] 두번째 : 텍스트 유형 TYPE.02 (10) | 2022.09.01 |
댓글