Half Road

바로가기 를 통한 지정 위치 이동 CSS 스크롤 구현 JQuery 스크롤 구현 a태그 스크롤 예제 CSS 이용하는 방법과 Jquery를 통해 구현하는 2가지 방법을 소개하겠습니다. 그전에 태그에서 지정 위치로 이동하는 법 부터 알아보겠습니다. 를 통한 지정 위치 이동 TITLE ... TITLE 위 코드로 구현시 스크롤 움직임 효과 없이 바로 그 위치로 이동하게 됩니다. 이제 스크롤 이동 구현 방법을 소개하겠습니다. CSS 스크롤 구현 html { scroll-behavior: smooth;/* 부드로운 스크롤 이동 효과 */ } html 요소에 해당 속성만 추가하면 끝입니다. 간단하죠? 그러나 IE 지원이 안되고 지정 위치까지 이동시간을 지정할 수는 없습니다. 해당 요소를 고려하지 않으면 CSS로 하는..

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..

.box-login{ display: flex; flex-direction: column; /* 아이템 정렬 방향을 세로로 */ justify-content: center; /* 메인축을 가운데로, 메인축은 세로*/ align-items: center; /* 아이템 축을 가운데로 */ height:100vh;/* 1vh는 1%와 비슷하지만 화면 전체 px기반으로 계산됩니다. */ } 웹개발자 2년차로서 개인 프로젝트를 시작하는것이 절실하다는 것을 느꼈는데요, 웹의 가장 기본이 되면서 핵심이되는 Publishing을 시작해볼려고 합니다. 시작하는 단계로 부족해도 이해 부탁드립니다. 로그인, 패스워드를 입력하여 들어올 수 있도록 로그인 화면을 만들어 보겠습니다. 기본이 되는 HTML 태그로 작성하면 이렇게 ..