HTML
1. HTML5
HTML의 5번째 버전으로 멀티미디어 등 다양한 애플리케이션까지 표현 · 제공하도록 진화한 웹 프로그래밍 언어
2. HTML의 문서구조
(1)head - 검색 엔진을 위한 영역, title, meta 태그
(2)body - 브라우저에서 보여지는 영역, header, nav, section, article,footer 태그div 태그와 모두 동일하게 작동하나 코드를 쉽게 이해할 수 있어 협업에 도움을 줌
3. 태그
(1) block과 inline
block - div, h1, hr, p
inline - span, input, img, a
(2) 종속 태그
부모 태그 + 자식 태그 O
태그 단독 X
ex) select, option - 선택 박스 태그
ol, li - orderedul, li - unordered
(3) 꾸며주는 태그
strong - 강조
u - 언더바
i - 기울이기
(4) 빈 태그 - self closing tag, 닫는 태그가 없어도 됨
br - 줄바꿈
hr - 간단하게 수평선을 그어주는 기능
(5)기능이 있는 태그
button - 버튼
(6)이미지/동영상 태그
img - 이미지
CSS
1. CSS 사용법
(1) html 태그 속성에 입력
장점 : 스타일 적용 태그 즉시 확인 가능
단점 : 한번에 하나의 태그에만 적용 가능, 전체 코드 가독성 나쁨, 관심사 분리 x
(2)
(3) CSS 파일 만들어 불러오기(실무에서 많이 사용)
장점 : 전체 코드 가독성 향상 , 유지보수 용이, 관심사 분리 O
단점 : 태그와 CSS 연결 필요
-
CSS 선택자
전체 : *
태그 선택자 : div
class 선택자 : .container
id 선택자 : #userInfo -
박스 모델
HTML 태그들은 모두 박스 모델로 이루어져 있다
margin : 박스의 바깥 여백
border : 박스의 기준이 되는 바깥 테두리
padding : 박스의 안쪽 여백
contents : 박스의 내용
박스 모델 화면 표시 방법
border-box : 크기 중심이 바깥 테두리 - 웹 제작시에는 border-box가 편함
content-box : 크기 중심이 내용 - CSS 기본값은 content-box -
CSS 정렬
(1) flex - 여러 태그를 하나로 묶어서 정렬
flex-direction : column; : 박스를 수직으로 나열
flex-direction: row; : 박스를 수평으로 나열
justify-content : center;
align-items: center;
space-between : 사이
space-around : 둘레
space-evenly : 사이, 양 끝
(2) position
position: absolute : 절대적 위치 (페이지)
position: relative : 부모(상위) 박스 기준 상대 위치
position: fixed: 화면기준으로 절대적 위치(화면을 기준) - ex) 화면 맨 아래에 네비게이션 바를 고정
position: static - css 별도 지정 없을 때,default 값, 속성이 비활성화
Javascript
1. 변수와 상수
변수 (값이 변할 수 있음) : var, let
상수 (값이 변할 수 없음) : const
(1) 선언(declaration)
변수와 상수를 사용하기 위해서는 변수 또는 상수를 선언 해야 한다
변수의 이름을 알려주는 행위
(2) 할당(definition)
데이터를 담을 수 있는 변수가 생성, 변수에 데이터를 할당해 줄 수 있습니다.
변수에 데이터를 담아주는 행위
(3)Chrome 개발자 도구
요소(Elements) : HTML을 분석하고 수정해볼 수 있는 도구
콘솔(Console) : 현재 로딩된 페이지에서 자바스크립트를 시험하거나 로그/오류 메세지 등을 확인할 수 있는 도구
소스(Resources) : 현재 로딩된 페이지에서 사용된 리소스를 열람할 수 있는 도구
네트워크(Network) : 서버와의 통신 내역을 보여주는 도구
성능(Audits): 웹 어플리케이션의 성능을 향상시킬 방법을 컨설팅 해주는 도구
※ 코드 지갑 : 코드 관리, 일어났던 오류들 관리
- 배열 : 한번에 모두 담을 수 있음 , 대괄호 안에 데이터를 넣고 쉼표로 데이터를 구분
ex)
let students = ["길동","철수","영희"]
빈배열 let array = []
숫자 배열 let numArr = [1,2,3,]
문자열 배열 let strArr = ["길동","철수","영희"]
배열에 있는 각 데이터의 위치 : index => 0부터 카운트
length => 1부터 카운트
const array = ["배열"]
배열의 길이 구하기 : array.length
배열의 값 꺼내기 : array[숫자(인덱스)]
배열 맨 뒤에 값 추가 : array.push()
배열 맨 마지막 값 삭제 : array.pop()
배열 요소 정렬 : array.sort()
배열 데이터 확인 : array.includes(값)
배열 2개 연결 : array.concat(array2)
배열을 문자로 만들기 : array.join()
배열 분리 : array.slice()
배열에서 원하는 요소 뽑기 : array.filter()
배열의 모든 요소 변경 : array.map()
문자열도 배열처럼 다룰 수 있다
문자열 배열
const email - "codecamp@gmail.com"
실무 예시) 조회한 메일에 **표시하기
조회하신 이메일은 아래와 같습니다 code**@gmail.com
- 객체
Key-Value Pair
const profile ={
name : "홍길동",
age : 49
height:,
school:"코드중학교"
}
key: 비어 있을수 x , value: 비어있을 수 있음
profile.KEY : dot notation
profile["KEY"] : braket notation
