본문 바로가기

분류 전체보기

(92)
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 텍스트 스타일, 리스트 스타일, 표 스타일 텍스트 스타일 text-align 속성: 텍스트 정렬 방법 지정, center, right 등 사용 가능 line-height 속성: 줄 간격 조절, px, em, %, 배수로 조정 가능. 주로 1.5배나 2배를 사용(150%, 200%) line-height: 1.5; // 2.0, 150%, 200% text-decoration: 링크에 밑줄을 없앨 때 주로 사용 underline: 밑줄 line-through: 취소선 text-decoration: none; text-shadow: 텍스트에 그림자 추가 가로 세로 번지는 정도 색상 text-shadow:5px 5px 3px #222 리스트 스타일 list-style-type 또는 list-style: list 앞에 어떤 기호(블릿)를 표시할 것인지 ..
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - CSS기본 선택자, 캐스케이딩 스타일 시트 CSS 스타일과 스타일 시트 스타일 시트: 여러 개의 스타일을 모아 놓은 것 스타일 종류 브라우저 기본 스타일 인라인 스타일 내부 스타일 시트 외부 스타일 시트 CSS 기본 선택자 전체 선택자 브라우저 기본 스타일을 초기화할 때 많이 사용 💡  * { margin: 0; padding: 0; } 타입(태그) 선택자 p { color: blue; } class 선택자 문서 안에서 여러번 사용. 앞에 마침표를 사용 .redtext { color: red; } id 선택자 문서 안에서 한 번만 사용 가능하기 때문에 고유성을 가짐. #container { border:1px solid #222; padding:10px; } 그룹 선택자 선택자를 그룹으로 묶어서 나타낼 수 있다. h1, p { color: bl..
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - HTML (텍스트, 목록, 표, 이미지, 오디오와 비디오, 하이퍼링크, form) 웹 개발 스페이스 X 우주선의 대시보드 인터페이스가 크롬 기반의 웹브라우저에서 HTML, CSS, Javascript로 개발되었다고 함 HTML 텍스트 태그 알아보기 em은 강조해서 이탈릭체. strong은 강조해서 진하게. br은 break의 약자로 줄 바꿈을 해줌. 닫는 태그 없음. hr은 가로줄을 추가해줌. 닫는 태그 없음. 분위기 전환 용도로도 사용됨. b는 bold의 약자. strong은 강조의 의미가 있지만 b는 단순히 텍스트를 진하게만 해줌. 글자를 단순히 굵게 표시할 목적이라면 b태그보다는 css를 사용하는 것이 좋음 목록 만들기 ol은 ordered list의 약자로 순서가 있는 목록 표시에 사용. type 속성을 통해 알파벳으로 표기 가능. ul은 unordered list의 약자로 순..
[Electron] Vue 기반 보일러 플레이트로 일렉트론 앱 빌드하기(Electron-Vue) 안녕하세요😊 지난 포스팅에서 VCP Electron Builder 보일러 플레이트를 이용하여 Vue Cli 기반의 Electron 앱을 구성하고 빌드하는 과정을 소개했었습니다. 프로젝트를 시작하기에 앞서 다른 보일러 플레이트도 비교를 해봐야 할 것 같아, 그전부터 봐왔던 Electron-Vue 보일러 플레이트를 이용하여 프로젝트를 구축해보았습니다. Electron-Vue도 아주 간단하게 프로젝트를 스케폴딩할 수 있었는데, 그 과정을 소개해보겠습니다. Vue Cli 설치 아래 명령어로 vue-cli를 전역에 설치해줍니다. npm install -g vue-cli 그리고 vue init 명령어를 이용하기 위해서는 아래 명령어로 추가 모듈을 설치해줍니다. npm i -g @vue/cli-init electro..
[Electron] Vue-Cli 기반 프로젝트로 Electron 앱 빌드하기(Vue CLI Plugin Electron Builder) 안녕하세요☺️ 지난 포스팅에서 Electron-Builder를 이용하여 일렉트론 앱을 Windows 용으로 빌드하는 내용을 설명했었습니다. 가이드 문서를 읽어보던 중 Electron-Builder에서 Vue-Cli를 기반으로 한 빌드 방법을 제공하는 보일러 플레이트가 있다고 공유를 드렸는데요, 오늘은 해당 보일러 플레이트를 적용해보려고 합니다. Vue-Cli를 이용하여 Vue 프로젝트 생성 다음은 Vue-Cli를 이용하여 Vue 프로젝트를 스케폴딩하는 명령어입니다. 저는 vue-cli-plugin-electron-builder-app이라는 프로젝트를 생성하였습니다. vue create vue-cli-plugin-electron-builder-app # vue create vue-cli-plugin-ele..
[Electron] Windows 용 데스크탑 앱 패키징 및 배포하기(electron-build) 안녕하세요😊 지난 포스팅에서 electron-forge 모듈을 이용해서 Mac 용 일렉트론 앱을 빌드하는 내용을 간단하게 설명했었습니다. 저의 1차 데스크톱 앱 출시는 Windows OS를 목표로 하고 있기 때문에 Windows에서 실행할 수 있는 데스크톱 앱을 빌드하는 법을 설명해보려고 합니다. 아직 개발 시작단계기 때문에 상세한 옵션 설정없이 정말 기본적인 옵션만 추가하여 빌드되는 과정만 정리해볼 예정이니 참고 부탁드립니다. 일렉트론 앱의 빌드 도구로 공식 사이트에서는 3가지를 소개하고 있습니다. electron-forge electron-builder electron-packager 이 중 첫번째 빌드 도구인 electron-forge는 지난 포스팅에서 설명드린 것처럼 Windows용 빌드를 지원하..
[Browser] NavigatorUAData란? NavigatorUAData User-Agent Client Hints API의 NavigatorUAData 인터페이스는 사용자의 브라우저 및 운영체제에 대한 정보를 반환합니다. Navigator.userAgentData를 호출하면 이 개체의 인스턴스가 반환됩니다. 따라서 이 인터페이스에는 생성자가 없습니다. 속성 NavigatorUAData.brands (읽기 전용) 브라우저 이름 및 버전이 포함된 브랜드 정보 배열을 반환합니다 NavigatorUAData.mobile (읽기 전용) 사용자 에이전트가 모바일 장치에서 실행 중인 경우 true를 반환합니다. NavigatorUAData.platform (읽기 전용) 사용자 에이전트가 실행 중인 플랫폼 브랜드를 반환합니다. 메서드 NavigatorUADat..
[Browser] Navigator.userAgentData란? 안녕하세요. 이 글에서는 Navigator 객체의 속성 중 하나인 userAgentData에 대해 설명합니다. 해당 글은 MDN 영문 페이지를 기준으로 번역되었습니다. Navigator.userAgentData ❗️이 기능은 일부 또는 모든 지원 브라우저에서 보안 컨텍스트(HTTPS)에서만 사용할 수 있습니다. Navigator 인터페이스의 읽기 전용 속성인 userAgentData는 User-Agent Client Hints API에 액세스하는 데 사용할 수 있는 NavigatorUAData를 반환합니다. 문법 let userAgentData = navigator.userAgentData 리턴 값 NavigatorUAData 객체 사용 예제 다음 예제는 NavigatorUAData.brands 값을 콘..