C언어 예술가

지금까지 많은 태그들을 살펴보았지만 오늘 살펴볼 메타태그는 웹 사이트의 검색 최적화와 관련된 중요한 태그다. 메타(meta)라는 말의 의미는 다양하지만 여기에서 메타는 "정보를 설명하는 정보" 정도가 적당할 듯하다. 다시말해 HTML 문서는 웹에서 어떤 정보를 전달하기 위한 형태의 문서이며 메타태그는 HTML 문서가 어떤 문서인지에 대해서 설명하거나 추가적인 정보를 알리기 위해 사용되는 태그다.비유하자면 HTML 문서가 책이라면 메타 태그는 책의 겉 표지라고 볼 수 있겠다. 책의 겉 표지는 책의 제목과 가격, 지은이, 책을 대표하는 그림 등의 정보가 있어 책이 어떤 성격의 책인지를 쉽게 파악할 수 있도록 만든다. 마찬가지로 메타태그 역시 HTML 문서가 어떤 정보를 포함하며 어떤 성격의 문서(사이트)인지..

이번에 정리할 HTML 태그는 select입니다. 모든 학문이 그렇지만 특히 프로그래밍 공부는 이름으로부터 쓰임새를 유추하는 습관을 들여야 학습 효율이 높아짐니다. select 태그는 말 그대로 다양한 선택지 중에서 선택을 하는 드롭박스를 만드는 태그입니다. 물론 선택을 하는 사람은 웹페이지를 보고 있는 사용자 입니다. 그리고 선택된 내용은 일반적으로 웹서버로 전송해야 하겠죠. 앞서 우리는 input 태그를 공부한 적이 있습니다. input태그 역시 사용자 입력을 받는 다양한 type들을 지정하여 사용했었습니다(text, password 등등). 이렇게 사용자로 부터 입력받은 데이터들을 서버로 전송하려면 form 태그가 필요합니다. 구체적으로 form태그로 사용자 입력을 받는 태그들을 감싸주면 되는 것이..

나는 어릴적 오락실에서 하루종일 죽치고 않아서 게임을 하던 세대였다. 50원짜리 동전으로 게임 한판을 할 수 있는 80년대 부터 게임을 시작했고 2000년이 되기 전 까지는 가끔씩 오락실을 다녔던 기억이 난다.80년대에는 컴퓨터의 보급률은 저조했고 가정용 게임기를 가진 친구를 부루주아로 생각했기에 보통은 오락실에서 그 오락실 특유의 담배냄새를 맏아 가면서 게임을 했었다. 어쨌든 그 당시에는 오락실 게임이 가정용 게임기 게임보다 훨씬 퀄리티가 높았기에 오락실의 인기는 대단했다고 생각된다.언제부턴가 패밀리, 슈퍼패미콤, 플레이스테이션 등과 같은 게임기의 보급과 2000년대 전후로 PC방이 우후죽순 생겨나면서 오락실은 설 자리를 잃었다. 어린시절 100원짜리 동전을 오락실 게임기 모니터 아래 걸어두고 순서 대..

웹 페이지 상에서 다단을 나누는 경우는 큰 포탈 정도인 것 같다. 한 페이지에 많은 섬네일을 보여주기 위해서 다단을 나누거나 한다. 생각보다 많이 쓰이지는 않는 것 같은데 이건 나의 웹관련 실무적인 경험이 부족한 탓이라 생각든다. 다단을 나누기 위해서는 CSS를 사용해야 한다. 다단을 만드는 방법과 css 속성 중에 break-after, break-before 등이 어떻게 동작하는지도 살펴볼 생각이다. 내가 인터넷을 뒤져본 결과 이 속성(break-*)을 명확하게 정리해 놓은 곳은 못찾았다. 그래서 자세히 정리해 보려 한다. 예전에 flex 레이아웃을 공부한 적이 있었는데 다단과 약간 비슷하다고 생각할 수 있겠다. 따라서 반응형 웹에서 레이아웃을 잡는 용도로 다단을 사용할 수 있을까? 하는 쓸데없는 생..

텍스트나 이미지에 링크를 거는 방법은 a 태그를 사용하면 된다. 텍스트에 링크를 걸려면 a 태그로 해당 텍스트를 감싸주면 되고 이미지에 링크를 걸려면 a 태그로 이미지 태그를 감싸주면 된다. 그런데 인터넷 속도가 빨라지면서 사이트의 메인이나 페이지의 대부분을 이미지로 만들어서 여기에 멀티 링크를 거는 경우가 있다. 이게 바로 이미지 맵을 이용한 것인데 이미지 맵을 이용하면 링크를 걸 이미지들을 쪼갤 필요없이 하나의 통짜 이미지를 사용할 수 있다. 이미지맵, 말은 거창한 듯 하지만 단순히 map이라는 태그를 사용한다.map 태그는 이미지 맵을 만드는 태그며 원본 이미지를 표시하는 img 태그와 별도로 작성한다. 그리고 img 태그에서 사용할 map 태그의 이름을 지정하면 된다.이런 컨셉을 간단히 그림으로 ..

