반응형
반응형

메타 태그는 HTML 태그중 하나로 문서 자체의 추가적인 정보를 주는 태그입니다

어떤 내용을 담고 있으며 키워드는 무엇이며 default charset은 어떤 것을 사용하는지 등의 정보를 담고 있는 태그입니다

 

기본적으로 활용하는 것과 대표적인 것들을 알아보겠습니다

 

📝viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일 디바이스 넓이에서는 1.0 (100%)으로 비율을 맞춘다는 것이다

 

 

기본HTML 화면

 

 

<좌> viewport 적용 (모바일) | <우> viewport 미적용 (모바일)

 

📝charset

<meta charset="EUC-KR">

 EUC-KR로 설정한 후 서버로 기동 안 하고 파일로 HTML파일을 open한 경우 HTML페이지가 EUC-KR로 열리게 되어 글자가 깨지게 된다 (윈도우에서 작성한 글자들은 UTF-8로 작성되었기 때문에 EUC-KR로 읽어버리면 깨지게 되어버린다) → 물론 서버로 기동하는 경우 서버의 charset이 우선순위가 높다

 

 

📝검색엔진

<!-- 검색 엔진에 의해 검색되는 단어를 지정 -->
<meta name="Keywords" content="Web, html, 웹 표준" />

<!-- 검색 결과에 표시되는 문자를 지정 -->
<meta name="Description" content="Web, html, 웹 표준" />

<!-- 검색 로봇 제어 -->
<meta name="Robots" content="noindex, nofollow" />

그 외에 저작권자 최종 수정일 위치 홈페이지 주제 등에 대한 걸 설정할 수 있다

 

마우스 오버시 관련 툴바, 캐시 되지 않도록 지정 등을 할 수 있지만 이거는 IE쪽에서만 동작 가능성이 높기 때문에 따로 기

능을 만들어서 사용하는게 옳다

 

 

 

🔗 참고 및 출처

https://webclub.tistory.com/354

반응형

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

[HTML] 시멘틱태그  (0) 2021.06.26
[HTML] select 태그, iframe 태그, button vs input  (0) 2021.06.21
[HTML] input태그  (0) 2021.06.21
[HTML] table(테이블) 태그  (0) 2021.06.21
[HTML] ol 태그, ul 태그, dl 태그, dd 태그, dt 태그  (0) 2021.06.21
반응형

📝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
반응형

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

 

밑에 출처를 기반으로 만든 거라 완전한 이해 없이 만든 거라 난해할 수 있습니다.

별도 노가다하면서 찍었네요 허허

 

 

🔗  참고 및 출처

 

https://hj-tilblog.tistory.com/102

 

CSS로 물결 애니메이션 만들기

🐳 물결치는 애니메이션 만들기 🌊 물결치는 애니메이션 포스팅을 보고 응용해서 만든 달빛이 반짝이는 밤하늘과 바다를 표현한 애니메이션이다. 해당코드는 코드펜에 올라가있으며 하나씩

hj-tilblog.tistory.com

 

반응형
반응형

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

티스토리툴바