Study/HTML5 & CSS3
HTML5 & CSS3 : input 태그 속성 응용
posey
2022. 10. 27. 09:24
2022.10.27.
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 30
Review
그동안 코드를 올릴 때마다 매번 캡처해서 올렸는데, 디자인이 맘에 들지 않아 끙끙대고
있던 차에 '사과개발자' 님 블로그를 보고 드디어 코드블럭 디자인을 변경했다 !!!!!
너무 감사합니다 흐엉 ㅠ_ㅠ
혹시나 나처럼 코린이라 헤매는 분들을 위해 사과개발자님 블로그를 공유하려고 한다.
[티스토리] 코드블록 스타일 / 폰트 변경하기 (tistory.com)
[티스토리] 코드블록 스타일 / 폰트 변경하기
안녕하세요! daily_D 입니다! 👩🏻💻 오늘은 티스토리 코드블록 커스텀하는 방법에 대해 공유해드리려합니다! 블로그에 정리하는데 이왕이면 이쁜 코드블록으로 보면 기부니가 좋자나요~~
dailylifeofdeveloper.tistory.com
엄청 상세하게 잘 나와있으니 참고하길 바란다.
그동안 여러 블로그를 봐도 헤롱헤롱이라 포기하고 있었는데 너무 자세히 알려주셔서
드이어 성공 - ! 묵은 때가 싹 씻긴 기분이다.
맘에 들어서 기분이 날아갈 것 같다.
그런데 크기에 따라 자동으로 줄바꿈을 시키는 건 어떻게 하는 걸까요? 하핫
VSCode에서는 설정했는데 블로그에서는 어떻게 하는 건지 잘 모르겠다.
저 가로 스크롤 너무 마음에 안들어서 또 찝찝하다.
또 찾아봐야겠다 - 룰루랄라
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 30
어제 실행한 예제를 오늘 선생님 정답으로 다시 만들었다.
- HTML
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="../1027/style.css">
<title>INPUT</title>
</head>
<body>
<div id="wrapper">
<header>
<div class="top">
<img src="../../images/colorbag/images/color_toplogo.jpg" alt="logo">
<div class="top_mini">
<ul>
<li><a href="#"><img src="../../images/colorbag/images/color_topmini1.jpg" alt="favorite"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmini2.jpg" alt="login"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmini3.jpg" alt="joinus"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmini4.jpg" alt="cart"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmini5.jpg" alt="order"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmini6.jpg" alt="mypage"></a></li>
</ul>
</div>
</div>
<div class="gnb">
<ul>
<li><a href="#"><img src="../../images/colorbag/images/color_topmenu1.jpg" alt="DOWHIDE"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmenu2.jpg" alt="LEATHER"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmenu3.jpg" alt="SHOULDER"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmenu4.jpg" alt="DOTE"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmenu5.jpg" alt="CROSS"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmenu6.jpg" alt="POUCH"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmenu7.jpg" alt="BACKPACK"></a></li>
<li><a href="#"><img src="../../images/colorbag/images/color_topmenu8.jpg" alt="CARRIER"></a></li>
</ul>
</div>
</header>
<section id="visual">
<input type="radio" name="bag" id="bag1" checked>
<input type="radio" name="bag" id="bag2">
<input type="radio" name="bag" id="bag3">
<ul class="bag">
<li><img src="../../images/colorbag/images/color_main1.jpg" alt="color_main1"></li>
<li><img src="../../images/colorbag/images/color_main2.jpg" alt="color_main2"></li>
<li><img src="../../images/colorbag/images/color_main3.jpg" alt="color_main3"></li>
</ul>
<ul class="bag_txt">
<li><label for="bag1">스퀘어 토드 숄더백(합성피혁)</label></li>
<li><label for="bag2">사각 누빔 체인백(합성피혁)</label></li>
<li><label for="bag3">사각 퀄딩 백(합성피혁)</label></li>
</ul>
</section>
<section id="item">
<ul>
<li>
<img src="../../images/colorbag/images/pro1.jpg" alt="pro1">
<p><a href="#">사각 누빔 체인백<br>인디핑크/아이보리/에나멜 블랙
</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro2.jpg" alt="pro2">
<p><a href="#">뱀피 라인 체인백<br>아이보리/블랙/브라운
</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro3.jpg" alt="pro3">
<p><a href="#">골드 체인라인 백<br>합성피혁/블랙
</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro4.jpg" alt="pro4">
<p><a href="#">밍크백<br>블랙/Free
</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro5.jpg" alt="pro5">
<p><a href="#">스퀘어 토드 숄더백<br>핑크/레드/블랙/소라
</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro6.jpg" alt="pro6">
<p><a href="#">레오파드 비비드 백<br>그레이/민트/핫핑크
</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro7.jpg" alt="pro7">
<p><a href="#">마르젤라 클러치 백<br>블랙/아이보리/핑크/핫핑크
</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro8.jpg" alt="pro8">
<p><a href="#">엠보싱클러치 백<br>골드/실버/블랙</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro9.jpg" alt="pro9">
<p><a href="#">Free 숄더백<br>블랙/브라운</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro10.jpg" alt="pro10">
<p><a href="#">은징 장식 클러치백<br>블랙/아이보리/핑크/핫핑크
</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro11.jpg" alt="pro11">
<p><a href="#">구슬 백팩<br>블랙/아이보리/핑크/핫핑크</a></p>
</li>
<li>
<img src="../../images/colorbag/images/pro12.jpg" alt="pro12">
<p><a href="#">숄더백<br>브라운/블랙/아이보리/핑크/핫핑크</a></p>
</li>
</ul>
</section>
<section id="notice">
<ul>
<li>
<ul>
<li><img src="../../images/colorbag/images/title_notice.jpg" alt=""></li>
<li>[2012-12-25] 사랑해요 고객님 이벤트에...</li>
<li>[2012-12-25] 신규회원 가입고객 이벤트 응모...</li>
<li>[2012-12-25] 후기를 남겨주시면 할인쿠폰...</li>
</ul>
</li>
<li>
<ul>
<li><img src="../../images/colorbag/images/csbanner.jpg" alt=""></li>
<li><img src="../../images/colorbag/images/csbanner-02.jpg" alt=""></li>
<li><img src="../../images/colorbag/images/csbanner-03.jpg" alt=""></li>
</ul>
</li>
<li>
<img src="../../images/colorbag/images/cscenter.jpg" alt="">
</li>
</ul>
</section>
<footer>
<div class="foot_top">
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">서비스이용약관</a></li>
<li><a href="#">이메일문의</a></li>
</ul>
</div>
<div class="foot_bottom">
<p>상호 : (주)디자인아트 플러스 | 대표:임화연 | 주소:서울구로구 구로동 에이스 하이앤드타워2차<br>
copyrights ⓒ 2000 designartplus allrights reserved.</p>
</div>
</footer>
</div>
</body>
</html>
- CSS
@charset "UTF-8";
@font-face {
font-family: notosans;
src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff);
}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: rgb(86, 86, 86)
}
body {
font-family: notosans;
color: rgb(86, 86, 86);
}
input[type=radio] {
display: none;
}
header {
width: 100%;
height: 130px;
background: url(../../images/colorbag/images/color_topbg.jpg);
}
.top {
width: 1000px;
margin: 0 auto;
text-align: center;
height: 65px;
padding-top: 10px;
box-sizing: border-box;
}
.top_mini {
display: flex;
justify-content: center;
}
.top_mini ul {
display: flex;
}
.gnb {
width: 1000px;
height: calc(100% - 65px);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: end;
}
.gnb ul {
display: flex;
}
.gnb ul li a::after {
content: url(../../images/colorbag/images/color_topmenuline.jpg);
}
.gnb ul li:last-child a::after {
content: "";
}
/* header 끝 */
#visual {
width: 1000px;
margin: 20px auto;
}
#visual .bag img {
display: none;
}
#bag1:checked ~ ul.bag li:first-child img {
display: block;
}
#bag2:checked ~ ul.bag li:nth-child(2) img{
display: block;
}
#bag3:checked ~ ul.bag li:last-child img {
display: block;
}
label:hover {
display: block;
cursor: pointer;
background: #699;
height: 100%;
}
.bag_txt {
display: flex;
justify-content: space-evenly;
}
.bag_txt li {
width: 33.333%;
height: 40px;
line-height: 40px;
text-align: center;
background: #9cc;
}
/* visual 끝 */
#item {
width: 1000px;
margin: 0 auto;
}
#item ul {
display: flex;
flex-wrap: wrap;
}
#item ul li {
flex: 1 1 25%;
text-align: center;
}
#item ul li img {
width: 100%;
}
#item ul li a {
color: #333;
font-size: 14px;
}
#item ul li a:hover {
color:#699
}
/* item 끝 */
#notice {
width: 1000px;
margin: 0 auto;
padding: 50px 0;
}
#notice > ul {
display: flex;
justify-content: space-between;
font-size: 12px;
}
#notice > ul > li:first-child ul li:first-child {
margin-bottom: 10px;
}
#notice > ul > li:nth-child(2) ul {
display: flex;
margin-left: 70px;
height: 91px;
}
#notice > ul > li:nth-child(2) ul li:hover {
cursor: pointer;
}
#notice > ul > li:nth-child(2) ul li:first-child:hover {
content: url(../../images/colorbag/images/csbanner_over.jpg);
}
#notice > ul > li:nth-child(2) ul li:nth-child(2):hover {
content: url(../../images/colorbag/images/csbanner_over-02.jpg);
}
#notice > ul > li:nth-child(2) ul li:last-child:hover {
content: url(../../images/colorbag/images/csbanner_over-03.jpg);
}
/* notice 끝 */
.foot_top ul {
width: 1000px;
margin: 0 auto;
padding: 5px 0;
display: flex;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.foot_top ul li a {
font-size: 12px;
margin-right: 10px;
}
.foot_bottom {
width: 1000px;
margin: 10px auto;
font-size: 12px;
}
선생님 정답은 역시나 어려웠다...
나와 만드는 방식이 많이 다른 느낌이다. 주석을 달아 보는 사람이 편하게 하는 습관을
들이는 것도 좋을 것 같다.
<input 태그 응용 예제>
- HTML
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="../1027/02style.css">
<title>INPUT</title>
</head>
<body>
<div id="wrapper">
<div id="top">
<div class="top_wrap">
<ul>
<li><a href="#">LOGIN</a></li>
<li><a href="#">JOIN</a></li>
<li><a href="#">CUST</a></li>
<li>
<form action="">
<input type="text" id="search" name="search"
size="20" placeholder="검색어를 입력해주세요" autofocus><br>
</form>
</li>
<li><img src="../../images/madforgarlic/images/zoom.png" alt=""></li>
</ul>
</div>
</div>
<div id="gnb">
<div class="gnb_wrap">
<img src="../../images/madforgarlic/images/mad_12.gif" alt="logo">
<ul>
<li><a href="#">BRAND</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">STORE</a></li>
<li><a href="#">MEMBERSHIP</a></li>
<li><a href="#">EVENT</a></li>
</ul>
</div>
</div>
<div id="visual">
<div class="visual_wrap">
<img src="../../images/madforgarlic/images/mad_17.jpg" alt="">
</div>
</div>
<div id="items">
<div class="items_wrap">
<ul>
<li><a href="#"><img src="../../images/madforgarlic/images/mad_25.jpg" alt="mad_25"></a></li>
<li><a href="#"><img src="../../images/madforgarlic/images/mad_27.jpg" alt="mad_27"></a></li>
<li><a href="#"><img src="../../images/madforgarlic/images/mad_29.jpg" alt="mad_29"></a></li>
<li><a href="#"><img src="../../images/madforgarlic/images/mad_31.jpg" alt="mad_31"></a></li>
<li><a href="#"><img src="../../images/madforgarlic/images/mad_39.jpg" alt="mad_39"></a></li>
<li><a href="#"><img src="../../images/madforgarlic/images/mad_41.gif" alt="mad_41"></a></li>
</ul>
</div>
</div>
<div id="foot">
<div class="foot_top">
<ul>
<li>서비스이용약관</li>
<li>개인정보처리방침</li>
<li>기기운영관리방침</li>
<li>고객서비스센터</li>
<li>관리자문의</li>
</ul>
</div>
<div class="foot_bottom">
<p>서울특별시 강남구 압구정로 222(신사동) ㈜엠에프지코리아
<br>
COPYRIGHT ⓒ MFGKOREA ALL RIGHTS RESERVED.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
- CSS
@charset "UTF-8";
@font-face {
font-family: notosans;
src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff);
}
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: rgb(249, 249, 249);
}
body {
font-family: notosans;
color: rgb(249, 249, 249);
}
#logo {
width: 1000px;
margin: 0 auto;
}
#top {
height: 35px;
line-height: 35px;
background: rgb(86, 86, 86);
}
.top_wrap {
display: flex;
justify-content: end;
background: rgb(86, 86, 86);
width: 1000px;
margin: 0 auto;
}
.top_wrap ul {
display: flex;
font-size: 13px;
}
.top_wrap ul li {
padding-left: 20px;
}
.top_wrap ul li:last-child {
padding: 10px;
}
.top_wrap ul li a {
color: #ccc;
}
.top_wrap input {
font-size: 12px;
height: 20px;
}
.top_wrap ul li:last-child {
padding-top: 5px;
}
.top_wrap ul li a:hover {
text-decoration: underline;
}
.top_wrap ul li img:hover {
cursor: pointer;
}
#gnb {
width: 100%;
background: rgb(20, 20, 20);
}
.gnb_wrap {
display: flex;
width: 1000px;
margin: 0 auto;
}
.gnb_wrap img {
margin: 0 auto;
}
.gnb_wrap ul {
display: flex;
justify-content: end;
width: 1000px;
height: 75px;
line-height: 75px;
}
.gnb_wrap ul li a {
font-size: 16px;
letter-spacing: 3px;
padding-left: 20px;
}
#visual {
width: 100%;
height: 400px;
background: #ccc;
}
.visual_wrap {
width: 1000px;
margin: 0 auto;
}
#items {
width: 100%;
background: rgb(20, 20, 20);
}
.items_wrap {
display: flex;
width: 1000px;
margin: 0 auto;
padding: 30px 0;
}
.items_wrap ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.items_wrap ul li:nth-child(5) {
padding-top: 30px;
}
#foot {
width: 100%;
background: rgb(20, 20, 20);
border-top: 1px solid rgb(146, 146, 146);
font-size: 12px;
color:rgb(146, 146, 146);
}
.foot_top {
display: flex;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.foot_top ul {
display: flex;
padding: 10px 0;
}
.foot_top ul li {
padding-left: 20px;
}
.foot_bottom {
display: flex;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
이건 엄청 쉬운 예제였다.
이미지가 미리 다 만들어져 있어서 그냥 배열만 하면 되는 거저먹기 예제....>_<
이때까지와 달랐던 것은 맨 위에 검색창을 만드는 것이었는데, 이제껏 배운 input 태그 이용해
만들면 되는 것이라서 그리 어렵지 않았다.
<input 태그 알아보기>
- HTML
<form action="">
수량 : <input type="number" min="1" max="50" value="1" step="5"><br>
단계(5단계) : 순한맛 <input type="range" min="1" max="5"> 매운맛
<select name="city" id="city">
<option value="서울">서울</option>
<option value="대전">대전</option>
<option value="대구">대구</option>
<option value="부산">부산</option>
</select><br><br>
남기고 싶은 말<br>
<textarea name="tell" id="tell" cols="20" rows="7"></textarea><br>
<input list="city1" name="city1">
<datalist id="city1">
<option value="서울">서울</option>
<option value="대전">대전</option>
<option value="대구">대구</option>
<option value="부산">부산</option>
</datalist><br>
<input type="tel"><br>
<input type="time"><br>
<input type="week"><br>
<input type="email" value="email" required><br>
<input type="submit" value="제출"><br>
<input type="image" src="../../images/iphone.png" alt="iphone" width="80"><br>
<input type="file"><br>
</form>
- CSS
@charset "UTF-8";
@font-face {
font-family: notosans;
src: url(../fontawesome-free-6.2.0-web/webfonts/NotoSansKR-Regular.woff);
}
body {
font-family: notosans;
color: rgb(86, 86, 86);
}
* {
padding: 5px;
margin: 5px;
}
* 이미지 출처
: Lee Ji eun Solo Exhibition <A bit of Me-time Part.2>
반응형