HTML에서 이미지 삽입을 위한 태그는 img 태그다.그런데 이미지 태그는 단독으로 쓰이면 아무 소용이 없기에 부수적으로 따라오는 속성들이 있어야 한다.어떤 이미지를 삽입할 건지 알려주는 src라는 속성이 당연히 있어야 하겠고 이미지의 사이즈를 조절하기 위한 width, height 속성이 필요할 수도 있다.또는 이미지 링크가 깨졌을 경우 깨진 이미지 대신 텍스트로 대체하기 위한 alt 속성, 이미지 위에 마우스를 올려 놓았을 때 이미지에 대한 설명을 툴팁(말풍선) 형태로 보여주는 title 속성 등이 있다.지금부터 하나씩 정리해 보겠다.src 속성 src는 source의 축약어로 이미지 파일의 위치를 정하는 속성이다. 위 코드는 로컬(local) 상에서 테스트 하는 코드이므로 html파일과 이미지파일(..

centos7을 설치하면 기본으로 사용할 수 있는 파이썬 버전은 2.7.5 입니다. 여기에다 파이썬 3.x 버전을 설치를 해서 기본 파이썬 버전을 3.x 버전으로 바꾸는 것은 골치가 아플 수 있습니다.어쨋든 centos7을 클린 설치한 후에도 기본 파이썬 버전이 2.7.2라는 것은 변함이 없기 때문에 추가적인 작업을 해줘야 합니다.이런 번거로움을 줄이기 위해서 파이썬 3.x 버전을 설치한 후에 가상환경을 사용하는 것을 권장한다. 파이썬 3.x 에는 가상환경을 위한 라이브러리(venv)가 기본으로 설치되어 있기 때문에 사용방법을 익히고 자주 사용하다보면 가상환경이 얼마나 편리한지 체감할 것입니다.무슨말인지 모르셔도 이제부터 따라 설치하면 됩니다.Cento7에서 파이썬 3.6을 설치하는 방법명령어 순서#yu..

앞에서 hyper-v에 리눅스(centos7)를 설치해 보았다. 네트워크 설정까지 마쳤지만 가상머신의 IP주소는 공인 IP가 아닌 사설IP 주소이므로 외부에서 직접 접속이 불가하다. 필자가 네트워크에 해박한 지식이 있는 것은 아니나 가상 머신 상에서 리눅스 웹서버를 돌리는 방법을 정리하려 한다.잘 알겠지만 공인 IP와 사설 IP의 차이점은 실제로 외부에 노출된 IP 주소가 공인 IP이고 외부에 직접 노출되지 않고 지역적으로 형성된 네트워크에서 부여되는 것이 사설 IP이다.쉬운 예를 들면 우리가 사용하는 공유기는 외부에서 들어오는 인터넷 망에 연결된 모뎀에 연결되어 있다.인터넷 - 모뎀 - 공유기 -컴퓨터(들) 혹은 공유기 없이 인터넷 - 모뎀 - 컴퓨터이렇게 단일 컴퓨터 또는 모뎀에 라우터 기능이 있어서..

이미 vmware의 편리함을 경험한 분들이라면 가상머신이 얼마나 유용한지 짐작하고 있을 것입니다.오늘은 윈도우10에서 지원하는 Hyper-v를 사용하여 Centos를 가상으로 설치한 후 네트워크 환경까지 설정해 보겠습니다.이 글은 성공된 하나의 사례이며 사용자의 환경에 따라서 다른 부분도 있을 수 있으므로 참고하시기 바랍니다.제일 처음으로 해야 할 작업은 자신의 컴퓨터 하드웨어 환경이 Hyper-v를 제대로 사용할 수 있는 환경인지 알아내는 것입니다. 윈도우 펑션키(왼쪽알트키 왼쪽에 있는 키)+r을 눌러 cmd를 실행합니다.그리고 열려진 명령창에 "systeminfo" 라고 타이핑 하고 엔터!그러면 메세지의 아래쪽에 위와 같은 내용을 확인할 수 있을 겁니다. 4가지 모두 예라고 되어 있으면 Hyper-V..

예전에 VSCODE에서 SSH를 사용하여 원격 개발을 하는 방법을 소개 했었습니다. rmate를 사용하는 방법이었는데 이 방법은 ssh만 사용할 수 있으면 가능하기에 간편하기는 하지만 파일을 하나 열때마다 명령어를 쳐서 열어줘야 합니다. 그래서 여러 파일을 번갈아 가면서 편집하기에는 불편할 수도 있겠습니다.FTP를 사용해서 VSCODE에서 원격 서버에 있는 폴더를 열어서 편집하는 방법도 있습니다.이를 위해서 우선 원격 컴퓨터에 FTP 서버를 설치해야 하겠습니다. 그리고 VSCODE 확장을 설치할 겁니다.(ftp-simple)가장 많이 사용하는 vsftpd를 설치해보겠습니다. 아래 설정은 사용자에 따라서 달라질 수 있으므로 참고만 하시길 바라며 주석의 내용을 잘 읽어보시길 바랍니다.vsftpd 설치와 설정..