web 기초/화면관련 실습

Algo rhythm·2022년 5월 31일

@media html

web 기초

목록 보기

6/15

display

none : 보이지 않게 함
visibility : 보이게(기본 값)
block : 박스형태의 공간
inline : 컨텐츠를 작성하는 공간
inline-block : 박스형태의 컨텐츠를 작서하는 공간

block

height 값을 지정할 수 있음
margin / padding 을 지정할수 있음

inline 의 특징

width / height 값을 지정할 수 없음
margin 은 위 아래 지정이 불가

inline-block

줄바꿈이 일어나지 않음
크기가 조절은 되지만 지정하지 않으면 컨텐츠 만큼만 잡힘

border

외곽선
border : 1px #000000 solid;
border-style: 외곽선의 스타일 조정
border-top-style : 상부 외곽선의 스타일 조정
border-right-style : 우측부 외곽선의 스타일 조정
border-bottom-style : 하부 외곽선의 스타일 조정
border-left-style : 좌측부 외곽선의 스타일 조정
border-radius : 10px => 곡선
border-style: dotted => 둥근 점선으로 이뤄진 외부선
border-style: dash => 직사각형 점선의 외부선
border-style: solid => 직선의 외부선
border-style: double => 이중의 외부선
border-style: groove => 3d외부선
border-style: ridge => 튀어나온 듯한 외부선
border-style: inset => 요소가 들어간 듯한 착시
border-style: outset => 요소가 나온 듯한 착시

<!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>
<body>
  <style>
    div{
      margin-top: 10px; /* 상단만 문장간 띄우기 */
      width: 300px;
      padding: 10px;
    }
    .border-dotted{
      border-style: dotted;
      border-color: red;
      border-radius: 20px; /* 모서리 둥글게 */
      border-width: 5px; /* 선 굵기 */
    }

    .border-dashed{
      border-style: dashed;
    }

    .border-solid{
      border-style: solid;
      margin: 10px 20px 30px 40px; /* 상 우 하 좌 */
    }
  </style>

  <div class="border-dotted">div1</div>
  <div class="border-dashed">div2</div>
  <div class="border-solid">div3</div>
  <div class="border-double">div4</div>
  <div>div5</div>
  <div>div6</div>
</body>
</html>

margin 여백

margin : 영역 외부의 여백
margin-top : 상부 영역 외부의 여백
margin-left : 좌측부 영역 외부의 여백
margin-right : 우측부 영역 외부의 여백
margin-bottom : 하부 영역 외부의 여백
margin: top right bottom left => margin 입력 순서 확인
margin: top (right & left) bottom => 숫자 세 개를 입력하면 인식되는 방식
margin: (top & bottom) (left & right) => 상하, 좌우가 한 세트로 입력 가능
margin: all => 기본 값

padding 영역 내부의 여백

영역 내부의 여백의 크기를 조절 가능

위치지정

top : 요소의 위치를 상부 이동
bottom : 요소의 위치를 하부 이동
left : 요소의 위치를 좌측부 이동
right : 요소의 위치를 우측로 이동
overflow : auto / hidden / scroll => 요소끼리 영역이 겹치게 됨
overflow-x , overflow-y => x축, y축 스크롤 생성
position : absolute / fixed / relative / static => 요소의 위치 지정 방식

<!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>
<body>
  <style>
    .div1{
      display: inline-block;
      width: 300px;
      height: 100px;
      background-color: blue;
      text-align: center;
      color: white;
      line-height: 100px; /*글자의 상하 중앙정렬*/
    }
    .div2{
      display: inline-block;
      position: absolute; /*가장 가까운 부모 태그를 기준으로 정렬*/
      width: 100px;
      height: 300px;
      background-color: greenyellow;
      text-align: center;
      color: white;
      line-height: 300px; /*글자의 상하 중앙정렬*/
    }

    .pic{
      display: inline-block;
      position: absolute;
      width: 200px;
      height: 200px;
      left: 100px;
      top: 100px;
    }

    .div3{
      display: inline-block;
      position: absolute;
      width: 100px;
      height: 300px;
      right: 300px;
      top: 100px;
      text-align: center;
      line-height: 300px; /*글자의 상하 중앙정렬*/
      background-color: red;
    }
    .div4{
      display: inline-block;
      position: absolute;
      width: 300px;
      height: 100px;
      left: 100px;
      top: 300px;
      text-align: center;
      line-height: 100px; /*글자의 상하 중앙정렬*/
      background-color: pink;
    }

    .container{
      width: 400px;
      height: 400px;
      border: 1px black solid;
      position: relative;
    }
  </style>

  <div class="container">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="pic"><img src="../html/choi.jpg" alt="" width="200px" height="200px"></div>
  </div>
