[Pre-course] 웹 퍼블리싱 : html, css, JavaScript, jQuery, CSS 트랜지션(애니메이션), 미디어 쿼리

htm: HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.

head 안에 들어가는 대표적인 요소들

: meta, script, link, title 등. 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다.

body 안에 들어가는 요소들

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    a 태그입니다: <a href="http://google.com/" target="_blank">하이퍼링크</a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea></textarea>
</body>

</html>

정렬의 중요성

: 코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워짐 (맥북: cmd+K+F)

css

1. internal style: <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성하는 방법

<!DOCTYPE html>
<html lang="ko">
<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 rel="stylesheet" href="../pretty.css">
  <title>HTML & CSS 02-01-01</title>

  <style>
    .style-1 {
      color: olivedrab;
    }
  </style>

</head>

<b class="style-1">내부 스타일 시트(internal style sheet)</b>

2. linking style : style.css 파일을 따로 만들어 html 파일 head에 링크해주며 작성하는 방법

<!DOCTYPE html>
<html lang="ko">
<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 rel="stylesheet" href="../pretty.css">
  <title>HTML & CSS 02-01-01</title>

  <link rel="stylesheet" href="./01.css">

</head>
<body>

    <b class="style-2">링킹 스타일 시트(linking style sheet)</b>

css 코드 참고 예제

