사이트 만들기15 사이트 만들기 01 사이트 만들기 01 원본 소스 보기 원본 사이트 보기 script 코드 html 코드 보기 슬라이드 영역 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 DEVELOPER NEW PROJECT 너무 무리하지 말아요! 이미 당신은 잘하고 있고! 앞으로도 잘 할 수 있어요! 자세히 보기 사이트 보기 play stop 이미지 유형01 레서판다 레서판다의 귀여움을 알아보자. 레서판다가 줄 타는 모습 레서판다가 줄타는 모습을 보십시오. 너무 귀엽지 않나요.. 귀여워서 깨물고 싶어.. 2022. 9. 14. 슬라이드 유형 01 슬라이드 유형 html ir 효과를 써서 화면에는 보이지 않도록 숨김 처리 했습니다. 코드 보기 <section id="sliderType" class="slder__wrap"> <h2>슬라이드 영역</h2> <div class="slider__inner"> <div class="slider"> <div class="silder__img"> <div class="desc"> <span>DEVELOPER</span> <h3>NEW PROJECT</h3> <p>너무 무리하지 말아요! 이미 당신은 잘하고 있고!<br> 앞으로도 잘 할 수 있어요! </p> <div class="btn"> <a href.. 2022. 9. 5. 배너 유형 01 배너 유형 html 코드 보기 <section id="bannerType" class="banner__wrap"> <h2 class="blind">배너 영역</h2> <div class="banner__inner"> <h3 class="title">유튜버 웹보이</h3> <p class="desc"> 더 다양한 강의는 유튜브를 통해 제공하고 있습니다. <a href="#" title="유튜브 페이지로 이동"></a> </p> <span class="small">배너 유형01</span> </div> </section> <!--bannerType--> <section id="imgTextType".. 2022. 9. 5. 푸터 유형 01 푸터 유형 html 코드 보기 <footer id="footerType" class="footer__wrap nexon section gray"> <h2 class="blind">푸터 영역</h2> <div class="footer__inner container"> <div class="footer__menu"> <div> <h3>사이트</h3> <ul> <li><a href="#">웹 표준 사이트</a></li> <li><a href="#">웹 표준 사이트</a></li> <li><a href="#">웹 표준 사이트</a></li> <li><a.. 2022. 9. 5. 헤더 유형 헤더 유형 <header> 태그는 문서나 특정 섹션의 헤더를 정의할때 사용합니다. 원본 소스 보기 원본 사이트 보기 HTML 코드 보기 <header id="headerType" class="header__wrap score"> <div class="header__inner"> <div class="header__logo"> <a href="#">webem <em>site</em></a> </div> <div class="header__menu"> <ul> <li><a href="#">헤더 영역</a></li> <li><a href="#">슬라이드 영역</a></li> &l.. 2022. 9. 1. 이미지 텍스트 유형 이미지 텍스트 유형 원본 소스 보기 원본 사이트 보기 HTML 코드 보기 <section id="imgTextType" class="imgText__wrap section NexonLv1Gothic gray"> <h2 class="blind">유용한 사이트 살펴보기</h2> <div class="imgText__inner container"> <div class="imgText__txt"> <span>이미지 텍스트 유형 01</span> <h3>유용한 사이트 살펴보기</h3> <p>웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다.</p> <ul> <li><a href="/">튜토리얼.. 2022. 9. 1. 텍스트 유형 03 텍스트 유형 03 원본 소스 보기 원본 사이트 보기 html 코드 보기 <section id="textType03" class="text__wrap NexonLv2Gothic section"> <h2>애견카페 후기</h2> <p>애견카페에 있는 멤버를 소개합니다.</p> <div class="text__inner container"> <article class="text"> <div class="text__header"> <p class="desc">애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶다.애견카페 가고 싶.. 2022. 9. 1. 텍스트 유형 02 텍스트 유형 02 원본 소스 보기 원본 사이트 보기 html 코드 보기 <section id="textType02" class="text__wrap section gmarket"> <div class="text1"> <p class="icon1">FRONTEND</p> <h2>강아지에 <br>대하여...</h2> <p>시대가 지나도 늘 함께 하는 반려동물!<br> 반려동물에 대하여 알아보자! 여러분도 함께! </p> </div> <div class="text__inner"> <article class="text__box"> <p class="icon2"></p> <h3 class="tit">.. 2022. 9. 1. 텍스트 유형 01 텍스트 유형 01 원본 소스 보기 원본 사이트 보기 html 코드 보기 <section id="textType01" class="text__wrap NexonLv1GothicLow section"> <p>텍스트 유형01</p> <h2>귀여운 우리집 강아지</h2> <div class="text__inner container"> <article class="text"> <div class="icon"></div> <h3 class="tit">귀여운 강아지</h3> <p class="desc">강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워, 강아지 귀여워 &l.. 2022. 8. 31. 이미지 유형 03 이미지 유형 03 이번 이미지는 큰 사진을 메인?으로 잡고 작은 이미지 4개의 구조가 있는 유형입니다. 이미지 유형 2번과 마찬가지로 사진에 마우스를 가져가 대면 제목과 설명 박스가 나옵니다. 이미지 유형 3번에는 sns 아이콘을 추가 했습니다. HTML <div class="image__inner container-fluid"> <article class="image"> <div class="image__desc"> <h3>팬케이크</h3> <p>팬케이크에대해 알아보자.</p> </div> <div class="image__sns"> <a href="#" class="link"><span class="ir">페이스북</span></a> <a href=".. 2022. 8. 20. 이미지 유형 02 이미지 유형 02 1번과 마찬가지로 이미지 않에 글자가 있으며, background biur 효과를 주었다. 마우스를 갖다대면 블라인더 효과가 올라온다. HTML <section id="imageType02" class="image__wrap section gmarket "> <h2>북극 동물들 <p>북극동물들 의 귀여움을 알아보자. <div class="image__inner container"> <article class="image img1"> <figure class="image__box"> <img src="img/imgType02_1.jpg" alt="/"> </figure> <div class="imge__desc"> <h3>북극동물 <a href="/.. 2022. 8. 17. 이미지 유형 01 이미지 유형 01 이미지안에 글자가 있는 구조이다 사진은 2개이며, 자세히 보기 박스 색깔이 다르다. HTML <section id="imageType01" class="image__wrap section NexonLv1Gothic"> <h2>레서판다 <p>레서판다의 귀여움을 알아보자. <div class="image__inner container"> <article class="image img1"> <h3 class="image__tit">레서판다가 줄 타는 모습 <p class="image__desc">레서판다가 줄타는 모습을 보십시오. 너무 귀엽지 않나요.. 귀여워서 깨물고 싶어요...너구리랑 햇갈리지 맙시다. <a class="image__btn" href="/" t.. 2022. 8. 17. 카드 유형 03 사이트 만들기 : 카드 유형03 이번 카드 유형은 큰 이미지가 3개이다. 먼저 생각해야할건 상자?를 3개로 잡아야한다. 전체 배경이 들어갔다. HTML 유형 <section id="cardType03" class="card__wrap score section"> <h2 class="blind">주황색 과일</h2> <div class="card__inner container"> <article class="card"> <figure class="card__header"> <img src="img/card_bg03_1.jpg" alt="Architects"> <figcaption>orange</figcaption> </figure> <div class="card__c.. 2022. 8. 10. 카드유형 02 사이트 만들기 : 카드 유형02 HTML 유형 <body> <section id="cardType" class="card__wrap nexon section"> <h2>육식동물 구경하기 <p> 동물을 다 좋아하지만 개인적으로 더 좋아하는 동물은 육식동물! 육식동물의 귀여움을 알아보자. </p> <div class="card__inner container"> <article class="card"> <figure class="card__header"> <img src="img/Rectangle 1.jpg" alt="웹표준 사이트 만들기"> </figure> </div class="card__body"> </h3 class="tit">사자 </a class="b.. 2022. 8. 9. 카드 유형 01 사이트 만들기 : 카드 유형01 HTML 유형 <body> <section id="cardType" class="card__wrap nexon section"> <h2>말티즈 강의 <p>우리집 말티즈의 귀여움을 알아보자. <div class="card__inner container"> <article class="card"> <figure class="card__header"> <img src="img/card_bg01.jpg" alt="웹표준 사이트 만들기"> </figure> <div class="card__body"> <h3 class="tit">말티즈가 한심하게 처다볼때 <p class="decs">말티즈는 가끔 아니 자주 주인을 한심하게 처다볼때가 많습.. 2022. 8. 8. 이전 1 다음
