리본 리본

programming/HTML&CSS

• [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] 속성 검색 하기(값으로 시작, 포함, 끝)

  programming/HTML&CSS 2019. 12. 14. 23:39

  속성 선택자 -TAGNAME[ATTR=VALUE] 속성이 값이 정확히 일치하는 태그를 선택한다. -TAGNAME[ATTR~=VALUE] 속성에 값을 포함하는 태그를 선택한다.(단어 기준) -TAGNAME[ATTR*=VALUE] 속성의 값이 포함된 모든 요소를 선택한다.(문자열 기준) -TAGNAME[ATTR^=VALUE] 속성의 값으로 시작되는 요소를 선택한다.

  Read More
• [HTML&CSS] 마우스 커서 변경하기(물음표, 금지, 손가락 등)

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

  마우스 커서는 여러 가지 종류가 있다. 버튼이나, 링크의 경우 손가락으로 변경되고, 무언가를 입력하는 창에서는 글씨를 쓸 수 있을 것 같은 모양의 포인터로 변경된다. 클릭하면 안 되는 것에는 금지 표시로 보여주면 좀 더 직관적으로 표현될 수 있다. 보통은 알맞게 변경되는데, 버튼에 도움말 표시를 달아주던가, 버튼이지만 클릭이 되지 않는 것을 보여주도록 일반 포인터로 바꾸던가 할 때는 강제로 변경시켜줘야 한다. 변경하기 위한 속성은 cursor 속성을 사용하면 된다. cursor 속성별 정리 1. cursor : default 기본 마우스 포인터 모양이다. 2. cursor : none 마우스 포인터를 보이지 않게 없앤다. 3. cursor : help 커서에 물음표 모양을 추가시킨다. 4. cursor ..

  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] 스크립트 삽입 위치와 async, defer 속성

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

  html에 자바스크립트를 사용할 때, 사이에 삽입할 수 도 있고, 사이에 삽입할 수 도 있다. 의 첫 부분에 태그를 넣을 수도 있고, 의 끝부분에 넣을 수 도 있다. 위의 위치들과 전혀 상관없이 스크립트를 작성할 수 도 있다. 다만 html이 로드되고 실행돼야 하는 스크립트의 경우에는 의 끝부분에 작성을 했다. 이런 방식의 스크립트 작성은, 규모가 큰 사이트의 대규모 스크립트나 스타일시트가 있을 경우, 필요한 화면 로딩이 느려질 수 도 있다. 이때 필요한 속성이 "async", "defer" 속성인데 아래와 같이 사용할 수 있다. async와 defer는 스크립트 로딩을 html과 같이 동기로 실행시켜준다. 그래서 test $("#test").click(function(){ alert("async-def..

  Read More
• 탭인덱스 거꾸로 이동하기

  programming/HTML&CSS 2019. 10. 14. 09:14

  로그인 화면이나 회원가입 화면, 또는 기타 화면에서 입력창이 여러 개 있을 때가 있다. 이때 다음 입력창으로 넘어가려면, tab키를 사용해서 포커스를 넘길 수 있다. 반대로 아래에서 위로 갈때는(tabindex를 반대로) shift+tab으로 갈 수 있다.

  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