IT
[웹사이트 만들기-4] HTML, CSS, JS 구조
[웹사이트 만들기-4] HTML, CSS, JS 구조 1. HTML 구조 1-1) HTML 기본 구조 *.html에 !를 치고 엔터를 치면 구조가 자동으로 삽입되는데 이는 다음과 같다. Hello World!! Hello World!! Hello World!! Hello World!! Hello World!! Hello Worldddddd!! html lang = "en"을 "ko"로 바꿔주면 아래와 같이 번역기 창이 팝업되지 않는다. (한국어를 전제하여 동작하는 사이트로 설정됨) 1-2) CSS 구조 div { color: red; font-size: 100px; } 1-3) HTML과 CSS 연동 ① 'main.css'라는 파일을 생성한 후 head 태그에 link 입력 후 tab키를 누르면 자동으로..
[웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키)
[웹사이트 만들기-3] vscode에서 html 파일 만들고 출력하기 (vscode 단축키) 1. html기본 구조 만들기 1) index.html 파일명으로 새로 파일 만들기 2) '!'를 입력한 후 엔터를 치면 html 기본 구조가 자동 생성된다. 3) main.css 파일명으로 새로 파일 만들기 2. Auto Rename Tag Extension 설치 : Extension 버튼 클릭 - Auto 입력 - 설치 - html, css에서 태그 짝을 자동으로 맞춰주는 Extension인 Auto Rename Tag를 설치하자 아래 사진과 같이 흰 동그라미가 떠있다는 것은 아직 저장되지 않은 파일이라는 뜻이고, 여러개의 파일이 저장되지 않았다면 모두 저장을 해줘야 한다. ※ 모두 저장 단축키 : Ctrl ..
[vscode] 소스코드 한번에 예쁘게 정리하기
[vscode] 소스코드 한번에 예쁘게 정리하기 이번 시간에는 vscode의 Beautify Extension을 이용하여 지저분한 소스코드를 한번에 예쁘게 정리하는 방법에 대해 알아보고자 한다. 1. Beautify Extension 설치 : Extension 버튼 클릭 - Beautify 입력 - 두 개 설치 후 재부팅 (가장 첫번째 있는 Beautify는 지원을 종료한다고 되어있으나 무시하고 설치한다) 2. Ctrl + Shift + P 입력 - '바로가기' 입력 - '기본설정: 바로가기 키 열기'를 클릭한다. - 한국어 지원이 안될 경우, Extension에서 'Korean' 을 입력하여 한국어 패치를 한다. 3. Beautify 입력 - Beautify selection 클릭 - 단축키를 Ctrl..
[IT 상식] Edge 새 탭 페이지 변경하는 방법
[IT 상식] Edge 새 탭 페이지 변경하는 방법 설정 및 기타로 진입하여 확장 선택 1. 엣지 브라우저를 실행한 다음 도구 모음 우측의 삼 점 모양 '설정 및 기타 (Alt+F)'를 클릭한 후 메뉴 리스트에서 '확장'을 선택합니다. 마이크로소프트 엣지 추가 기능 웹 사이트 열기 2. 작은 창이 하나 열리면 'Microsoft Edge 추가 기능 웹 사이트 열기'를 클릭합니다. 첫 사용 시에만 위와 같은 형태의 창이 열리며, 확장 설치 이후에는 확장 관리 아래에 표시되는 '마이크로소프트 엣지 추가 기능 열기'를 클릭하면 됩니다. 최초 확장 프로그램 설치 시에만 위와 같은 경로로 진입합니다. 확장 프로그램 설치 이후에는 도구 모음의 확장 아이콘을 클릭한 후 Microsoft Edge 추가 기능 열기를 선..
[정보처리기사 실기-10] 이것만 보면 합격-인터페이스 검증도구,APM,인터페이스 오류처리방법, 인터페이스7계층,데이터암호화전송방법,암호화 알고리즘
[정보처리기사 실기-10] 이것만 보면 합격-인터페이스 검증도구,APM,인터페이스 오류처리방법, 인터페이스7계층,데이터암호화전송방법,암호화 알고리즘 ※ 인터페이스 검증 도구 : 엑스핏 엔셀웨 - xUnit : 자바(jUnit), C++(cppUnit), .Net(nUnit) 등 다양한 언어를 지원하는 단위테스트 프레임워크 - STAF : 서비스 호출, 컴포넌트 재사용 등 환경 테스트 프레임워크 - FitNesse : 웹 기반 테스트 프레임워크 - NTAF : FitNess + STAF를 합친 NHN(네이버)의 테스트 자동화 프레임워크 - Selenium : 다양한 브라우저/언어를 지원하는 웹 앱 테스트 프레임워크 - Watir : 루비(Ruby) 기반 웹 앱 테스트 프레임워크 ※ 인터페이스 감시도구(AP..
[웹사이트 만들기-2] 크로스 브라우징, 뷰포트, 렌더링이란? 비트맵과 벡터의 차이, WEBP, SVG 확장자란?
[웹사이트 만들기-2] 크로스 브라우징, 뷰포트, 렌더링이란? 비트맵과 벡터의 차이, WEBP, SVG 확장자란? 1. 크로스 브라우징 내가 만든 웹 페이지가 모든 브라우저에서 내가 설계한 방향대로 보여지게 하는 것 크로스 브라우징을 가능하게 하려면 W3C가 제정한 국제 표준인 웹표준을 만족해야 함 인터넷 익스플로러는 웹표준을 만족하지 않으므로 크로스 브라우징이 불가능하다. (2020년 8월 서비스는 종료되었으나, 예전에 설계한 웹페이지는 종종 익스플로러 환경으로 대응해야 하는 경우가 있음) 2. 뷰포트 하나의 웹 페이지가 표시되는 전체 영역을 의미함 렌더링 : 브라우저의 뷰포트에 웹사이트를 출력하는(보여주는) 행위를 의미함 3. 비트맵과 벡터의 차이 비트맵 - 픽셀 단위의 정사각형 조각들이 모여 정보를..
[웹사이트 만들기-1] HTML, CSS, JavaScript의 역할
[웹사이트 만들기-1] HTML, CSS, JavaScript의 역할 1. 백엔드와 프론트엔드 백엔드 : 연산 및 처리 등 기능적인 부분을 담당 프론트엔드 : 사용자에게 예쁘게 보여주는 시각적 부분을 담당 2. HTML 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹 구조를 담당 눈,코,입 재료들만 열거되어있음 - CSS, JS가 없이 HTML만 있으면 웹사이트가 아래와 같이 구조(재료)만 나온다. 3. CSS 실제 화면에 표시되는 방법(색상,크기,폰트,레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당. 눈, 코, 입이 위치에 맞게 정적으로 정렬되어있음 4. JavaScript (JS) 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적처리를 담당 눈, 코, 입이 움직임 5. 웹..
[정보처리기사 실기-9] 이것만 보면 합격-시스템 인터페이스 설계서, 인터페이스 정의서, 인터페이스 절차, 데이터 표준 확인 절차, JSON,
[정보처리기사 실기-9] 이것만 보면 합격-시스템 인터페이스 설계서, 인터페이스 정의서, 인터페이스 절차, 데이터 표준 확인 절차, JSON, XML, REST, AJAX, 시큐어코딩, 비대칭키, DB암호화기법 ※ 시스템 인터페이스 설계서 : 이기종 시스템 및 컴포넌트 간 데이터 교환 및 처리를 위해 각 시스템의 교환되는 데이터, 업무, 송수신 주체 등이 정의된 문서 ※ 시스템 인터페이스 설계서 구성요소 2가지 - 시스템 인터페이스 목록 - 시스템 인터페이스 정의서 ※ 인터페이스 정의서 주요항목 : 2인2오2사파반 - 인터페이스 ID : 인터페이스 식별자 - 인터페이스 명 : 인터페이스 명 - 오퍼레이션 명 : 인터페이스 세부동작 명 - 오퍼레이션 개요 : 인터페이스 세부동작 설명 - 사전 조건 : 사전..
패스트캠퍼스 마케팅 취업 준비 패키지 취업 수기!!
패스트캠퍼스 마케팅 취업 준비 패키지 취업 수기!! 금일은 필자가 직접 구매하여 완강까지 하고 마케터로 활동하기 위한 초석이 된 패스트캠퍼스 강의 수기를 작성해보고자 한다. 필자는 공돌이기 때문에 마케팅 관련 지식이 아예 없었기에, '일단 해보자'라는 마음가짐으로 무작정 완강을 하였다. 마케팅 취업 패키지 강의는 크게 4 파트로 나뉘어지는데, 각각 아래와 같다. PART01. 디지털 마케팅 핵심 개념과 12가지 스킬 완전 정복 - 첫번째 파트는 포토샵(이미지 편집), 프리미어(영상 편집), 검색광고/페북광고, 구글 애즈/애널리틱스/데이터스튜디오 등 마케팅에 필요한 툴들을 위주로 강의가 진행된다. 거의 현존하는 온라인 마케팅 기법들이 실제로 취업했을때 바로 쓸 수 있도록 교육이 이루어져서 원론적인 강의보다..
[IT 상식] 뮤택스 vs 세마포어 차이
[IT 상식] 뮤택스 vs 세마포어 차이 프로세스 간 메시지를 전송하거나, 공유메모리를 통해 공유된 자원에 여러 개의 프로세스가 접근하면 문제가 발생할 수 있다. 이를 해결하기 위해 데이터를 한 번에 하나의 프로세스만 접근하도록 제한을 두는 동기화를 취해야 한다. 동기화 도구에는 대표적으로 세마포어(Semaphore)와 뮤텍스(Mutex)가 있다. 이들은 모두 공유된 자원의 데이터를 여러 스레드/프로세스가 접근하는 것을 막는 역할을 한다. 뮤텍스(Mutex) 공유된 자원의 데이터 혹은 임계영역(Critical Section) 등에 하나의 프로세스 혹은 Thread만 접근하도록 함 (동기화 대상이 하나) 임계영역(Critical Section)을 가진 스레드들의 실행시간(Running Time)이 서로..