728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>box-sizing</title>
            <meta charset="UTF-8">
            <style>
                div:nth-child(1) {
                    width: 100px;
                    background-color: black;
                    color: white;    
                /**/
                }
                div:nth-child(2) {
                    width: 100px;
                    height: 20px;
                    background-color: red;
                    box-sizing: border-box;
                    /* box-sizing ㅣ 요소의 크기 지정에 관한 방법 설정
                    content-box : 요소의 내부 내용에 따른 크기 지정(기본값)
                    border-box : 요소의 테두리 내용에 따른 크기 지정
                    */
                    color: white;
                    padding: 0 10px;
                   
                }
            </style>
    </head>
    <body>
        <div>나는 100px</div>
        <div>아무 내용</div>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

cursor(커서모양)  (0) 2022.12.24
color(색상)  (0) 2022.12.24
box-shadow(박스그림자)  (0) 2022.12.21
border(테두리)  (0) 2022.12.21
background-color(배경색)  (0) 2022.12.21
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>box-shadow</title>
            <meta charset="UTF-8">
            <style>
                div {
                    width: 100px;
                    height: 100px;
                    background-color: rgb(200, 225, 250);
                    box-shadow: 0 0 16px 1px rgb(60, 60, 60, 50%)
                /* box-shadow : (x축 dhvmtp)(y축 오프셋)(퍼짐 반경)(그림자 반경)(색)*/
                }
            </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

color(색상)  (0) 2022.12.24
box-sizing(박스크기)  (0) 2022.12.21
border(테두리)  (0) 2022.12.21
background-color(배경색)  (0) 2022.12.21
style(중간정렬하기)  (0) 2022.12.21
728x90
반응형

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>border</title>
            <meta charset="UTF-8">
            <style>
                div {
                    width: 100px;
                    height: 50px;
                    border: 2px solid rgb(0, 0, 0);
                    /* border : 테두리*/
                    /* 굵기, 스타일, 색상 순으로 지정한다. 스타일은 아래와 같다.
                        solid : 실선
                        dotted : 짧은 점선
                        dashed : 점선
                    */
                    /* border-top, border-right, border-bottom, border-left 사용 가능*/
                    border-radius: 15px;
                    /* border-radius : 테두리 부드럽게*/
                    /* border-top-right-radius, border-bottom-tight-radius,
                    border-bottom0left-radius, border-top-lefr-radius사용 가능*/
               
                }

            </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

box-sizing(박스크기)  (0) 2022.12.21
box-shadow(박스그림자)  (0) 2022.12.21
background-color(배경색)  (0) 2022.12.21
style(중간정렬하기)  (0) 2022.12.21
style활용(회원가입창)  (0) 2022.12.21
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>background-image</title>
            <meta charset="UTF-8">
            <style>
                div:nth-child(1) {
                    width: 500px;
                    height: 500px;
                    background-color: gray;
                    /* background-image : 배경 이미지를 삽입할 때 사용한다. url 함수와 함께 사용한다. url("주소")*/
                    background-position: center;
                    /* background-position: 배경 이미지 위치 설정
                        background-position: a; 양방향에 대한 설정
                        background-position: x y; x축, y축에 대한설정
                    */
                    background-repeat: no-repeat;
                    /* background-repeat: 배경 이미지 반복 설정
                        repeat : 반복되게 한다.(기분값)
                        repeat-x : 가로축으로만 반복되게 한다.
                        repeat-y : 세로축으로만 반복되게 한다.
                        no-repeat: 반복되지 않게 한다.
                   
                    */
                    background-size: 500px 200px;
                    /* background-size: 배경 크기 설정
                        (리터럴) : 가로크기 설정 후 세로크기는 이미지 비율에 맞게 증감
                        (리터럴)(리터럴) : 가로/세로 크기 지정. 이미지 비율 문제 발생
                        auto (리터럴) : 세로크기 설정. 가로크기는 이미지 비율에 맞게 증감
                        contain : 이미지가 잘리지 않는 한도 내에서 가장 큰 크기 ( 요소 벗어날 수 없음)
                        cover : 요소의 빈 부분 없이 이미지를 표시할 수 있는 가장 작은 크기(요소 벗어날 수 있음)
                        */
                }

         
            </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

 

