웹 퍼블리싱 정복반 - 1주차

새벽로즈·2023년 9월 11일

CSS TIL html 내일배움캠프 내일배움캠프 사전캠프 웹 퍼블리싱

TIL

목록 보기

5/72

본 과정은 내일배움캠프 웹개발 사전캠프로 지급받은 강의의 내용을 바탕으로 정리한 글입니다.

퍼블리싱 개념

퍼블리싱 : 디자이너가 제작한 그래픽 데이터를 html + css + js로 변환해서 브라우저에 표현하는 것

HTML : 기본 뼈대
CSS : 스타일을 입힘
부가기능 : JS로 특정요소에 기능을 만들거나 부여함

피그마

하나의 툴로 기획, 와이어프레임, 디자인, 프로토 타이핑까지 할수 있는 무료 툴

HTML

head와 body로 구성되어 있음

head : 페이지 속성을 정의하거나 필요한 스크립트를 부른다. (대표적인 요소 : meta script, link, title 등)
body : 페이지 내용을 담는다. (대표적인 요소 : div, p, h1, input, img, button, textarea, hr 등)

CSS

css는 html의 head내에 style로 표기한다.
html을 꾸며주는 역활을 한다.

<style>
.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;
} 

  <div class="box">
    <div class="first">첫 번째 구역</div>
    <div class="second">두 번째 구역</div>
  </div>
 </style>

JS

자바스크립트는 특정요소에 기능을 부여할때 사용한다. head 내의 script로 표기한다.
☞ 버튼을 클릭하면 모달창이 뜨는 것

<!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>

제이쿼리

자바스크립트를 쉽게 사용하기 위한 자바스크립트 라이브러리

<!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 속성 변경할때 애니메이션 속도를 조절가능하게 하는 것

.button과 .use-css 동시에 만족하는 경우

.button.use-css:hover{
color:white;
}

UI 버튼 토글

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

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