728x90
반응형
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>display</title>
            <meta charset="UTF-8">
            <style>
                div {
                    display: inline-block;
                    /* display : 요소 표시 상태 설정
                    none: 보이지 않고 공간도 차지하지 않음
                    block : 부모 요소의 가로 크기를 한줄 다 차지하게 된다.
                    inline: 필요한 만큼 공간 차지(width, height 안먹힘)
                    inline-block : 필요한 만큼 공간 차지(width, height 작동)
                    */
                }


                div:nth-child(1) {
                    width: 100px;
                    height: 100px;
                    background-color: black;
                   
                }
                div:nth-child(2) {
                    width: 100px;
                    height: 100px;
                    background-color: purple;
                }
            </style>
    </head>
    <body>
        <div></div>
        <div></div>
    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

flex  (0) 2022.12.24
filter(이미지나 요소에 효과주기)  (0) 2022.12.24
cursor(커서모양)  (0) 2022.12.24
color(색상)  (0) 2022.12.24
box-sizing(박스크기)  (0) 2022.12.21
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>cursor</title>
            <meta charset="UTF-8">
            <style>
                div {
                    width: 100px;
                    height: 100px;
                    background-color: black;
                    cursor: not-allowed;
                    /* cursor : 마우스 커서의 모양 지정
                    default : (기본값) 기본 화살표 모양
                    pointer : 클릭 손 모양
                    text : I빔
                    not-allowed : 금지
                    등등...
                    */
                }
            </style>
    </head>
    <body>
        <div>가나다</div>
        <div>라마바</div>
    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

filter(이미지나 요소에 효과주기)  (0) 2022.12.24
display(표시 설정)  (0) 2022.12.24
color(색상)  (0) 2022.12.24
box-sizing(박스크기)  (0) 2022.12.21
box-shadow(박스그림자)  (0) 2022.12.21
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>color</title>
            <meta charset="UTF-8">
            <style>
                div:nth-child(1){
                    color: rgb(255, 0, 0);
                }
                div:nth-child(2){
                    color: rgb(0, 0, 255);
                }
            </style>
    </head>
    <body>
        <div>가나다</div>
        <div>라마바</div>
    </body>
</html>
728x90
반응형
저작자표시

'정보 > WEB' 카테고리의 다른 글

display(표시 설정)  (0) 2022.12.24
cursor(커서모양)  (0) 2022.12.24
box-sizing(박스크기)  (0) 2022.12.21
box-shadow(박스그림자)  (0) 2022.12.21
border(테두리)  (0) 2022.12.21
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-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

+ Recent posts

728x90
반응형
">

티스토리툴바