찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다. 이번 포스팅에서는 자바스크립트의 getAttribute() 메서드와 HTML5의 data- 속성을 활용하여,마우스 이벤트에 반응하는 탭 구조를 만드는 방법을 소개하겠습니다. 아래 그림을 볼까요? 오른쪽 탭에 마우스를 올릴 때마다 왼쪽의 이미지가 바뀌는데요.HTML5의 data속성과 자바스크립트의 getAttribute() 메서드를 이용한 코드를 포스팅해볼까 해요 일단 getAttribute()는 JavaScript에서 사용되는 메서드로, HTML 요소의 속성(attribute)을 가져올 때 사용되는데요. 예를 들어, HTML 태그에 id, class, href 같은 속성이 있을 때, 해당 속성의 값을 가져오는 데 유용합니다.element.getAttribute(attributeN..

안녕하세요 찐망고입니다.오늘은 강조를 뜻하는 인라인요소인 요소와 요소, 요소에 대해 포스팅해볼 건데요.  html마크업을 하면서 주의할 점은 요소의 의미를 파악하는 것입니다.브라우저에서 글자가 두꺼워지고 기울어지고 여백이 생기고 하는 것들은 css로 수정이 가능하니까요.  요소와 , 모두 강조의 의미를 뜻할 때 사용하는 요소인데요.각각 다른 방식으로 강조를 나타내요   요소 요소는 주로 중요한 텍스트의 의미를 나타내는데,해당 텍스트가 문서의 중요한 부분임을 강조하는 데 사용합니다.예를 들어, 금융상품의 가격이나 경고메시지와 같이 중요한 정보를 강조하는 데 사용하죠그리고 스크린 리더등 보조기술을 사용하는 사용자에게 중요한 내용임을 전달합니다.논리적으로 중요한 텍스트를 강조하죠주의: 이 상품은 ..

안녕하세요!찐망고입니다.오늘은 HTML카테고리에 두 번째 쓰는 글이 되겠네요..원래 웹 표준에 대해 설명하고, 웹 접근성으로 넘어가려고 했는데이전 글에 말이 많아져서, 시멘틱 마크업을 포스팅 못하는 바람에.... 2021.07.25 - [마크업/HTML] - 웹 표준, 크로스 브라우징, 시멘틱 마크업에 대한 이해 웹표준,크로스브라우징, 시멘틱마크업에 대한 이해안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서uiweb.tistory.com   각설하고 시작해 보도록 하겠습니다.  시맨틱(Semantic)이란 "의미론적인"의 뜻이며, 마크업(Mar..

안녕하세요 찐망고입니다. 오늘은 HTML에 첫 글을 올리는 것 같은데요.. 모 HTML 요소 하나하나 설명하는 포스팅을 할까 하다가... 그런 사이트는 많고, 널려있고, 제가 좋아하는 w3School도 있고 해서.. 기본적인 것에 대해 접근을 해보도록 하겠습니다. 그중 첫 번째는 웹 표준 그러니까 크로스 브라우징에 관련된 포스팅입니다. 일단 웹 표준을 말하기 전에 브라우저에 대해 이야길 해봐야 하는데요. 제가 수업시간에 자주 접속하는 사이트가 하나 있어요 https://gs.statcounter.com/ StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share Tracks the Usage Share of Sear..