본문 바로가기
반응형

🎪 놀고있네148

[HTML, Chrome] 크롬에서 HTML 작업하기 - 개발자도구 목표: 크롬에서 HTML 작업하는 방법 요약 크롬 내 개발자 도구를 실행한다 Sources > Filesystem에 workspace를 추가한다. 안녕하세요 냥장판 입니다 HTML 문서를 만들어서 테스트해보고 싶을 때, HTML 문서를 수정하고 싶을 때 특정 도구를 설치할 필요없이 Chrome에서 작업이 가능하답니다! 저는 HTML 문서 말고도 Java나 SQL문을 공부하고 있어서 별도의 에디터를 사용하고 있어요. 그런데 HTML 문서만을 위해 특정 에디터를 설치하는 건 너무 낭비같아서 Chrome을 활용한 방법을 알려드릴게요! 1. 크롬 내 개발자 도구 실행 크롬을 실행하면 페이지 오른쪽 상단에 설정 창을 클릭해주세요. 개발자 도구(Developer tools) 메뉴를 클릭해 주세요. 그러면 아래 그림.. 2020. 1. 14.
[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.
[HTML] Link 태그 사용하기 - 기본편 목표: Link 태그 사용하기 요약 URL 하이퍼링크 걸기: href 이미지 하이퍼링크 걸기: href, img 안녕하세요 냥장판 입니다 HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요. 이 태그는 다른 html 문서나 이미지 파일 등을 연결할 때 사용합니다. 말 그대로 링크한다는 개념이에요. 위에 그림을 보면 Hello 라는 컨텐츠에 a 태그와 href 속성을 사용해서 링크를 한다는 개념입니다. 자세히 살펴보죠 1. URL 하이퍼링크 걸기: href 링크(a) 태그는 반드시 href 속성이 설정되어 있어야됩니다. href 속성이 없다면, 다른 속성(target, download, rel, rev, hreflang, type, referrerpolicy)들도 사용할 수 없어요. 기본 .. 2020. 1. 9.
이모티콘이 이상해요!!! 안녕하세요 냥장판 입니다🐱‍👤🐱‍👤 핸드폰 앱으로 제 블로그를 방문하신 분들은 아래 처럼 보일거에요 PC로 보시는 분들 특히 Windows 를 사용하신다면 아주 잘 보일겁니다 왜이러는 걸까요?? 1. 이모지(Emoji) 이모티콘이라고 하면 이해가 빠르실텐데요. 엄밀히 말하면 조금 다릅니다! 이모티콘은 아래 같은 애들이 이모티콘이고요. 이모지는 우리가 메시지를 보낼 때 입력하는 이런 친구들이 이모지 입니다. 이모티콘, 이모지 한국에서는 혼용해서 쓰죠? 이모지(Emoji)는 Unicode의 그림문자열이에요 2. 이모지 모양은 왜 다 달라요? 근데 이 이모지가 핸드폰 기종에 따라 다른거 아시나요? 이모지피디아 라는 공식 이모지 사이트가 있어요. 저는 아이폰을 사용합니다. 이렇게 보이죠 그런데 같은 이모지라도 .. 2020. 1. 9.
[개발 시 유의사항] 지나치게 한국적인 것 - 2 style="display:block" data-ad-client="ca-pub-9512983930357661" data-ad-slot="3488991516" data-ad-format="auto" data-full-width-responsive="true"> 안녕하세요 냥장판 입니다🐱‍👤🐱‍👤 이런 종류의 포스팅이 가장 반응이 좋은 것 같아요 소통하는 기분이랄까... (나만의 착각 🙄) 여러 업체들의 SW 제품을 보는데, 공통적이고 관용적으로 사용하는 것들이 있어요. 지나치게 한국적인 게 뭘까요 🐱‍🏍🐱‍🏍 오늘도 문제부터 나갑니다. 다음 중 어색한 부분은 어디일까요? 눈치 빠른 분들은 이미 아실 수도 있겠네요 ㅋㅋㅋㅋ 날짜랑 기간 구분자에 관련해서는 지난 포스팅에서 다뤘어요. 2019/12/12 - .. 2020. 1. 7.
[개발 시 유의사항] 쉽게 간과하는 것 - 1 안녕하세요 냥장판 입니다🐱‍👤🐱‍👤 웹 페이지에 들어가면 언어를 선택하는 것을 볼 수 있어요. 이때 가장 흔히 하는 실수가 무엇인지, 어떻게 하면 실수없이 전문적이어 보이는지 알려드릴게요! 문제 나갑니다 페이지 언어를 선택하고 싶어요, 아래 그림에서 잘못된게 뭘까요? 일번. 어색한게 없나요??? 그럼 이거는? 이번. 위에 것 보다는 좀 나은 것 같죠? 삼번. ㅋㅋㅋ 뭐가 어색한지 알려드릴게요 1. 국기는 언어를 대표하지 않는다 한국사람들은 캐나다나 미국 국기를 보면 영어를 먼저 떠올려요 제발 이 생각은 지우세요 미국은 영어가 아닙니다 물론 국기가 있으면 사용자가 언어를 선택하는 데 도움이될 수 있어요. 하지만 캐나다는 프랑스어와 영어를 공용어로 사용하고 있고, 미국은 영어만큼 스페인어도 많이 사용해요. .. 2020. 1. 6.
ORM(Object relational Mapping)이란? 안녕하세요 냥장판 입니다🐱‍👤🐱‍👤 이번 게시글에서는 SQL ORM(Object relational Mapping)에 대해서 알아보도록 하겠습니다. 1. ORM이란 데이터베이스와 객체 지향 프로그래밍 언어 (Python, node JS 등)간의 호환되지 않는 데이터를 변환, 맵핑하는 프로그래밍 기법이다. 객체 지향 프로그래밍언어(OOP, Object Oriented Programming)는 클래스라는 개념이 있고, RDBMS 에는 테이블이라는 개념이 있다. OOP를 사용해서 작성된 클라이언트 프로그램이 압도적으로 많다. OOP를 사용하는 데 제약을 받지 않고, RDBMS를 이용하기 위한 프레임워크(Framework)로 이해하면 된다. 한 예로 클래스로 스키마(Schema)를 매핑하고, 메소드(Method.. 2020. 1. 3.
반응형

티스토리툴바