웹 퍼블리싱의 개념
- 웹 퍼블리싱이란 피그마, 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 각가에 대한 정의와 기본적인 사용법들을 배웠다.
알고있던 내용도 있었지만, 다시한번 복습한다는 느낌으로 자만하지말고 천천히 살펴봐야겠다.