</body>
</html>

<!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>
<body>
  <style>
    .container{
      width: 250px;
      height: 340px;
      background-color: grey;
    }

    .hi{
      color: white;
      padding: 10px;
      background-color: blue;
      height: 30px;
      line-height: 30px;
    }

    .colorCopy{
      padding: 10px;
      height: 30px;
      line-height: 30px;
    }

    .park{
      padding: 5px;
      margin: 20px;
      background-color: white;
      width: 200px;
    }
    .ahn{
      padding: 5px;
      margin: 20px;
      background-color: white;
      width: 200px;
    }

    .lee{
      padding: 5px;
      margin: 20px;
      background-color: white;
      width: 200px;
    }
  </style>
  <div class="container">
    <div class="hi">최도근님, 안녕하세요?</div>
    <div class="colorCopy"><b>페이스북 색감따라하기</b></div>
    <div class="park"><b>박지성</b> SBS에서 월드컵보세요!</div>
    <div class="ahn"><b>안정환</b> MBC죠...</div>
    <div class="lee"><b>이영표</b> KBS는 수신료의 가치를...</div>
  </div>
</body>
</html>

media quary 연습

if문 처럼 웹화면의 크기 변화에 따라 달라지는 변화를 설정 가능
여기선 웹페이지 크기에 따라 배경색의 변화를 설정

<!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>
<body>
  <style>
    @media (max-width: 1280px){
      body{
        background-color: pink; 
      }
    }

    @media (max-width: 600px){
      body{
        background-color: blue;
      }
    }
  </style>
</body>
</html>

filter 이미지 수정

brightness : 밝기 조절
drop-shadow : 아래방향 그림자
saturate : 색감
sepia : 차이 분간 안됨

<!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>
<body>
  <style>
    img{
      filter:brightness(80%) drop-shadow(5px 5px 5px gray) saturate(100%) sepia(50%);
      width: 40%;

    }
  </style>
  <h1>태초의 계란</h1>
  <img src="../html/eggKim.jpg" alt="">
</body>
</html>

웹페이지 실습

<!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>
<body>
  <style>
    .container{
      width: 100%;
      position: relative;
    }
    .header{
        background-color: rgb(36,37,52);
        height: 40px;
        border: 1px;
    }
    .headerLeft{
      font-size: 15px;
      color: white;
      line-height: 35px;
      padding-left: 5px;
      display: inline-block;
    }
    .headerRight{
      display: inline-block;
      float: right;
      line-height: 35px;
      color: rgb(139,142,147);
    }
    td{
      font-size: 20px;
      padding-right: 25px;
    }
    .background{
      position: absolute;
      width: 100%;
      top: 100%;
      z-index: -1;
    }
    .main{
      position: absolute;
      left: 40%;
      z-index:10;
      top: 40%;
      color: white;
      text-align: left;
      font-size: 25px;
    }
    b{
      color: darksalmon
    }
    .go{
      position: absolute;
      z-index: 15;
      left: 45%;
      top: 55%;
    } 
    .btn{
      background-color: rgba(0,0,0,0);
      padding: 8px;
      border: 1px white solid;
      color: white;
    }
  </style>

  <div class="container">
   <div class="header">
     <div class="headerLeft">
      ★
     </div>
     <div class="headerRight">
      <table>
        <tr>
          <td>Home</td><td>About</td><td>Projects</td><td>Contact</td>
        </tr>
      </table>
     </div>
   </div>
   <div class="background">
     <img src="https://www.10wallpaper.com/wallpaper/1366x768/1701/Galaxy_Universe_Star_Clusters-Space_High_Quality_Wallpaper_1366x768.jpg"
    width="100%" height="100%"
     alt="">
    <div class="main">
      <p>안녕하세요, 제 이름은 <b>윤수병입니다.</b> <br>저는 개발자를 목표로 공부하고 있습니다.</p>
    </div>
    <div class="go">
      <a href="https://www.youtube.com/c/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C%EC%83%9D%EC%A1%B4%EC%BD%94%EB%94%A9"><input type="button" value="View my Work ➤" class="btn" ></a>
    </div>
   </div>
  </div>

</body>
</html>