CSS 낙서 모음

64815 단어 CSSCSS

CSS (Cascading Style Sheets)

css 기본 개념 정리

헷갈릴때, 보면서 코딩하자

style.css

<link href="style.css" rel="stylesheet" type="text/css" />
link — link태그로 사용할 css파일을 링크해줍니다.
href — href 속성에 css 파일 경로를 작성합니다.
type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다. 여기서 css file을 연결하므로 type값은 항상 "text/css"입니다.
rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다.

font-family


font-family는 폰트 스타일을 지정하는 속성입니다.

#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}
Georgia, "Times New Roman", Times, serif 라는 값을 해석해보자면,

브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용
Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용,
이것도 지원되지 않으면 Times을 적용
앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.

주의) "Times New Roman"만 ""(쌍따옴표)로 감싸져 있는데, 폰트 이름에 띄워쓰기가 되어있으면 ""(쌍따옴표)를 사용해야합니다.

font-size

font-size 는 폰트의 크기를 지정해 줍니다. 폰트 크기 단위는 'px', 'em', 'pt'등 여러가지 있습니다

font-weight

.bold-font {
  font-weight: bold;
}
font-weight 는 글씨 두께를 조절하는 property입니다.
normal, bold, 100, 200, ... 900 등의 값이 지정될 수 있습니다.
숫자 400과 normal은 같은 두께입니다.
숫자 700과 bold는 같은 두께입니다.
보통은 두껍거나 or 아니거나 두가지 경우면 되므로 간편하게 bold 값을 지정합니다.

font-style

a {
  font-style: italic;
}
font-style 을 이용하여 글씨 스타일을 바꿀 수 있습니다. italic이라는 값을 지정하면 이탤릭체로 변하게 됩니다.

color


.pink {
  color: pink;
}
.yellow {
  color: yellow;
}
색상을 표현하는 방법에는 여러가지가 있습니다.

hex 색상코드: 여섯자리로 표현 - #eb4639

rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57)

hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)
아래 세가지는 모두 같은 색입니다.
h1 {
 color: #eb4639;
}
h1 {
 color: rgb(235, 70, 57);
}
h1 {
 color: hsl(4, 82%, 57%);
}

만약 hex 표현에서 rgb 표현으로 바꾸고 싶다면 google에 "color hex to rgb"라는 키워드로 검색해서 찾아보시면 됩니다.

Text Style

text-align


텍스트 정렬은 왼쪽정렬, 가운데정렬, 오른쪽 정렬이 있습니다. 
property 이름은 text-align이고 값은 left, center, right입니다. 
style.css에 특정 클래스이름으로 각각의 정렬 스타일을 작성해두었습니다.
.left {
  text-align: left;
}
.center {
  text-align: center;
}
.right {
  text-align: right;
}
모든 요소의 기본 정렬은 왼쪽 정렬입니다

<span>에 오른쪽 정렬이 되도록 클래스를 부여했지만, 오른쪽 정렬이 되지 않았습니다.
<span>은 inline-element이므로, 
"span의 오른쪽 정렬"이라는 text만큼 영역을 차지하고 있어 정렬이 되지 않습니다.

indent(들여쓰기)

text-indent 을 이용하여 css로 들여쓰기도 할 수 있습니다.
.js-description {
  text-indent: 50px;
}

blockquote 이란 태그는 인용구문을 넣을 때 쓰는 태그입니다.
<blockquote class="js-description"> </blockquote>

스페이스 넣고 싶으면   쓴다.

Margin & Padding

위의 그림에서 실질적인 박스가 차지하는 너비는
요소의 너비 + padding+ border가 합쳐진 만큼입니다.

css는 아래와 같다. 

