반응형
반응형

📝Media Query

출력 장치의 여러 특징 가운데 일부를 참조하여 CSS 코드를 분기 처리해 하나의 HTML 소스로 여러가지 출력장치 크기에 따라 맞춤형으로 보여줄 수 있는 기능을 제공한다

 

  • mobile
    • 320px ~ 480px
  • tablet
    • 768px ~ 1024px
  • desktop
    • 1024px ~

 

@media (조건문) {실행문} 순서로 작성이 가능하다.

 

가장 많이 쓰이는 부분을 하나 정리해주자면 넓이에 따라 반응형을 많이 만들기 때문에 min-width, width, max-widht [뷰포트 기반]를 사용한다 참고로 아래 참고 및 출처 사이트에 상세히 작성되어있으니 참고하면 좋다

 

See the Pen gradient progress bar by Lee (@mondaymonday2) on CodePen.

 

 

 

🔗 참고 및 출처

https://naradesign.github.io/media-query.html

반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] div에 이미지 넣기, 비율에 맞게 이미지 축소 (background: url, background-repeat, background-size, object-fit)  (0) 2023.09.14
[CSS] width, height 계산 (calc) [동적 처리]  (1) 2022.10.11
[CSS] 원하는 DIV 최상단 노출시키기 (Z-index)  (0) 2021.07.10
[CSS] DIV 원하는 곳에 배치시키기 Position (relative , absolute, fixed)  (0) 2021.07.10
[CSS] visibility:hidden vs display:none  (0) 2021.07.01
반응형

📝 background: url, background-repeat

<!DOCTYPE html>
<html lang="en">
<body>
<div class="my_dog">
    This is my dog
</div>

</body>
<style>
    .my_dog {
        height: 1000px;
        background: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F24283C3858F778CA2E");
        background-repeat: no-repeat;
    }
</style>

</html>

background에 이미지를 넣을 수 있는데 url를 지정해주면 된다.

 

  • background-repeat 속성
    • repeat : div를 채울 때까지 반복합니다 (default)
    • no-repeat : 이미지를 반복하지 않습니다 [이미지가 한번만 나온다]

 

📝 background-size

See the Pen Untitled by Lee (@mondaymonday2) on CodePen.

  • background-size 속성
    • default : div의 크기만큼 채웁니다 (이미지가 더 큰 경우 잘릴 수 있음)
    • contain : div크기만큼 채우는데 가로 세로 비율에 맞게 잘리지 않게 하기 때문에 div의 여백이 존재할 수 있지만 찌그러지거나 안 나오진 않습니다.
    • cover : div크기만큼 채우는데 가로나 세로 둘중 하나만 크기에 맞게끔 줄이기 때문에 잘릴 수 있습니다

 

📝 object-fit

<!DOCTYPE html>
<html lang="en">
<style>
    img {
        width: 1000px;
        height: 1500px;
        object-fit: fill;
        border: 1px solid #000
    }
</style>
<body>
<div>
    <img src="http://image.dongascience.com/Photo/2020/12/6d740a94b3d3233531281efdf2f997aa.jpg">
</div>

</body>
</html>
  • fill → 요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.
  • contain → width 또는 height가 다 찰때 까지 비율에 맞게 커진다 (width 또는 height 둘 중 하나라도 꽉찰 때 까지)
  • none → 실제 이미지 크기만큼 채워진다
  • cover → 대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.
반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] Media Query (반응형 웹 페이지 제작)  (0) 2023.10.01
[CSS] width, height 계산 (calc) [동적 처리]  (1) 2022.10.11
[CSS] 원하는 DIV 최상단 노출시키기 (Z-index)  (0) 2021.07.10
[CSS] DIV 원하는 곳에 배치시키기 Position (relative , absolute, fixed)  (0) 2021.07.10
[CSS] visibility:hidden vs display:none  (0) 2021.07.01
반응형

css에 calc() 연산이 있는데 width나 height 값을 동적으로 더해지거나 빼거나 하는 값을 넣을 수 있습니다.
예) width: calc(100% - 400px) 일 경우 전체 영역에 - 400px을 차지합니다.

→ 나머지 공간을 100%로 같이 잡으면 꽉찬 영역이 동적으로 변하는 걸 확인 할 수 있습니다.

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body, html{
            width: 100%;
            height: 100%;
        }


        #container{
            width: 100%;
            min-width: 700px;
            height: 100%;
        }

        #testDiv{
            width: calc(100% - 400px);
            height: 100%;
            float: left;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="testDiv">

        </div>
    </div>
</body>

