본문 바로가기
반응형

분류 전체보기184

[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.
[VS Code] 단축키 - 멀티라인 수정하기 안녕하세요 냥장판 입니다 VS Code에서 여러 라인을 한꺼번에 수정하고 싶을 때 사용하는 단축키 소개드릴게요 엄청 편합니다. Alt + Click 영상으로 보여드릴게요 엄청 간단하죠? 더 많은 단축키가 있습니당 오늘은 이것만 설명드릴게요 그럼 이만! 2020. 1. 10.
[HTML] Link 태그 사용하기 - download 속성 안녕하세요 냥장판 입니다 지난 게시글에서는 Link 태그 기본사용법에 대해서 살펴봤어요 2020/01/09 - [놀고있네/HTML & CSS] - [HTML] Link 태그 사용하기 - 기본편 [HTML] Link 태그 사용하기 - 기본편 목표: Link 태그 사용하기 요약 URL 하이퍼링크 걸기: href 이미지 하이퍼링크 걸기: href, img 안녕하세요 냥장판 입니다 HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요. 이 태그는 다른 html 문서나 이.. miaow-miaow.tistory.com 이번 시간에는 Link 태그로 이미지를 올려놓고, 이 이미지를 다운받을 때 사용하는 속성에 대해 알려드릴게요 1. download 속성 download 속성 사용방법은 아래와 같아요... 2020. 1. 10.
반응형

티스토리툴바