안녕하세요
5월20일 5일차 - 마우스이벤트 hover, font, icon 본문
- js를 적용하는 3가지 방법을 배웠습니다. (head style/ body style/ DOMcontent~)
- font-family주소 폰트를 적용하는 방법을 배웠습니다.
- 가상요소선택자를 배웠습니다. ::after ::before
- css 마우스이벤트 hover:를 학습했습니다.
변화를 눈으로 확인하면서 웹을 만들 수 있기 때문에 다른 것보다 재밌게 할 수 있습니다.
[pxxxbay 화면 따라 구현하기. 주소는 업데이트 됨에 따라서 스크린샷과 다를 수 있습니다.]
- [XEicon주소] CDN(Content Delivery Network) 아이콘을 적용하는 방법을 배웠습니다.
마우스이벤트
- hover : 마우스가 올라간 상태
- js를 적용시키기는 3가지 방법입니다.
- 첫번째, body의 마지막에 script를 위치시킵니다.
<body>
<h1>
테스트
</h1>
<script src="../js/position03.js"></script>
</body>
- 두번째, head의 마지막에 위치시킵니다. 그리고 defer 속성을 줍니다.
<script src="../js/position03.js" defer></script>
</head>
- 세번째 방법은 아래와 같습니다. DOMContentLoaded를 이용합니다.
window.addEventListener("DOMContentLoaded", function () {});
DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.
간단하게 말하자면 시간이 걸리는 요소들을 배제하고 HTML 문서만을 빠르게 로딩합니다.
- id는 고유합니다. class와 달리 여러 이름을 부여할 수 없습니다.
<section id="event">
- 글자 줄바꿈은 <br />입니다.
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br />
Libero nemo optio harum sit blanditiis cupiditate explicabo! Magni
suscipit minima nisi!
</p>
- semantic tag: figure : 이미지는 figure 안에 넣습니다.
<div class="container">
<figure>
<img src="../img/main_bg01.jpg" alt="">
</figure>
- width 속성과 max-width 속성
width: 100%; 속성은 부모 사이즈를 따라 크기가 커졌다 줄어들었다 변합니다.
max-width: 100%; 크기가 줄어들기는 하나, 이미지의 기본 크기 이상으로는 커지지 않습니다.
#event img {
max-width: 100%;
}
- 이미지 사이 간격이 보일 경우 없앨 수 있습니다.
reset.css로 img 사이의 틈을 지웁니다.
img {
vertical-align: middle;
}
#event figure {} 후손 중에서 찾습니다.
#event>figure {} 자식 중에서만 찾습니다.
- 서로 다른 사이즈의 이미지가 첫번째 이미지의 크기에 따라서 변합니다. 이미지 레이아웃을 맞출 때 이용합니다.
#event figure {
flex: 1
}
(자바스크립트의 최신문법은 인터넷 익스플로러에서 작동하지 않습니다. gap이 원인이구나 하는 것을 떠올려야 합니다.)
- gap은 보통 30px입니다.
#event .container {
gap:30px;
}
- hover 마우스를 객체 위로 위치할 때 변화하는 효과를 줄 수 있습니다.
#event .container figure:hover img {
transform: scale(2); /* 2배로 커집니다. */
}
- transition은 변화하는 대상(img)에 부여합니다. transform과 헷갈리지 않아야 합니다.
#event img {
transition: 0.5s;
}
#event .container figure:hover img {
transform: scale(2);
}
- overflow: hidden; 박스의 사이즈를 넘어서는 부분은 나타나지 않도록 합니다.
#event figure {
overflow: hidden;
}
- 무언가를 넣을 예정인 자리에는 "#!"을 입력합니다.
<a href="#!"></a>
- depth 는 4 이상이면 좋지 않습니다.
#event .container figure a {} XXX
#event figure a {} OOO
- 글자를 한 가운데로 배열하기 위해서 margin을 이용하면 글자의 크기에 따라 양 옆의 사이즈가 달라지게 될 수 있습니다. ( "WWW a 123") a를 기준으로 양 옆의 글자 수는 3글자 이지만 길이가 다르기 때문에 a는 한 가운데로 오지 않게 됩니다.
#event figure a {
display: block;
margin: 0 auto;
width: 200px;
height: 30px;
}
- absolute는 기준을 잡아주지 않으면 body가 기준이 됩니다.
#event figure a {
position: absolute;
top: 0;
left: 0;
}
- 만일 figure를 """기준"""으로 만들고 싶다면 figure에 position: relative; 속성을 주면 됩니다.
#event figure {
position: relative;
}
#event figure a {
position: absolute;
top: 0;
left: 0;
}
- more가 나타나는 연출을 합니다.
#event figure {
position: relative;
flex: 1;
overflow: hidden; /* 크기를 벗어나면 사라지게 합니다. */
}
#event figure a {
position: absolute;
top: -40px; /* -40px만큼 위로 이동시키면 overflow: hidden 속성으로 인해 보이지 않게 됩니다. */
left: 0;
padding: 10px 30px;
background: #333;
color: #fff;
transition: 0.2s; /* 부드럽게 나타나는 연출을 합니다. */
}
#event figure:hover a {
top: 0; /* 마우스를 hover하면 more가 나타납니다. */
}
- 가상요소선택자를 통해 css로 box를 만들 수 있습니다. ::after ::before
div 빈 박스로 막대나 빈 박스 들을 만드는 것은 웹 표준에 어긋납니다.
<h2>
< 이 곳은 before 입니다. >
Lorem ipsum dolor sit amet.
< 이 곳은 after 입니다. >
</h2>
#event h2::after {
content: "'amet.' 뒤에 나타나기";
}
- 이를 이용해 붉은색 선을 세로로 만들 수 있습니다.
레이아웃을 차지합니다.
#event h2::after {
content: "";
display: block;
width: 1px;
height: 100px;
background: #f00;
margin: 20px auto;
}
- h2 양 옆에 붉은색 선을 가로로 만들 수도 있습니다. before를 함께 이용합니다.
#event h2::before {
content: "";
display: inline-block;
width: 100px;
height: 1px;
background: #f00;
margin: 0 10px;
vertical-align: middle;
}
#event h2::after {
content: "";
display: inline-block;
width: 100px;
height: 1px;
background: #f00;
margin: 0 10px;
vertical-align: middle; /* vertical-align 속성으로 한 가운데로 위치합니다. */
}
- vertical-align의 기준
bottom : 레이아웃
top : 레이아웃
middle : top-bottom의 한 가운데입니다.
baseline : 글자의 바닥이 기준입니다.
- CDN(Content Delivery Network)은 지리적으로 분산된 여러 개의 서버입니다.
웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높입니다.
무료로 어디에서나 이용가능한 소스로 이해하면 됩니다.
- font를 적용하는 방법입니다. (font는 한 가지 또는 두 가지만 씁니다.)
[https://fonts.google.com/] 주소로 이동합니다. >
trending 순으로 정렬되어 있습니다. 많이 이용하는 폰트를 우선하여 이용합니다. (Noto Sans가 인기가 많습니다.)
font-weight는 100 300 400 500 700 900 등 정해져 있습니다. + 를 눌러 스타일을 추가합니다. >
@import를 체크합니다. <style> </style> 사이의 @import를 복사합니다. >
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap'
css의 가장 위에 붙여넣습니다. >
body에 font-family를 적용시킵니다. >
body {
font-family: "Noto Sans KR", sans-serif;
}
font-size는 홀수일 때 가독성이 좋습니다. 중요합니다. 14px은 반드시 피합니다.
- icon을 적용하는 방법입니다.
[https://xpressengine.github.io/XEIcon/started.html] 주소로 이동합니다. >
//cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css
위의 코드를 복사합니다. >
css의 가장 처음에 다음과 같이 입력합니다. >
@import url(https://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css')
icon을 이용하기 위해서는 <i>tag를 이용합니다. >
<h2><i class="xi-bars"></i>Lorem ipsum dolor sit amet.</h2>
아이콘의 class="" 클래스명이 아이콘을 결정합니다.
아이콘은 inline-block 입니다.
#event i {
background: #333;
color: #fff;
padding: 10px;
border-radius: 50%; /* 테두리를 둥글게 만듭니다. */
}
- 미묘하게 높이가 틀려있다면 vertical-align: middle;을 적용합니다.
#event i {
background: #333;
color: #fff;
padding: 10px;
vertical-align: middle;
border-radius: 50%;
}
- position: static; 으로 되돌리는 과정은 중요합니다.
다른 레이아웃에 간섭하지 않는 absolute는 공간을 차지하지 않습니다.
경우에 따라 공간을 차지하도록 해야합니다. static은 공간을 차지합니다.
width는 auto와 100%인 경우를 잘 구분해야합니다.
vscode 코드입력창 오른쪽의 코드 작게 보기 없애는 법
settings > editor.minimap.enabled 체크해제합니다.
'프론트엔드 국비교육' 카테고리의 다른 글
| 5월23일 6일차 - slick 슬라이드 구현, 3단 이미지 코딩 (0) | 2022.05.23 |
|---|---|
| 1주차 정리 (05/16 ~ 05/20) (0) | 2022.05.22 |
| 5월19일 4일차 - popup창 구현 (jquery) (0) | 2022.05.19 |
| 5월18일 3일차 - navigation bar (box 강의 semantic tag 기억하기) (0) | 2022.05.18 |
| 5월17일 2일차 - block, inline 속성 (0) | 2022.05.17 |
