본문 바로가기

분류 전체보기

 (37)
[Web] HTML5 시멘틱 구조 태그 1. 시멘틱 태그 일반적으로 HTML5 태그의 가장 큰 변화를 시멘틱 태그라고 말합니다. 그리고 이 때문에 일반적으로 HTML5 웹 페이지를 시멘틱 웹 페이지라고 말합니다. 일단 시멘틱 (semantic) 은 '의미론적인' 이라는 영어 단어입니다. 웹 페이지는 글자로 입력합니다. 스타일시트를 적용하고 사용자가 눈으로 볼 때 "이것은 제목이고 이것은 본문이다" 라는 식으로 구분할 수 있습니다. 우리는 눈으로 레이아웃을 구분하므로 빠르게 구분할 수 있지만 컴퓨터는 그렇지 않습니다. 따라서 기계적인 검색 엔진은 어떠한 태그가 어떠한 기능을 하는지 분별할 수 없고 웹 페이지에서 데이터를 효율적으로 추출할 수 없습니다. 이를 해결하고자 특정한 태그에 의미를 부여해서 웹 페이지를 만드는 시도가 시작되었습니다. 그리..
[HTML] 입력 양식 태그 1. from 태그 2. 기본 input 태크 2) input 태그의 type 속성값 HTML4 에서 지원 속성값 설명 button 버튼 생성 checkbox 체크박스 생성 file 파일 입력 양식 생성 hidden 보이지 않습니다 image 이미지 형태 생성 password 비밀번호 입력 양식 생성 radio 라디어 버튼 새성 reset 초기화 버튼 생성 submit 제출 버튼 생성 text 글라 입력 양식 생성 HTML5 에서 추가 지원 속성값 설명 color 색상 선택 양식 생성 date 일 선택 양식 생성 datetime 날짜 선택 양식 생성 datetime-local 지역 날짜 선택 양식 생성 email 이메일 입력 양식 생성 month 월 선택 양식 생성 number 숫자 생성 양식 생성 ra..
[Program] 함수형 프로그래밍 1. 함수형 프로그래밍 1) 함수형 프로그래밍 '함수형 프로그래밍' 이란 프로그램을 만드는 방법 중 하나입니다. 우리가 익숙하게 사용해왔던 방법들은 명령형 프로그래밍이라고 할 수 있습니다. 하지만 병렬처리나 비동기 처리를 할 때는 명령형 프로그래밍보다는 함수형 프로그래밍이 적합합니다. 함수형 프로그래밍은 외부 효과 (side effect) 가 없는 함수만의 조합을 이용해 프로그래밍을 하는 방법입니다. 함수형 프로그래밍은 외부 세계의 값을 읽어오지 않고, 영향을 미치지도 않는 함수만을 만드는 것을 목표로 하는 프로그래밍 패러다임입니다. 함수형 프로그래밍은 변수와 for의 사용을 가급적이면 줄이는 방향으로 프로그램을 개발합니다. for문을 사용하지 않는 대신 재귀를 사용합니다. [1] (182) 2) 일급 ..
[HTML] CodePen 1. CodePen 회원가입없이 HTML/CSS/JavaScript 코드가 어떻게 출력되는지 간단히 테스트 할 수 있는 사이트가 있습니다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 2. CodePen 에서 HTML/CSS/JavaScript 코드 테스트 1) Start Coding 클릭 2) HTML/CSS/JS 영역에 코드 입력하면 출력 영역에서 바로 결과 확인 가능
[Power Automate] 흐름 저장 및 관리 Power Automate 데스크톱의 경우 Premium 버전이 아니면 생성된 흐름을 외부 파일로 저장하거나 보내는 기능이 없는 것 같습니다. (Preminum 버전을 사용해 보지 못해서 Premium 버전에는 외부 파일 저장 기능이 있는지 잘 모르겠습니다) 그래서 저는 아래와 같이 흐름을 일단 텍스트 파일로 저장해서 관리 및 배포하고 사용하는 방식을 사용합니다. 1. 흐름 저장 1) 흐름의 내용을 모두 복사 2) 복사한 내용을 텍스트 편집기에 붙여넣기해서 텍스트 파일로 저장 3) 텍스트 파일을 관리하거나 배포 2. 텍스트 파일로 저정된 흐름 복사 및 사용 1) 새 흐름 만들기 2) 텍스트 파일의 내용을 모두 복사 3) 새 흐름에 붙여넣기 4) 이전과 동일한 흐름이 생성됨
[CSS] 복합 선택자 1. 복합 선택자 HTML Code Sample 1) 모든 태그 선택 img { ... } 모두 선택 2) 아래 모든 태그 선택 p img { ... } 만 선택 2. 복합 선택자의 문제점 복합 선택자는 유용하지만 문제점도 있습니다. 복합 선택자로 작성된 코드를 읽으면서 수정하려면 HTML 본문의 구조를 완전히 파악하고 있어야 한다는 점입니다. 혼자서 홈페이지를 만들 때는 별다른 문제가 되지 않을 수도 있겠습니다만, 회사에서 협업을 하는 등의 상황에서는 이것이 불편을 초래할 수도 있습니다. 여러분은 CSS 쪽에서 복합 선택자를 적극적으로 활용하기보다는 HTML 코드상에서 클래스를 적극적으로 활용하는 편이 좋습니다. 클래스 선택자를 활용할 때는 해당 클래스의 이름을 한눈에 파악할 수 있으며, 해당 클래스 ..
[Power Automate] 폴더 내 파일 이름 일괄 변경 1. 목표 폴더 내 모든 파일 이름 앞에 'TEMP_' 라는 텍스트를 붙여준다. 2. 준비 C:\Test 폴더에 아래와 같이 파일들을 저장한다. 3. 흐름 만들기 1) 새흐름 2) '흐름 이름' 기입 후 '만들기' 클릭 3) '폴더의 파일 가져오기' 를 Main 으로 Drag & Drop 4) '폴더의 파일 가져오기' 대화상자에서 폴더 위치 지정 후 '저장' 클릭 5) '폴더의 파일 가져오기' 작업이 Main 에 추가됨 6) '각각의 경우' 를 Main 으로 Drag & Drop 7) '각각의 경우' 대화상자에서 '반복할 값' 을 '폴더의 파일 가져오기' 에서 생성된 'Files' 선택 8) '반복할 값' 으로 '%Files%' 가 선택된 것을 확인 후 '저장' 클릭 9) '각각의 경우' 작업이 Main..
[Power Automate] 다운로드 및 설치 1. Power Automate Desktop 다운로드 https://learn.microsoft.com/en-us/power-automate/desktop-flows/install Install Power Automate on your device - Power Automate Install Power Automate on your device. learn.microsoft.com 2. 설치 및 실행 1) 다운로드 받은 Setup 파일 실행 2) Power Automate 패키지 설치 3) Chrome 브라우저에서 '확장 프로그램 사용' 선택 4) 이메일주소 입력 후 로그인 5) Microsoft 로그인 6) Power Automate 실행 됨
[jQuery] Basic 1. jQuery 1) jQurey 란 jQuery는 오픈 소스 JavaScript 라이브러리입니다. jQuery를 사용하면 짧고 단순한 프로그램으로 웹 페이지에 다양한 효과나 연출을 추가할 수 있고 복잡하게 구성된 콘텐츠를 제어할 수 있습니다. jQuery는 2006년 존 레식(John Resig)이 처음으로 공개했으며, 현재는 'jQuery Team' 이라는 개발자 그룹이 개발과 유지 보수를 담당하고 있습니다. [2] (20) John Resig 가 개발한 JavaScript 라이브러리로 다음과 같은 특징이 있다. [1] (146) - 'Write Less, Do More (좀 더 단순한 코드로 더 많은 처리를)' 목표 - 기본적인 DOM 조작에서부터 애니메이션 기능, 이벤트 처리, Ajax 통신까지..
[Node.js] Express Web Server Framework 1. Express Web Server Framework npm 에는 서버 제작 시 불편함을 해소하고, 편의 기능을 추가한 웹 서버 프레임워크가 있습니다. 대표적인 것이 익스프레스입니다. 익스프레스는 http 모듈의 요청과 응답 객체에 추가 기능들을 부여했습니다. 기존 메서드들도 계속 사용할 수 있지만, 편리한 메서드들을 추가하여 기능을 보완하였습니다. 또한, 코드를 분리하기 쉽게 만들어 관리하기도 용이합니다. [1] (184) 2. express-generator 패키지로 express 설치 익스프레스 프레임워크는 익스프레스 외에도 많은 패키지를 사용하므로 입문자 입장에서는 필요한 패키지를 찾아서 설치하기 조금 어렵습니다. 다행히 프레임워크에 필요한 package.json 을 만들어주고 기본 폴더 구조..

티스토리툴바