[패스트캠퍼스]웹개발 왕초보 입문

HTML

경로의 CSS파일 연결

<link rel="stylesheet" href="경로" />

경로의 JS파일 연결

<script defer src="경로"></script>

다른 경로(페이지)로 이동

<a href="경로"></a>

경로의 이미지 출력

<img src="경로" alt="이미지_이름" />

CSS

요소의 가로, 세로 너비

width: 100px;
height: 100px;

요소의 외부(바깥) 여백

margin-top / margin-bottom / margin-left / margin-right

요소의 내부(안쪽) 여백

padding-top / padding-bottom / padding-left / padding-right

요소의 테두리 선

border: 4px solid red;
        두께 종류  색상

요소의 모서리 둥글게

border-radius: 10px;

요소의 그림자

box-shadow: 4px 4px 10px rgba(0,0,0,0.5);

글꼴 설정

font-size: 16px; // 글꼴 크기
font-weight: 700; // 글꼴 두께
font-family: "나눔고딕", sans-serif; // 글꼴 이름 및 종류
line-height: 1.4; // 글꼴의 줄 높이
color: red; //문자 색상
text-align: center; //문자 정렬
text-decoration: underline; //밑줄 추가
text-decoration: none; // 밑줄 제거
word-break: keep-all; // 한글에서 띄워쓰기로 단어 구분
background-color: royalblue; // 요소의 배경 색상
background-image: url("이미지_경로"); // 요소의 배경 이미지
background-size: 100px; // 요소의 배경 이미지 크기
background-repeat: no-repeat; //요소의 배경 이미지 반복 없음
background-position: top center; //요소의 배경 이미지 위치
display: flex; //요소의 자식 요소들을 (수평)정렬
justify-content: center; //정렬(Flex)된 요소들의 수평
align-items: center; //수직 전체 정렬
transform: //요소의 변환효과
 translateX(10px) // x축 이동
 translateY(20px) //y축 이동
 scale(1.2) // 비율 크기
 rotate(45deg); // 회전
 transition: 1s; // 요소의 전환 효과
 @media (max-width: 500px) { 
 선택자 { 속성: 값; } //미디어 쿼리 (미디어 규칙)
 } //브라우저 화면의 크기에 맞게 CSS 새롭게 지정

JavaScript

대괄호 표기법으로 데이터를 사용

const fruits = ['Apple', 'Banana']
console.log(fruits[0])
console.log(fruits[1])

변수에 새로운 데이터를 다시 할당X

const 변수 = 데이터

변수에 새로운 데이터를 다시 할당O

let 변수 = 데이터

JS 명령을 묶어 반복 사용할 때

function 함수이름() {
 // 명령들..
}
함수이름()

인수(데이터)와 매개변수(변수) 사용

function 함수이름(변수) {
 // 명령들..
}
함수이름(데이터)

함수를 종료

function 함수이름(변수) {
 if (조건) { return }
 // 명령들..
}
함수이름(데이터)

HTML 요소를 찾아 변수에 저장

const els = document.querySelectorAll('CSS선택자')
const el = document.querySelector('CSS선택자')

HTML요소에 CSS지정(CSS 속성은 낙타 표기법으로 작성)

const el = document.querySelector('CSS선택자')
el.style.backgroundColor = 'red'
// el.style.CSS속성 = '값'

HTML요소의 내용으로 문자를 추가 (문자는 HTML코드로 해석)

const el = document.querySelector('CSS선택자')
el.innerHTML = '<span>Hello~</span>'
// el.innerHTML = 'HTML 코드'

HTML을 클릭하면 함수 실행

const el = document.querySelector('CSS선택자')
el.addEventListener('click', function () {
 console.log('클릭했어요!')
})
// el.addEventListener('click', 함수)