.box {
    background-color: green;
    color: white;

    width: 800px;
    height: 800px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.first {
    background-color: red;

    width: 300px;
    height: 200px;

    margin-bottom: 20px;
}

.second {
    background-color: blue;

    width: 200px;
    height: 200px;
}

html, css 실습

<!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>버튼 만들기</title>
    <style>

      body {
        width: 100%;
        height: 100vh;
      }

      .wrap {
        width: 100%;
        height: 100%;

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

      button {
        background: #ffffff;
        border: 1px solid #e8344e;
        box-sizing: border-box;
        border-radius: 20px;

        padding-top: 14px;
        padding-bottom: 13px;
        padding-left: 21px;
        padding-right: 21px;

        font-weight: bold;
        font-size: 16px;
        line-height: 19px;
        color: #e8344e;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <button>웹 퍼블리싱 정복반</button>
    </div>
  </body>
</html>

JavaScript

: 특정 요소에 역할(기능)을 부여할때 사용되는 언어. 주로 <script> 안에 작성되며, 선택자(Selector)로 특정 요소를 선택해 클릭과 같은 부가적인 기능을 추가하는 코드.

버튼에 클릭 이벤트 할당하기

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <button id="btn" type="button">버튼</button>
  
  <script>
    // id 가 btn 인 요소에 alert 을 표시하는 클릭 이벤트 부여하기
    document.getElementById('btn').addEventListener('click', function() {
      alert('버튼 클릭 이벤트');
    })
  </script>
</body>
</html>

jQuery

: Javascript를 좀 더 쉽게 다룰수 있도록 2006년에 출시된 자바스크립트 라이브러리.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <button id="btn" type="button">버튼</button>
  
  <script>
    // id 가 btn 인 요소에 alert 을 표시하는 클릭 이벤트 부여하기
    $('#btn').on('click', function() {
      alert('버튼 클릭 이벤트');
    })
  </script>
</body>
</html>

CSS 트랜지션(애니메이션)

: CSS 트랜지션은 주로 이전 스타일과 다음 스타일을 부드럽게 연결시켜주는 애니메이션을 구현할 때 주로 사용.

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어난다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어난다.

예시코드

https://mdn.dev/archives/media/samples/cssref/transitions/sample2/

Using CSS Transitions for Menus

mdn.dev

마우스 hover 애니메이션 (색깔 변화) 예제

1. css 활용

2. JavaScript 활용

3. class 활용

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />

	//jQuery 사용
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 간단한 버튼 hover 애니메이션 (색깔 변화) -->
    <div class="buttons">
      // 1. css 활용
      <button class="button use-css">웹 퍼블리싱</button>
      
      // 2. JavaScript 활용
      <button class="button use-javascript">왕초보 시작반</button>
      
      // 3. class 활용
      <button class="button use-class">웹개발 플러스</button>
    </div>
    
    //JavaScript linking
    <script src="script.js"></script>
  </body>
</html>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button {
  padding: 5px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #e8344e;
  background-color: white;
  border: solid 2px #e8344e;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;

  // all 은 컬러, 배경색상 모두에게 준다는 뜻
  // color 0.3s ease-in-out; 은 컬러만 준다는 뜻
}

/* button use-css */
.button.use-css:hover {
  background-color: #e8344e;
  color: white;
}

/* button use-class */
.button.use-class.on {
  background-color: #e8344e;
  color: white;
}

// button use-javascript
// mouseover, mouseout 시
// css 함수 사용
$(".button.use-javascript")
  .mouseover(function () {
    $(this).css({
      backgroundColor: "#e8344e",
      color: "white",
    });
  })
  .mouseout(function () {
    $(this).css({
      backgroundColor: "white",
      color: "#e8344e",
    });
  });

// button use-class
// mouseenter, mouseleave 시
// addClass, removeClass 함수 사용 css로 컨트롤
$(".button.use-class")
  .mouseenter(function () {
    $(this).addClass("on");
  })
  .mouseleave(function () {
    $(this).removeClass("on");
  });

드롭다운 예제

배운점:

마우스를 올리고, 클릭했을 때 아래와 같은 효과를 준다.

.dropbtn:hover,
.dropbtn:focus {
  background-color: #e8344e;
  color: white;
}

처음에는 보이지 않은 상태로

ul {
  display: none;
  list-style: none;

}

전체코드

<!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>
    <link rel="stylesheet" href="style.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 1. 제이쿼리 배우기, 간단한 예제로 클릭시 확장되는 드롭다운 샘플 -->
    <div class="dorpdown">
      <button class="dropbtn">수업탐색</button>
      <ul>
        <li><a href="#webpublishing">웹 퍼블리싱</a></li>
        <li><a href="#start">왕초보 시작반</a></li>
        <li><a href="#plus">웹개발 플러스</a></li>
      </ul>
    </div>

    <script src="script.js"></script>
  </body>
</html>

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  text-decoration: none;
  color: inherit;
}

.dropbtn {
  padding: 5px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #e8344e;
  background-color: white;
  border: solid 2px #e8344e;
  border-radius: 20px;
  transition: all 0.3s ease-in-out;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #e8344e;
  color: white;
}

ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  display: show;
  position: absolute;
  background-color: #f1f1f1;
  border-radius: 10px;
  box-shadow: 0px 8px 16px 0px #00000033;
  overflow: hidden;
}

ul li a{
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}

ul li a:hover{
  background-color: #fb6379;
  color: white;
}

$('.dropbtn').on('click', function (evt) {
  const ulElement = $('ul');
  
  // 단순 보이기 구현
  // ulElement.show();

  // 토글 기능 구현
  ulElement.toggle();
});

// Click Outside : 버튼 외부 요소 클릭시 드롭다운이 다시 닫히도록 할 경우 사용합니다.
// $(document).on('click', function (evt) {
//   if ($(evt.target).parents('.dorpdown').length === 0) {
//     $('ul').hide();
//   }
// });

미디어 쿼리

: 주로 화면 크기가 다른 장치(PC, 태블릿, 스마트폰) 마다 다른 디자인을 보여주기 위해 사용됨.

반응형 웹을 구현하기 위해 사용하는 대표적인 CSS 기술이다.
미디어 쿼리를 사용해 1개의 요소가 다른 디자인을 가질 수 있다.
즉, 일정 해상도(화면 크기) 에 따라 다른 CSS 코드를 가진다.
미디어 쿼리는 @media (max-width: 700px) { ... } 형태로 스타일 코드를 감싸야 한다.

최근 현업에서는 미디어 쿼리를 사용하지 않고 각 디바이스(PC, TABLET, MOBILE)을 완전히 분리해 만드는 방식으로 점점 변화하고 있다.

예제코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mediaquery</title>
    <style>
      html,
      body {
        display: flex;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
      }

      .buttons {
        display: flex;
        justify-content: center;
        width: 100%;
      }

      .button {
        width: 300px;
        padding: 5px 20px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        color: #e8344e;
        background-color: white;
        border: solid 2px #e8344e;
        border-radius: 20px;
        transition: all 0.3s ease-in-out;
      }

      /* button */
      .button:hover {
        background-color: #e8344e;
        color: white;
      }

      /* media query */
      /* 참고 MDN */
      /* https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries */
      /* https://developer.mozilla.org/ko/docs/Web/CSS/@media */

      /* 768px 이하일때 */
      /* button width 조정 */
      @media (max-width: 768px) {
        .button {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <!-- 미디어 쿼리와 반응형에 대한 개념. -->
    <div class="buttons">
      <button class="button">웹 퍼블리싱</button>
    </div>
  </body>
</html>

728x90

'부트캠프 개발일지 2023-2024 > Pre-course 사전학습' 카테고리의 다른 글

[Pre-course] 웹 퍼블리싱 : 퍼블리싱, Figma (1)	2023.10.03
[Pre-course] 웹개발 기초 : addDoc, getDoc, Github 배포, 파이썬 (0)	2023.10.03
[Pre-course] 웹개발 기초 : Firebase, Database, Firestore Database (데이터 넣기, 데이터 가져오기) (0)	2023.10.03
[Pre-course] 웹개발 기초 : Client-Server, Fetch (1)	2023.10.02
[Pre-course] 웹기발 기초 : JQuery 2 (1)	2023.10.01

Whereanna 🐈‍⬛

[Pre-course] 웹 퍼블리싱 : html, css, JavaScript, jQuery, CSS 트랜지션(애니메이션), 미디어 쿼리

'부트캠프 개발일지 2023-2024 > Pre-course 사전학습' 카테고리의 다른 글

티스토리툴바

[Pre-course] 웹 퍼블리싱 : html, css, JavaScript, jQuery, CSS 트랜지션(애니메이션), 미디어 쿼리

'부트캠프 개발일지 2023-2024 > Pre-course 사전학습' 카테고리의 다른 글

관련글

티스토리툴바