나의 디딤돌

vscode를 이용해서 css를 이용할 때 배경색을 주기 위해서

background 또는 background-color를 이용합니다.

둘 다 배경색을 입혀줄 수 있다는 공통점이 있으나

둘의 차이점이 궁금해서 알아보았습니다.

TMI지만 저 같은 경우 처음에 배울 때 bgc를 입력해서 자동완성으로 하다 보니

항상 후자를 사용하고 있었습니다.

background와 background 둘 다 배경색을 줄 수 있다는 공통점은 있으나

background 같은 경우 배경색과 더불어 다른 옵션까지 줄 수 있습니다.

예를 들어 url를 준 경우이죠.

아래와 코드를 보게 되면

.bg{
  width: 150px;
  height: 150px; 
}
.background-color{
  background-color: pink;
}

.background{
  background: blue url("test.jpg") no-repeat left center;
}

background는 배경색과 더불어 url 사진까지 포함할 수 있습니다.

이렇게 말이죠 

가장 쉽게 생각하면 background-color는 뒤에 color는 옵션으로 생각해서

색깔만 줄 수 있다고 생각하시면 쉬우실 것 같습니다.

웹 페이지를 만들 때 어떤 거는 위치를 고정시키고 싶은 게 나올 수 있습니다.

가령 메뉴 같은 거는 위치를 고정시켜 스크롤을 내려도 있게 하는 등으로요.

이때 css를 통해서 위치를 고정시키는 방법이 있습니다.

먼저 순서는

fixed를 이용하는 방법과

z-index 순서대로 쓰도록 하겠습니다.

(색깔로 구분 지어놓겠습니다.)

간단하게 고정시키고 싶은 것을 css에서

position: fixed를 주면 되는데요.

예를 들어 메뉴를 고정시키고 싶은데

아무 조건이 없다면 다음과 같이 스크롤을 내리면

메뉴가 스크롤 된만큼 사라지는 것을 볼 수 있습니다.

이걸 간단하게

1. position: fixed

를 이용해서 할 수 있습니다. css 코드는 아래와 같습니다.

.menu{
    position: fixed;
    top:0;
    left:0;
    height: 80px;
    width: 100%;
    background-color: gray;
    
}

.test{
    height: 1500px;
}

이렇게 스크롤을 내려도 고정되어 있는 모습을 확인할 수 있습니다.

2. z-index

다음은 fixed와 그 외에 포지션과 같이 사용할 때입니다.

예를 든 상황으로는 각 각 일정한 크기의 div를 선언한

상태로 초기 상태는 아래 그림과 같습니다.

이후 position을 absolute를 준다음

각 각 left를 통해 크기를 변경해보면

 위 그림처럼 나오게 되는데요.

여기서 가운데 노란색을 나오게 하고 싶다

그렇다면 다른 두 div 보다 z-index를 주시면 됩니다.

숫자가 클수록 더 우선순위가 높은 것으로,

주의할 점은 px나 다른 단위를 붙이시면 안 됩니다.

일단 html 코드와 css 코드입니다.

html

<div class="A hei"></div>
<div class="B hei"></div>
<div class="C hei"></div>

혹시라도 해보고 싶으시다면 body 태그 안으로 위 3 div를 넣어주시면 됩니다.

css

.hei{
    height: 200px;
    width: 100px;
    float: left;
    
}

.A{
    position: absolute;
    left: 20px;
    z-index: 20;
    display: inline;
    background:red;
}

.B{
    left: 50px;
    position: absolute;
    z-index: 40;
    background-color: yellow;
}

.C{
    position: absolute;
    left: 100px;
    z-index: 30;
    background: green;
}

저는 가운데 div 노란색을 가장 앞으로 나오게 하고 싶어서 가장 높게 설정해주었습니다.

그럼 이렇게 노란색이 가장 크게 나오게 되죠.

원래 메뉴를 고정시키고 반응형으로 만들다 보니 상대적으로 포지션을 주었던 것 때문에

문제가 발생하다가 이렇게 알아보고 하게 되었습니다.

저는 메뉴를 fixed로 주고 그 아래 콘텐츠를 relative로 주었었는데요.

생각한 것처럼 하려다 보니 z-index를 사용해서 해결이 되었습니다.

저도 공부하는 입장이라 아직 부족하고 잘못한 코드가 있다면

댓글로 남겨주시면 감사하겠습니다.

안녕하세요 이번엔 반응형 중 PC 내에서 모바일 환경에 적용했을 시 확인하는 방법을

알아보겠습니다.

이 전에 저 역시 혼자 코드를 작성하고 나서 보면 데스크탑에만 맞추어서 하는

경향이 있었습니다. 하지만 모바일 기기로도 많이 사용하는 이 현실에

맞지 않은 것이었죠. 또 수정을 위해 몇 번이고 배포하고 제 휴대폰으로

보는 어리석은 짓을 했는데요.

크롬에서 모바일 환경을 확인할 수 있는 방법이 있는 걸 알았습니다.

네이버 웨일 역시 가능하구요.

그러니 그러는 분은 없길 바라겠지만 혹시라도 저처럼 배포 후 휴대폰으로

보시는 분이 있다면 이 방법을 사용하시면 되겠습니다.

크롬

먼저 크롬을 이용하는 방법인데요.

크롬을 설치하지 않으 신분이라면 크롬을 먼저 설치해주셔야 합니다.

이후 개발자 도구를 열어야 하는데 브라우저 오른쪽 상단을 보시면 도구 더보기인

다음과 같은 아이콘을 클릭해줍니다.

또는 F12 

단축키 ctrl + shift + i

도 있습니다.

