본문 바로가기
반응형

분류 전체보기177

[CSS] CSS를 사용하는 이유 안녕하세요 냥장판 입니다 이번 게시글은 CSS에 대한 아주 기초적인 지식에 대해 다룰거에요. HTML을 다루다보면, CSS stylesheet 라는 말을 들어본적이 있을겁니다. CSS는 왜 사용하며, 어떻게 사용하는지 살펴볼게요. 1. CSS란 CSS는 Cascading Style Sheets의 약자로 종속형 스타일 시트, 캐스케이딩 스타일 시트 라고 불립니다. 마크업 언어(XML, HTML 등)의 레이아웃과 스타일을 나타내는 언어에요. 우리의 맨얼굴과 맨몸뚱아리를 HTML이라고 한다면 화장하고, 옷입고, 악세사리하는 모든 꾸며주는 것들을 CSS라고 생각하면되요. 안꾸미고 나가도 되죠. HTML문만 있어도 된다는 말입니다. 꾸미고 나가나요? 그럼 CSS를 입고 나간다는 말이에요. W3C(World Wid.. 2020. 1. 20.
[Tistory] Sitemap, 사이트맵 만들기 - XML Sitemap Generator XML Sitemap Generator 사이트를 통해 사이트맵을 만들어봅시다! http://www.web-site-map.com/ XML Sitemap Generator - creates Free Google site-maps online Our news: (see more on !) Newest long TLDs are fully supported now This Web-Site-Map.com service is named by Web Hosting Search one of the Best Web Tools "for providing outstanding XmlSitemap generator". Sub-domains got fully supported Read about that here www.web.. 2020. 1. 17.
[HTML] display 요소(p, div, span)의 차이점 목표: p, div, span 등의 차이점 요약 Display 요소의 특징(block과 inline 개념 파악하기) 안녕하세요 냥장판 입니다 HTML 배우는 초기에 단락(paragraph)은 p, 레이아웃 분할(division)은 div, 특정 부분(span)만 묶어주는 span 에 대해서 들어본적이 있을거에요. 들어본적이 없더라도 보셨을거라 생각합니다 이들의 차이점에 대해서 설명해 드릴게요 그 전에 display 속성값의 특징에 대해 잠깐 알고가야해요 1. Display 요소값의 특징(Block, Inline) Display 요소는 두개의 특징을 가져요 Block Inline 차이점은 아래서 보실테지만, 새로운 요소값을 사용할 때 시작줄이 새로운 줄이냐 아니냐로도 나뉩니다. 2. Block-level .. 2020. 1. 17.
[HTML] charset 의 중요성 ❤ 목표: charset은 왜 쓰는거죠?요약인코딩(Encoding)과 관련있음 안녕하세요 냥장판 입니다 HTML문을 살펴보면 상단에 아래와 같은 구문이 작성된 걸 아주 얼핏 보셨을거에요 그냥 무심코 지나쳤던 charset 의 소중함을 알려드릴게요! 1. 인코딩(Encoding)과 관련있음 인코딩은 내가 작성한 구문을 컴퓨터가 해석할 수 있게 변환 해주는거에요. 자세한 설명은 아래를 참고하시고요.2019/11/28 - [놀고있네/i18n] - [Characters] 글자가 깨져요[Characters] 글자가 깨져요목표: 글자가 깨지는 이유를 알아보자 요약 문제는 인코딩(encoding) 표준화된 인코딩 방법: Unicode 웹서핑 또는 문서를 열었을 때, 외계 문자를 본적 있을 것이다. 갑자기 컴터가 암에 걸.. 2020. 1. 16.
[HTML] Link 태그 사용하기 - 새창에서 페이지 열기 안녕하세요 냥장판 입니다 여기를 눌러보세요 링크를 누르면 새창에서 페이지가 열리죠? 링크를 걸 때 새창에서 열기를 설정해서 그래요. 그럼 이거는 어떤가요? 두 개가 페이지를 여는 방식이 다르죠! 이번 게시글에서는 Link 태그를 사용해서 페이지 여는 속성을 확인해봅시당! target 속성 target 속성은 링크를 어디에서 여는지에 대해 설정할 수 있어요. 속성 내용 _blank 새 창이나 새 탭에서 페이지 열기 _self 현재 프레임(frame)에서 페이지 열기(기본설정) _parent 부모 프레임(frame)에서 페이지 열기 _top 현재 창에서 full window로 페이지 열기 target 속성 사용방법 target 속성은 아래와 같이 작성합니다. 링크 걸어주고, target에 속성값 넣으면되요!.. 2020. 1. 15.
[Tistory] robots.txt 파일 수정 & 검색 엔진 & 메타 태그 목표: robots.txt 파일 수정해서 검색 엔진에서 수집되게 만들기 요약 robots.txt에 Sitemap 등록하기 - 티스토리 해당 없음 robots.txt 수정 불가 시 메타 태그 등록하기 - 티스토리 해당 안녕하세요 냥장판 입니다 이번 게시글에서는 robots.txt 파일을 생성하고, 티스토리에 robots.txt 등록 및 수정하는 방법을 알려드릴게요 기본적으로 robots.txt는 검색엔진이 데이터를 수집(크롤링, Crawling)할 때 설정된 규칙에 따라 사이트 내 웹 페이지 수집 가능한지 여부를 확인해요 여기서 규칙이라고 하는 것은 google 검색 엔진에서는 수집 가능하고, yahoo 검색 엔진에서는 수집 불가능 하게 설정할 수 있다는 거죠! 이제 실제로 robots.txt 파일을 작성.. 2020. 1. 14.
[HTML, Chrome] 크롬에서 HTML 작업하기 - 개발자도구 목표: 크롬에서 HTML 작업하는 방법 요약 크롬 내 개발자 도구를 실행한다 Sources > Filesystem에 workspace를 추가한다. 안녕하세요 냥장판 입니다 HTML 문서를 만들어서 테스트해보고 싶을 때, HTML 문서를 수정하고 싶을 때 특정 도구를 설치할 필요없이 Chrome에서 작업이 가능하답니다! 저는 HTML 문서 말고도 Java나 SQL문을 공부하고 있어서 별도의 에디터를 사용하고 있어요. 그런데 HTML 문서만을 위해 특정 에디터를 설치하는 건 너무 낭비같아서 Chrome을 활용한 방법을 알려드릴게요! 1. 크롬 내 개발자 도구 실행 크롬을 실행하면 페이지 오른쪽 상단에 설정 창을 클릭해주세요. 개발자 도구(Developer tools) 메뉴를 클릭해 주세요. 그러면 아래 그림.. 2020. 1. 14.
[Tistory] 블로그에 맨위로가기 버튼 만들기 안녕하세요 냥장판 입니다 티스토리 블로그에는 맨 위로가기 버튼이 없어요 그래서 한번 만들어 보도록 할게요 HTML 문서를 수정하면 되는데요. HTML에서 Link 태그를 이용할 거에요 Link 태그를 사용해서 맨위로가기 만드는 건 아래 게시글 참고하세요 2020/01/11 - [놀고있네/HTML & CSS] - [HTML] Link 태그 사용하기 - 맨위로 이동 [HTML] Link 태그 사용하기 - 맨위로 이동 목표: Link 태그를 활용해서 맨위로 이동 구현하기 요약 id(아이디) 달아주기 href에 해당 id 링크하기 안녕하세요 냥장판 입니다 웹페이지를 쭉 내리다가 맨 위로(페이지 상단) 올라가고 싶을 때가 있죠? 웹서핑.. miaow-miaow.tistory.com 1. HTML 문서 수정 페이지.. 2020. 1. 13.
[HTML] Link 태그 사용하기 - 맨위로 이동 목표: Link 태그를 활용해서 맨위로 이동 구현하기 요약 id(아이디) 달아주기 href에 해당 id 링크하기 안녕하세요 냥장판 입니다 웹페이지를 쭉 내리다가 맨 위로(페이지 상단) 올라가고 싶을 때가 있죠? 웹서핑이든, 쇼핑이든 페이지 상단으로 올라갈 때 우리는 TOP 이미지나 버튼을 클릭합니다. 이번 게시글에서는 위로 올라가는 방법(?) 알려드릴게요! 일단 징그럽게 긴 텍스트를 입력합니다; 스크롤바가 있고, 밑으로 내려가다가 맨 위로 가려면 마우스를 계속 굴려야해요 1. id(아이디) 달아주기 각 요소마다 아이디(id)를 달아주는 거에요 이동하고 싶은 곳 속성에 id를 달아주세요 2. href 에 해당 id 링크하기 그래서 맨 아래에 내려갔을 때 Link 태그에서 해당 id를 가진 속성을 호출하는 .. 2020. 1. 11.
반응형

티스토리툴바