본문 바로가기
학원/웹

♧9/26 웹 [css] (라벨과 폼컨트롤연결, 직원정보작성폼, css, 스타일폴더, 포폴만들때참고사항, 메뉴구조도)

피자돈가스 2022. 9. 26. 15:43
<h2>라벨과 폼컨트롤 연결</h2>
  <p>
    <label for="userpw">비밀번호 : </label>
    <input type="password" name="" id="userpw">
  </p>  
 

네모칸 뿐만 아니라 비밀번호 : 를 눌러도 타자를 칠 수 있음

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

-

<p>
   요기랑 <input type="checkbox" name="" id="nextpage">
</p>

  <h2>라벨과 폼컨트롤 연결</h2>
  <p>
    <label for="userpw">비밀번호 : </label>
    <input type="password" name="" id="userpw">
  </p>  
  <br>
  <br>
  <br>
  <br>
  <br>
  요기 <label for="nextpage"><img src="images/까마귀.gif" alt=""></label>
 
 

 


이러면 사진을 눌러도 체크박스 체크가 된다.

























-

<p>
    <input type="checkbox" name="bird1" id="nextpage">
    <input type="checkbox" name="bird2" id="nextpage2">
</p>

</p>

  <h2>라벨과 폼컨트롤 연결</h2>
  <p>
    <label for="userpw">비밀번호 : </label>
    <input type="password" name="" id="userpw">
  </p>  
  <br>
  <br>
  <br>
  <br>
  <br>
  <label for="nextpage"><img src="images/까마귀.gif" alt=""></label>
  <label for="nextpage2"><img src="images/까마귀.gif" alt=""></label>
 
</body>
 
 
 
 
 
 
결과

첫번째새 누르면 첫번째 체크박스. 

두번째 누르면 두번째 체크박스 표시된다.

 

 

 

 

=

<label for="동일값">라벨이름

 

<input type="button" id="동일값">



























-

<body>
    <h1>새로운 직원정보 전송</h1>
<form action="" method="get">

    <div class="basic">
        <fieldset>
            <legend>필수입력정보</legend>
<p> <label for=""><span>*</span>이름</label>
<input type="text" name="" id="" placeholder="이름을 입력하시오(*홍길동)">
</p>
<p>
    <label for=""><span>*</span>아이디</label>
    <input type="text" name="" id="">
</p>
<p><label for=""><span>*</span>계좌번호</label>
<input type="text" name="" id="">
</p>
</fieldset>
    </div>
   


    <div class="extra">
       

        <fieldset>

        <legend>선택입력정보</legend>
<p>
    <label for="">성별</label>
    <input type="radio" name="" id="">남
    <input type="radio" name="" id="">여
</p>
<p>
    <label for="">사진첨부</label>
    <input type="file" name="" id="">
</p>
        </fieldset>
    </div>


    <div>
<p>
    <input type="submit" name="" id=""value=기본정보전송>
</p>
    </div>
</form>

</body>



결과



















<연습과제>

<body>
    <form action="" method="get">

        <div class="basic">
            <fieldset>
                <legend>상세정보:</legend>
    <p> <label for="">이름:</label>
    <input type="text" name="" id="">
    </p>
    <p>
        <label for="">이메일:</label>
        <input type="text" name="" id="">

       
    </p>
</fieldset>
</div>

<div class="extra">
       

    <fieldset>

    <legend>리뷰:</legend>


<p>
<label for="">다시 방문하시겠습니까?</label>
<input type="radio" name="" id="">예
<input type="radio" name="" id="">아니요
<input type="radio" name="" id="">잘 모르겠음
</p>

<p><label for="">의견:</label>
        <textarea name="greet" id="" cols="30" rows="10"></textarea>
<p>
<label for="">사진첨부</label>
<input type="file" name="" id="">
</p>

<input type="checkbox" name="" id="">이메일 업데이트에 가입

<p>
    <input type="submit" name="" id=""value=리뷰전송>
</p>

    </fieldset>
</div>
   
</body>
 
 
 
 
 
 
 
결과

 

 

 

 

 

 

 

 

 

 

 

 

<css 시작!>

 

 

 

 

 

<style>
    *{
        border: 1px solid green;
    }
</style>
 
 
 
 
 
 
 
별(*) 넣으면 모든 요소의 간격을 알 수 있따.
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

-

<span>copywriter 2020 <a href="">www.css.com</a></span>

 

 span = 가로방향!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<css 작성 기본규칙>

 

방법1. <style> css 코드 </style>   안에 코드 작성 한다.

1.

2.

 

 

 

 

 

 

 

 

 

 

 방법2. 선택자 { 선언; } 

ex)

 

<style>

span{
        border: 1px solid red
    } 
 
</style>
 
 
 
이렇게 여러개 들어가게 하면 간단하고좋다.
 
 

ex2)

 <style>

