bskyvision

안녕하세요. 비스카이비전입니다. 저는 코드 편집기 중에 visual studio code를 주로 사용하고 있습니다. 전세계 수많은 개발자들이 사용하고 있는 대표적인 코드 편집기죠. 보통 줄여서 vscode라고 부릅니다. vscode에는 개발을 좀 더 편하게 해주는 다양한 확장 플러그인들이 있습니다. 오늘은 그 중에서 웹 개발에 유용한 확장 플러그인을 하나 소개해드리려고 합니다. 바로 Auto Rename Tag 입니다. html에서 여는 태그와 닫는 태그를 한 번에 수정할 수 있게 도와주는 아주 유용한 놈입니다. vscode의 유저인터페이스를 보면 좌측에 툴바가 있습니다. 거기서 네모 네 개로 이뤄진 아이콘을 클릭하시면 vscode의 확장 플러그인을 검색할 수 있습니다. 검색창에 Auto Rename T..

@app.route("/index") def index(): data = "안녕하세요.반갑습니다." return render_template('index.html', data=data) 위와 같이 서버에서 html 요소를 전달한 것을 jinja2를 통해 html 문서에서 표현해야 하는 상황인 경우에는 다음과 같이 safe라는 필터를 걸어줘야 한다. {{data|safe}} 안녕하세요. 반갑습니다. safe 필터를 걸어주면 autoescape가 비활성된다. 그렇지 않고 {{data}}로 사용하면 p 태그를 인식하지 못하고 그냥 문자열로 받아들인다. {{data}} 안녕하세요.반갑습니다. 주의할 것은 safe 필터는 개발자가 신뢰할 수 있는 데이터가 표출되는 곳에 대해서만 사용해야 한다는 점이다. 그렇지 않..

자간을 조절하려면 CSS의 letter-spacing 속성을 사용하면 됩니다. 바로 예제 코드를 보시죠. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Document 안녕하세요. 저는 비스카이비전입니다. 안녕하세요. 저는 비스카이비전입니다. 안녕하세요. 저는 비스카이비전입니다. Colored by Color Scripter cs 이 웹페이지를 열어보면 다음과 같은 화면이 보입니다. letter-spacing 속성에 큰 값을 줄 수록 자간이 넓어지는 것을 확인하실 수 있습니다. 참고로 줄간격(행간)을 조절하는 속성은 line-height입니다.

html 문서의 사이에 다음의 코드를 넣어주면, 해당 페이지는 5초마다 자동으로 새로고침(refresh)됩니다. 숫자를 10으로 바꾸면 10초마다 refresh 됩니다. (이 글은 2021-5-11에 마지막으로 수정되었습니다)

웹 페이지에 이메일 주소를 넣고 싶을 때도 a 태그를 사용할 수 있습니다. 일반적으로 웹페이지 주소에 링크를 걸 때는 첫번째 행과 같이 코드를 작성하면 되지만, 이메일 주소에 링크를 걸 때는 이메일 주소 앞에 mailto:를 추가해줘야 합니다. 1 2 3 비스카이비전 kyohoonsim@gmail.com cs 위와 같이 코딩해주면 이메일 주소를 클릭했을 때 microsoft outlook이 열리면서 이메일을 보내는 창이 뜨게 됩니다. 받는 사람 주소에 링크를 건 이메일 주소가 들어가 있음을 확인하실 수 있습니다. 웹 페이지에 이메일을 연락처로 넣고자 할 때 유용한 기능입니다. 관련 글 ☞ [css] 링크 밑줄 없애기

팝업 사이드바를 갖고 있는 웹사이트들은 대체로 열려 있는 팝업 사이드바의 외부를 클릭하면 닫히게 해놓았습니다. 사용자가 느끼기에 그것이 직관적이라고 생각해서 누군가 개발했고 이후에 유행한 것 같습니다. 팝업 사이드바 열 때 -> 버튼 클릭 팝업 사이드바 닫을 때 -> 사이드바 외부 클릭 이렇게 작동하도록 한번 코드를 구현해보겠습니다. 제가 해본 방식 말고도 다양한 방법이 있을 수 있으니, 더 좋은 코드가 있다면 그것을 사용하셔도 좋습니다. 코딩이란 것은 그런 거니까요. 먼저 결과물을 보겠습니다. 버튼을 클릭하면 사이드바가 열리고, 사이드바 외부 영역을 클릭하면 닫힙니다. 이것을 만들기 위해서는 두 개의 문서가 필요한데, 하나는 html 파일이고, 하나는 css 파일입니다. 또한 jquery, font a..

사용자로하여금 비밀번호를 최소 6자, 최대 12자까지만 입력하게 하려면 input 태그 minlength 속성의 값에는 6을, maxlength 속성의 값에는 12를 주면 됩니다. 1 비밀번호: cs 이렇게 하면 최대 12자까지만 입력이 가능해집니다. 만약 사용자가 비밀번호를 6자 미만으로 입력하고 제출 버튼을 눌렀을 경우에는 다음과 같은 경고창이 뜨면서, 제출이 되지 않습니다. minlength와 maxlength 상당히 유용한 속성들이죠? ㅎㅎ

웹페이지에서 체크박스를 체크했을 때는 1을, 체크되어 있지 않을 때는 0을 제출하고 싶은 경우에는 다음과 같이 코딩해주면 됩니다. 우선 html에서는 다음과 같은 코드를 작성해줍니다. 여기서 포인트는 두 input 태그에 name을 동일하게 해줘야 한다는 점입니다. 여기서는 input_check로 통일해줬습니다. 1 2 cs 그리고 javascript에서는 다음과 같이 작성해줍니다. 1 2 3 if(document.getElementById("input_check").checked) { document.getElementById("input_check_hidden").disabled = true; } Colored by Color Scripter cs 이렇게 해주면 체크했을 때는 1, 체크하지 않았을 때..

웹페이지에 리스트를 넣을 때 앞에 기호를 제거해야하는 경우도 종종 있습니다. 이럴 때는 li 요소의 list-style 속성의 값을 none으로 바꿔줘야 합니다. 또한 기호를 제거했는데 앞에 여백이 마음에 들지 않아 제거하고 싶다면, ul 요소의 padding-left 속성의 값을 0으로 해줘야 합니다. 아래 코드와 실행한 결과를 비교해서 보시면 어렵지 않게 이해하실 수 있을 것입니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 Document 기본 리스트 리스트1 리스트2 리스트3 앞에 기호 제거된 리스트 리스트1 리스트2 리스트3 기호 및 여백도 제거된 리스트 리스트1 ..

오늘은 vscode 편집기에서 html 문서를 작성하다가, 바로 웹브라우저를 실행시킬 수 있는 방법에 대해 다루겠습니다. ctrl + shift + x로 마켓플레이스를 연 후 open in browser를 검색해서 TechER에서 만든 확장프로그램을 설치해줍니다. 저는 이미 설치해서 설치 버튼이 없는데, 아직 설치를 안하신 분은 녹색의 설치 버튼이 있을 것입니다. 설치하셨다면, 이제 alt + b의 단축키를 사용하면, html 문서에서 바로 디폴트 설정되어 있는 웹브라우저를 열 수가 있습니다. 저의 경우에는 크롬이 열리는데요, 만약 디폴트 설정되어 있는 웹브라우저 말고 다른 웹브라우저를 열고 싶다면, alt + shift + b를 이용하면 여러 종류의 브라우저 중에 선택할 수 있는 화면이 나옵니다. 이 ..