</html>
<!-- 출처 : https://usang0810.tistory.com/m/31 -->
반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] Media Query (반응형 웹 페이지 제작)  (0) 2023.10.01
[CSS] div에 이미지 넣기, 비율에 맞게 이미지 축소 (background: url, background-repeat, background-size, object-fit)  (0) 2023.09.14
[CSS] 원하는 DIV 최상단 노출시키기 (Z-index)  (0) 2021.07.10
[CSS] DIV 원하는 곳에 배치시키기 Position (relative , absolute, fixed)  (0) 2021.07.10
[CSS] visibility:hidden vs display:none  (0) 2021.07.01
반응형

 

<!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>
    <style>
    
    div{
        width:50px;
        height:50px;
        position:absolute;
        
    }
    </style>
</head>
<body>
    <div style="left:20px; background-color: blue; z-index: 4;"></div>
    <div style="left:40px; background-color: rgb(56, 56, 255);  z-index: 3"></div>
    <div style="left:60px; background-color: rgb(148, 148, 255);  z-index: 2"></div>
    <div style="left:80px; background-color: rgb(212, 212, 255);  z-index: 1"></div>
</body>
</html>

첫번째 사진은 z-index를 적용 안 한 사진입니다. 맨 마지막 div가 맨 위에 올라간 걸 볼 수 있습니다.

하지만 전 반대로 첫번째가 가장 위로가게 하고 싶습니다. 이걸 어떻게 할까요

z-index를 적용시키면 됩니다. z-index를 적용시키려면 position을 꼭 넣어줘야합니다.

positon이 있어야 겹치던가 해서 위 아래를 상대적인 숫자 값을 넣어서 정할 수 있으니깐요

 

z-index는 양수 ~ 음수까지 갖을 수 있습니다.

숫자가 낮을 수록 뒤에 배치되며 숫자가 높을 수록 앞으로 나옵니다.

 

 

반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] div에 이미지 넣기, 비율에 맞게 이미지 축소 (background: url, background-repeat, background-size, object-fit)  (0) 2023.09.14
[CSS] width, height 계산 (calc) [동적 처리]  (1) 2022.10.11
[CSS] DIV 원하는 곳에 배치시키기 Position (relative , absolute, fixed)  (0) 2021.07.10
[CSS] visibility:hidden vs display:none  (0) 2021.07.01
[CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row)  (0) 2021.07.01
반응형

<!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>
    <style>
    span{
        background-color: red;
        margin:5px;
        position:relative;
        color:white;
    }
    div{
        background-color: blue;
        color:white;
        
    }
    </style>
</head>
<body>
    <span style="top:5px">span</span><span style="top:-5px">span</span><span style="bottom:5px">span</span><span style="right:5px">span</span>
    <div style="position:absolute; bottom:5px">abc</div>
    <span >div는 없어요!</span>
    <div style="position: fixed;  right:0">sdfsd</div>
</body>
</html>

📝position, relative

말 그대로 위치시키는 거를 위한 옵션입니다.

 

position에는 여러 종류가 있는데 relative를 먼저보면 style적용전에 있던 기본 위치를 기준으로

top, bottom , left , right를 줄 수 있습니다.

첫번째의 경우 top을 5px을 줬습니다. 근데 신기한게 위로 올라간게 아니고

밑으로 내려갔는데 정확히는 모르겠고 relative는 반대로 움직이더라고요 만약 위로 움직이고 싶으시면 -값을 주세요

 

📝absolute

기본 시작 위치가 왼쪽 상단 즉 HTML 시작부분입니다.

그리고 속성값을 설정해주면 거기에서부터 시작합니다. 예를 들어

bottom:5px로 되어있는데 이것에 의미는 최하단에서 위로 5px떨어진 부분이 시작점이라는 의미입니다.

relative의 경우에는 원래 있던 위치에서 조정하는 거랑 다른 점입니다.

또한 div의 특징인 한 줄을 다 차지하는 특징을 없앱니다.

 

📝fixed

쓴 경우는 스크롤바를 내리던 올리던 작업표시줄은 계속 위에 있잖아요 그런 기능입니다.

항상 어딜가든 고정되어 있는 것이죠

 

공통점은 공간을 차지 안 하기 때문에 겹치게 할 수도 있습니다.

 

반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] width, height 계산 (calc) [동적 처리]  (1) 2022.10.11
[CSS] 원하는 DIV 최상단 노출시키기 (Z-index)  (0) 2021.07.10
[CSS] visibility:hidden vs display:none  (0) 2021.07.01
[CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row)  (0) 2021.07.01
[CSS] border에 넓이 포함시키지 않기 box-sizing (서로 다른 div 크기 [Border])  (0) 2021.06.26
반응형
<!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>
</head>

<style>

.div1{
	display: none;
}

.div2{
	visibility: hidden;
}

