개발일지

개발일지 14일차

index.ys 2023. 3. 20. 19:07

웹 퍼블리싱의 개념

- 웹 퍼블리싱이란 피그마, xd, sketch 같은 프로토타이핑 툴로 작업된 ui/ux 그래픽 리소스를 변환해 브라우저에 구현하는 기초적인 단계이다.

HTML (Hyper Text Markup Language)

  • 웹 페이지의 뼈대를 담당하는 마크업언어 이다.(프로그래밍 언어x)
  • HTML은 head와 body로 구성되며 head안에는 페이지의 정보, body안에는 페이지의 내용을 담는다.
  • head에 포함되는 대표적인 요소: meta, script, link, title 
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>

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

CSS(Cascading Stylesheet)

  • css를 통해 html에 색상,배경 등 속성을 부여하여 디자인요소를 완성시킨다.
  • 태그이름, 클래스이름, 아이디이름 등을 지정해 css속성을 부여 할 수 있다.
  • head태그 안에 style태그를 지정하거나 링크를 통해 css파일을 불러와서 적용할 수 있다.\

- html요소에 box 클래스부여 하기

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

- css를 통해 box 클래스에 배경색을 지정하는 명령어인 background-color로 배경색 지정

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

 

- 넓이와 높이를 설정하는 css명령어

 width: 200px;
 height: 200px;

 

- 배치를 바꾸는 css 명령어

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

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

- css 트랜지션은 css요소에 애니메이션을 부여할때 사용된다.

.button {
  padding: 5px 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  color: #e8344e;
  background-color: white;
  border: solid 2px #e8344e;
  border-radius: 20px;
  /* 시작점과 끝점을 연결해주는 css코드 */
  transition: all 0.3s ease-in-out;
}

transition 속성을 통해 css에 애니메이션을 부여할 수 있다.

CSS hover (애니메이션)

- css hover 애니메이션을 적용하는 방법은 세가지로 나뉜다

1. css의 hover 속성을 이용하여 요소에 마우스가 올라갔을때 속성을 지정해준다.

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

2. javascript를 이용해 함수를 지정하고 html요소에 마우스가 올라왔을때 "on" 이라는 css에 지정된 속성을 부여하게 한다.

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

3.  javascript에 마우스가  올라갔을때 css속성들을 정의하고 함수로 지정해준다.

// 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",
    });
  });

CSS 미디어 쿼리

  • 화면의 크기가 다른 장치들 pc,태블릿, 모바일 등 기기화면크기마 다른 디자인을 보여주기 위해 사용하는 속성
  • 반응형 웹을 구현하기 위해 사용하는 대표적인 CSS 기술이다
  • 미디어 쿼리를 사용해 1개의 요소가 다른 디자인을 가질 수 있다

미디어쿼리 기본형태

/* 최상위 코드 레벨 */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

온보딩 커리큘럼 챕터2 1일차에서는 html,css,javascript로 퍼블리싱이 어떻게 이뤄지는지에 대한 전체적인 설명과 

html,css,javascript 각가에 대한 정의와 기본적인 사용법들을 배웠다.

알고있던 내용도 있었지만, 다시한번 복습한다는 느낌으로 자만하지말고 천천히 살펴봐야겠다.