이후 열리는 창에서 모바일 기기처럼 생긴 부분을 클릭해줍니다.

또는 개발자도구가 열린 상태에서 

ctrl + shift + m

을 클릭하셔도 됩니다.

그럼 이렇게 모바일 환경으로 변경된 모습을 확인할 수 있고 위에 선택을 통해

기기를 바꿀 수 있고 또 픽셀마다 다르게 할 수도 있습니다.

혹시라도 바꿨는데 변경되지 않으시다면 새로고침 F5를 눌러주시면 변경되는 것을

확인할 수 있습니다.

역시 끌 때에도 위에 단축키 또는 아이콘을 클릭해주시면 됩니다.

네이버 웨일

만약 네이버 웨일이 없으실 경우 네이버 웨일을 설치해주셔야 합니다.

이후 오른쪽 상단에 더보기 아이콘을 눌러주신 다음 바로 열리는 창에서

모바일 창을 클릭해주시면 됩니다.

안녕하세요 오늘은 반응형 웹에 대해 알아보도록 하겠습니다.

먼저 요즘은 데스크 탑 이외에도 스마트 폰 태블릿 등 다양한 모바일 기기의 이용이 늘어났는데요.

따라서 모바일 웹에 대한 관심도 많아지고 있는 상태입니다.

또한 각 기기마다 다르게 설정해주지 않으면 한쪽으로 치우쳐져 있는 모습을 발견할 수 있는데요.

현재 비주얼 스튜디오 코드로 작성한 사이트를 임의로 배포한 다음 

다른 모바일 기기로 들어가게 되면 한쪽으로 치우쳐져 있는 형태를 발견할 수 있습니다.

그리고 데스크 탑으로 네이버로 들어간 것과 다른 모바일 기기로 들어가 보면 레이아웃이

다른 걸 확인할 수 있는데요? 

개발자가 많은 곳은 따로 모바일 페이지를 만들어서 다르게 하는 곳도 있지만,

그렇지 않은 경우 한 HTML을 다른 모바일 기기마다 다르게 나오게 한답니다.

반응형 웹

여기서 확인할 수 있는데요.

반응형 웹이란 즉 디바이스 종류에 따라 웹페이지 크기가 자동적으로 변경되어 보이게 하여

사용자가 사용하는 기기에 최적화된 환경으로 보이도록 하는 방법입니다.

그렇다면 어떻게 사용하는 걸까요.?

비주얼 스튜디오 코드를 사용하시는 분이라면

아마 탭을 통해 만드실 텐데요.

viewport

그중 viewport 부분을 보실 수 있습니다.

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

이런 태그를 볼 수 있는데 이 메타 태그는 모바일 반응형을 만들기 위해서

필요한 태그입니다.

뷰포트는 웹 페이지에서 사용자에게 보이는 영역인데요. 각 기기마다 달라지는 것이죠.

기기마다 픽셀과 크기가 다르니깐요.

이를 지정해주는 역할을 하는 것이 해당 태그입니다.

속성으론 

width 뷰포트의 가로 크기

device-width 단말기의 물리적, 즉 실제 기기의 가로길이

initial-scale 페이지 처음 접속 시 보일 배율

이렇게 간단하게 세 가지만 알려드렸는데 이 외에도 많으니 사용하는 것에 따라

해당 부분을 변경해주시면 되겠습니다.

미디어 쿼리

viewport 태그를 작성했다면 이제 실제로 적용하기 위해서 사용하는 것은 바로 미디어 쿼리입니다.

미디어 쿼리를 적용하는 방법에도 css를 적용하는 것처럼 3가지 방법이 있는데요.

css에 스타일 적용하는 방법과 비슷하니 css파일 내에서 작성하는 방법으로

알아보도록 하겠습니다.

먼저 문법은

@media screen and (max-width: npx){ }

max-width 부분은 원하시는 걸로 바꾸실 수 있습니다.

max-width, max-height , device-width,aspect-ratio(width/height 비율)

등 사용할 수 있는 것들이 많기 때문에 이 부분은 간단하게 max-width로 하도록

하겠습니다.

html 코드

<!DOCTYPE html>
<html lang="kr">
<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="styles.css">
</head>
<body>
    <p id="test">안녕하세요</p>
</body>
</html>

이렇게 간단하게 html 코드를 작성해보았는데요.

css파일에 미디어 쿼리를 작성하는 것이니 반드시 link태그를 통해

연동시켜주셔야 합니다.

이후 css 코드입니다.

#test{
    font-size: 50px;
}


@media screen and (max-width:600px) {
    #test{
        font-size: 100px;
    }
}

이렇게 작성하여 웹페이지를 열어본 가로 크기를 조절해보시면 글씨 크기가

가로 크기에 따라 바뀌는 모습을 확인하실 수 있습니다.

아래 화면은 결과이며 그 아래는 개발자 도구로 바뀐 것을 확인하는 코드입니다.

1. 기본일 경우

2. 미디어 쿼리를 적용했을 경우

이렇게 실제 글씨 크기도 변경되고

기존 css는 줄이 그어지고 미디어 쿼리에 있는 것이 적용되는 것을 개발자 도구에서도

확인할 수 있습니다.

미디어 쿼리 옵션

그 외에 다른 분들 코드를 보게 되면 

@media only screen and(크기){}

이렇게 media 다음에 키워드를 볼 수 있는데요.

이 역시도 종류가 다양해서 몇 가지 알려드리자면

only 뒤의 조건만

not 뒤의 조건을 제외한 

all 모든 미디어 타입

등 다양한 키워드도 있습니다.

혹시라도 잘못된 것이 있다거나 다른 의견이 있으시다면 댓글로 남겨주시면 

감사하겠습니다.