p.example {
  width: 273px;
  height: 90px;
  margin: 50px;
  border: 5px solid black;
  padding: 50px;
테두리 바깥의 여백이 margin입니다.

p.example {
margin: 50px;
}
style.css에 작성된 margin에 50px이라는 값을 주었는데

요소의 사방에 50px의 영역이 생겼습니다.

위의 css를 풀어쓰면 아래와 같습니다.
p.example {
  margin: 50px 50px 50px 50px;
}

한 번 더 풀어쓰면 아래와 같습니다.

p.example {
  margin-top: 50px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-left: 50px;
}

padding 도 똑같은 문법으로 적용된다.

Border


p {
  border: 5px solid red;
}

span {
  border: 1px dotted #0000ff;
}

border순서는 중요하지 않습니다.

그래도 전 세계적으로 약속된 coding convention(코딩 규칙)에 따라 순서를 맞춰주는 것이 좋습니다.


선 스타일의 종류입니다.

dotted
dashed
solid
double
groove
ridge
inset
outset

이 중에 거의 solid만 사용하지만,

혹시 다른 선스타일도 사용할 경우가 있으니 다양한 스타일이 있다는 것만 알아두시면 좋겠습니다.

선 또한 윗 선, 오른쪽 선, 아래 선, 왼쪽 선 등 다양하게 스타일을 줄 수 있습니다.
blockquote {
  border-top: 4px double red;
  border-right: 2px solid #666666;
  border-bottom: 6px dashed darkviolet;
  border-left: 1px dotted #00ee44;
  
  border-radius: 5px; /*  테두리 반경 */
}


p {
   text-decoration: underline;
}
p태그에 밑줄을 쳐주는 스타일입니다.

그런데 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵습니다.

이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 칠 수 있습니다.

css 문법으로 볼 때는 밑줄이 아니라 아래쪽 테두리이지만

내가 원하는대로 디자인할 수 있으니 대부분의 개발자는 border-bottom로 구현하는 것을 선호합니다.

box-sizing


디자인만 보고 코딩하려면 머리속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 벌어지게 됩니다.

눈으로 보이는 그 너비가,

개발자가 코딩하는 그 값이여야 코딩과 머리속으로 생각하는 로직이 같아집니다.

수 많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었습니다.
.new {
  box-sizing: border-box;
}
이와 같이 보이는대로 width 값을 주고,

그 후에 그 안 쪽으로 padding을 주는 것이 생각하기에 쉽습니다.

그래서 거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용합니다.

또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지겠죠.

아래와 같은 "*" selector로 모든 태그에 적용할 수 있습니다.
*{
  box-sizing: border-box;
}
 개인 프로젝트나, 실무를 할 때는 꼭 적용해야하는 프로퍼티 입니다.

Inheritance(상속), 그룹

부모 태그의 속성(color)에 영향을 받아서 변한다. 하지만 본인의 요소(black)가 해당 속성(color)을 가지고 있으면, 본인의 스타일이 적용된다.

그룹은 그냥 한꺼번에 지정 가능하다는 걸 말한다. 

.what-is-blockquote, span {
  color: green;
}

CSS Specificity

selector 들에게 중복으로 적용되는 요소가 있는 경우에, 우선순위를 정한다. 

selector 표현마다 우선순위가 있습니다.

이 우선순위는 점수 계산으로 이루어집니다.

inline styling(13줄에 style 요소로 직접): 1000점
id: 100점
class: 10점
tag: 1점

근데 gap이 워낙 크고 class만으로도 충분히 나눌 수 있어서 알고만 있자

style.css 파일의 18번 째 줄에 css하나가 있습니다.

.container header p.title {
  font-size: 50px;
}

이 css가 적용되어 제목이 나올 수 있도록 html을 추가해주세요.

 <div class = "container"> 
      <header>
        <p class="title">
          안녕 
        </p>
      </header>
    </div>

이미지

태그로 이미지 넣기

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트
src: 이미지 파일 경로 or 이미지 url 주소
img 태그의 속성(attribute)에는 width, height가 있어서 html에서 직접 수정 가능합니다.

하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 style.css에서 작성하는 것이 좋습니다.
img {
  width: 150px;
}

background-image 로 이미지 넣기

일단 이미지를 넣을 영역이 필요해서 div 태그를 하나 추가해주었습니다.

<div class="bg-img">배경이미지</div>

결과화면을 보시면 "배경이미지"라고 텍스트가 있고 노랗고 까만 뭔가가 뒤에 깔려있습니다.

bg-img 클래스에 배경이미지를 넣는 css를 추가한 것입니다.
.bg-img {
  background-color: yellow;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1280px-HTML5_logo_and_wordmark.svg.png");
}
가로크기는 화면 저체이고, 세로 크기는 "배경이미지" 텍스트 높이 만큼이다.
div태그는 그 자식(내부 내용) 의 크기에 따라 바뀜. 
가로는 화면 전체 차지 한다. ( block element)


이미지 크기를 정할거면, 
이미지를 담는 공간 크기도 같이 정해야 한다.

div 크기 설정도 중요하다는 말. 
.bg-img{
background-size : 100%
}
위 코드는 해당 이미지가 div의 가로 크기만큼 꽉 채워서 그려주라는 의미

Semantic Web / Semantic Tag

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

시멘틱 웹은, 웹에 존재하는 많은 웹페이지들에 접근할 때, 무수히 많은 불필요한 정보들이 나와 이를 가공하기 위해 '의미'와 '연관성'을 가지는 데이터 베이스를 구축하려고 하는 발상이다.
한마디로 '의미론적인 웹'이다.

   시멘틱 웹을 만들기 위해서는 이를 구성하는 태그 그 자체로 어떤 의미를 지녀야 하며, 이를 시멘틱 태그라고 한다.
이렇게 의미를 부여하는 과정을 통해서, 나에게 필요한 정보로의 정확한 접근이 가능해진다. 


<img>라는 것은 그 자체로 이미지를 뜻하고, <background-image>는 배경색을 뜻한다.

url , src 가 같은 화면을 띄운다고 해도, 후자는 배경을 꾸미기 위한 수단일 뿐이라 의미있는 컨텐츠라고 할 수 없다.

Block & Inline

대부분의 HTML element(이하 요소)는 block 요소이다.

<header>, <footer>, <p>, <li>, <table>, <div>, <h1> 
같은 요소들 옆에는 다른 요소를 붙여 넣을 수 없다.

inline 이라는 말 그대로 서로 한줄에, 바로 옆에 위치 할 수 있다.

inline-block 기본적으로 inline 처럼 전후 줄바꿈 없이 나란히 배치된다. 하지만 inline 에서 불가능하던 width, height, margin, padding 속성 지정 가능함. 

<button>,<input>,<select> 같은 요소

none 안보이게. 보였다 안보였다 하기 위해서 다른 요소랑 같이 많이 쓴다.
스타일은 바꿀 수 있다.
이를 위한 CSS property는 display 와 float 이 있다.

margin

block 요소는 원래 좌우 끝까지 다 차지하는데, width가 부여되면 더이상 안늘어난다.

이때 margin에 auto로 설정하면 요소를 가로 중앙에 오게 할 수 있다.

margin은 위/오/아래/왼 4개 순서로 주는데.
2개 값만 있을때는 위/아래 , 왼/오 에 주는 값이 된다. 

.center {
 margin: 20px auto;
}

List

<ol>,<ul>
<li>

앞에 기본으로 나오는 기호 없애고, list들을 싸고 있는 ul의 왼쪽 경계에 선 긋기

ul {
  list-style: none;
  border-left: 3px solid black;
}

각각의 리스트 간격 띄우기 

li {
  padding-bottom: 10px;
}

해당 태그의 첫번째인지, 마지막읹, 홀수/짝수 인지 알 수 있는 표기법 (tag .class #id 다 가능)

Table

<table>, <tr>(table row), <td>(table data), <th>(table heading)

테이블은 항상 <table> 태그로 감싸져 있다.
 
  한 행을 시작할때 <tr>(table row)로 시작
  각각의 셀은 <tr> 태그 안에 <td>(table data) 태그 사용
<table>
    <tr>
      <td>Row 1, column 1</td>
      <td>Row 1, column 2</td>
    </tr>
    <tr>
      <td>Row 2, column 1</td>
      <td>Row 2, column 2</td>
    </tr>
  </table>

<table>
  <tr>
    <th></th>
    <th>Dog</th>
    <th>Cat</th>
  </tr>
  <tr>
    <th>종</th>   
    <td>Canine</td>
    <td>Feline</td>
  </tr>
  <tr>
    <th>짖는소리</th>
    <td>Bark</td>
    <td>Meow</td>
  </tr>
  <tr>
    <th>Immature</th>
    <td>Puppy</td>
    <td>Kitten</td>
  </tr>
</table>

<td> 대신 <th>(table heading) 사용 
css 적용할때는, <table>태그에 class 부여하고나서, style.css 가서

.border-table th, .border-table td {
  border: 1px solid black; 
}

병합

<rowspan> : 행 병합
<colspan> : 열 병합

<table class="border-table">
      <tr>
        <th></th>
        <th>내용</th>
        <th>장소</th>
      </tr>
      <tr>
        <th>1시</th>
        <td>HTML이란</td>
        <td>101호</td>
      </tr>
       <tr>
        <th>2시</th>
        <td rowspan="2">HTML실습</td>
        <td>102호</td>
      </tr>
       <tr>
        <th>3시</th>
        <td>103호</td>
      </tr>
      <tr>
        <th>4시</th>
        <td>CSS란</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>5시</th>
        <td>CSS실습</td>
        <td>104호</td>
      </tr>
      <tr>
        <th>6시</th>
        <td colspan="2">수업 없습니다.</td>
      </tr>
    </table>

테이블 전체나 각각의 td th에다 클래스 줘서 css 적용 가능

input

사용자가 직접 텍스트를 입력할 수 있는 <input>, <textarea>

input 태그는 시작, 끝 태그가 없다. 하나의 태그가 하나의 요소임

<input type="text" placeholder="ID"> 
<input type="password" placeholder="비밀번호"> 
<input type="number" placeholder="학번">

type="text"
text를 입력하는 속성
대부분의 input type은 text다. 어느 텍스트나 입력할 수 있다.
이름, id, 주소, 닉네임 등을 입력 받을 때 사용한다.

type="password"
text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나옴
남이 보지 않도록 처리한 것
화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있다.
3
type="number"
숫자만 입력할 수 있음
만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없다.

placeholder
도움말을 넣어주는 부분
실제 input에 입력되어있는 텍스트가 아님

input에 미리 값을 써놓고 싶을때는 value라는 속성 사용한다.

textarea

textarea 태그는 input보다 더 긴 텍스트 입력받고 싶을때 사용한다.
보통 짧은 방명록이나 댓글 입력할때 씀

소개는 그냥 글씨

디자인 변경

input, textarea, button은 모두 inline element라서 한 줄에 이어서 나옴. 그래서 div 태그로 감싸서 분리해서 많이 쓴다. 


<input> 과 <textarea> 의 가로 길이가 모두 제각각 인것을 통일시켜봅시다.

여러 방법이 있습니다. 

1. <input>, <textarea> 에 같은 width 값을 부여한다.
2. 부모에 width 를 주고 <input> , <textarea> 의 width 는 100%로 설정한다.

2의 방법이 더 수정하기 편하다. 
.survey-container {
 width: 200px;
}
input, textarea {
 width: 100%;
}
.survey-container 가 가운데로 올 수 있도록 margin 도 추가해주세요.
.survey-container {
  margin: 100px auto;

input 요소끼리 띄우고, 글자 키우고, 테두리 반경 둥글게

input, textarea {
  font-size: 13px;
  margin-bottom: 5px;
  border-radius: 5px;
}

placeholder 속성 css 바꾸기 

input::placeholder {
  color: #bbb;
}

input type 중에 text만 스타일 입히고 싶으면,

input[type="text"]::placeholder {
  color: red;
}

button 스타일

글자크기, 글자색, 버튼배경색, 테두리 반경, 패딩 바꾸고,
버튼에 마우스 올리면 커서 모양으로 바뀌는 호버 설정

hover : 마우스를 올렸다는 뜻 

button{

 color:white;
 font-size:15px;
 background-color:#4CAF50;
 padding: 5px 10px;
 border-radius : 5px;
 
}
button:hover{

 cursor:pointer;
 opacity:0.8;
}

cursor : col-resize 등 여러가지 많다. 
opacity는 해당 요소를 불투명하게 만듬. 0.8은 백분율값. 원래 스타일에서 80% 만큼 흐리게 한다는 말. 0% 만들면 안보인다.

Position

position: static (기준 없음);
position: relative ;(요소 자신을 기준으로 배치)
position: absolute;(부모 요소를 기준으로 배치)
position: fixed;(뷰포트를 기준으로 배치)

4개가 있는데 static은 거의 사용 안한다.

딱히 어느 위치로 이동 하지는 않고, 위치 이동시켜주는

top (기준 윗쪽 끝에서의 거리(사이 길이)) 음수로 써야 위로 올라감.
right (기준 오른쪽 끝에서의 거리)
bottom (기준 아랫쪽 끝에서의 거리)
left (기준 왼쪽 끝에서의 거리)

가 있어야 한다.

position : absolute;

부모 중에 position이 relative, fixed, absolute 하나라도 있으면 그 부모에 대해 절대적으로 움직이게 됨.

absolute를 쓸 경우, 일반적으로 기준이 될 부모에게 position: relative; 를 부여한다.

relative

html

<div class="grand-parent">
    <div class="parent">
        <div class="child">1</div>
        <div class="child relative">2</div>
        <div class="child">3</div>
    </div>
</div>

css

.relative {
    position: relative;
    left: 100px;
    top: 5px;

자기 자신만 relative걸고 원래 있어야 할 자리 기준으로
왼쪽으로 100만큼 거리두고
위에서 5만큼 거리 둬서 이동함

absolute

어떤 부모를 기준점으로 삼을 지가 중요하다.

1. parent 를 기준으로 삼을 때
2. grandparent를 기준으로 삼을 때
3. 부모가 다 뒤져봐도 기준이 없을 때 (그냥 쓰는데 뷰포트 처럼 된다)
4. 뷰포트를 기준으로 삼을 때

1번

.parent{

/* 다른 코드 */
position : relative;
}
.absolute {
   /* 다른코드 */
   position: absolute;
   bottom: 5px;
   right: 5px;
}


2번

.grand-parent{
 
 /* 다른 코드 */
 position : relative;
 }
 .absolute {
    /* 다른코드 */
    position: absolute;
    bottom: 0px;
    right: 0px;
}

안쪽 부모(parent)(까만선) 기준으로 밑, 오른쪽으로 0만큼 거리두고 배치

위 처럼 grand-parent 부모 기준으로 bottom, right 으로 거리 만큼 두고 배치

3번은 자기한테만 absolute 걸면 된다.

4번

.fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
}

부모 영향 받지 않고 화면 기준으로 오른쪽 아래에 있다.

flex

레이아웃 만드는 속성

flex 있으면 마진, absolute 이런거 안해도 원하는대로 배치 가능

특히 가로 정렬 할 때 유용하다.

flex 속성은 크게

justify-content(좌우)
align-items(상하)

가 있다. 


.wrapper{
display:flex;
justify-content : flex-start /*왼쪽 정렬*/
justify-content : flex-end/*오른쪽 정렬*/
justify-content : space-around/*영역(부모) 안에서 각각의 자식들이 마진을 가지게 함*/
justify-content : space-between/*영역 안에서 좌우 끝 마진은 사라지고 자식들 사이 마진만 가지게 함. 제일 많이 쓴다. */
justify-content : space-evenly /* 모든 공간이 동일하게 마진을 가짐 */
justify-content : center /*가운데 정렬*/'

부모 안의 자식들이 어떻게 정렬될 건지 정한다.

부모에 flex 걸면 바로 밑의 첫번째 자식들한테만 적용된다.

속성들도 flex 걸린 부모한테 같이 건다.

flex는 기본적으로 좌, 위에 맞춰서 정렬되어 있다.

align-items도 justify-content랑 같은데 이건 위아래로 작용한다고 보면 된다. 


.wrapper{
display:flex;

align-items : flex-start/*기본값이 위쪽 기준이라 별 차이없음*/
align-items : flex-end/*아래쪽으로 붙어서 정렬된다.*/
align-items : center/*위 아래 정렬이 중간으로 맞춰짐*/

기타 속성들)


flex-direction

flex-direction : row; 행(가로) 방향으로 세운다.
flex-direction : column; 열(세로) 방향으로 세움
flex-direction : row-reverse; 행으로 나열하는데 반대 순서로 
flex-direction : column-reverse; 열방향으로 세우는데 반대 순서로

align-content

flex-start:  여러줄들을 꼭대기에 정렬한다.
flex-end : 여러 줄들을 바닥에 정렬한다.
center : 여러 줄들을 세로선상 가운데에 정렬한다.
space-between:여러 줄 사이에 동일한 간격을 둔다.(양끝)
space-around: 여러 줄들 주위에 동일한 간격을 둔다. 
stretch: 여러 줄들을 컨테이너에 맞게 늘림(기본값)

align-self(각각) : align-items 가 받는 값들을 인자로 받음.
같은데 지정한 요소(자식)에만 적용

wrapper 클래스 부모안에 1,2,3 자식이 있고

justify-content: space-between 속성을 쓴 것

order(순서)

순서를 정할 수도 있는데, flex 적용될 자식에

order:3 이런식으로 직접 쓴다. 숫자가 곧 순서이고 작은 값이 먼저 온다.
기본 값은 order:0이다.

그래서 특정 아이템을 앞으로 옮기고 싶을 때는 음수로 쓴다.

✔flex-wrap (여러 줄로 정렬)

flex-wrap : nowrap ; (모든 요소들을 한 줄에 정렬)
flex-wrap : wrap ; (요소들을 여러 줄에 정렬)
flex-wrap : wrap-reverse ; (요소들을 여러 줄에 반대로 정렬)

✔flex-flow(두개 합친 것)

flex-direction과 flex-wrap 두개는 같이 자주 쓰여서
동시에 인자로 받는 속성

flex-flow : row wrap ;

float

예전에 레이아웃 잡는데 자주 썼다. 요새는 flex써서 이건 잘 안씀

이건 잘 모르겠다. 나중에 다시 봐야지

Responsible Web(반응형 웹)


@media only screen and (max-width: 480px) {
	body {
		font-size: 12px;
	}
}

*@media : 이 키워드는 media 쿼리를 시작하겠다는 의미입니다.

only screen : 어떤 디바이스에서 적용하는지 알려줍니다. 예를 들면 프린트를 하고싶을 때 적용하려면 only print라고 작성하면 됩니다.
screen이라고 할 경우 어떤 디바이스에 상관없이, 화면에 보이는 스크린이기만 하면 전부 적용됩니다.

and (max-width : 480px) : 이건 media feature라고 불리는 부분입니다. 어느 조건에 아래의 css를 적용할지 작성해줘야 합니다.

@media only screen and (min-width: 320px) and (max-width: 480px)

Weegle

position , flex 활용해서 만들기