나만의 웹 페이지 만들기 <MBTI 테스트>
'패스트캠퍼스'에서 제공한
무료강의 中 MBTI 테스트 만들며 배우는 왕초보 코딩
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
내 안에 숨어있는 직업캐 찾기! (sparkly-halva-1cddd3.netlify.app)
수업 열심히 따라가면서
만든 나의 결과물 !!!!!
내 안에 숨어있는 직업캐 찾기!
누구나 찰떡인 직업이 있어요! 내 안에 숨어있는 직업캐를 찾아보세요!
prismatic-monstera-4c9d6a.netlify.app
확실히 무언가 배울때는
어떤 선생님을 만나냐에 따라서
학생들이 스스로 습득하는 방향성이 달라지는 것 같다.
이전에 돈 내고 듣는 강의보다
오히려 무료강의가 훨씬 이해가 잘되고
여기저기 적용도 잘되었다.
(강사님이 설명을 잘 해주셨다.)
커리큘럼은
html, css, js에 대한 전반적인 설명과
프로젝트 만들기 시작하고
웹사이트를 업로드하는 과정까지
상세하게 짜여져 있다.
수업의 전반적인 내용보다는
새롭게 알게 된 내용과
헷갈렸던 것들을 더 확실히 알게 된 것들을
여기다 정리해서 기록해두려고 한다.
(대부분 css와 js의 기능 정리가 될 것 같다.)
* 코드 에디터 : [VS code 사용]
환경설정
2번째 줄 <html lang="en">
언어를 영어에서 한국어로 바꾸는 작업
⤿ 확장탭에서 korean language pack을 다운로드 해주고
ctrl + shift + p (모든 명령 표시) > settings.json user 선택
이미 작성된 코드 밑에 쉼표(,) 쓰고
"emmet.variables" : {
"lang" : "ko"
}
들여쓰기를 2칸으로 만드는 작업
⤿ settings.json user에서 윗 작업과 비슷하게 쉼표(,)쓰고
"editor.tabSize":2
전체저장 ctrl+k+s
코드 깔끔하게 정리하고 싶을 때 : 선택영역서식
ctrl+k ctrl+f (영역 드래그 우클릭에서 선택도 가능)
태그 자동완성
확장에서 auto rename 설치
태그 수정하면 닫히는 태그까지 자동으로 바뀜
서버 설치
확장에서 live server 설치
오류 발생 시 ctrl + ,(설정) 눌러서
use local IP as host 체크하기
HTML
<head>에는 정보 , <body>에는 구조가 담김
<태그 속성="값">내용</태그>
비어있는 태그, 종료 태그가 없는 것 <br> <img /> <meta>...etc
(마지막에 슬래시로 코드가 끝났다는 것을 구분해주기도 함)
요쇼(Element)를 감싸는 부모 & 조상(상위)요소,
밑은 자식요소 & 형제요소,후손(하위)요소
상자요소 (Block Elements)
할 수 있는 작업 : 레이아웃 만들기 div 가로 너비 최대한 넓게 세로 너비 최대한 줄기
상자 크기 지정(글자요소에는 지정x)
글자요소 (Inline Elements span)
할 수 있는 작업 : 가로 너비 세로 너비 최대한 좁게
<img src=경로 alt=이름 >
<a></a> a는 anchor 닻을 내린다는 뜻
CSS
가상클래스 :hover
⤿ HTML요소에 마우스 커서가 올라가 있는동안 선택
가상클래스:active
⤿ HTML요소에 마우스를 클릭하고 있는동안 선택
박스모델
HTML상자요소의 형태를 만듬
배치 HTML요소의 위치 지정
정렬 수평 혹은 수직으로 정렬
전환 이전과 이후 상태를 자연스럽게 보여줌
변환 회전, 비율, 기울이기, 이동, 원금감 등의 효과
띄움 글자 위에 띄우기
애니메이션, 그리드(레이아웃지정), 다단(여러 단으로 배치), 필터(그래픽 효과)
글자 가운데 정렬하는 것과(가로로 최대한 늘어나려는 특징)
요소를 가운데 정렬하는 것은 차이가 있음(정해진 사이즈 안에서)
padding → 안쪽 여백
margin → 외부 여백
border-radius →모서리 둥글게
box-shadow: 10px 10px 0 rgba(0,0,0,0.5);
⤿ 요소에 그림자 생성
x축 / y축 / 흐려지는 효과 / 투명도
css 값이 0이면 단위 생략 가능
min-width → 최소 가로 너비
** 자식태그는 별도로 지정해 주지 않으면 부모의 가로 너비와 같이 나온다.
font-weight → 폰트 두께 (100~900까지 있음)
font-family → 글꼴 종류 (serif 고딕체 바탕체 등등)
line-height → 줄 높이 (1.3-1.4가 적당)
text-decoration → underline(밑줄), none...
word-break > keep-all →줄바꿈x 띄어쓰기로 단어 구분(한국어)
background-image : url(""); → 배경 이미지 삽입, 기본적으로 이미지 반복 출력
background-repeat:no-repeat → 반복 출력하지 않도록 설정
background-position → 배경 위치 지정 ( ex) left bottom; center center; )
display: flex; →수평정렬 (부모요소에 지정하기)
justify-content: start / center / end →정렬(수평)
align-items →아이템 정렬(수직)
gap →아이템 사이에 여백만들기
cursor : pointer →커서 올렸을 때 손가락 모양
width설정> margin-left margin-right : auto → 상자요소를 가운데 정렬
flex: 1; → 정렬되는 요소의 너비를 1 비율만큼 늘어나게 지정
transform: translateX(); →이동하고 싶은 만큼의 수치 입력 x축 이동
translateY(); →y축 이동
rotate(45deg); →45도 회전
scale(1.5) →1.5배 크기로 증가
** 전환효과는 바뀌기 전 상태에다 코드 입력
translation : 1s; →자연스럽게 애니메이션 할 수 있도록
미디어쿼리 (미디어규칙) 브라우저 화면의 크기에 맞게 CSS 새롭게 지정
반응형 웹 사이트 (모바일 등)
@media (max-width : 500px) { 세미콜론 없어야 함,최대 크기보다 줄어들때 모양이 바뀌도록 지정
.container {
height : 200px;
border : 10px solid red;
background-color: orange;
}
.container .item
}
}
JS
js는 낙타 표기법(camelCase)을 사용한다.
⤿ 두 개 이상의 단어 조합시 두번째 단어에서 대문자 사용 ex) helloWorld
console.log(연산자) → 콘솔창 기록
const 변수 = 85 → 할당연산자
⤿ 값(data)을 다시 할당할 수 없는 변수를 만든다.
const stringData = '문자'
const numberData = 숫자
const booleanData = true/false
let numberData = 123 → 재할당 (재할당 시 123 제거)
numberData = null
const objectData = {
key:'value',
name:'Heropy'
}
console.log(objecData.name) //'Heropy'
console.log(object['name']) //'Heropy'
[배열데이터] zero-base numbering (0부터 센다.)
const arrayData = []
console.log(arrayData[0])
예약어
⤿ 특별한 의미를 가지고 있어서
변수나 함수의 이름으로 사용할 수 없는 단어
const let = 123(x)
const const = 123(x)
const function = 123(x)
const if = 123(x)
const new = 123(x)
const import = 123(x)
함수가 없으면 같은 명령을 매번 새롭게 작성해야 함
⤿ 함수 사용 : 인수(데이터)와 매개변수(변수) 추가
function hello(name) {
if(name.length > 5){
return
}
const message = 'Hello ' + name + '!'
console.log(message)
return 함수종료
console.log 이 부분은 실행x
}
hello('Heropy') x →6자라서 실행x
hello('Neo') → Hello Neo!
hello('Evan') → Hello Evan!
DOM (Document Object Model) → html 요소들의 구조화된 표현
CSSOM(Cascading Style Sheets Object Model) → 요소들과 연관된 스타일 정보의 구조화된 표현
const itemEls = document.qurerySelectorAll('.item')
const btnEl = documnet.querySelector('.btn')
const color = ['royalblue','orange','tomato']
addEventListner(,) → 이벤트 등록
btnEl.addEventListener('click',function(){ → btn요소를 클릭하면 함수 실행
itemEls.forEach(function(itemEl, index){ →아이템들 하나씩 접근(인덱스번호와 함께)
console.log(index, itemEl) → 콘솔에 기록
itemEl.style.backgroundColor = colors[index] →아이템들의 배경색을 담을 인덱스를 가져옴
})
btnEl.innerHTML = '<span>클릭했어요!</span>'
HTML요소의 내용으로 문자를 추가 (HTML코드로 해석)
})클릭할땐 함수이름x 익명함수
js에서 다른 js파일 가져오기
import {questions} from './data.js'
html 파일에서 설정<script type="module" defer src="./js/questions/js"></script>
type="module" 다른 js파일을 가져올 때 구분짓기 위해
const imgEl=document.querySelector('img')
imgEl.src='이미지경로'
const aEl = document.querySelector('a')
aEl.href='페이지주소'
프로젝트 시작
Favicon(파비콘, favorites icon)
⤿ 웹페이지를 나타내는 아이콘, 웹페이지 로고 설정
루트 경로에 favicon.ico파일이 있으면 자동으로 로딩
이미지 파일 연결해서 쓸 수 있음 <link rel="icon" href="" />
reset.css cdn 코드 복붙
가변 다이나믹 서브셋 코드
⤿ CSS의 unicode-range속성을 이용하여
해당 유니코드 영역의 문자가 사용될 때
브라우저가 폰트 파일을 다운로드 하는 방식
폰트 사용 시 주의(저작권)
Pretendard 고딕체
웹 폰트 (경량화) 용량을 최대한 줄여서 모든 컴에서 출력 잘 되도록
common.css파일 만들고 폰트 설정
body {
font-family : "Pretendard Variable", sans-serif;
}
개발자도구 [요소-계산됨]에서 font-family 설정 되어 있는지 확인하기
오픈 그래프와 트위터 카드
⤿ 웹페이지가 sns로 공유될 때 우선적으로 활용되는 정보를 지정
og:type 페이지의 유형(website, video.movie)
og:site_name 속한 사이트의 이름
og:title 페이지 이름(제목)
og:description 페이지 간단한 설명
og:image 페이지 대표 이미지주소(URL)
og:url 페이지 주소(URL)
twitter:card 페이지(카드)의 유형(summary,player)
twitter:site 속한 사이트의 이름
twitter:title 페이지 이름(제목)
twitter:description 페이지 간단한 설명
twitter:image 페이지 대표 미지 주소(URL)
twitter:url 페이지 주소(URL)
웹 사이트 업로드 → Netlipy
댓글