HTML 게시판 CSS 작성

<div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/lZ4B1X6f8Jc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/lZ4B1X6f8Jc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>HTML 게시판 CSS  작성IKNDEX_CSS tag<!DOCTYPE html><html lang="KO_Yoon"><head><neta charset="UTF-8"><title>craetive sarch</title><link rel="'stylesheet: href="style.css">*,::before,::after{         margin: 0;         display: 100vh;         align-tiems: center;         justify-content: content;        overfllow: hidden;        font: 600 62.5%;        font-family: asns-serif;        background-color: #17141d;}a{       text-decoration: none;       white-space: nowrap;       font-size: lrem;       color: #alalaf;           22}a.tag{      display: block;      padding: 0.3em 0.85em;      margin: 0.5em;      text-trannsform: capitalize;      border: 3px solid #2a242f;      border-radius: 2em;      transition: transform 0.25;      transition-tiiming-function: cubiic-bezicr(0.45, -0.85, -0.45)}}a.tag:hover{     transform: scale(1.2);    background: linear-gradient(to right, #ff8a00, #da1b60);    background-clip: text}.centainer{      margin: 2em 6em;      padding-left: 1em;      display: flex;      width: 100%;      justify-content: apace-between;      align-items: center;    52     font-size: 1rem;     color:#a1a1af;     border: 1px sold #28242f;     border-radius: 0.35em;     box-shadow: 0 10px 60px #070509;'   57}.contaiiner .tage{       marbn: 0;                            63      display: flex;      lustify-conntent: center;      align-ites: center;}.container .tags span{        margin-right: lem;       padding: 1em;       text-trasform: uppercase;       transform: rotate(180deg);       writing-mode: vertical-rl;       border-left: 3px solid #28242f;       background: linear-ggradiient9to riht, $ff8a00, #a1b60{);       -webbkit-ackground-clip:text;     -webkit-text-fill-color:transparent;         81}.container  .tage a:last-chid{       margin-left: 0.5em;}.container ,tage  a:last-child: hover{       color: white;}.container label{       position: relative;       white-space: nowrap;       display: flex;       width: 48px;       height: 48px;       align-items:  center;       justify-content: flex-end;       border: 3px solid  transparent;       border-radius: 2em;       background-color: #17141d;           background-iimage: radial-gradient(circle at 50%, #ff8a00, #a160);      trannsiition: all 250ms ease-in-out;      106}.centaineer lael::before{       position abbsolute;       right: 0;       botton: -20px;       z-index: 0;       transform: retate(-35deg);        width: 4px;       heigght: 25px;       content: "";       border-radius: 2px;        background-iage: linear-gradient(to top, #ff8a00, #balb60);   120       transition: all 250ems ease-in-out;}.container label  .tag-search{        posiition: relative;        z-iindex: 1;        display: ock;        padding-left: 1.75em;        width: 42px;        height: 42px;        font-size: 1rem;        border: 0;        background-color: #17141d;        color: white;        transition: wldth 250ms ease-iin-out;}.container label  .tag-seraach:focus{   143        outline: none;}.container label:hover{        width 20%;}.container label:hover::before{    152             height: 30px;         transform: trotate(-90deg) transatte(28px, 15px);   }.container label:hover  .tag-search{    159        width 100;        paddng-right: 1em;        padding-left 1em;}</head><body><div class="continer">          Menu       <a href="#" class="tag">Home</a>      <a href="#" class="tag">Gallery</a>      <a href="#" class="tag active">Contact</a>       <a href="#" class="About"></a>      <a href="#" class="tag">Testimonial</a>      <a href="#" class="tag">Locations</a>        <label>        <input type="searrch" class="tag-search" placeholder="Search now">    </label></div></bosy></html> 개설일자 : 2022. 11. 03. 목 21:08分<a href="https://cafe.daum.net/zhelsdmlekfdls" target="_blank" class="ke-link"> https://cafe.daum.net/zhelsdmlekfdls</a> <h2>Search Button</h2> Full width: <form class="example" action="/action_page.php">   <input type="text" placeholder="Search.." name="search">   <button type="submit"><i class="fa fa-search"></button> </form><div class="table-wrap"><table data-ke-type="table" data-ke-align="alignLeft" style="width: 100%;" border="1"><tbody><tr><td><style type="text/css"></td></tr><tr><td></td><td>@font-face {</td></tr><tr><td></td><td>font-family: 'Udemy Sans';</td></tr><tr><td></td><td>font-style: normal;</td></tr><tr><td></td><td>font-weight: 400; /* To match token @font-weight-normal */</td></tr><tr><td></td><td>font-display: fallback;</td></tr><tr><td></td><td>src: local('Udemy Sans Regular'),</td></tr><tr><td></td><td>local('UdemySans-Regular'),</td></tr><tr><td></td><td>url('/staticx/udemy/fonts/Udemy-Sans-Regular-v1.woff2') format('woff2');</td></tr><tr><td></td><td>}</td></tr><tr><td></td><td></td></tr><tr><td></td><td>@font-face {</td></tr><tr><td></td><td>font-family: 'Udemy Sans';</td></tr><tr><td></td><td>font-style: normal;</td></tr><tr><td></td><td>font-weight: 700; /* To match token @font-weight-bold */</td></tr><tr><td></td><td>font-display: fallback;</td></tr><tr><td></td><td>src: local('Udemy Sans Bold'),</td></tr><tr><td></td><td>local('UdemySans-Bold'),</td></tr><tr><td></td><td>url('/staticx/udemy/fonts/Udemy-Sans-Bold-v1.woff2') format('woff2');</td></tr><tr><td></td><td>}</td></tr><tr><td></td><td></td></tr><tr><td></td><td>@font-face {</td></tr><tr><td></td><td>font-family: SuisseWorks;</td></tr><tr><td></td><td>font-style: normal;</td></tr><tr><td></td><td>font-weight: 700; /* To match token @font-weight-bold */</td></tr><tr><td></td><td>font-display: fallback;</td></tr><tr><td></td><td>src: local('SuisseWorks Bold'),</td></tr><tr><td></td><td>local('SuisseWorks-Bold'),</td></tr><tr><td></td><td>url('/staticx/udemy/fonts/SuisseWorks-Bold-v1.woff2') format('woff2');</td></tr><tr><td></td><td>}</td></tr><tr><td></td><td></style></td></tr></tbody></table></div> <a href="https://www.udemy.com/course/wing-chun-chum-kiu-module-1-know-yourself/" target="_blank" class="ke-link">https://www.udemy.com/course/wing-chun-chum-kiu-module-1-know-yourself/</a>https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_search_buttonHTML 게시판 CSS  작성

카페정보

행복의 영상세상

브론즈 (공개)
카페지기 부재중
회원수 2
방문수0
카페앱수0

카페 전체 메뉴

▲

카페 게시글

목록 이전글

◈─---… Navbar영상방 HTML 게시판 CSS 작성

gyun님 추천 0 조회 7 22.11.03 12:51 댓글 3

게시글 본문내용

다음검색

저작자 표시 컨텐츠변경 비영리

gyun님
작성자 22.11.03 13:31

첫댓글 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_search_button
gyun님
작성자 22.11.03 21:12

https://cafe.daum.net/zhelsdmlekfdls
gyun님
작성자 22.11.03 21:29

https://cafe.daum.net/dnflqosemtkfkdgkqtle

검색 옵션 선택상자

댓글내용선택됨 옵션 더 보기

댓글내용

댓글 작성자

연관검색어

환율

환자

환기

최신목록

행복의 영상세상

https://cafe.daum.net/GODQHRGKSDUDTKD

카페 전체 메뉴