1. 자주 쓰이는 CSS 연습하기 「연습할 것들: h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding」 • 로그인 페이지 만들기 • margin과 padding 헷갈리지 않기 - margin은 바깥 여백을, padding은 내 안쪽 여백을 의미함 • 완성 코드 로그인 페이지 아이디, 비밀번호를 입력하세요 ID : PW : 로그인하기 2. 만들어둔 로그인 화면을 가운데로 가져오려면? - 박스 씌우고 양쪽 여백 조정하기. 즉, 전체 div를 만들고, width를 주고 margin: auto 사용하기 • 완성 코드 로그인 페이지 아이디, 비밀번호를 입력하세..

1. HTML 부모-자식 구조 살펴보기 「HTML 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요함. 나를 감싸고 있는 태그가 바뀌면, 그 안에 내용물도 모두 영향을 받음」 • 빨간색 div 안에, 초록색/ 파란색 div가 들어있음. 아래와 같은 상황에서 빨간색 div를 가운데로 옮기면, 내용물인 초록/ 파란 div도 모두 함께 이동함 • 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리임. • 같은 원리로, 초록 div의 글씨색을 바꾸면, 나는버튼1의 글씨색도 바뀜. 2. CSS기초 ① css는 어떻게 사용하는가 • 안에 로 공간을 만들어 작성함. 로그인 페이지 ID: PW: 로그인하기

값(value)은 프로그램이 조작할 수 있는 데이터. 여러종류가 있는데, 이런 값의 종류를 자료형(data type)이라고 함. 1. 문자열(string) • 프로그래밍에서 하나의 글자를 문자. 문자들이 하나 이상 나열된 것을 문자열이라 함. • 현재 값이 문자열인지 확인하려면 문자열 앞에 type of를 붙이면 됨. type of를 연산자라고 함. • 문자열 안에서 따옴표를 사용할 땐 꼭 같은 종류를 사용. • 문자열 안에 같은 따옴표를 쓰고 싶을 땐 백슬래시(\)사용. • 원래는 따옴표가 문자열의 끝을 알리는 문자지만, \가 붙은 따옴표는 보통의 문자로 해석이 됨. 이렇게 문자가 다르게 해석되게하는 행위를 이스케이핑(escaping)이라고 하며, 따옴표를 이스케이핑한다고 표현함 • 문자열 내부에 \n..

1. HTML과 CSS의 개념 「HTML은 뼈대, CSS는 꾸미기!」 • HTML은 웹의 뼈대를 잡아줌. 웹의 전반을 HTML을 통해 작성 가능 • CSS는 HTML을 통해 작성된 뼈대를 예쁘게 꾸며주는 코드 • HTML 내 style 속성으로 꾸미기를 할 수 있지만, 이것을 한 데 모아 볼 수 있는 CSS파일이 탄생함. HTML코드 내에 CSS파일을 불러와서 적용함 2. HTML 기초 ① VS Code에서 html 파일을 만들고 코드를 적는 공간에 html이라고 적고 ② 자동완성 항목에 html:5를 클릭함 ③ 코드화면에서 오른쪽 클릭 후 open with live server 클릭하기 • HTML은 크게 head 와 body로 구성됨 - head 안에는 페이지의 속성 정보를, body 안에는 페이지의..

1. 서버/ 클라이언트/ 웹의 동작 개념 「브라우저는 요청을 보내고, 받은 HTML 파일을 그려줌」 - 브라우저는 그려주는 역할을 함 •우리가 보는 웹 페이지는 모두 서버에서 미리 준비해두었던 것을 받아서 브라우저에서 우리가 볼 수 있도록 그려주는 역할 수행. • 즉 브라우저는 요청을 보내고, 요청의 답으로 받은 HTML 파일을 그려주는 일 • 우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML파일을 돌려주고 브라우저는 받은 것을 화면에 그려줌 • 항상 HTML 파일로 돌려주진 않고 데이터만 받아서 갈아끼우는 식으로 작동하게 됨

1. 세미콜론 (;) - 자바스크립트는 하나의 명령이 끝날 때 세미콜론을 붙여도 되고 안붙여도 됨. 하지만 붙이기를 권장함. 2. 주석 - 한 줄 주석은 // - 여러 줄 주석은 /* */ 3. 들여쓰기 - 보통 스페이스 2칸, 스페이스 4칸, 탭으로 4칸공백으로 하지만 1칸, 3칸도 이상은 없음