본문 바로가기

각 종 it/티스토리 등 프로그래밍

html & css & js(Java Script)의 관계 html은 웹페이지의 골격, css는 디자인, js는 동적인 움직임이라고 설명해도 처음 접한 사람은 이해하기 어렵다. 이에 눈에 확 띄는 예시를 제시하고자 한다. Iframes not supported 아쉽게도 데스크탑에서만 보인다.
html <title>, <alt> 언제 쓰는거고 왜 쓰는거야? html 안에는 속성이라는 것이 있다. 재미있는 것은 이 속성이 왠만하면 공통적으로 사용 할 수 있다는 점인데, 그 中에 title과 alt 태그도 포함된다. 주로 img 태그에서 많이 사용되고 그렇게 하길 권고된다. alt 태그는 대표적으로 이미지에 많이 사용되는데, 혹 브라우저가 지원을 안 해 준다든지 링크가 깨진 상황이 발생한다면! 그때 이미지를 대신해서 보여주는 문구 같은 것이다. 책에서는 시각장애인들을 위해 alt를 성실하게 기입하라고 하는데... 그 이외에는 딱히... 굳이 alt를 쓰지 않고도 태그 사이에 글자를 기입 해 줘도 어느정도 alt를 대신 할 수 있으니 말이다. (홈페이지의 style에 따라 표현되는 글자도 다르다.) 하지만! 검색엔진 트래픽이 달라진다는 점도 있다. 검색엔진이 이..
giphy, gif를 업로드하고 만들고 찾고 암튼 animated한 gif 공유사이트 giphy라는 사이트가 있다. https://giphy.com/ gif를 업로드하는 사이트인데, 여느 sns처럼 공유하는 역할도 한다. gif는 사진 여러 장을 하나의 개체로 묶은 것으로 흔히들 #움짤로 통한다. 요즘은 용량이 큰 동영상, 대표적으로 유튜브가 성행하여 gif는 대개 음성적인 곳에서 활동하게 되었지만 예전에는 홈페이지 제작을 주제로 한 강의에서 주요 주제로서 많이 애용되었었다. 필자는 최근에도 사용하고 있다. 동영상이 아무리 상용화 되었어도 아직까지는 별 다른 내용이 아닌 짧은 컨텐츠를 동영상에 업로드하기에는 어색하다. 또한 동영상은 데이터도 많이 잡아 먹고 일부러 재생해야 된다는 단점을 가지고 있어 자연스럽게 게시글에 썩여 들어 갈 수 있는 gif를 선호한다. 더군다나 티스토리 블로그 같..
html에 반항심을 넣어주는 css, transform 지난번에 살아 움직여 죽어가는 태그에 대해 이야기한 적이 있다. 그럼 정녕 html 태그는 구조만 형성하고 움직이면 안 되는 존재들인가? 그로 인해 플래시의 등장에 한방에 나자빠지더라도? 물론 그들에게는 자바스크립트라는 강력한 동료가 있지만 어디까지나 이들은 겉돌기식으로 도와주고 직접적으로 이들에게 동적인 움직임을 주는 것이 css. 그 中 오늘은 transform에 대해 언급하도록 하겠다. 글자나 그림 등을 건드리면 옆으로 움직이거나 갑자기 커지며 형태를 변경하는 것이 transformer이다. 트랜스폼의 기능을 연상하기 위해서는 쉽게 트랜스포머를 생각하면 된다. 예제로는, See the Pen &amp;amp;lt;a data-cke-saved-href=&amp;amp;#39;http://codepe..
살아 움직여서 죽어가는 html 태그, <marquee> html와 css를 구분하는 간단한 정의는 무엇일까? 바로 디자인을 꾸며주느냐 아니냐, 그리고 동적이냐 정적이냐 그 차이다. html 태그 기능을 제공하는 회사에서는 이 간단한 정의에 의해 현재 에 대한 지원을 끊을려고 한다. html 주제에 왜 이렇게 나대? 이 태그의 죄명은 웹페이지의 구조를 형성하는 것이 주목인 정적인 html 태그가 왜 움직여서 메모리누수를 일으키느냐이다. 옛날 같으면 하드웨어 기능이 받혀주지 못해 십분 이해했지만 지금은 5g 시대 거기다 하드웨어 기능이나 메모리가 충분한 지금에서는 통용되지 않은 변명이다. 물론 심신이 약한 사람은 화려하게 움직이는 글자가 정신착란을 일으킬 수 있다는 정신 의학(?)적 소견 때문이기도 하다는 그런 속설이 있다. 위에서 열심히 움직이는 예제와 같이 ..
JavaScript 전역변수는 정말 모두 통용 된다. 함수도 마찬가지. 자바에는 전역변수, 지역변수라는 개념이 있다. 자바스크립트에서 이 둘의 구분 방법은 간단하다. 처음 선언 될 때 함수 바깥에서 이루어 졌으면, 전역변수. 함수 안에서 이루어졌으면 지역변수다. 기능상으로는 전역변수는 어느 곳에서나 값을 끌어 올 수 있는 것이고 지역변수는 그 함수 內에서만 값을 끌어 올 수 있다. 이 개념이 재미 있는 것이 태그 밖에서도 전역변수 기능을 발휘한다는 것이다. 보통 html 태그 안에 속성 지정 時 css가 아닌 이상 그 태그 안에서만 속성이 지정 되는데 자바스크립트는 전역변수나 일반 함수까지도 자바스크립트 태그와 상관 없이 공유하여 사용한다는 특징이 있다. 요즘 검색기 단다고 각 하나의 자바스크립트로 만들어 복붙하는 과정에서 이러한 특징을 발견 하게 되었다. 그렇다면 이 현상..
외부 이미지 내 웹페이지에 달기(페이스북 이미지 이용) 2019/04/04 - [각 종 it/티스토리 등 프로그래밍] - html 현재창 아닌 새창열기 & 포항지진특별법 제정 서명 좀. 지난 번에 에 대해 이야기 한 적이 있다. 그 과정에서 는 언급한 적이 없어서 오늘은 이 놈에 대해 이야기 하도록 하겠다. 간단하다. 위 소스처럼 사용하면 된다. 다만, 자신의 홈페이지 용량에 한계가 있다면 어떻게 해결 해야 할까? 이전에도, 2019/03/17 - [각 종 it/티스토리 등 프로그래밍] - 웹페이지에 필요한 간단한 이미지는 외부 url로 삽입하면... 최소한 저장 공간은 걱정 안하겠지. 웹페이지에 필요한 간단한 이미지는 외부 url로 삽입하면... 최소한 저장 공간은 걱정 안하겠지. 티스토리 자체 제공 파일업로드 공간은 20mb이다. 적다. 요즘 같이 시각성..
html <a> 현재창 아닌 새창열기 & 포항지진특별법 제정 서명 좀. a태그는 링크를 걸 때 주로 사용한다. 예를 들어 이동 이렇게 간단히 href에 가고자 하는 주소를 넣어주고 해당 태그 사이에 심어 놓은 '이동'을 눌러주면 해당 링크로 이동 할 수 있다. 다만, 이대로 사용 할 경우 현재 페이지에서 페이지간 이동을 하게 되는데, 만약 새 탭이나 새 창에서 페이지를 열고 싶다면 다음의 문장을 더 넣어줘야 한다. target="_blank" 타겟으로 비어 있는 페이지로 지정한다는 의미다. 결과물은, 오른쪽 상단에 띄운 '포항지진 국민청원'이다. 본디 광고를 달아 수익을 얻었지만... 현정부가 포항에 너무 무심한 것 같고, 포항대게횟집이라는 상호명을 달고 상점을 운영하는만큼에서 청원기간 동안만이라도 약간의 광고 수익을 포기하기로 했다. 최소한 곡학아세는 하지 말자는 것이 필..

티스토리툴바