웹개발 기초/html_css

반응형웹, 미디어쿼리

미미_밍 2024. 2. 13. 01:27

1) input 태그
<input type ="사용할타입" />
text : 텍스트 형태로 사용자에게 입력 받는다
password : 패스워드를 입력받는다
date:  년, 월, 일을 선택하여 입력받는다
submit :  전송버튼을 만든다
reset :  리셋버튼을 만든다
file : 첨부파일 버튼을 만든다
hidden : 화면에 보이지 않는 칸을 만든다
radio : 라디오 버튼을 만든다(여러선택지 중 하나만 선택한다)
checkbox : 체크박스 버튼을 만든다(여러 선택지 중 여러개 선택한다)

2) label 태그
<label for="name">이름 : 
<input type ="" id="name" />
</label>
-> input 태그와 연결된다. 정확히 칸을 누르지 않아도 이름: 을 누르면 작성가능 


3) fieldset과 legend
fieldset은 여러 label을 묶을때 사용한다 ( 폼 요소를 그룹으로 묶는다)
legend는 fieldset의 설명을 나타낸다 (묶음 폼 요소의 제목이라 할수 있음) 



1. form
1) textarea 태그
<textarea cols ="가로너비" rows ="세로 길이">내용</textarea>
텍스트를 여러줄로 입력하는 영역을 만드는 태그

2) select, option 태그
여러 옵션중 하나를 선택하는 드롭다운 목록을 만드는 태그
<select>
<option value ="값1">내용1</option>
<option value ="값2">내용2</option>
</select>

option태그의 value가 실질적으로 서버에 넘어가는 값이다
selected 속성을 이용하면 페이지 진입시 선택되는 옵션을 설정할 수 있다

3) button태그
<button type="submit | reset | button">내용</button>
버튼을 만드는 태그이다

2. 반응형 웹
반응형(reponsive) 웹
사용자의 화면 크기에 반응하는 사이트를 만들게 된다
반응형 웹 사이트 : 기존 내용을 그대로 유지하면서 사용자의 화면 크기에 맞게
재배치하고 다시 표현한다

viewport(뷰포트)
사용자 기기에서 실제 내용이 표시되는 화면 영역
pc와 모바일의 뷰포트는 크기가 다르기 때문에 반응형 웹에서 그에 맞는 화면을 보여줘야한다

뷰포트 메타태그
<meta name="viewport" content="속성1=값1, 속성2=값2,...">
뷰포트를 지정하는 태그

뷰포트 메타태그의 속성


width
뷰포트 너비를 설정한다
device-width값을 주면 디바이스의 너비에 맞게 설정된다


height
뷰포트 높이를 설정한다
device-height 값을 주면 디바이스의 높이에 맞게 설정된다


user-scalable
확대, 축소 가능 여부를 설정한다
yes, no로 설정한다(기본값 yes)


initial-scale
처음 페이지 진입시 확대, 축소값을 설정한다
1~10까지로 설정한다(기본값 1)


maximum-scale, minimum-scale
최대, 최소의 확대 비율을 설정한다

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

뷰포트 단위
vw(veiw width)
100vw = 뷰포트 너비의 100%
vh(veiw height)
100vh = 뷰포트 높이의 100%
vmin(view minimum)
1vmin = 뷰포트 너비, 높이 중 작은 값의 1%
vmax(view maximum)
1vmax = 뷰포트 너비, 높이 중 큰 값의 1%

3. 미디어 쿼리
반응형 웹을 만들기 위한 가장 기본적인 방법이다
사용자의 디바이스 뷰포트에 따라 다른 css를 적용할 수 있다
@media 속성을 사용하여 특정 디바이스에 어떤 css를 적용할 지 설정한다

@media [only|not] 미디어(디바이스) 유형 [and 조건] * [and 조건]

[only|not]
특정 디바이스 유형만 적용시키거나 적용시키지 않을 디바이스를 설정할 수 있다
잘 사용하지 않는다

미디어 유형
여러 디바이스 유형을 설정할 수 있으나 보통 all 또는 screen을 사용한다
all : 어떤 유형이든 다 적용한다(기본값)
screen : pc나 모바일 유형을 의미한다

ex)  @media all {}
ex)  @media (width:400px) {}

and
조건을 추가할 때 사용한다

미디어 쿼리의 조건으로 사용하는 가로 너비, 세로 높이 속성
width, height : 너비와 높이(길이)
min-width, min-height : 최소 너비와 길이
max-width, max-height : 최대 너비와 길이

+) float 속성
원래 이미지와 텍스트 배치 용도로 등장했지만 요즘에는 레이아웃용으로 많이 사용하고 있다

