Half Road

Publishing 연습시 긴 텍스트가 필요할 때가 있죠. 그럴때 손쉽게 만드는 방법이 lorem을 이용하는 것입니다. VS Code에 내장된 Emmet 기능에 포함되어 있습니다. lorem lorem을 치면 Emmet 자동완성이 제안됩니다. lorem*로 몇 줄을 생성 할건지 지정할 수 있습니다. Emmet 기능 알아보기 2022.08.10 - [웹퍼블리싱] - Emmet을 이용한 CSS, HTML 태그 손쉽게 작성하기 Emmet을 이용한 CSS, HTML 태그 손쉽게 작성하기 Publising 연습시 HTML, css 작성할 일이 많은데요, 이때 Emmet 기능을 통해 빠르게 자동완성 할 수 있습니다. Visual Studio Code에서는 Emmet이 내장되어 있습니다. 긴 설명없이 간략하게 필요한..

Publising 연습시 HTML, css 작성할 일이 많은데요, 이때 Emmet 기능을 통해 빠르게 자동완성 할 수 있습니다. Visual Studio Code에서는 Emmet이 내장되어 있습니다. 긴 설명없이 간략하게 필요한 부분만 보여드리겠습니다. CSS 약어를 통한 자동완성 기본적으로 정의되는 속성값이 들어가며 여러 값이 존재하는 경우 탭으로 이동해서 편집하시면 됩니다. '-'이 포함된 속성 보통은 '-'으로 구분된 단어의 첫 글자를 조합해서 약어를 사용합니다. font-size는 fz를 사용하는 군요. 또한 크기 속성은 숫자를 적으면 px이 붙여서 완성됩니다. HTML 태그 HTML 시작 클래스 자동완성 자식 요소 추가 이상으로 설명은 마치겠습니다. 어떤가요? 편할것 같나요? Emmet을 활용하..

input:focus, input:hover {/* pseudo-class */ ... } span::before, span::after {/* pseudo-element */ ... } pseudo-class(':') pseudo-element('::') 이름 그대로에 의미로 가상 클래스, 가상 요소를 뜻 합니다. 과거에는 두 가지 pseudo(슈도) 선택자를 구별해서 사용하지 않았지만 특정 시점부터 구별해서 사용하고 있습니다. (ie도 지원되니깐 꽤 오래되었죠.) 물론 Single Colon(':')으로 일부 pseudo-element를 사용가능 하지만 의미있는(semantic) css 작성을 위해 구별해서 사용하는것이 중요하겠습니다. ps. pseudo-element 모두가 ':' 과 호환되는것은 ..

웹 페이지를 따라 만들때 사용된 Color를 쉽게 확인하는 방법이 있습니다. Chrome에서 확장프로그램 ColorZilla를 사용하는 방법입니다. ColorZilla 위 이미지에 나온대로 설치 해주시구요. 툴바에 고정하겠습니다. 확장 프로그램을 클릭하면 커서 모양이 바뀌는데, 이때 복사하고 싶은 엘리먼트위로 커서를 올리면 색깔이 상단에 바뀌는것을 확인할 수 있습니다. 클릭시 클립보드로 색상이 복사가 됩니다. 단축키를 활용하시면 보다 신속하게 컬러 확인하실수 있습니다. 단축키 설정

Publising 연습할때 Page를 따라 만들어보는게 도움이 되죠. 이때 해당 페이지에 원하는 이미지를 쉽게 다운로드하는 방법이 있습니다.. Chrome에서 확장 프로그램을 다운로드해서 사용합니다. Image downloader 크롬 웹스토어에서 image downloader를 검색하여 위 이미지에 보이는 프로그램을 설치합니다. 사용하기 편하게 저는 확장 프로그램을 툴바에 고정하겠습니다. Image downloader 아이콘을 클릭하시면 이미지 목록을 보실수 있습니다. 체크하셔서 Download하시면 됩니다. 모든 이미지를 체크하시고 싶으시면 Select all을 클릭하시면 됩니다. 다운로드 이미지를 특정 폴더에 관리하기 위해선 설정이 필요합니다. 위 이미지대로 설정하시면 사용자 다운로드 폴더 내에 i..

해당 탭페이지에 표시되는 해당 이미지를 favicon이라고 부릅니다. 다운로드 방법 접근하려는 사이트주소 앞에 chrome://favicon 를 붙여주면 됩니다. 예제 이후 해당 이미지를 우클릭해서 다운로드 받으시면 됩니다. HTML 적용 head > link 태그 내에 'rel=icon'으로 지정하여 등록해주시면 됩니다.

들어가며... pycharm을 통해 본격적으로 python을 배워보는 강의였다. python을 배워본 적이 없었지만 이때까지 여러 언어를 해보았기 때문에 큰 거부감없이 익숙해질 수 있었던것 같다. 파이썬, 크롤링과 noSQL인 mongodb는 항상 보아왔던 키워드들이었기 때문에 기대가 됬었다. 배운것들 파이썬 및 개발 환경 인터프리트 언어로서 별도의 컴파일 과정이 없다. 인터프리터를 설치하여 실행만 해주면된다. 프로젝트 관리에서 신기했던게 있었다. 바로 가상환경이다. 보통 언어에서 프로젝트 관리 도구들이 하나씩 있는데, 예를 들어 java는 maven을 사용하고 nodejs는 npm을 사용한다.해당 도구들을 통해 프로젝트와 관련된 패키지들을 확인하고 설치할 수 있게된다.그런데 python은 pip라는 패..

팬명록은 1주차에 진행을 했는데요, 2주차에서는 타이틀 아래에 서울 기온 데이터를 넣는 작업을 하였습니다. 1주차에 스파르타피디아와 팬명록에 버튼 이벤트를 개인적으로 추가하였는데, 2주차에서 선생님이 기존 만든거에 이벤트를 넣는 것을 하더라구요. (전 안하는줄...ㅎ) 기존거에 이렇게 기능을 추가해나가는것이 좋았고, 제거랑 비교하면서 보는 재미도 있더라구요 ㅎㅎ 특히 backtick (`)을 활용한 template literal 구문으로 html을 생성하는 부분이 저는 엄청 편하더라구요. SI 에서는 IE 지원을 거의 하는편이라 ECMA 5 문법까지만 거의 썼었는데 앞으로 개인프로젝트하면서 ECMA6 이상 문법을 많이 접해봐야겠습니다. 팬명록 추가기능 저는 추가로 기능을 더 넣어봤는데요. 응원 댓글 Ho..