프론트엔드38 [23-2] WEB 2. 시맨틱 웹 & 폼 요소 1. 시맨틱 태그 : 검색이 잘 됨 - 헤딩 태그(h1~h6) : 주제 기재 1. 문서 구조 header : 머리말. 페이지 제목, 소개 nav : 하이퍼링크. 목차, 링크, 메뉴 section : 장, 절. 본문 article : 보조적인 기사. 본문 내 각 절이나 영역 aside : 오른쪽이나 왼쪽에 주로 배치 footer : 꼬리말. 저자, 저작권 정보 2. 시맨틱 블록 태그 figure : 그림을 블록화하는 시맨틱 태그 - figcaption : 그림 제목 details : 상세 정보 > summary summary : 상세 정보 감추기 3. 시맨틱 인라인 태그 mark : 중요한 텍스트 표시 time : 시간 정보임을 표시 meter : 주어진 범위, %의 양 표시 progress : 작업 진행.. 2023. 11. 14. [23-2] WEB 1. HTML 기본 1. HTML5 - 로 시작 1. 차이점 - 표준화된 시맨틱 태그 삽입 - 플러그인 없이 미디어 재생 - 다양한 JS API 제공 2. 구조 - HTML5 : 구조와 내용 - CSS3 : 모양 - JS : 입력 처리 3. 작업 순서 1) mark up 2) 검증(validation) : https://validator.w3.org/ 3) 디버깅(debug) : 개발자 도구 4) css 5) JS / JQuery 4. 템플릿 설정 - 환경 : visual studio code - 스니펫 : myhtml { "myhtml tmpt" : { "prefix" : "myhtml", "body" : { "", "", "", "", "$2", "", "html" }, "description" : "myhtml 템플릿.. 2023. 11. 14. [23-2] WEB 목차 * WEB 목차 1. HTML 기본 2. 시맨틱 웹 & 폼 요소 3. 4. 5. HTML, CSS 내용을 정리했습니다. 2023. 11. 14. [생활코딩] JavaScript 12. 웹사이트 만들기 (야간모드 추가) 1. 아이디어 헤드라인 밑에 버튼을 만듭니다. 누르면 night 모드랑 day 모드가 번갈아서 나옵니다. * 버튼 기능 night 모드 day 모드 하이퍼링크 색 파우더블루 블루 배경색 블랙 화이트 글씨색 화이트 블랙 제작 : 2023. 8. 1 (github 이전) 2. 구조 스타듀밸리 치트 (index.html) 1. 호감도 치트 (1.html) 2. 돈 치트 (2.html) 3. 능력 치트 (3.html) 디자인 담당 (style.css) - link 태그로 배포 버튼 기능 구현 (colors.js) - script 태그로 배포 (JQuery 기능도 사용) 3. 코드 살펴보기 1. html 파일 변경사항 - script 태그 : 첫 번째는 JQuery, 두 번째는 JS 파일 - input 태그 : .. 2023. 11. 10. [생활코딩] JavaScript 11. 라이브러리와 API * JavaScript 목차 1. 라이브러리 vs 프래임워크 1. 라이브러리 (Library) : 만들고 있는 프로그램에 사용할 부품을 가져오는 느낌 - 생산성 증가 - 많이 알수록 할 수 있는 일이 증가 2. 프레임워크 (Framework) : 만들고자 하는 것에 따라 언제나 필요한 공통적인 부분에 달라지는 부분은 살짝 바꿔서 사용 - 반제품 - 수정이 필요 3. JQuery : 오래되고 안정적인 라이브러리 * 바로 가기 jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handl.. 2023. 11. 10. [생활코딩] JavaScript 10. 파일로 쪼개기 * JavaScript 목차 1. 파일 그룹핑 방법 1. input 태그를 배포한다 (버튼 퍼뜨리기) 2. color.js 파일을 만들고, 작성한 script 태그 내부를 복사해서 붙여 넣는다. 3. 출처를 입력한다. 2. 효과 - 유지보수 편리 - 퍼뜨리기 쉬움 - 가독성 높아짐 - 웹서버랑 사용자 모두 이득 (캐시, 트래픽) - 시간과 돈 절약 2023. 11. 10. [생활코딩] JavaScript 9. 객체 * JavaScript 목차 1. 객체 (object) : 인덱스로 문자를 사용하고 싶다면 = 연관배열 (associative array), 맵(map), 딕셔너리(dictonary) object.function() {}; - 순서 없이 정보를 저장 - 이름이 있는 정리정돈 상자 - 관련 있는 함수와 변수를 그룹핑 - 폴더 느낌 2. 객체 vs 배열 배열 객체 순서 O X (이름 O) 정의할 때 대괄호 중괄호 값을 불러오는... 인덱스 coworkers[0] 키 coworkers.programmer 3. 실습 : 객체 생성 및 확인 1. 결과 - 의도 : coworkers 객체 생성하고 데이터 입력 1) programmer : egoing 2) designer : leezche 3) bookkeeper .. 2023. 11. 10. [생활코딩] JavaScript 8. 함수 * JavaScript 목차 1. 함수 (function, 메소드, method) 1. 정의 : 입력과 출력이 존재, 기능을 수행 - 입력값에 따라 함수가 다른 출력값을 내도록 - 하나의 로직을 재실행할 수 있도록 하는 것 - 코드의 재사용성을 높여줌 - 핵심은 입력과 출력! (+) - 일종의 수납상자 - head 태그에 함수를 만들어서 작성 - 효율성 높임 - 웹페이지 크기 줄이기 * 메소드 (method) : 객체에 속해 있는 함수 2. 입력값 1. 매개변수 (파라미터, parameter) - 값을 받아서 함수 안으로 매개하는 변수들 ex) left, right 2. 인자 (아규먼트, argument) - 괄호 안에 들어가는 값 - 함수로 유입되는 입력값 ex) 2, 3 3. 리턴 (return) -.. 2023. 11. 10. [생활코딩] JavaScript 7. 문장 (Statement) * JavaScript 목차 1. 문장 (Statement) : 어떤 작업을 수행하는 문장 - 조건문 : if, else - 리팩토링 - 반복문 : while, for - 배열 * 표현식 (Expression) : 어떤 값을 가지고 있는 것 - 함수의 매개변수나 반환값이 될 수 있음 2. 조건문 (if) - if, else if, else 1. 실습 : 버튼 하나로 주간/야간 모드 1. 결과 - 의도 : if문을 사용해서 버튼 하나로 주간/야간 모드 기능 구현 - 버튼의 id를 night_day로 설정 2. 코드 3. 리팩토링 (refactoring) - 코드를 효율적으로 개선하는 것 1. this - 자기 자신을 가리킴 2. target 변수를 통한 중복 제거 4. 반복문 (Loop) - while문,.. 2023. 11. 10. [생활코딩] JavaScript 6. 연산자 * JavaScript 목차 1. 연산자 (operator) - 검색어 : javascript operators 2. 산술 연산자 (Arithmetic Operators) : 사칙연산 3. 대입 연산자 (Assignment Operators) : 변수에 값을 대입 또는 연산 4. 비교 연산자 (Comparison Operators) : 값을 비교할 때 사용하는 연산자 * 값이 없다? - null : 값이 없음을 명시적으로 표시 - undefined : 값이 없는 상태 - NaN : 0/0과 같은 연산의 결과로 만들어지는 특수한 데이터형. 숫자가 아니라는 뜻 1. 간단 실습 - 결과가 true, false로 나옴 2. == vs === : === 쓰기! - 왼쪽은 ==, 오른쪽은 === 5. 논리 연산자 .. 2023. 11. 10. [생활코딩] JavaScript 5. 자료형 * JavaScript 목차 1. 자료형 (데이터 타입, Data type) 1. 종류 - String : 문자열 - Number : 숫자 - Variable : 변수 - Boolean : 불리언 - Array : 배열 - Function : 함수 - Object : 객체 2. 숫자 (Number) 1. Math. - 승, 반올림, 올림, 내림, 제곱근, 랜덤 등 2. 실습 : Number - 그냥 적으면 됨 - 산술 연산자: + - * / 3. 문자열 (String) 1. 이스케이프 (escape) : 단순히 문자로 해석하도록 사용할 때 2. 실습 : 문자열 - ' '나 " " 안에 적기 - 큰 따옴표는 큰 따옴표로, 작은따옴표는 작은따옴표로 끝내기 * indexOf()의 결과 - -1 : 찾는 값이 .. 2023. 11. 10. [생활코딩] JavaScript 4. 이벤트 * JavaScript 목차 1. 이벤트 (event) : 웹브라우저 위에서 일어나는 사건 2. 웹브라우저에서 일어날 수 있는 이벤트? - 검색어: Javascript event * 링크 (https://www.w3schools.com/js/js_events.asp) JavaScript Events W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com 3. 실습 : 경고창 1... 2023. 11. 10. [생활코딩] JavaScript 3. Script 태그 * JavaScript 목차 1. Script 태그 - 웹브라우저한테 HTML의 코드로 지금부터 JavaScript가 시작된다고 알려줌 2. 실습: hello world 1. 결과 - 의도: 화면에 hellow world 출력 2. 코드 - body 태그에 script 태그 추가 3. 실습: 차이 확인 1. 결과 - 의도: JavaScript 코드와 HTML 코드 비교 2. 코드 - document.wirte: JS코드, 화면에 출력 - JavaScript는 동적이라서 1+1을 계산해서 2를 출력 - HTML은 불가능 2023. 11. 10. [생활코딩] JavaScript 2. 콘솔 * JavaScript 목차 1. 콘솔 (console) - JavaScript를 실행하는 또 다른 방법 - 코드를 실행해야 하는 가벼운 상황에서 유용 2. 웹 페이지에서 실행하는 법 1. 오른쪽 클릭 - [검사] - [콘솔탭] * 콘솔 창은 개발자 도구에 있음 [CSS] 5. 개발자 도구 CSS 1. 등장 배경과 장단점 2. Style 태그와 속성 3. 선택자와 속성 4. HTML 태그 크기 5. 개발자 도구 6. 박스 모델 7. 그리드 8. Can I Use (웹 기술 통계) 9. 미디어 쿼리 10. 코드 재사용 11. 웹사이트 만들기 hobbymemo.tistory.com 2. 자바 스크립트 코드를 즉석에서 실행할 수 있음 - 코드 입력하고 엔터 누르면 됨 - 같은 코드 다시 입력하고 싶으면 위쪽 .. 2023. 11. 10. [생활코딩] JavaScript 1. 등장 배경 * JavaScript 목차 1. 웹 브라우저 - 한 번 화면이 출력되면 자기 자신을 바꿀 수 없음 ex) HTML (정적) 2. JavaScript - HTML을 제어하는 언어 (HTML 위에서 동작) - 사용자와 상호작용 하게 만들어줌 - 홈페이지 변경 가능 3. 홈페이지에 버튼 추가 - input 태그에 button 속성 넣기 - onclick 속성의 값으로 JavaScript 필요 (버튼을 클릭했을 때 해당 자바 스크립트 코드 실행) 4. 프로그래밍 언어 1. 컴퓨터 언어 1. HTML - 웹페이지를 묘사 - 시간의 순서에 따라 무엇을 할 필요가 없음 - 컴퓨터 프로그래밍 언어 X (순서 X) 2. JavaScript - 사용자와 상호작용하기 위해 고안된 언어 - 시간의 순서에 따라 웹브라우저의 .. 2023. 11. 10. [생활코딩] JavaScript 목차 * JavaScript 목차 1. 등장 배경 2. 콘솔 3. Script 태그 4. 이벤트 5. 자료형 6. 연산자 7. 문장 (Statement) 8. 함수 9. 객체 10. 파일로 쪼개기 11. 라이브러리와 API 12. 웹사이트 만들기 (버튼 추가) 생활코딩에서 배운 JavaScript 내용을 정리했습니다. JavaScript를 이용해서 웹 페이지가 사용자와 상호작용하게 만드는 방법을 배웁니다. 웹 프로그래밍을 하기 위한 필수 언어라고 합니다. 목표는 2가지입니다. 1. 기존에 만든 웹페이지에 주간/야간 모드 기능을 추가하기 2. 각종 JavaScript 문법 익히기 * 검색어 가이드 1. document - 웹 페이지에 있는 태그 삭제 - 자식 태그 추가 2. DOM (Document Object.. 2023. 11. 10. [생활코딩] HTML 1. Visual Studio Code 사용법 * HTML 목차 1. 설치 - https://code.visualstudio.com 2. 기본 템플릿 1. html 문서에 ! 입력 2. [tab]키 누르기 3. 나만의 템플릿 만들기 - file - preferences - configure User Snippets 클릭 - New Global Snippets file 선택 - 원하는 이름 설정 $2 Q. $1, $2은? 탭키 누르면 커서 이동 위치 4. 한글이 깨지면? - 코드 삽입 - 아예 템플릿 만들 때 넣기 5. 코드가 한 줄로 길게 나온다면? - [View] - [Word Wrap] - 단축키 : [Alt]+[Z] 6. 부등호를 문자로 표현하고 싶다면? - < : (greater than) 7. .. 2023. 11. 7. [생활코딩] CSS 8. Can I Use (웹 기술 통계 확인) * [생활코딩] CSS 목차 여러 CSS, HTML, JavaScript 중 현재 웹브라우저들이 그 기술을 얼마나 채택하고 있는가에 대한 통계를 보여주는 서비스. 궁금한 기술 이름을 검색하면 오른쪽 상단에 이용률을 보여준다. * 사이트 링크 (https://caniuse.com/) Can I use... Support tables for HTML5, CSS3, etccaniuse.com 지원 여부는 색깔로 표시해 준다. 아주 중요하고 유용한 사이트니까 참고하면 좋다. 2023. 11. 5. [생활코딩] CSS 5. 개발자 도구 * [생활코딩] CSS 목차 1. 웹페이지 분석- F12 클릭 - 궁금한 부분 클릭 - Style과 Computed 탭에서 세부사항 확인 2. 코드 확인- 오른쪽 클릭 - [검사] 3. 장치모드 해제- Ctrl + Shift + M 4. 중단점 설정 (break point)- Source 탭 - 마우스로 라인 번호 클릭 * 콘솔 창 활용 2023. 11. 5. [생활코딩] CSS 11. 웹사이트 만들기 (디자인 강화) * [생활코딩] CSS 목차 1. 아이디어 생활코딩 예제처럼 선으로 구역을 나눴습니다. 가로길이가 800px 이하로 바뀌면 레이아웃이 사라집니다. - 다른 html 파일도 div로 나눠줘야 본문이 목차 오른쪽에 나옵니다. 제작 : 2023. 6. 17 (github 이전) 2. 결과물 1. 링크 https://cejinn.github.io/stardew_wiki_v2/ Stardew Valley 스타듀 밸리란? Stardew Valley는 농장 RPG 게임입니다. NPC의 호감도를 높이면 요리 레시피나 선물을 얻을 수 있고, 이벤트를 볼 수 있습니다. 기본 사항 1. [윈도우 키] + [R]키를 누릅니다. 2. %appdata%/Sta cejinn.github.io - github 웹호스팅까지 완료 2... 2023. 11. 5. [생활코딩] CSS 10. 코드 재사용 * [생활코딩] CSS 목차 1. 링크 파일을 이용해서 퍼뜨리기1. style.css 파일 만들기 2. style 태그 내부에 있던 코드 옮기기 3. html 파일에 링크 태그 추가 - html 웹페이지가 style.css 파일과 링크(연결)되어있고, 웹브라우저는 css 파일을 다운로드하여 웹페이지에 적용 2. 효과1. 내부적으로 훨씬 효율적인 상태 2. 재사용성 증가 3. 사용성 증가 4. 한 번에 전부를 바꿀 수 있음 - style.css에 있는 코드만 변경하면 됨 5. 코드 양 감소로 경제적 효과 6. 캐시 기능 덕분에 네트워크적으로도 효율적 - 빠르게 보여주면서 사용료는 적게 사용 3. 확인- 개발자 도구에서 [Network] 탭 확인 2023. 11. 5. [생활코딩] CSS 9. 미디어 쿼리 (MediaQuery) * [생활코딩] CSS 목차 * 미디어 쿼리를 이용해서 다양한 크기의 스크린에 맞는 디자인하기 1. 반응형 디자인 (= 반응형 웹, Responsive Web)- 화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌는 것 2. 미디어 쿼리 (Media Query)- 반응형 디자인을 위한 기능 1. 실습 : max-width1. 결과 - 의도: 가로길이가 800px보다 작아지면 화면에 안 나옴 2. 코드 - 가로가 800px보다 작아지면 안 보이도록 설정 2. 실습 : min-width1. 결과 - 의도: 가로길이가 800px보다 커지면 화면에 안 나옴 2. 코드 - 가로가 800px보다 커지면 안 보이도록 설정 3. 실습 : 미디어쿼리 활용1. 결과 - 800px 보다 가로폭이 작을.. 2023. 11. 5. [생활코딩] CSS 7. 그리드 (레이아웃 제작) * [생활코딩] CSS 목차 1. 디자인용 나누기 태그1. div- 블록 레벨 엘리먼트 - 부모와 자식으로 감싸서 사용할 수 있음 2. span- 인라인 엘리먼트 2. Grid 장점- 자동으로 커짐 - 최신 기술 3. 실습 : 그리드1. 결과- 글자를 회색 테두리로 감싸기 : div 이용 - 분홍 테두리로 묶어서 감싸기 : div 이용 2. 코드 - div를 부모 자식 관계로 중첩해서 사용 1) 부모 div: 분홍색 - id를 grid로 설정 2) 자식 div: 회색 - fr : 화면 전체를 자동으로 쓰게 하는 단위, 비율 (1fr, 2fr) 4. 실습 : 레이아웃 제작1. 결과 - 본문을 하이퍼링크 오른쪽으로 옮기기 - div 이용 2. 코드 1) style 태그 내부 - grid 기능 활용 - 본문은.. 2023. 11. 5. [생활코딩] CSS 6. 박스 모델 (레이아웃 제작) * [생활코딩] CSS 목차 두 번째 목표인 레이아웃 제작입니다. 박스모델을 이용하면 1차 작업을 끝낼 수 있습니다. 1. 박스 모델 (Box model)- HTML 태그 하나하나를 박스로 취급 - 부피감 결정 1. 콘텐츠 (Contents)1) width: 콘텐츠 폭 2) height: 콘텐츠 높이 2. 패딩 (padding)- 콘텐츠 바깥쪽에 있는 테두리 사이 간격 3. 마진 (margin)- 테두리와 테두리 사이 2. 실습1. 결과- 회색 선 그리기 1) 가로선: h1 태그 2) 세로선: ol 태그 2. 코드 2023. 11. 5. [생활코딩] CSS 4. HTML 태그의 크기 * [생활코딩] CSS 목차 1. HTML 태그의 크기1. 블록 레벨 엘리먼트 (block level element)- 화면 전체 차지 ex) h1 2. 인라인 엘리먼트 (inline element)- 자기 크기 차지 ex) a 2. 실습 : 크기 확인1. 결과 - 보더에 빨간색 5px 테두리를 둘러서 h1 태그와 a 태그 부피 확인 2. 코드 - boder 안에 5px, solid, red를 띄어쓰기로 구분해서 입력 2023. 11. 5. [생활코딩] CSS 3. 선택자와 속성 * [생활코딩] CSS 목차 1. 선택자와 속성 1. 선택자 (Selector)- 효과를 누구에게 줄 것인가 표시 2. 효과 (선언, Declaration)- 선택자에 지정될 효과 - 속성(property)과 값(Value)으로 나뉨 2. 선택자 스스로 알아내는 법1. 종류- id 선택자: #id, 1번만 등장 (중복 X) - 클래스 선택자: .class - 태그 선택자: a, h1, 나머지 2. 우선순위id > 클래스 > 태그 - 더 구체적인 것이 우선순위가 높음 - 클래스가 더 유리 3. 검색어: CSS Selector CSS Selectors ReferenceW3Schools offers free online tutorials, references and exercises in all the maj.. 2023. 11. 5. [생활코딩] CSS 2. Style 태그와 속성 * [생활코딩] CSS 목차 1. Style 태그 1. 선택자 (Selector) - 빨간 부분 - 효과를 누구에게 줄 것인가 표시 2. 효과 (선언, Declaration) - 노란 부분 - 선택자에 지정될 효과 2. Style 속성- style 태그를 직접 사용한 경우, 위치한 태그에게 영향을 줌 - 선택자 사용할 필요 X style="color:red" - html 속성 - CSS 3. 실습1. 결과물- a 태그 : 검은색, 밑줄 제거 - 현재 페이지(돈 치트) : 링크만 빨간색, 밑줄 2. 코드 (노란색 확인) * 밑줄 - 제거: text-decoration: none; - 생성: text-decoration: underline * 구분자 : 세미콜론 (효과 지정한 다음 사용) - 한 줄에 있어도.. 2023. 11. 5. [생활코딩] CSS 1. 등장 배경과 장단점 * [생활코딩] CSS 목차 1. 등장 이유1. HTML은 정보에 집중하게 하려고 2. 디자인할 때 더 효율적 2. CSS 장단점1. 단점 - 사용자가 새로운 문법 익혀야 함 - 웹이 CSS를 해석할 줄 알아야 함 2. 장점 (효율적) - 중복 제거 - 일괄 변경 - 유지 보수 편리 - 가독성 증가 3. 글씨 색 바꾸기 1. 간단 설명 - style : html의 문법, 안쪽은 CSS의 언어라는 뜻 2. 코드 - 의도: 모든 a 태그 폰트 컬러를 빨간색으로! - 주석: 3. 결과물 - 하이퍼링크가 빨간색으로 변경됨 2023. 11. 5. [생활코딩] CSS 목차 * CSS 목차 1. 등장 배경과 장단점 2. Style 태그와 속성 3. 선택자와 속성 4. HTML 태그의 크기 5. 개발자 도구 6. 박스 모델 7. 그리드 8. Can I Use (웹 기술 통계 확인) 9. 미디어 쿼리 10. 코드 재사용 11. 웹사이트 만들기 CSS를 이용해서 웹사이트를 디자인하는 방법을 배웁니다. 목표는 3가지입니다. 1. CSS 기본 문법 (선택자와 속성) 2. Grid를 이용한 현대적 레이아웃 제작 방법 3. MediaQuery를 이용해서 다양한 크기의 스크린에 대응하는 방법 * 마무리- 선택자와 속성을 많이 알수록 표현력 증가! 2023. 11. 5. [생활코딩] HTML 6. 부록 정리 * HTML 목차 1. 동영상 삽입- 동영상 사이트에 가서 [공유]-[퍼가기] - 코드 복사 후 추가 (iframe) 2. 댓글 기능 추가- DISQUS나 liveRe - 코드 복사 후 추가 - 웹서버를 통해야 작동함 3. 채팅 기능 추가- tawk - 코드 복사 후 추가 - 웹서버를 통해야 작동함 4. 방문자 분석기- 구글 애널리틱스 - 코드 복사 후 추가 2023. 11. 5. 이전 1 2 다음