p { font family : Arial; }

</style>

 

= 폰트 바꾸기

 

 

 

 

 

 

 

 

 

 

 

 

 

 방법3. (가장 많이 쓰이는 방법)

 

 

 폴더 만들고 내가 만든 스타일태그 다 넣은후  

<!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">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

 요렇게 헤드태그 안에 넣어주기.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 -

 

<style>

 

body{   background-color: lightgrey;    }

 

h1{ color: crimson; }

 

h2{ color: green;   }

 

p{  color: gray;    }

 

b{  color: blue;    }

 

i{  color: orange;  }

 

</style>



결과

























<바디태그 안에서 간단하게 속성 넣고싶을때 or 테스트 용도 한줄 넣을 때>

-바디태그 안에

<h3 style="color: violet;">테스트-인라인css</h3>
</body>
 
 
 
 
 
 
 
 
(근데 이건 잘 안씀 그냥 스타일태그 안에 넣음)
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

<연습 과제>



 

potato_link.html

<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>
    <link rel="stylesheet" href="potato.css">
</head>
<body>
    <h1>식물소개 페이지</h1>
    <h2>감자</h2>
    <p>감자소개: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sed placeat at repudiandae fugiat officia ipsam ducimus impedit illum ipsum quod, repellat architecto? Debitis tempore recusandae expedita illum quibusdam ad.

    </p>
    <h2>고구마(sweet potato)</h2>
    <p>고구마소개: Lorem ipsum dolor sit amet, consectetur adipisicing elit. A velit numquam itaque ab doloribus porro nam ipsum fugiat nobis ratione iure ex sit quae excepturi error nemo tempore, tenetur voluptatum?

    </p>


    <ul>
        <li>그 밖의 식물들</li>
        <li>다른 나라 식물들</li>
    </ul>


</body>





potato.css

h1, h2{ color: aqua;}
h2, ul{ background-color: blueviolet;}









결과

Document

식물소개 페이지

감자

감자소개: Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptates sed placeat at repudiandae fugiat officia ipsam ducimus impedit illum ipsum quod, repellat architecto? Debitis tempore recusandae expedita illum quibusdam ad.

고구마(sweet potato)

고구마소개: Lorem ipsum dolor sit amet, consectetur adipisicing elit. A velit numquam itaque ab doloribus porro nam ipsum fugiat nobis ratione iure ex sit quae excepturi error nemo tempore, tenetur voluptatum?

  • 그 밖의 식물들
  • 다른 나라 식물들











(우왘ㅋㅋㅋㅋ 이거 첨써보는데 신기하네)


















< li 코드들중 항목별로 색을 다르게 주기 >






-스타일

li{
   background-color: pink;
}
.yellow{
    background-color: yellow;
}

\

-바디

<ul>
        <li>그 밖의 식물들</li>
        <li class="yellow">다른 나라 식물들</li>
    </ul>
 
 
-결과 
 
 











(내생각 : id 를 주거나 div 아이디 를 줄수도 있을듯
class 를 쓸 때, div줄때, id 줄 때 상황별로 어울리는 게 있는걸까?)























<포트폴리오 제작 전 참고하면 좋은 것들>




-웹퍼블리싱 포트폴리오, 프론트엔드  포트폴리오 구글 검색

-기업 웹사이트

-전체적인 웹사이트의 구조 파악하기
ㄴ 순서도=메뉴 구조도 (pcweb, 반응형 웹)
    - draw.io

ex.
<기획 및 벤치마킹>

















과제


<아무 기업 메뉴구조도 만들기>


삼성전자
























'학원 > 웹' 카테고리의 다른 글

♧9/28 주변태그여러개/폰트-사이즈,굵기,대소문자,밑줄,행간격,글자간격,정렬,수직정렬,들여쓰기 [j script] 소개/코드위치  (0) 2022.09.28
♧웹 [css] (css선택자종류, 컬러변경스타일태그, 부모자식손자등등종류, 폰트바꾸기, 폰트사이트코드에서 폰트코드 가져와 폰트 사용하기)  (0) 2022.09.27
♧9/23웹[html]폼태그/폼컨트롤의종류-아이디비번,로그인,가입인사,다중택일버튼/선택박스벨류/체크,셀렉트박스/날짜선택/달력/파일첨부/정보/토글  (0) 2022.09.23
♧9/22 웹 [html] 동일페이지내연결(맨위로 맨아래로)/스크롤부드럽게/테이블태그-행,셀,합치기,색깔넣기/이미지-삽입,옳은저장,설명  (4) 2022.09.22
♧9/21 웹[html] (리스트태그, 리스트정의태그, a태그(링크걸기), 동일폴더와 부모자식폴더, 새창에서링크열기, 디자인기획팁, 과제)  (2) 2022.09.21

'학원/웹' Related Articles

티스토리툴바