</style>
<body>
    <div class="container">
		ABC
        <div class="div1">Div1</div>
		DEF
        <div class="div2">Div2</div>
		GHI
    </div>
</body>
</html>

 

1. display:none

보이지도 않고 해당 공간도 존재하지 않게 된다.

 

2. visibility:hidden

보이지만 않고 해당 공간은 존재한다. (visibility:visible은 보이게 하는 css이다.)

 

 

반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] 원하는 DIV 최상단 노출시키기 (Z-index)  (0) 2021.07.10
[CSS] DIV 원하는 곳에 배치시키기 Position (relative , absolute, fixed)  (0) 2021.07.10
[CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row)  (0) 2021.07.01
[CSS] border에 넓이 포함시키지 않기 box-sizing (서로 다른 div 크기 [Border])  (0) 2021.06.26
[CSS] 외부 CSS HTML에서 호출하기 (link rel="stylesheet" href="")  (0) 2021.06.26
반응형

<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
    div {
        border-style:solid;
    } 


    </style>
</head>
<body>
    <div class="con" style="display:table; width:800px;">
        <div style="display:table-row">
            <div class ="A" style="display:table-cell">A</div>
            <div class ="B" style="display:table-cell">B</div>
            <div class ="C" style="display:table-cell">C</div>
            <div class ="D" style="display:table-cell">D</div>
        </div>
        <div style="display:table-row">
            <div class ="A" style="display:table-cell">A</div>
            <div class ="B" style="display:table-cell">B</div>
            <div class ="C" style="display:table-cell">C</div>
            <div class ="D" style="display:table-cell">D</div>
        </div>
    </div>
    
    
     
</body>
</html>

table 말 그대로 table형식으로 보여지게 만듭니다.

table-row는 tr의 기능을하고

table-cell은 td의 기능을 합니다.

반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] DIV 원하는 곳에 배치시키기 Position (relative , absolute, fixed)  (0) 2021.07.10
[CSS] visibility:hidden vs display:none  (0) 2021.07.01
[CSS] border에 넓이 포함시키지 않기 box-sizing (서로 다른 div 크기 [Border])  (0) 2021.06.26
[CSS] 외부 CSS HTML에서 호출하기 (link rel="stylesheet" href="")  (0) 2021.06.26
[CSS] CSS 강제 적용시키기 !important  (0) 2021.06.26
반응형

<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    
    <title>Document</title>
    <style>
        div{
            border-color:black;
            border-style:solid;
            border-width:20px;
            width:200px
        }
    </style>
</head>
<body>
    <div style="box-sizing: content-box;">
        <p>content-box</p>
    </div>
    <br>
    <div style="box-sizing: border-box;">
        <p>border-box</p>
    </div>

</body>
</html>

box-sizing에는 content-box와 border-box가 있습니다. 같은 넓이인데 왜 이럴까요

 

content-box는 content영역 즉 p태그의 영역에 200px인거고 + 20의 border를 가집니다. 총 240입니다.

border-box는 border영역까지 포함해서 200px을 가집니다. 여기선 p태그가 160을 가지게 되죠 양쪽 border 20px씩

 

반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] visibility:hidden vs display:none  (0) 2021.07.01
[CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row)  (0) 2021.07.01
[CSS] 외부 CSS HTML에서 호출하기 (link rel="stylesheet" href="")  (0) 2021.06.26
[CSS] CSS 강제 적용시키기 !important  (0) 2021.06.26
[CSS] FlexBox(플렉스 박스), Grid(그리드) [레이아웃 배치 및 정렬], place-content  (0) 2021.06.24
반응형
<!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>

<body>

</body>
</html>

 

이런식으로 link rel ="stylesheet" href ="내가 참고하고자할 css파일 경로" 를 하시면 적용이 됩니다.

 

style.css안에는 이런식으로 style에 관한게 들어있습니다.

 


*{
   box-sizing : border-box;
}

.leftBanner{
   background-color: black;
   color:white;
   height :100%;
   
 }

.leftBannerImg{
   padding-top:30px;
   padding-right:30px;
   text-align: center;
   padding-bottom: 150px;

}

style.css

반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row)  (0) 2021.07.01
[CSS] border에 넓이 포함시키지 않기 box-sizing (서로 다른 div 크기 [Border])  (0) 2021.06.26
[CSS] CSS 강제 적용시키기 !important  (0) 2021.06.26
[CSS] FlexBox(플렉스 박스), Grid(그리드) [레이아웃 배치 및 정렬], place-content  (0) 2021.06.24
[CSS] 블록(Block), 인라인(Inline), 인라인 블록(Inline-Block) [display:block, inline , inline-block]  (0) 2021.06.24

티스토리툴바