Cute Happy Ghost
본문 바로가기
Front/Html, css,jsp

20201110_ 33 css

by JENN_tech7 2020. 11. 10.
728x90
SMALL
   <body>
        <ul>
           <li><label><input type="radio" name ="i1"/>테스트1</label></li> 
           <li><input type="radio" name ="i1"/></li> 
           <li><input type="radio" name ="i1"/></li> 
        </ul>
    </body>

 

 

 

 

 

 

 

    <body>
        <form>
        
           <label><input type = "text"/>텍스트상자</label><br/>
           <label><input type = "password"/>패스워드상자</label><br/>
           <label><input type = "email"/>이메일</label><br/>
           <label><input type = "hidden"/>숨김</label><br/>
           <input type = "submit" value ="눌러">
        </form>
    </body>

이메일 상자 특징

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <title>20201110</title>
    </head>

    <!-- body-->
    <body>
        <form>
        
           <label><input type = "text"/>텍스트상자</label><br/>
           <label><input type = "password"/>패스워드상자</label><br/>
           <label><input type = "email"/>이메일</label><br/>
           <label><input type = "hidden"/>숨김</label><br/>
           <label><input type = "radio" name = "g1"/>라디오1</label><br/>
           <label><input type = "radio" name = "g2"/>라디오2</label><br/>
           <label><input type = "radio" name = "g3"/>라디오3</label><br/>
           <label><input type = "checkbox"/>체크박스</label><br/>
           <label><input type = "file"/>파일선택</label><br/>
           <label><input type = "button" value="버튼제목"/>버튼</label><br/>
           <label><input type = "reset" />무효화</label><br/>
           <label><input type = "range" value = "눌러"/>범위슬라이드</label><br/>
           <label><input type = "color" />색상</label><br/>
           <input type = "submit" value ="눌러">
        </form>
    </body>
</html>

 

 

 

gestalt사이트 참고

 

 

 

 

  • 각각 다르게 속성지정하기
<!DOCTYPE html>
<html>
    <head>
        <title>CSS 실습</title>
        <style>
          .paragraph-style{
            background-color: black;
               color: white;
          }
          .font-style {
              font-size: 2rem;
              color: #c0ffee;
          }    
            
           
        </style>
       
    </head>
    <body>
        <p class="paragraph-style font-style" >
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p class="paragraph-style">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
    </body>
</html>

 

<!DOCTYPE html>
<html>
    <head>
        <title>CSS 실습</title>
        <style>
            .paragraph-style{
                background-color:palevioletred;
                color: white;
            }

            .font-style {
                font-size: 2rem !important;
                color: powderblue;
            }
            p {
                background-color:black;
                color: white; 
                color: purple;
            }

            #p1 {
                padding-bottom: 100px;
                padding-top: 100px;
            }
            * {
                padding: 0;
                margin: 0;
            }
            /* 문서 내부에 지정 
            p {
                background-color:palevioletred;
                color: white; 
                padding: 20px;
            }
             */
        </style>
    </head>
    <body>
        <!-- 인라인 스타일 지정-->
        <p id="p1" class="paragraph-style font-style">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>        
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p class="paragraph-style">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <h1>제목</h1>
    </body>
</html>

 

스타일임포트

my-style.css라는 곳에 

 

p {
    background-color: black;
    color: white;
    padding: 20px;
}

title밑에

<link href="./my style.css"
            rel="stylesheet"
            type="text/css">

 

 

 

 

 

  • 트리구조
<!DOCTYPE html>
<html>
    <head>
        <title>CSS 실습</title>
        <style>
        </style>
    </head>
    <body>
        <div id="container">
            <h1 id="ct-h1">title</h1>
            <p>문단같은거</p>
            <ul>
                <li>1 depth - A
                    <ul>
                        <li>2depth - A</li>
                        <li>2depth - A</li>
                        <h1>갑자기 제목</h1>
                    </ul>
                </li>
                <li>1 depth - B
                    <ul>
                        <li>2depth - B</li>
                        <li>2depth - B</li>
                        <li>2depth - B</li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

 

 

 

  • 후손선택자
    <head>
        <title>CSS 실습</title>
        <style>
            #container li {
                color: red;
            }
        </style>
    </head>

container로 해서 밑에 애들이 결정되는것

 

 

  • 형제
 <style>
            #ct-h1 ~ p  {
                color: red;
            }
        </style>

 

 

 

 

fonts.google.com/

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
        <style>
            * {
                font-family: 'Noto Sans KR', sans-serif;
            }
        </style>

    </head>
    <body>
        <p>안녕하세요 반갑습니다 나는 재현입니다 hello my name is Jenn</p>
        <p>안녕하세요 반갑습니다 나는 재현입니다 hello my name is Jenn</p>
        <p>안녕하세요 반갑습니다 나는 재현입니다 hello my name is Jenn</p>
    </body>
</html>

 

 

 

 

 

 

 

<!DOCTYPE html>
<html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
        <style>
            * {
                font-family: 'Noto Sans KR', sans-serif;
            }

            .p1 {
                font-size: 1rem;
                font-weight: 700;
                color: violet;
            }
        </style>

    </head>
    <body>
        <p>안녕하세요 반갑습니다 나는 재현입니다 hello my name is Jenn</p>
        <p>모든 국민은 법률이 정하는 바에 의하여 국가기관에 문서로 청원할 권리를 가진다. 대통령은 제1항과 제2항의 처분 또는 명령을 한 때에는 지체없이 국회에 보고하여 그 승인을 얻어야 한다.</p>
        <p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium sagittis condimentum. Cras id metus gravida, finibus sem quis, efficitur turpis. In massa ex, tempor eget arcu sed, pulvinar iaculis tortor. Ut vehicula urna sit amet sem pretium porta. Vestibulum pulvinar lectus sed elit fringilla tristique. Fusce pellentesque magna sit amet placerat dignissim. Integer eget massa et lectus vehicula pulvinar nec nec odio. Etiam placerat, mauris sed scelerisque rhoncus, enim sem posuere turpis, sed finibus ante orci luctus nisi. Phasellus in nisl nibh. Quisque ut egestas quam. Ut purus elit, auctor vel nulla sit amet, luctus feugiat enim.</p>
    </body>
</html>

 

 

 

 

  • 그림자
    h1 {
                text-shadow: 10px 5px 3px #999999;
            }

x축 y축

 

 

 

 

  • 텍스트 정렬
                text-align: center;

ㅌ

728x90
LIST
저작자표시 비영리 변경금지

'Front > Html, css,jsp' 카테고리의 다른 글

20201111_ 34 사각형  (0) 2020.11.11
20201110_33 server...  (0) 2020.11.10
20201110_33 로그인화면만들어보기  (0) 2020.11.10
20201109_ 33 html기본  (0) 2020.11.09
20201109_33 html 테이블,이미지,문서  (0) 2020.11.09

관련글

댓글

티스토리툴바