티스토리 뷰
개요
- 제로베이스로 시작하며, 내가 알지 못하는 하나씩을 모두 정리해본다.
- 차곡차곡 쌓이면, 다음 강좌로 넘어갈 수록 알아 볼 것들이 줄어들 것이다.
공부방법은
1) index-START.html 을 01.html 로 옮겨 타이핑 하고, 이를 아래와 같이 분석해본다.
2) style.css 역시 style-jhs.css 로 옮겨 타이핑하고 분석한다.
3) 그다음 동영상을 보면서 실습을 따라해본 후
4) 별도의 블로그 포스팅에 실습 내용을 정리한다.
index-START.html
알아 볼 것들
|
<!DOCTYPE html> |
링크: https://www.w3schools.com/tags/tag_doctype.asp - 웹브라우저에게 이 파일은 html 이라는 것을 알려준다. - HTML 5 는 죄측과 같이 쓰면 되고, - HTML 4.01 은 Strict, Transitional, Frameset 세 가지 방식으로 쓸 수 있다. |
|
<head> |
|
|
<html lang='en'> |
lang 은 Global Attributes 이다. 어떠한 HTML element 에서든 쓸 수 있으며, 그 element 의 content 의 언어를 특정한다. |
|
<meta charset="UTF-8"> |
문자 인코딩: https://goo.gl/PUfvXL data 에 대한 정보중 charset 이 UTF-8 이라는 것을 알려준다. (1-4 바이트 가변 크기로 문자를 표현함) 즉, 인코딩이 UTF-8 이라는 것이다. 예전에는 euc-kr 도 있었지만 요즘 추세는 UTF-8 로 대동단결 |
|
<link rel="stylesheet" href="style.css"> |
링크: https://www.w3schools.com/tags/att_link_rel.asp 링크: https://aboooks.tistory.com/147 - href 에 언급되는 파일은 stylesheet 로서 현재의 파일과 연관이 있다는 말 - HTML 내부에 정의될 수도 있지만, 이렇게 외부에 파일로 둔다. |
|
<body> |
|
|
<div class="keys"> |
div 는 division, section 정도로 공간을 의미한다 보면 될듯하다. class 는 위에 언급한 lang 처럼 Global Attribute 이다. - 여기서는 "keys" 라는 class 이름을 언급하였고 - "keys" class 는 위에 나온 style.css 파일에 정의되어 있다. |
|
|
data-key 는 custom data attribute 이다. 사용자가 임의로 만들고 생성한 속성이라는 것이다. - 이 때문에 각각의 div 는 data-key 값을 마치 데이터베이스의 인덱스처럼 이용할 수 있겠다. kbd 는 키를 이쁘게 표현한다고 할까? https://goo.gl/wUmw4u - 본문에서 키보드 단축키 등을 묘사할때 주로 사용한다. - 아래와 같이 css 에 있으면 그게 태그안의 값에 반영된다. * rem 은 가변 크기값이라 생각하면 되겠다. 최상위 요소의 폰트크기가 1 rem 이다. https://goo.gl/cYCZCW
실제 결과는 아래와 같다.
span 은 div 와 비슷한데, div 는 줄바꿈이 되지만 span 은 줄바꿈이 안된다. - 링크: https://goo.gl/ZGJoii - 즉, 여러 개의 span 을 이어서 몇 줄을 써도, 한 줄로 표현될 것이다. - 또한, 여기서 span 은 "sound" class 이며, sound class 역시 .css 파일에 명시되어 있다. → 결국 sound class 는 span element 의 content 의 폰트 사이즈, 칼라 등을 설정해둔 것이다.
|
|
|
audio 는 mp3, wav, ogg 포맷을 지원하며, - 여기서는 custom attribute 인 data-key 를 각각 가지고 있다. - 위의 각각의 키 영역과 매칭을 시키는, 데이터 베이스의 인덱스 키의 느낌이다. |
|
<script> |
자바스크립트를 HTML 페이지에 삽입한다. |
style.css
- 각각 하나의 정의가 하나의 스타일을 정의하는 것으로 보인다.
- 즉, .key 라는 class 는 폰트 크기가 얼마고, 색깔은 무엇이고, 배경색은 무엇인가를 정해주는 식이다.
style.css 에서 확실히 알아두고 넘어갈 주요 요소들을 정리해본다.
|
html {} body, html {} kbd {} |
html 전체에 스타일을 먹이라는 것 body 와 html 전체에 먹이라는 것. 중복을 방지한 것으로 보인다. kbd 에 설정한 것을 먹이라는 것 |
|
.keys {} .key {} .playing {} .sound {} |
링크: https://www.w3schools.com/cssref/sel_class.asp 위의 html, body, kbd 가 예약어라고 할 수 있다면, 이것들은 custom 하게 만든 class 들이다. 점으로 시작하는 이름을 만들고, 중괄호 안에 스타일을 정의하면, → 그 class 를 명시한 모든 element 들의 content 에 스타일이 적용된다. |
|
|
background 의 bottom center (를 여기서는 top right 으로 변경해봄) - 여기서는 url 의 사진을 가져와 뿌려주는데 - 사진의 아래쪽과 좌우는 센터를 기준으로 뿌려주겠다는 것 |
|
|
display: flex - 유연한 flex 방식을 쓰겠다고 한 것이다.
flex: 1 - 양수값 하나만 나오면 flex-glow: 1 과 같은 의미이다. - 형제 element 들과의 공간할당과 관련한 비율 값으로 보인다.
justify-content: center - 해당 element 의 flex item 의 좌우 align 을 설정해준다. |
|
|
border: solid - 테두리 선의 다양한 방식을 선택할 수 있다.
transition: all .07s ease - all: 모든 변화에 대해 적용 - .07s: 0.07초 동안 변화 - ease: 변화가 점점 빨라지며 시작하다가 느려지며 끝나게 한다.
background: rgba(0, 0, 0, 0.4) - 링크: https://www.w3schools.com/css/css3_colors.asp - 색을 표현하는 다양한 방법중에서 RGBA color 방식으로 표현한 것이다. |
|
|
transform: scale(1.1) - 크기를 1.1 만큼 (=110%) 크게 해준다는 것
box-shadow - 속성은 순서대로 가로 위치, 세로위치, blur 정도 (클 수록 흐려짐), 색상 |
|
|
display: block - none 이면 경계가 없이 쭈욱 길게 되고 - block 이면 div 태그처럼 줄바꿈이 일어난다고 생각하면 편하며, - inline 은 줄바꿈이 안되며 - inline-block 은 줄바꿈은 안되지만 크기지정이 가능하다. |
중간정리
여기까지 index-START.html 과 style.css 에 대해서 알아보았다.
이제 다음 포스팅에서, 강좌를 따라가며 실제로 동작하도록 구현해본다.
'javascript30' 카테고리의 다른 글
| 06 - Type Ahead (0) | 2019.03.08 |
|---|---|
| 05 - Flex Panel Gallery (0) | 2019.03.06 |
| 04 - Array Cardio Day 1 (0) | 2019.03.05 |
| 01 - JavaScript Drum Kit - FINISHED (0) | 2019.02.28 |
| Start JavaScript 30 - 공부방법 업데이트 (2) | 2019.02.28 |
- Total
- Today
- Yesterday
- Bug
- ORM
- 중용
- websocket
- Shortcut
- bun
- 클린 애자일
- 영화
- folklore
- intellij
- notion
- API
- 잡학툰
- Gin
- 명상
- solid
- 체호프
- 노션
- strange
- 독서후기
- 인텔리제이
- pool
- 2023
- github
- OpenAI
- agile
- postgres
- go
- golang
- ChatGPT
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |