웹 퍼블리싱 정복반 - 1주차 마무리
2023. 3. 20. 19:28ㆍ스터디/항해 99
더보기
퍼블리싱 기초 개념
HTML/CSS/Javascript 기초 개념
퍼블리싱 기초 개념
웹 퍼블리싱 이란?
- 디자인 리소스를 HTML, CSS, Javascript와 같은 웹 리소스로 변경하여 웹 브라우저에 표현하는 일련의 작업.
- 디자인 리소스
- 포토샵, 파워포인트, 최근에 많이 사용되어지는 프로토타입 소프트웨어인 피그마 등으로 작업한 디자인 내용물
- 웹 퍼블리싱을 위해서라면 각 툴에서 제공되는 결과물을 이해할 필요가 있다.
- 퍼블리싱
- 퍼블리싱은 크게 마크업과 스타일링으로 나뉜다.
- 마크업 : HTML을 통해 기본 뼈대를 만듭니다. (와이어프레임, 뼈대 작업)
- 스타일링 : CSS로 마크업에 색상 등의 속성을 입혀 스타일을 지정합니다.
- 부가 기능 : Javascript로 특정 요소에 기능을 만들어 부여합니다.
HTML/CSS/Javascript 기초 개념
CSS-transition
css-transition 을 활용한 애니메이션 효과
CSS 트랜지션 프로퍼티는 CSS 프로퍼티값이 변경될 때 해당 변경 사항을 즉각적인 변화가 아니라 속도를 두어 애니메이션처럼 구현하게 하는 프로퍼티
css-transition 참고
CSS Transition Examples – How to Use Hover Animation, Change Opacity, and More
If you are working with web technologies like CSS, HTML, and JavaScript, it's important to have some basic knowledge about CSS animations and transitions. In this article we are going to learn how to make some basic transition animations using CSS. How to
www.freecodecamp.org
css-transition 을 활용한 애니메이션 세가지 예시 (hover)
- CSS 만 사용 - css 스타일 지정시 선택자 뒤에 콜론을 활용 특정 이벤트 발생시 css가 변경되도록 하는 형태
- js 활용 mouseover, mouseout 이벤트에 따라 css 지정해주어서 바뀌게 해주기
- class add, remove 해주기 - 특정 이벤트 발생시 지정된 css클래스를 애드하거나 리무브 함으로서 적용되어있던 css가 변경되도록 하는 형태
1. CSS 만 사용
<style>
/* 애니메이션 시작점. 기본적으로 적용되어 있는 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;
transition: all 0.3s ease-in-out;
}
/* 애니메이션 종료점. 동작이 이루어 졌을때 적용되는 css */
.button.test:hover {
background-color: blueviolet;
color: white;
}
</style><body>
<div class="buttons">
<button class="button test">웹 퍼블리싱 정복</button>
</div>
</body>
2. js 활용
<style>
/* 애니메이션 시작점. 기본적으로 적용되어 있는 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;
transition: all 0.3s ease-in-out;
}
</style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// mouseover, mouseout 시 css 종료점을 만들어줌.
// css 함수 사용
$(".button.test")
.mouseover(function () {
$(this).css({
backgroundColor: "#e8344e",
color: "white",
});
})
.mouseout(function () {
$(this).css({
backgroundColor: "white",
color: "#e8344e",
});
});
</script><body>
<div class="buttons">
<button class="button test">웹 퍼블리싱 정복</button>
</div>
</body>
3. class add, remove
<style>
/* 애니메이션 시작점. 기본적으로 적용되어 있는 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;
transition: all 0.3s ease-in-out;
}
/* 애니메이션 종료점. button use-class */
.button.test.on {
background-color: #e8344e;
color: white;
}
</style> <script>
// mouseenter, mouseleave 시
// addClass, removeClass 함수 사용 css로 컨트롤
$(".button.test")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
</script><body>
<div class="buttons">
<button class="button test">웹 퍼블리싱 정복</button>
</div>
</body>
현업에서는 주로 css에 콜론을 이용하여 동작시 css를 다르게 적용하는 형태나 클래스를 다르게 두어 해당 클래스를 적용 시키는 방법으로 사용된다고 한다.
커스텀 드롭다운
드롭다운을 통한 선택을 위한 엘리먼트로는 HTML의 <select> 가 존재한다.
하지만 option 엘리먼트에 별도의 스타일을 지정할 수 없는 한계로 인해 커스텀 드롭다운을 많이 사용하시는것 같다.
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.dropbtn').on('click', function (evt) {
const ulElement = $('ul');
ulElement.toggle();
});
})
</script>
<style>
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* 기본적으로 a태그의 경우 링크 태그이기 때문에 밑줄과 파란색상으로 표기되는 것을 초기화 해주는 내용*/
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;
}
/* position속성의 이해 - position에 absolute 속성을 줌으로써 아래의 li태그들이 display:block 되더라도 해당 버튼이 위치가 밀리지 않도록 지정하여줌.*/
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;
}
</style>
</head>
<body>
<div class="dorpdown">
<button class="dropbtn">메뉴선택</button>
<ul>
<li><a href="#">선택지 01</a></li>
<li><a href="#">선택지 02</a></li>
<li><a href="#">선택지 03</a></li>
</ul>
</div>
</body>
css 미디어 태그
주로 화면 크기가 다른 장치(PC, 태블릿, 스마트폰) 마다 다른 디자인을 보여주기 위해 사용됩니다.
'스터디 > 항해 99' 카테고리의 다른 글
| 웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (3) (0) | 2023.03.21 |
|---|---|
| 웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (2) (0) | 2023.03.21 |
| 웹 퍼블리싱 정복반 - 2주차 강의 내용 정리 (1) (0) | 2023.03.21 |
| 웹개발 종합반 - 2주차 마무리 (0) | 2023.03.20 |
| 웹개발 종합반 - 1주차 마무리 (0) | 2023.03.20 |