리본 리본

HTML

• [HTML] 이미지 오류시 대체 이미지 표시하기

  programming/HTML&CSS 2022. 7. 23. 13:32

  html에서 이미지를 표시할 때, 이런저런 이유로 이미지가 표시되지 않을 수 있다. 이럴 때 대체 이미지를 설정해놓으면 엑박으로 화면이 깨지는 것을 방지할 수 있고, 이미지가 잘못되었다는 것을 바로 확인할 수 있다. 위 코드는 일반적인 이미지 태그의 src 속성만 적용한 코드다. (*로컬 경로라서 복사하여도 이미지는 보이지 않는다.) 일단 정상적으로 보일 경우는 아래처럼 산을 보여준다. 하지만 경로를 잘못 적었을 경우에는 아래처럼 이미지가 보이지 않는다. 이럴 경우 onerror 속성을 적용하면 해당 경로에 있는 차를 보여준다. - 위 작성된 글에는 잘못된 부분이 있을 수 있습니다. 알려주시면 수정하겠습니다. ※ info 출처 : https://pixabay.com/ko/ mountains.jpg : h..

  Read More
• [HTML] input 숫자만 입력받기(양수만)

  programming/HTML&CSS 2019. 12. 25. 23:20

  input에 숫자만 입력받기 로 해주면 된다. 최솟값 설정 0 이상만 입력받고 싶으면 min 속성을 추가해주면 된다. 최댓값 설정 최대 값도 설정하려면 max도 추가할 수 있다. 위 설정은 html 속성으로 제어하는 것인데, 완벽하게 막지는 못한다. 키보드의 마이너스 기호나, 복사 붙여 넣기나 이런 것들은 막지 못하기 때문에, 완벽하게 막고 싶다면 스크립트를 좀 더 추가해야 한다.

  Read More
• [HTML&CSS] CSS 우선순위 적용 (!important)

  programming/HTML&CSS 2019. 11. 10. 00:00

  디자이너와 개발자가 따로 작업을 할 경우, 남이 만든 HTML&CSS에 내가 직접 스타일을 입히고 싶을 경우, CSS, JS, HTML 파일이 완전히 분리된 상황에서 어느 것이 먼저 인지 헷갈릴 경우 등, CSS 우선순위를 알아야 할 경우는 많다. 이때 무조건 !important 속성을 붙여서 해도 되긴 하지만, 적용 순서를 알아보면 !important 속성을 사용하지 않아도 적용할 수 있는 방법이 많다. css_important.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 33 34 35 36 37 38 39 Page Title h1{ color : yellow !important; ..

  Read More
• [HTML&CSS] 자식&자손 선택자, 선택자 여러개 선택하기

  programming/HTML&CSS 2019. 9. 30. 23:45

  html, css, javascript, jquery... 등에서 선택자를 쓸 일이 많다. 객체를 선택할 때 많이 쓰는데 여러 가지 방법으로 쓸 수 있다. #SELECTOR { stlye:display:none;} $("#SELECTOR").val("test value"); 등의 형식으로 쓸 수 있다. 이때 선택자는, 자식 선택자, 자손 선택자 또는 여러 선택자를 동시에 선택할 수 있다. 먼저 자식 선택자는 "바로 아래" 객체를 선택할 수 있다. 위와 같은 html 태그들이 있을때, 자식 선택자로 아래와 같이 해당 객체를 선택할 수 있다. $("SELECTOR1 > SELECTOR2"); 자손 선택자로는 "해당 객체 하위 객체 중 하나"를 선택할 수 있다. $("SELECTOR1 SELECTOR3-1")..

  Read More
• [HTML&CSS] 게시판 형식 그대로 유지하기 (white-space:pre-wrap)

  programming/HTML&CSS 2019. 8. 8. 22:24

  https://leeborn.tistory.com/11 게시판 형식 그대로 유지하기 게시판을 만들어서 DB에 저장하고 불러오기는 어렵지 않다. textarea나 input text에서 값을 저장하면 된다. 이때 db에 저장될때 html 태그로 저장할 수 도 있고, text만 그대로 저장할 수 도 있다. 태그들을 그대.. leeborn.tistory.com 위 글에서 white-space의 속성에 대해서 pre에 대해서만 사용했었는데, pre를 사용하면 공백 등은 그대로 표시해주지만 줄 바꿈을 해주지 않는다. 가장 첫번쨰 white-space:pre 와 같이 공백 등은 그대로 표시해주지만, 긴 글들은 div를 넘어 간다. 이때 white-space:pre-wrap 속성을 쓰면 자동 줄 바꿈도 된다. 그리고..

  Read More
• [JavaScript&jQuery] 동적 생성 HTML에 이벤트 추가하기

  programming/JavaScript&jQuery 2019. 8. 7. 22:11

  HTML에 클릭 이벤트를 거는 것은 아래와 같이 할 수 있다. $("SELECTOR").click(function(){ alert("click"); }); 이때 동적으로 생성된 HTML에도 이벤트를 걸 때는 다른 방식으로 걸어야 하는데, $(document).on("click", "SELECTOR", function(){ alert("add event"); }); 위에 click 이벤트의 경우에는 태그(SELECTOR)에 클릭 이벤트를 걸어서, 해당 이벤트를 건 이후에, 동적 생성된 태그에 대해선 이벤트가 작동하지 않는데, 아래처럼 on을 사용해서 하면 이벤트를 연결시키면, 태그(SELECTOR)가 document에 동적으로 추가되더라도 이벤트가 작동된다.

  Read More