본문 바로가기
이과/HTML,CSS,JS

CSS_박스

by 코딩초밥 2021. 5. 30.
반응형

안녕하삼사리요!! 코딩초밥입니다 ㅇㅅㅇ

오늘은 CSS과정중 박스 모델을 만들어볼텐데요? 고고

​

실습 TIP!!!!!!

코딩을 전체 복붙을 하신뒤 <body>요소만 남기고

<style>css요소들을 하나씩 대입해가면서

바뀌는 부분들을 확인해보세요!!! 그럼 차이점이 바로보이실겁니다.

 

박스모델

출처:인피니티북스

 

·HTML 요소들을 박스(사각형) 형태로 그리는 것

·박스는 배치, 색상, 경계 등의 속성을 가진다.

​

CSS에서 마진은 겹처진다!

·500 에 10패딩을 넣으면 490 콘텐츠 10 패딩이 아니라 510 사이즈가된다

·Css에서의 마진은 겹쳐진다 위컨텐츠에서 아래 마진 5

·아래 콘텐츠에서 위 마진 5를 넣으면

.화면상에서는 10이아닌 5가된다

 

 

 

경계선 스타일 종류!!

​

 

 

<!DOCTYPE html>

<html>

<body>

<p style="border-style: none">none.</p>

<p style="border-style: dotted">dotted</p>

<p style="border-style: dashed">dashed</p>

<p style="border-style: solid">solid</p>

<p style="border-style: double">double</p>

<p style="border-style: groove">groove</p>

<p style="border-style: ridge">ridge</p>

<p style="border-style: inset">inset</p>

<p style="border-style: outset">outset</p>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

※예제를 직접 보고 직접하는게 제에에일 빠른 방법입니다

복붙해서 같이 저랑 해보시죠.

<​style부분>

 

<!DOCTYPE html>
<html>
    <head>
        <title>FontTest</title>
    <meta charset="utf-8">
    <style>
        p.border{
                  /* 경계선의 스타일 [width지정 없으면 자동 3px] */
                border-style: solid;
                
                /* top,right,bottom,left로 나누어 스타일링 가능 */
                border-top-style: dotted;
                border-width: 4px;
                border-bottom-width: 8px;
                border-color: red;
                border-right-color: blueviolet;

                /* 모서리 둥글게 */
                border-radius: 20px;
                border-bottom-left-radius: 50px;

                /* 경계선이미지 */
                /* 이미지가 보일만큼 경계선 두계 조절 
                투명이 transparent*/
                border:30px solid transparent;
                border-image: url(./border.png);

                /* 높이너비를 3030으로 짤라라 9등분 */
                border-image-slice: 30 30;
                border-image-repeat:round ;

                /* 요소크기 
                height퍼센트를 줄수없다 이유:기준값이없기때문에
                html이라는 요소를 100%를주어야한다 */
                width: 70%;
                height:250px;

                /* 마진 */
                /* margin-left: 50px; */
                /* 마진을 이용해서 요소를 중앙정렬하고싶다면? */
                margin-left: auto;margin-right: auto;
        }
        
            /* 인라인 요소 크기지정 해보기 */
            /* 인라인 요소는 크기지정이 불가능함. */

            /* png jpg의 차이점은 투명도가 되냐 안되냐이다
            jpg는 뒤에 하얀색이 진짜 하얀색이다 jpg는 투명도
            조절이안된다. */
            a{background-color: red; width: 50%;}
            em{background-color: aqua; width: 50%;}

            /* 인라인에서도 크기지정이 가능한 요소들이있다
            block요소, inline요소도 있고
            inline-block요소가 있다:input,img 
            등이 있어서 사이즈를 바꿀수있는 inline이 있다는것이다
            그러면 inline은 사이즈를 못바꿀까?
            아니다 online-block으로 바꿔서 사이즈를 바꿀수있다.
            */
            input{width: 100%; background-color: pink;}
            img{width: 600px;}

            /* 두요소 마진은 서로 겹침 */
            #p1{background-color: red; height: 50px; margin: 0px; margin-bottom: 10px;}
            #p2{background-color: green; height: 50px; margin: 0px; margin-top: 10px;}

            /* 마진을 음수까지 넣을수있다.! */
            #p1{margin: 0px;}
            #p2{margin: 0px; margin-top: -10px; width: 50%;}
            /* 배경 색상, 이미지 지정 */

            p#background{background-color: greenyellow;
            /* 내가원하는 이미지를 가져와봅시다. */
            background-image: url("./image.png");
            background-size: 200px 100px;
            background-repeat: repeat;
            /* 가로만 반복, 반복안않다 */
            background-repeat: repeat-x;
            background-repeat: no-repeat;
            background-position: center;
            background-position: right top;
            background-position: top center;

            /* 축약형 */
            background: green url(./image.png) no-repeat center;

            padding: 20px;

            }
            /* 배경이미지가 화면에 붙는 방식지정 */

            p#attache{
                width: 60%;
                height: 200px;
                border: 2px solid blue;
                overflow: scroll;
                margin-left: auto; margin-right: auto;
                background-image: url(./image.png);
                background-size: 200px 100px;
                background-repeat: no-repeat;
                background-position: center;
                
                
                /* 배경이미지가 붙는 형태지정 */
                background-attachment: scroll;
                /* 콘텐츠가 스크롤되어도 이 요소 배경은 항상 배경의
                포지션을 유지함 */
                background-attachment: local;
                /* 요소의 콘텐츠와 같이 스크롤됨.(단,콘텐츠가 요소보다 클때) */


                background-attachment: fixed;
                /* 브라우저의 기준점으로 위치됨. */
            }
  
    </style>

