본문 바로가기

분류 전체보기

 (70)
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 이미지와 그라데이션 효과로 배경 꾸미기 Background background-color: 배경색 지정. 색상명, RGB, HSL, 16진수 모두 사용 가능. background-image: 배경 이미지 적용. 웹 브라우저에 가득 차도록 가로 세로로 계속 반복해서 보여줌. ex) url('image/bg1.jpg'); background-repeat: 반복 여부 지정. ex) no-repeat, repeat-x, repeat-y, repeat; background-position: 이미지 위치 변경. ex) bottom, center... background-attachment: 고정시킬 때 자주 사용 ex) fixed background: 위에 4가지 속성을 묶어서 표현 가능. 속성 값의 순서는 상관없음. background: url('im..
[동영상 강의] Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 레이아웃을 구성하는 CSS 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록 레벨 요소 한 줄을 다 차지 p 태그 인라인 레벨 요소 필요한 영역만큼만 차지 span 태그 박스 모델 실제 콘텐츠 영역, 패딩, 박스의 테두리, 마진의 요소로 구성됨. 개발자 도구의 computed 탭에서 확인 가능 박스 모델의 4개의 방향 값을 한 번에 지정할 때는 방향 순서를 지켜야 함(top -> right -> bottom -> left) 콘텐츠 영역 실제 내용이 들어가는 영역 크기는 width와 height로 지정 box-sizing 속성 박스 모델의 전체 너비 값은 콘텐츠 영역만이 아니라 패딩, 테두리 너비에 의해 영향을 받게 됨 그래서 나온 속성 border-box: 테두리와 패딩을 포함해서 너비를 정해줌 계산이 더 편리해짐 테두리 스타일 지정하기 ..
[동영상 강의] 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용 빌드를 지원하..

티스토리툴바