728x90
반응형
저작자표시
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>background-color</title>
            <meta name="viewoirt" content="wi" charset="UTF-8">
            <style>
                div:nth-child(1) {
                    width: 300px;
                    height: 300px;
                    /* background-color : 배경 색상 지정*/
                    background-color: rgba(255, 0, 0, 50%);
                    /* 리터럴(Literal : red, blue, orange, black, white 등*/
                    /* RGB : rgb(a, b, c) 함수 이용, 각 빨간색, 초록색, 파란색의 정도를 (0~255)로 나타낸다.*/
                    /* RGBA : rgba(a, b, c, d)함수 이용. 위 rgb(a, b, c)    함수 처럼 사용하되, d값은 0%~100%값으로 불투명도 지정.(0% 완전투명 ~ 100% 완전 불투명)*/
                    /* HEX : #rrggbb 형식으로 사용. rgb함수에서 사용하는 값을 16 진수로 전환하여 사용하는 방식. 가령, rgb(255, 255, 255)는 #ffffff 와 같다*/
                    /* HEX(0) : #rrggbboo 형식으로 사용. 기본 hex사용 방ㅇ법과 같으니 뒤에 불투명도를 지정하는 oo값을 함께 사용한다. (00 부터 ff까지*/
                    position: absolute;
                    z-index: 1;
                }
                div:nth-child(2) {
                    top: 150px;
                    left: 150px;
                    width: 300px;
                    height: 300px;
                    background-color: rgb(50, 100, 200);
                    position: absolute;
                }
            </style>
    </head>
    <body>
        <div></div>
        <div></div>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

box-shadow(박스그림자)  (0) 2022.12.21
border(테두리)  (0) 2022.12.21
style(중간정렬하기)  (0) 2022.12.21
style활용(회원가입창)  (0) 2022.12.21
style활용(신호등모양배열)  (0) 2022.12.21
728x90
반응형
                top: 50%;
                left: 50%;
                position: absolute;
                transform: translate(-50%, -50%);
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

border(테두리)  (0) 2022.12.21
background-color(배경색)  (0) 2022.12.21
style활용(회원가입창)  (0) 2022.12.21
style활용(신호등모양배열)  (0) 2022.12.21
style활용(회원가입+약관선택)  (0) 2022.12.21
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>신호등</title>
            <meta charset="UTF-8">
            <style>
                body > form {
                    width: 400px;
                    background-color: gray;

                }
                body > form > label {
                   
                    display: block;
                }
                body > form > label:nth-child(1){
                    background-color: black;
                    color: white;
                    font-size: 50px;
                    padding: 20px;
                }
                body > form > label:nth-child(2){
                    background-color: rgb(214, 234, 248);
                    padding: 30px;
                }
                body > form > div{
                    background-color: rgb(214, 234, 248);
                    padding-left: 30px;
                    padding-bottom: 20px;
                    padding-top: 0px;
                }
                body > form > label:nth-child(3){
                    background-color: rgb(133, 193, 233 );
                    padding: 20px;
                }
                .button {
                    background-color: rgb(52, 152, 219);
                    border-radius: 5px;
                    display: inline-block;
                    padding: 5px 10px;
                    color: white;
                    font-size: 20px;
                    font-weight: lighter;
                }

       
            </style>
    </head>
    <body>
        <form>
            <label>로그인</label>

            <label>
                <span><input type="email"   autofocus name="email" placeholder="이메일" type="email" size="35"></span>
                <span><input type="password" name="password" placeholder="비밀번호" type="password" size="35"></span>
                <div><input type="radio">이메일 주소 기억하기</div>
                <div class="button">로그인</div>
            </label>

            <label>
                <div>아직 계정이 없으신가요? <a href="#">회원가입</a></div>
                <div>계정 정보를 분실하셨나요? <a href="#">계정 복구</a></div>
            </label>
        </form>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

background-color(배경색)  (0) 2022.12.21
style(중간정렬하기)  (0) 2022.12.21
style활용(신호등모양배열)  (0) 2022.12.21
style활용(회원가입+약관선택)  (0) 2022.12.21
style활용(약관선택)  (0) 2022.12.21
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>신호등</title>
            <meta charset="UTF-8">
            <style>
                body > form {
                    width: 100px;
                    background-color: gray;
                    border-radius: 20px;
                    padding: 15px;
                }
                body > form > label {
                    padding: 50px;
                    border-radius: 50px;
                    display: block;
                }
                body > form > label:not(:last-child){
                    margin-bottom: 15px;
                }

                body > form > label:nth-child(1){
                    background-color: red;
                }
                body > form > label:nth-child(2){
                    background-color: yellow;
                }
                body > form > label:nth-child(3){
                    background-color: green;
                }
            </style>
    </head>
    <body>
        <form>
            <label>
   
            </label>
            <label>
 
            </label>
            <label>
       
            </label>
        </form>
    </body>
</html>
728x90
반응형
저작자표시

'코딩일지 > WEB' 카테고리의 다른 글

style(중간정렬하기)  (0) 2022.12.21
style활용(회원가입창)  (0) 2022.12.21
style활용(회원가입+약관선택)  (0) 2022.12.21
style활용(약관선택)  (0) 2022.12.21
style활용(표만들기)  (2) 2022.12.21

+ Recent posts

728x90
반응형
">

티스토리툴바