지난 시간에는 부모 요소인 컨테이너에 적용하는 flex와 inline-flex에 대해 알아보았습니다. 이번에는 자식 요소들의 가로 사이즈 형성에 영향을 주는 부모 요소의 flex-wrap 속성에 대해 자세히 알아볼 것입니다. 이 부분도 상당히 중요합니다. 웹 페이지를 구상할 때 정사이즈로 보여줘야 하는 요소가 있는 반면, 사이즈의 크기에는 상관 없이 어떻게든 보여지기만 해도 되는 요소가 있을 수 있죠. 보통 여행 사이트가 후자에 해당하고 쇼핑몰 카테고리가 정사이즈에 속할 것입니다. 이럴때 부모 요소인 컨테이너에 flex-wrap 옵션을 사용함으로서 자식 요소의 가로 크기를 정의할 수 있습니다. flex-wrap: nowrap; 이 옵션은 flex 속성의 기본값입니다. 따라서 부모인 컨테이너 요소에 dis..
인터넷 익스플로러도 망한 마당에 이제 HTML의 블록 요소들의 배치가 좀 더 자유로워졌습니다. display: flex; 에 의해서 가능해진 것입니다. 이제 flex(플렉스) 정렬 방법에 의해서 간격이든, 가로 정렬이든, 중앙 정렬이든, 세로에 대한 중앙 정렬이든 뭐든지 싹 다 쉽고 간편하게 만들 수 있습니다. 말로는 뭔들 못하겠습니까? 바로 실습으로 들어가겠습니다. Flex 속성에 대하여 먼저 플렉스에 대한 개념부터 이해하고 넘어가겠습니다. flex를 검색해 보시면 「구부러지다」, 「탄력성」 등의 의미를 담고 있음을 확인할 수 있습니다. 즉 유연하게 요소들을 배치할 수 있다는 뜻으로 해석할 수 있을 것입니다. flex는 display의 여러 옵션 중 하나입니다. block이나 inline-block, ..
부모 요소의 자식 요소들 끼리, 그러니까 자매 및 형제 요소들을 선택하는 방법은 두 가지가 있습니다. 여기에서는 부모 요소를 기준으로 하는것이 아닌, 자식 요소간의 선택 방법입니다. 본문 내용의 이해를 돕고자 아래의 예시를 먼저 살펴보시기 바랍니다. See the Pen ~ 선택자 // + 선택자 by rgy0409 (@rgy0409) on CodePen. ~ 선택자 물결표 모양의 특수 기호를 사용한 선택 방법입니다. 이 기호를 사용하게되면 같은 F1 세대의 모든 자식 요소가 일괄 선택됩니다. 단 HTML의 마크업 순서가 중요한데, 기준으로 선정한 태그의 다음 태그들이 일괄 선택되어집니다. 위의 예시에서 test1의 ID값을 갖는 div 안의 태그를 살펴보시기 바랍니다. H3 H3 DIV H3 H3 H3..
CSS 스타일시트에서 마크업을 하는 선택자는 크게 세 종류입니다. 자기 자신, 혹은 자식요소, 나머지 하나는 자식 요소의 형제요소죠. 그 중에서 오늘은 자식 선택 방법에 대해서 집중 탐구를 해보려고 합니다. 친효스킨에서도 이 방법을 통해서 정확하게 어떤 자식 요소에 스타일을 만들어줄지 명시하고 있습니다. 사용 빈도가 꽤 높은 선택 방법이라고 할 수 있겠습니다. 먼저 아래의 예시입니다. 나를 선택해 보아요! 제발요 에 이런 태그 구조가 있습니다. 여기에서 div는 p들의 부모요소가 됩니다. 이제 p안에 입력되어있는 텍스트의 글씨 색상을 빨간색으로 바꾸고 싶습니다. 그러면 CSS에서는 이렇게 제어하면 될 것입니다. div.wrap p { color: red; } 이렇게하면 wrap이라는 클래스명을 가진 di..
HTML에서 input이라는 태그가 있습니다. 이 요소의 사용이 가장 두드러지게 이뤄지고 있는 영역은 바로 회원가입입니다. 인터넷을 사용하시는 분들이라면 최소 한 곳 이상의 사이트에 가입을 하신 경험이 있을 것이고, 그 회원 가입 과정에서 동의 부분에 체크를 한번이라도 해보신 경험이 있으실 겁니다. 바로 그 체크박스가 태그로 만들어집니다. input type input 태그는 type(타입)에 따라 종류와 형태가 달라집니다. 방금 언급했던 체크박스의 경우는 type="checkbox"라는 옵션을 사용합니다. 만약 직접 문자나 숫자 등의 변수를 입력받을 경우에는 어떤 타입을 사용할까요? 바로 type="text"라는 옵션을 사용하게 됩니다. 아래에 input 태그의 type 별 스타일을 모아두었으니 한번 ..
HTML에서 이미지를 삽입하고자 할 때 사용하는 태그(요소)는 라는 태그입니다. 그리고 그 태그 안에 src 옵션을 넣어서 이미지 경로를 지정해 줍니다. 이론 교육은 말로는 설명이 어려우니 직접 실습을 통해서 빠르게 알아보도록 합니다. 절대 쉽습니다. 먼저 이미지를 준비해 주세요. 너무 큰 이미지 말고 적당히 큰 사이즈로 준비해 줍니다. 가로 1000px 내외면 좋을 것 같습니다. 태그 사용 저는 고양이 이미지를 하나 준비했습니다. 이미지는 여러분들께서 작업중인 HTML / CSS 파일 폴더안에 모아두시는게 좋습니다. image 라는 폴더를 따로 생성해 해당 폴더에는 말그대로 이미지만 모아 관리하는것이 유지보수 차원에서도 훨씬 용이합니다. 이제 아래의 태그를 입력합니다. HTML 태그는 이렇게 구성됩니다..
지난 시간에는 a링크의 텍스트에 밑 줄이 들어가는것을 없애는 방법 및 더 자세한 옵션 활용 방법을 알아봤습니다. 이번에는 a링크의 기본 색상을 변경하는 방법에 대해 알아볼 것입니다. 이 부분도 지난 시간에 살짝 언급을 했었습니다. 링크 텍스트의 기본 색상은 파란색, 한 번 클릭한, 그러니까 최소 한 번이라도 방문한 링크 페이지는 보라색으로 바뀐다는 것을 말입니다. 여러분들께서 직접 구글에서 어떤것을 검색하시고 그 결과에 대한 링크들을 유심히 살펴보세요. 아직 방문하지 않은 검색글은 파란색 텍스트가, 방문한 사이트는 보라색 텍스트 링크로 바뀌어 있을테니까요. 본문에서는 이런 상황별 색상 변경 방법에 대해 안내를 해드릴 것입니다. HTML에서 그리고 CSS에서 사용하는 방법 두 가지를 모두 알려드리겠습니다...
HTML 세계에서 사용하는 수 많은 태그 중 요소라는것이 있습니다. 많이들 보셨을지도 모르겠습니다. 주로 링크를 넣을 때 사용하죠. a는 Anchor의 약자로 닻이라는 뜻입니다. 맞습니다. 배에 있는 그 닻을 의미합니다. 배가 정박하거나 출항할 때 바닷 속 바닥에 내린 거대한 쇳덩이가 바로 닻입니다. 닻을 올려라! 하면 출항을 의미하죠. 즉 이 앵커라는 개념은 뭔가를 단단히 고정하며 든든히 그 자리에 위치하는 우직함의 대명사로도 쓰입니다. 아무래도 HTML 세계에서는 하이퍼링크 문서답게 클릭 시 다른 웹사이트로의 이동에 있어서 마치 닻을 올리고 출항하는 기분을 주고 싶었던 모양입니다. 그래서 a 태그를 사용하게 된 것이 아닐까라는 생각을 해봅니다. a태그의 기본 형태는 다음과 같습니다. 텍스트 입력 a태..
과거에는 변환 프로그램으로 여러가지 확장자를 변경하는 방법을 사용했으나 지금은 왠만한 확장자를 온라인 사이트를 통해 간단하고 쉽게 변경할 수 있습니다. 파일을 수천개나 변환하는 사람은 거의 드물거라고 생각합니다. 아마 한두개의 파일을 변환하시는 분들이 압도적으로 많을 것으로 예상됩니다. 저도 그 중 한 사람이구요. Convertio(컨버티오)라고 하는 사이트가 있습니다. 해외 사이트지만 한글화가 잘 되어 있습니다. (직역 수준이지만 못 알아먹을 정도는 아님) https://convertio.co/kr Convertio — 파일 변환기 300가지 이상의 포맷 지원 저희는 300가지 이상의 서로 다른 파일 포맷 간의 25600가지 이상의 서로 다른 변환을 지원합니다. 다른 어떤 변환기보다 많은 수입니다. 신..
HTML에서 글꼴을 스크립트 혹은 링크로 로드하는 방법이 있듯 CSS에서도 @font-face를 사용해 원하는 폰트(글꼴) 파일을 불러와 적용하는 방법에 대해 알아보겠습니다. 방법은 너무나도 간단하고 쉽습니다. 먼저 사용하고자 하는 글꼴 폰트 파일을 준비합니다. 그전에 웹에서 사용 가능하고 여러 브라우저에서 지원이 가능한 폰트 확장자에 대해 알아볼 필요가 있습니다. 웹용 폰트 확장자 다음의 확장자들이 있습니다. 보시죠. Internet Explorer Chrome Safari Opera FireFox TTF/OTF IE9 이상 O O O O SVG IE9 이상 O O O X EOT IE6 이상 X X X X WOFF X O O O O WOFF2 O O O O O 현재 인터넷 익스플로러(Internet E..
이번에는 정말 간단한 CSS 스타일을 알아봅시다. HTML에서 특정 단어를 두껍게 만들기 위한 태그(요소)로는 태그를 사용합니다. b는 Bold의 약자죠. 두껍게 처리하고자하는 단어를 태그로 감싸주면 해당 텍스트만 두껍게 표시가 됩니다. 이것을 CSS에서도 얼마든지 적용시킬 수 있습니다. 두껍게 See the Pen CSS font-weight 두껍게 / 보통 by rgy0409 (@rgy0409) on CodePen. 위의 예시를 살펴보시기 바랍니다. 태그는 설명을 했으니 더 이상 언급을 하지 않고 바로 다음에 보이는 태그를 살펴봅시다. 태그는 인라인 요소로 주로 문장의 특정 단어를 강조하고자 할 때 간편하게 사용할 수 있는 대표 HTML 요소입니다. CSS에서 span 태그를 선택 후 다음의 CSS ..
이번에는 텍스트의 크기를 변경해 봅니다. 보편적으로 CSS에서 폰트 크기를 변경해주는 옵션은 다음과 같습니다. font-size 그러면 바로 예시를 살펴보겠습니다. See the Pen CSS 폰트 크기 3가지 옵션 by rgy0409 (@rgy0409) on CodePen. px 세 개의 문장이 있고 각 텍스트는 크기가 다릅니다. 지난 시간에도 잠깐 언급했듯 HTML에서의 기본 폰트 크기는 16px입니다. 따라서 첫번째 문장은 20px로 값을 입력했으니 기본 크기보다는 4px이 더 커진 상태가 될 것입니다. em (rem) 두번째에서는 폰트 크기의 단위가 px이 아닌 em을 사용했습니다. em 또는 rem을 사용할 수 있는데 간단하게 말씀드리면 「배」라고 생각하시면 됩니다. 물 위에 떠 있는 그 배 말..
HTML에서 텍스트를 입력 후 CSS에서 색상을 변경하는 방법에 대해 알아봅시다. 텍스트는 태그 없이 에디터에서 텍스트만 입력해도 출력은 되지만 편집을 위해서는 되도록 태그 안쪽에 텍스트를 입력하는것이 좋습니다. 대표적으로 태그나 태그들이 있습니다. 아래의 예시에서는 태그에 텍스트를 입력해 보겠습니다. 안녕하세요! 친절한효자손입니다. 이렇게 입력했습니다. 그러면 브라우저에서는 태그 안쪽에 입력된 텍스트만 출력됩니다. HTML에서 폰트 크기를 별도로 지정하지 않았다면 기본값인 16px 크기로 출력되며 색상은 검정색입니다. 색상을 변경하는 CSS 코드는 다음과 같습니다. p { color: #000; /* 16진수 헥사코드 또는 색상명 또는 rgba */ } color 라는 CSS 옵션을 사용한다는것을 기억..
div 블록요소들의 세로 가운데 정렬 방법에 대해 알아보도록 하겠습니다. 블록요소이면서 반응형으로 완성되는 레이아웃의 대부분은 세로 크기는 고정되어 있습니다. 본문 설명에서도 고정된 경우라고 가정하고 진행하겠습니다. 먼저 이 개념을 이해하려면 아래의 관련글들을 잘 읽어보시고 넘어가시는것을 추천합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tistory.com position을 사용한 세로 가운데 정렬 먼저 예시입니다. 세로 크기가 500px인 ..
input 창에 어떤 변수값을 받는 경우를 필요로 할 때 간단하게 사용할 수 있는 태그가 두 가지 있습니다. 제목에서 언급한 태그와 태그입니다. 이 두가지 태그가 어떤 차이점이 있는지, 그리고 최신 버전인 태그는 어떤 식으로 사용하는지 알아보겠습니다. 생각보다 너무 쉽습니다. 먼저 아래의 예시를 살펴보시기 바랍니다. datalist 사용 방법 See the Pen Tag by rgy0409 (@rgy0409) on CodePen. 먼저 텍스트 출력을 위한 태그는 필수입니다. 그리고 태그를 사용함으로서 입력창을 만듭니다. 뒤이어 바로 오늘의 주인공인 태그를 사용하고 자식 요소로서 여러가지 태그들이 들어가게 됩니다. 즉 각 태그의 기능은 다음과 같습니다. label : 원하는 문구(텍스트) 입력 input ..
포트폴리오에서 자신의 프로그램 능력을 보여주는 그래프라던지 어떤 통계에 대한 막대그래프 표현을 하고자 할 때 HTML 태그 중 이 녀석을 사용하면 상당히 요긴합니다. 바로 오늘의 주인공인 태그입니다. 이 태그는 별도의 CSS나 자바스크립트의 도움 없이 태그 사용만으로 간단하게 막대 그래프를 표현할 수 있는 매우 유용한 요소 중 하나입니다. 과거 싸이월드 시절, 미니홈피 오른쪽 상단에는 이런게 있었습니다. 203040 여러분들은 기억하실겁니다. 연예인 싸이월드 미니홈피를 들어가보면 이 막대그래프의 수치가 장난 없습니다. 미친듯 치솟습니다. 스크랩과 즐겨찾기 개수가 어마무시했죠. 아무튼 저런 막대기를 매우 쉽고 간편하게 표현할 수 있는 것입니다. HTML 사용 방법 See the Pen Tag CSS Cus..
어느날 제 티스토리를 접속해보니 버젓이 노출되고 있는 애드센스 고정 광고! 물론 이건 제가 설정한게 아닙니다. 자동 광고로 인해서 노출되는 것으로 추측됩니다. 그리고 항상 노출되는것도 아니고 어쩌다가 특정 이벤트가 발동되면 출력되는 듯 한데 어떤 이벤트인지는 알 수가 없습니다. 아마도 FHD 해상도가 아닌 최소 WQHD 정도는 되어야 출력되는게 아닐까라는 생각이 듭니다. 이 광고의 특징은 고정형이라는 것입니다. 즉 세로 스크롤을 아무리 내리고 올려도 미동도 하지 않는 그야말로 고정 형태의 광고라는 것입니다. 그렇다면 애드센스에서 고정광고를 허용한다는 이야기일 것입니다. 그동안 고정형 광고는 안 되는것으로 알고 있는데 상당히 충격적인 결과였습니다. 이에 대해서 애드센스에서는 어떠한 가이드라인을 제공하고 있..
현재 대전지역 한정으로 HTML과 CSS를 무료로 교육을 진행중에 있습니다. 이제 스킨을 새로 만들기로 마음은 먹었지만 다시 처음부터 시작하려고하니 뭔가 급 귀찮아지기도 하고 그동안 버전이 올라감에 따라 정상적으로 동작하지 않는 것들이 몇 개가 있습니다. 대표적으로 폰트어썸이라고 하는 웹 아이콘입니다. 과거에는 회원 가입이 필요없었고 바로 사용이 가능했지만 이제 강제적으로 가입을 해야 사용이 가능하도록 변경되었나 봅니다. 기존 회원 중 이미 구버전의 폰트어썸을 사용중이라면 크게 상관은 없으나 만약 새롭게 HTML 문서를 만들고 폰트어썸 CDN을 사용하려면 회원 가입은 필수입니다. 폰트어썸 가입하기 https://fontawesome.com/ Font Awesome The world’s most popul..
앞서 오픈씨 가입 방법 및 메타마스크 가입 방법에 대해 안내해 드렸습니다. 또한 메타마스크에서 폴리곤 가상화폐를 추가하는 방법까지도 설명했습니다. 이제 마지막 과정입니다. 자신의 작품을 NFT화하고 이것을 오픈씨에서 판매하는 방법입니다. 어렵지 않습니다. 그대로 따라해 주시면 됩니다. 혹시 이전 과정들을 전혀 모르는 상태라면 반드시 아래의 글을 꼭 정독 후 다시 본문으로 넘어와 주시기 바랍니다. 그래야 100% 이해됩니다. NFT 플랫폼 오픈씨 회원가입을 위한 메타마스크 가입 방법 메타마스크 폴리곤 추가 방법 오픈씨 프로필 변경 방법 오픈씨 콜렉션 만들기 가장 먼저 콜렉션을 만들어야 합니다. 콜렉션은 티스토리 블로그로 비유하면 일종의 카테고리입니다. 작품에는 여러가지 종류가 있을겁니다. 크게 보자면 음악..
앞서 오픈씨 가입 방법 및 메타마스크 가입 방법에 대해 안내해 드렸습니다. 또한 메타마스크에서 폴리곤 가상화폐를 추가하는 방법까지도 설명했습니다. 이번에는 오픈씨 프로필 및 이미지 변경 방법에 대해 알아보겠습니다. 혹시 이전 강좌를 못 보신 분들이라면 아래의 글을 정독해 주시기 바랍니다. NFT 플랫폼 오픈씨 회원가입을 위한 메타마스크 가입 방법 메타마스크 폴리곤 추가 방법 이제 오픈씨에 로그인 하셨다면 빨간색 부분의 프로필 이미지를 클릭해서 원하는 이미지로 업로드를 할 수 있습니다. 또한 파란색 영역의 백그라운드 이미지도 동일한 방법으로 선택해서 지정하시면 됩니다. 더 자세한 프로필 변경은 오른쪽에 있는 톱니바퀴 모양의 아이콘을 눌러서 진행합니다. 설정 아이콘을 누르면 이렇게 메타마스크 서명 인증창이 ..
오픈씨에 이더리움의 메타마스크를 사용할경우 가스비라는 수수료가 발생합니다. 근데 이게 생각보다 쌔요. 그래서 수수료 없는 방법이 뭐가 없을까하고 알아보니 폴리곤이라는 가상화폐를 사용하면 된다는것을 알았습니다. 당장 실천해서 알아봐야겠습니다. 정말 그런지 말입니다. 혹시 메타마스크 가입을 아직 안 하셨다면 아래의 글을 읽어주시기 바랍니다. NFT 플랫폼 오픈씨 회원가입을 위한 메타마스크 가입 방법 크롬 확장자 프로그램 아이콘에 있는 메타마스크를 클릭합니다. 상단에 있는 이더리움 메인넷이라는 문구를 클릭하여 네트워크 추가 버튼을 누릅니다. 그러면 이렇게 입력창이 나오는데 아래의 정보대로 똑같이 입력해줍니다. 네트워크 이름 : Matic Mainnet 새 RPC URL : https://rpc-mainnet...
운영중인 그림 모임이 있습니다. 단톡방에서 NFT 관련 이야기가 나옵니다. 뭘까 싶어서 검색해보니 Non-Fungible Token의 약자입니다. 해석하면 대채 불가능한 토큰이라는 뜻입니다. 이더리움이나 비트코인같은 가상화폐를 이용했으며 블록체인 기술이 적용된 것으로, 많은 아티스트 분들께서 자신의 작품을 NFT화하여 온라인으로 유통을 하고 있다는것이 현재의 상황입니다. 그렇다면 어떻게 가입하고 사용하는지를 알아봐야겠죠? 궁금한건 바로 해봅니다. OpenSea (오픈씨) 가입 준비 먼저 아래의 사이트를 방문합니다. https://opensea.io/ 오픈씨는 수 많은 NFT 플랫폼 중 하나입니다. 여기가 꽤 유명하더라구요. 유명하다는뜻은 가장 사용자가 많다는 의미이므로 이곳에서 한번 개인 작품을 발행해보..
티스토리에는 용량 제한이 있습니다. 과거에는 이미지나 파일 당 용량이 10MB이상은 업로드가 되지 않았지만 최근 티스토리는 성능이 향상되었기에 그 두 배인 20MB까지 가능해졌습니다. 하지만 이 또한 그렇게 넉넉한 용량은 아닙니다. 고화질 움짤의 경우는 꽤 용량이 큰데 이런 파일들은 20MB 이상의 용량을 자랑하는 경우가 꽤 많습니다. 그렇다면 이런 이미지들은 어떻게 올리면 좋을까요? 여기에서 우리는 이미지 호스팅이라는 플랫폼을 활용할 수 있습니다. 위의 비내리는 이미지는 애니메이션 날씨의 아이에서 움짤로 만들어본 것입니다. 용량은 약 17MB여서 보시는 것처럼 티스토리에 아무렇지않게 업로드가 가능합니다. 하지만 그 이상의 이미지는 티스토리에 업로드를 할 수 없기에 제목에도 언급한 imgbb라는 무료 호..
div같은 블록박스 요소안에 백그라운드 이미지를 꽉 차게 적용하는 방법이 두 가지가 있습니다. 이미 예전에 이 부분은 잘 정리를 해두었기 때문에 본문에서는 한번 더 부족한 설명 부분을 언급하는 정도로 진행하려고 합니다. 아래의 글을 먼저 정독해 주시기 바랍니다. CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여 CSS3 백그라운드 요소: background-size 에서 contain, cover 원본비율, 중앙비율에 대하여 CSS3에서 백그라운드를 처리함에 있어서 추가적인 요소가 있습니다. 바로 contain과 cover 입니다. 이 각각의 의미는 한글로 풀이를 하자면, 원본비율과 중앙비율이라고 말씀드릴 수 있습니다. 현재 rgy0409..
불과 몇달전 일입니다. 디스코드가 유튜브 뮤직을 우회해서 들을 수 있다는 소문이 엄청 급성장했는지 유튜브측에서 이 우회 방법을 차단했습니다. 사실 알맞는 조치라고 생각합니다. 유튜브 프리미엄 사용자가 아닌 이상은 광고를 무조건 봐야하는데 디스코드로 음악을 링크해 들으면 광고가 나오지 않고 바로 음악만 쏙 청취할 수 있기 때문입니다. 따라서 기존에 꽤 유명했던 음악봇들이 이 방법이 막혀버렸습니다. 히드라봇, 프레드봇, 리듬봇, 그루비봇 안녕~ 디스코드용 음악봇으로 꽤 유명한 것들이 있습니다. 방금 열거했던 봇들이 그것입니다. 하지만 대다수의 노래봇들은 이제 유튜브의 음악을 가지고 올 수 없게 되어버렸습니다. 또한 설령 되는 봇이 있어도 너무 심하게 음악이 끊기는 현상이 있었습니다. 국내봇인 전적이봇마저....
친효스킨을 후원제로 변경한 지금! 이제 파일을 일일히 후원자 분들에게 전송하고 있습니다. 근데 이게 압축파일 첨부가 되지 않습니다. 지메일만 그런게 아니고 네이버 메일도 그렇다군요. 물론 모든 메일 서비스가 동일하지는 않습니다. 다음의 경우에는 전송이 가능합니다. 허나 언젠가는 다음메일도 막힐게 뻔합니다. 이건 보안상 어쩔 수 없는 수순인 것 같습니다. 이런 식으로 구글 지메일에서 친효스킨 파일을 첨부하면 보안상의 이유로 차단이 됩니다. 도움말을 눌러서 확인해보니 압축파일 내부에 있는 다음의 파일들이 문제가 되는 것이었습니다. Gmail에서 차단하는 파일 형식은 다음과 같습니다. .ade, .adp, .apk, .appx, .appxbundle, .bat, .cab, .chm, .cmd, .com, .c..
안녕하세요. 친절한효자손입니다. 최근 애드센스는 다시 한 번 업그레이드가 진행되었습니다. 일치하는 콘텐츠라는 광고 형태를 아시나요? 애드센스를 승인 받으면 바로 게시는 할 수 없는 광고 형태입니다. 일정 방문자(트래픽)가 어느 정도 달성되면 자동으로 광고를 생성할 자격을 부여받게되는 광고입니다. 이것이 일치하는 콘텐츠 광고입니다. 일치하는 콘텐츠 광고는 PC 해상도 기준에서 4 x 2 형태의 목록이 출력되는데 8개의 목록 중에서 5개는 광고이며 나머지 3개는 설치된 블로그의 글 목록이 출력됩니다. 대체로 랜덤인데 구글의 알고리즘에 의해 본문의 내용과 최대한 관련 있는 글이 목록화 됩니다. 애드센스 멀티플렉스 광고 애드센스에 로그인을 하시면 일치하는 콘텐츠가 사라지고 멀티플렉스 광고가 새로 자리를 잡고 있..
블록 요소를 가로 정렬할 때 display 속성을 inline-block으로 변경하면 됩니다. 가장 쉬운 방법 중 하나죠. 그러나 inline-block 속성으로 변경을 하면 한 가지 문제점이 발생합니다. 완전 치명적인 부분은 아니지만 1px 하나 하나에 민감한 레이아웃 작업에서는 다소 치명적일수도 있는 문제입니다. 여백이 생성된다는 것입니다. 아래의 예시를 봐주세요. See the Pen CSS3 - display : inline-block ; 여백 초기화 by rgy0409 (@rgy0409) on CodePen. wrap1과 wrap2의 아이디값을 가진 div 그룹이 있습니다. 각 div의 자식 요소에는 display : inline-block; 속성이 적용되어 있는 상태입니다. wrap1 그룹은 ..
HTML의 각 태그는 기본적인 속성이 있다고 말씀드린 바 있습니다. 바로 블록, 인라인, 블록-인라인 요소가 그것입니다. 혹시 이 개념에 대해 잘 모르신다면 먼저 아래의 글을 반드시 꼭 정독하시어 이해를 먼저 해주시기 바랍니다. 정말 중요한 부분이거든요. 개인적으로 이 개념이 확실히 머릿속에 적립된 시점부터 웹언어에 대한 이해도가 부쩍 향상되었습니다. 기초는 정말 정말 너무 중요하다고 생각합니다. HTML 태그 기본 분류 - 블록요소 인라인요소 HTML 태그 기본 분류 - 블록요소 인라인요소 티스토리와 함께 배우는 HTML의 세상에 잘 오셨습니다. 사람의 기억력은 한계가 있습니다. 자꾸 써먹지 않으면 언젠가는 까먹습니다. 저는 사람입니다. 즉 저도 써먹지 않으면 까먹을 수 있습니 rgy0409.tisto..
HTML5 새로운 태그 중 라는 태그가 있습니다. 말그대로 비디오 동영상 파일을 재생시키고자 할 때 사용하는 요소입니다. 태그에 대해서 이미 자세하게 다룬 글이 있으므로 잘 모르신다면 아래의 글을 한 번 정독 후 본문을 읽어보시면 많은 이해와 도움이 될 것입니다. HTML5 백그라운드에 무한재생 동영상을 넣자! video 태그 사용법 HTML5 백그라운드에 무한재생 동영상을 넣자! video 태그 사용법 HTML5에서 새롭게 추가된 태그 중 하나가 video 입니다. 과거에는 플래시 플레이어, 혹은 여러가지 ActiveX 같은 추가 프로그램을 설치해야만 재생이 되었지만, 버전이 향상되면서 video 요소 하나로 rgy0409.tistory.com 위의 본문에서도 나와있지만 정확하게 언급을 하지 않은 부분..