기초/프론트엔드 종합반 HTML&CSS, JS, React23 4주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3 Node.js 개요 및 설치 Node.js Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(프로그래밍 언어가 동작하는 환경) 웹브라우저는 HTML, CSS, JS만 동작을 함 하지만 순수하게 HTML, CSS,JS만 가지고 만들게 되면 완성을 할 수는 있지만 과정이 비효율적. 그래서 컴퓨터에 개발을 도와주는 여러가지 모듈들을 설치해서 도움을 받아가면서 개발을 하는 것 하지만 이러한 모듈들은 실제로 브라우저에서 직접적으로 동작할 수 없기 때문에 대표적으로 Node.js 환경에서 도움을 받은 내용들을 결국에는 HTMl, CSS, JS로 변환을 해야해주어야 함. 컴퓨터에게 변환작업에 대한 명령을 내려줄 수 있어야 하고 그 명령이 돌아가는 환경이 필요 그래서 No.. 2023. 1. 12. 4주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 DOM API Document Object Model, Application Programming Interface JS로 HTML 제어할때 사용하는 여러가지 명령들 //HTML 요소(Element) 1개 검색/찾기 const boxEl = document.querySelector(".box"); //HTML 요소에 적용할 수 있는 메소드 boxEl.addEventListener(); //인수(Arguments)를 추가 가능 boxEl.addEventListener(1, 2); //1 - 이벤트(Event, 상황) boxEl.addEventListener("click", 2); //2 - 핸들러(Handler, 실행할 함수) boxEl.addEventListener("click", function () .. 2023. 1. 10. 4주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 표기법 dash-case(kebab-case) HTML, CSS the-quick-brown-fox snake_case HTML, CSS the_quick_brown_fox camelCase JS theQuickBrownFox ParcelCase JS TheQuickBrownFox Zero-Based Numbering 0기반 번호 매기기 특수한 경우를 제외하고 0부터 숫자를 시작함 JS 주석 // 한줄 메모 /* 한 줄 메모 */ /** * 여러 줄 * 메모1 * 메모2 */ JS 데이터 종류 String(문자 데이터) 따옴표를 사용 let myName = "H.E"; let email = 'HE3010@gmail.com'; let hello = `Hello ${myName}!!`; console.log.. 2023. 1. 10. 3주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3 CSS 변환 transform: 변환함수1 변환함수2 변환함수3 ... ; transform: 원근법 이동 크기 회전 기울임; 요소의 변환 효과 원근법 함수는 제일 앞에 작성해야 함 perspective 하위 요소를 관찰하는 원근 거리를 지정 단위: px 등 단위로 지정 backface-visibility 3D 변환으로 회전된 요소의 뒷면 숨김 여부 visible: 뒷면 보임(★기본값) hidden: 뒷면 숨김 2023. 1. 6. 3주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 CSS 플렉스(정렬) display Flex Container의 화면 출력(보여짐) 특성 flex: 블록 요소와 같이 Flex Container 정의 inline-flex: 인라인 요소와 같이 Flex Container 정의 flex-direction 주 축(Main-Axis)을 설정 row: 행 축(좌→우)(★기본값) row-reverse: 행 축(우→좌) column: 열 축(위→아래) column-reverse: 열 축(아래→위) flex-wrap Flex Items 묶음(줄 바꿈) 여부 nowrap: 묶음(줄 바꿈) 없음(★기본값) wrap: 여러 줄로 묶음 wrap-reverse: wrap의 반대 방향으로 묶음 justify-content 주 축의 정렬 방법 flex-start: Flex Ite.. 2023. 1. 6. 3주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 CSS 문자 color 글자의 색상 rgb(0,0,0): 검정색(★기본값) 색상: 기타 지정 가능한 색상 text-align 문자의 정렬방식 left: 왼쪽 정렬(★기본값) right: 오른쪽 정렬 center: 가운데 정렬 justify: 양쪽 정렬 text-decoration 문자의 장식(선) none: 장식 없음(★기본값) unterline: 밑줄 - a태그는 기본적으로 밑줄이 들어감 overline: 윗줄 line-through: 중앙 선 text-indent 문자 첫 줄의 들여쓰기(양수 사용)&내어쓰기(음수 사용) 0: 들여쓰기 없음(★기본값) 단위: px, em, rem 등 단위로 지정 %: 요소의 가로 너비에 대한 비율 CSS 배경 background-color 요소의 배경 색상 transp.. 2023. 1. 4. 2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트3 CSS 테두리 선과 색상 표현 border: 선-두께(width) 선-종류(style) 선-색상(color) 요소의 테두리 선을 지정하는 단축 속성. 요소의 크기가 커짐 ★기본값: medium none(선의 종류가 없어서 출력되지 않음) black border-width 요소 테두리 선의 두께(상하좌우, 상하 좌우, 상 좌우 하, 상 우 하 좌) 두께는 상대적이기 때문에 정확한 수치를 통해서 특정한 단위로 명시하는 것을 권장 medium: 중간 두께(★기본값) thin: 얇은 두께 thick: 두꺼운 두께 단위: px, em, % 등 단위로 지정 border-style 요소 테두리 선의 종류(상하좌우, 상하 좌우, 상 좌우 하, 상 우 하 좌) none: 선 없음(★기본값) solid: 실선 (일반 선).. 2023. 1. 2. 2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트2 CSS 속성 - 개요 박스모델: HTML 요소의 기본적인 모양을 만들어내는 기본적인 속성 글꼴, 문자: 글꼴은 폰트라고 말하는 서체를 의미 또한 모든 문자를 제어 배경: 요소의 배경으로 색상을 집어넣거나 혹은 이미지 삽입 배치: 어떤 특정한 요소를 원하는 위치에다가 가져다 놓음 플렉스(정렬): 일반적으로 HTML에 요소는 수직(위에서 아래로)으로 쌓이는 개념을 가지고 있는데 여러요소를 수평으로 순서대로 수평정렬을 하는 것. 옛날에는 띄움을 이용했지만 현재는 플렉스를 이용 전환: 요소의 전상태와 후상태 중간과정을 자연스럽게 애니메이션 처리 해주는 것(전환효과). 즉 전환은 요소의 전후상태를 애니메이션 처리하는 개념 변환: 요소를 회전하거나 이동시키거나 크기를 조절해주는 요소의 변화를 주는 CSS 특성. 2.. 2023. 1. 1. 2주차_ HTML/CSS/JS로 만드는 스타벅스 웹사이트 CSS 기본문법 선택자: 스타일(CSS)을 적용할 대상(Selector) 속성: 스타일(CSS)의 종류 (Property) 값: 스타일(CSS)의 값(Value) {: 스타일 범위의 시작 }: 스타일 범위의 끝 CSS 선언방식 내장방식 의 내용(Contents)으로 스타일을 작성하는 방식. 별도의 CSS파일을 따로 만들지 않아도 HTML파일내에서 바로 CSS내용을 적용할 수 있지만 CSS내용이 많아지면 HTML파일내에서 다 처리하기가 길어짐 프론트엔드개발할때는 HTML, CSS, JS파일을 구별해서 관리하는 것이 장점이 많음 그래서 내장방식은 단점이 많음. 권장하지 않는 방식(내장방식은 직접 코드를 작성하는 것이 좋은 방법이 아니기 때문) 프로젝트를 번들(한데 묶어서 서버에서 올리는 방식)할때 번들하는 .. 2022. 12. 30. 이전 1 2 3 다음