<body부분>

<body>
        <!-- 경계선 border/요소 크기/중앙정렬 -->
        <p class="border">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis minima odio natus tenetur sed sapiente inventore nihil error, veritatis deserunt ullam nesciunt recusandae fugit eos, numquam autem itaque officiis ducimus.
        </p>
        <!-- 인라인 요소는 기본적으로 width,height이 안됨 -->
        <a href="">gooooogle</a>
        <em>nice to meet you</em>
        <!-- 인라인 요소 중에서 width,height 이 되는 요소있음 -->
        <input type="text">
        <img src="./back.jpg">

        <hr>
        <!-- margin -->
        <div class="m">
            <p id="p1">p1</p>
            <p id="p2">p2</p>

        </div>
        <!-- 배경 -->
        <p id="background">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident eum deserunt libero assumenda rem consectetur laborum nisi reiciendis enim blanditiis aut veniam laudantium praesentium, temporibus perspiciatis molestiae aliquam unde magnam?
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident eum deserunt libero assumenda rem consectetur laborum nisi reiciendis enim blanditiis aut veniam laudantium praesentium, temporibus perspiciatis molestiae aliquam unde magnam?
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident eum deserunt libero assumenda rem consectetur laborum nisi reiciendis enim blanditiis aut veniam laudantium praesentium, temporibus perspiciatis molestiae aliquam unde magnam?
        </p>

        <p id="attache">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident eum deserunt libero assumenda rem consectetur laborum nisi reiciendis enim blanditiis aut veniam laudantium praesentium, temporibus perspiciatis molestiae aliquam unde magnam?
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident eum deserunt libero assumenda rem consectetur laborum nisi reiciendis enim blanditiis aut veniam laudantium praesentium, temporibus perspiciatis molestiae aliquam unde magnam?
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident eum deserunt libero assumenda rem consectetur laborum nisi reiciendis enim blanditiis aut veniam laudantium praesentium, temporibus perspiciatis molestiae aliquam unde magnam?
        </p>
        <p id="attache">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident eum deserunt libero assumenda rem consectetur laborum nisi reiciendis enim blanditiis aut veniam laudantium praesentium, temporibus perspiciatis molestiae aliquam unde magnam?
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident eum deserunt libero assumenda rem consectetur laborum nisi reiciendis enim blanditiis aut veniam laudantium praesentium, temporibus perspiciatis molestiae aliquam unde magnam?
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident eum deserunt libero assumenda rem consectetur laborum nisi reiciendis enim blanditiis aut veniam laudantium praesentium, temporibus perspiciatis molestiae aliquam unde magnam?
        </p>

    </body>
</html>
반응형
저작자표시

'이과 > HTML,CSS,JS' 카테고리의 다른 글

object 다루기  (2) 2022.11.11
data-id 활용법  (1) 2022.09.30
CSS_의사선택자  (4) 2021.05.23
HTML_링크,이미지,표만들기  (4) 2021.05.13
HTML_IFRAME  (13) 2021.05.11

관련글

댓글

티스토리툴바