컴공생의 다이어리

[HTML] img 태그 이미지 로드 실패시 대체(디폴트) 이미지 img 태그로 src 이미지 로드에 실패한다면 엑스 박스가 나오는데 따로 처리해주지 않는 이상 alt 속성에 넣은 텍스트를 보여준다. 이미지 로드 실패에 대해 대체 이미지를 적용한다거나 이미지를 숨기는 방법을 사용할 수 있다. 이 글에서 2가지 방법에 대해 짧게 정리해보려고 한다. 대체 이미지 onerror 속성에 대체이미지 경로를 아래와 같이 넣어주면 된다. 이미지 숨기기 onerror 속성에 아래와 같이 this.style.display='none'으로 설정을 하면 이미지 로드 실패시 이미지를 숨긴다. https://pingfanzhilu.tistory.com/entry/HTML-img-%ED%83%9C%EA%B7%B8-%EB%8C%8..

HTML 부모요소, 자식요소 html의 요소들은 모두 하나 이상의 다른 요소를 포함할 수 있다. 이때, 포함하는 요소를 부모요소, 포함되는 요소를 자식요소라고 한다. 부모요소 : 상위레벨 하위요소 : 하위레벨 grandparent의 (후손,하위) 요소는 parent, child grandparent의 자식 요소는 parent parent의 부모 요소는 grandparent parent의 자식 요소는 child child의 (조상,상위) 요소는 grandparent, parent child의 부모 요소는 parent https://asource.tistory.com/31 요소와 속성 / 부모요소와 자식요소 요소와 속성 html은 하나의 문서라 볼수 있습니다. 문서는 제목,네비게이션,본문,리스트 등 다양한 ..

HTML 빈태그(Empty Tag) 종료 태그 없이 시작 태그만 존재하는 태그를 빈태그라고 한다. 빈태그의 2가지 방식 '/'가 없는 empty tag : HTML 1, 2, 3, 4에서 사용 가능 '/'가 있는 empty tag : XTHML에서 사용 가능 HTML5에서는 두가지 방식이 모두 사용 가능하다. 빈태그 예시 텍스트 안에 줄바꿈(*Carriage Return)을 생성 가로방향의 Division Line를 생성 이미지를 생성 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성함 현재 문서와 외부 리소스의 관계를 명시 , , , , 과 같은 다른 메타 관련 요소로 나타낼 수 없는 메타데이터를 나타냄 https://want-itschool.tistory.com/45 [HTML 문법] 빈 태그(E..

HTML 기본 틀

CSS 테두리(border) 없애기 input이나 button 태그의 경우 border:none;을 사용하면 테두리를 없앨 수 있다. input, button{ border:none; } https://solbel.tistory.com/1722

CSS 배경색(background-color) 투명 or 없애기 배경색을 없애고 투명하게 만들고 싶다면 transparent를 사용해주면 된다. background-color:transparent; https://www.codingfactory.net/10588 CSS / background-color / 배경색을 정하는 속성 개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 b www.codingfactory.net

입력값이 보이지 않을 때 input type을 password로 지정해 비밀번호를 받으려고 하니 기호(●)없이 입력되는 문제가 발생했다. 이런 현상이 발생하는 이유는 나눔스퀘어 폰트를 사용하고 있었기 때문이다. 물론 다른 폰트를 사용해도 이와 같은 문제가 발생할 수 있다. 이런 문제가 발생하는 폰트에는 ● 문자를 지원하지 않아서이다. 해결방법 아래와 같은 형식으로 css 코드를 추가해주면 된다. input[type=password]안에는 ● 문자를 지원하는 폰트를 넣으면 된다. 아래 코드에는 구글 폰트를 넣어놨는데 언제까지 될지는 모르겠지만 저대로 써도 아마 작동할 것이다. input[type=password]::placeholder를 사용하지 않아도 되지만 기존에 사용하던 글씨체와 통일성을 주기 위해서..

주피터 노트북(jupyter notebook) 파일 pdf 변환 주피터 노트북(jupyter notebook) 파일 pdf 변환 - nbconvert게시물로 했을 때 한글이 깨지는 문제점이 있다. 이것은 설정으로 해결이 가능하지만 pdf 생성할 때 마다 계속해서 설정을 해주어야 한다는 단점이 있다. 그래서 다른 방법으로 주피터 노트북을 pdf로 변환하는 방법에 대해 이야기 해보고자 한다. [File→Download as→HTML(.html)]를 클릭한다. 다운받은 HTML 파일을 pdf로 바꾸는 방법은 두가지가 있다. 1. https://www.sejda.com/html-to-pdf 사이트에서 바꾸는 방법 2. HTML 파일을 열고 인쇄를 통해 pdf로 저장하는 방법 https://jxnjxn.tisto..

(VS Code를 기준) 들여쓰기 들여쓰기를 할 영역을 드래그 하고 [Tab]을 눌러주면 된다. 내어쓰기 내어쓰기를 할 영역을 드래그 하고 [Shift+Tab]을 눌러주면 된다. 여러코드 주석지정/해제 주석지정을 하거나 해제를 하고 싶은 영역을 드래그 하고 [ctrl+/]를 눌러주면 된다. dasima.xyz/html-comments/ HTML 주석 처리 예제 및 디버깅과 단축키 | TIMECRAFT HTML 주석 처리는 한줄과 여러줄 동일하게 부등호, 느낌표, 하이픈 기호 조합으로 구성됩니다. 주석으로 디버깅 효과를 흉내낼 수도 있습니다. atom, visual studio, codpen 등에서 주석 단축키도 존재합 dasima.xyz

goorm(구름) ide로 html/css/js 실습환경 만들기 우선 구름 ide를 짧게 소개해보자면 프로그램 설치 과정 없이 컨테이너를 생성하는 것으로 개발환경을 자동 구축하는 클라우드 iDE이다. 이제 구름 ide에서 html/css/js 실습환경을 만들어보자! 1. 구름 ide에 접속 후 로그인 진행(회원이 아니라면 회원가입을 해야함) 2. 로그인을 하면 다음과 같은 화면이 나타나는데 여기서 새 컨테이너 생성을 클릭 (혹시 위의 화면이 바로 나오지 않는다면 구름 ide에서 대시보드를 클릭) 3. 아래와 같이 기본 설정(필요한 부분은 각자 설정에 맞게 변경)을 한 뒤 생성 버튼 클릭 4. 바로 생성한 컨테이너를 실행하고 싶다면 컨테이너 실행을 클릭 5. index.html을 클릭하고 Open Prev..