inherit : 부모요소에서 상속
left : 왼쪽에 블록박스를 생성, 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로
right : 오른쪽에 블록박스를 생성, 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로
이후 요소에 clear 속성이 있으면 페이지 흐름이 달라지고
none이 아니라면 display 속성은 무시된다
none : 요소를 부유시키지 않음


4. css의 우선순위
1) 속성값 뒤에 !important 를 붙인경우
2) 인라인 스타일을 적용한 경우
3) 선택자로 id를 사용한 경우 #id명
4) 선택자로 class를 사용한 경우 .클래스명
5) 선택자로 tag를 사용한 경우 태그명

우선순위가 같다면 선택자를 상세하게 작성한 css가 적용된다
선택자도 동일하다면 나중에 작성한 css가 적용된다 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>폼에서 사용한느 기타 태그들</legend>

            <ul>
                <li>
                    <label for="textarea">자기소개</label>
                    <br/>
                    <textarea name="introduct" id ="textarea" cols="30" rows="10">자기소개</textarea>

                </li>
                <li>
                    <label for="select">드롭다운 목록</label>
                     <select name="" id="select">
                        <option value="" selected>선택하기</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                     </select>
                </li>
            </ul>
            <button type="button">버튼이다</button>
        </fieldset>
    
    </form>
</body>
</html>


- form, fieldset 연습 label 은 id 와 연결 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }

        section{
            display: flex;
            justify-content: center;
            align-items: center;
        }

        div{
            /* div 요소의 크기가 뷰포트에 따라 바뀌는 이유는 부모 요소가 flex 이기 때문이다. 자식요소의 크기를 고정시키고 싶다면 flex:none 으로 주면 된다. */
            /* flex: none; */
            background-color: green;
            margin: 10px;
            border: 1px solid black;
            /* width: 150px;
            height: 150px; */
            /* 뷰포트 단위를 사용하면 디바이스 뷰포트와 상관없이 요소를 정사각형으로 잘 표현할 수 있다. */
            width: 20vw;
            height: 20vw;

        }
    </style>
</head>
<body>
    <main>
        <h1>내 사이트</h1>
        <hr>
        <section>
            <span>
                1.동행물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세
                무궁화 삼천리 화려강산 대한살마 대한으로 길이 보전하세 
                2.남산위의 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세
                무궁화 삼천리 화려강산 대한사람대한으로 길이 보전하세 

            </span>
        </section>
        <section>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            <div class="div4"></div>
        </section>
    </main>
</body>
</html>

-뷰포트 연습 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>responsive</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        section{
            display: flex;
            justify-content: center;

        }

        div{
            background-color: blue;
            width: 20vw;
            height: 20vw;
            margin: 10px;

        }

        /* 이경우 정확히 300px 인 경우만 적용됨. 사용 불편
         */
        /* @media (width: 300px){  */
            @media (max-width:300px)and(min-width:250px){
            body{
                background-color: red;
            }

            section{
                flex-wrap: wrap;
            }

            div{
                background-color: grey;
                width: 40vw;
                height: 40vw;
            }
            }
     
    </style>
</head>
<body>
    <main>
        <section>
            <div class="div1"></div>
            <div class="div2"></div>
            <div class="div3"></div>
            <div class="div4"></div>
        </section>
    </main>
   
</body>
</html>

-미디어쿼리 연습 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float</title>
    <style>
        main{
            height: 300px;

        }

        .menneu{
            width: 300px;
            height: 40px;
            border: 3px solid  black;
            background-color: beige;
        }

        .main .left-mennue{
            float: left;
            width: 50px;
            height: 260;
            border: 2px solid black;
            background-color: orange;
        }

        .main .content{
            float: left;
            width: 240px;
            height: 250px;

        }

        .main .content .article{
            height: 200px;
            border: 1px solid black;
            background-color: darkblue;
        }

        .main .content .comment{
            height: 50px;
            border: 2px solid black;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <main>
        <div class="menneu">menneu</div>
        <div class="main">
            <div class="left-menneu"></div>
            <div class="content">
                <div class="article">article</div>
                <div class="comment">comment</div>
            </div>
        </div>
    </main>
</body>
</html>

-float , 고급선택자 연습 

-float 요소를 떠 있게 한다. (relative 한 상태임으로 absolute 지정 x)

 

 

'웹개발 기초 > html_css' 카테고리의 다른 글

css 마무리 실습  (1) 2024.03.06
가상선택자,transform,애니메이션,form  (1) 2024.02.12
position , 고급선택자  (1) 2024.02.12
display: flex  (0) 2024.02.12
css 인라인 ,블록요소 ,박스모델  (0) 2024.02.12

'웹개발 기초/html_css'의 다른글

  • 현재글반응형웹, 미디어쿼리

관련글

티스토리툴바