HTML
-
구글 검색 시 내 사이트가 노출 안되게 하기HTML/<meta> 2024. 4. 9. 12:35
내 포트폴리오에 검색엔진 최적화를 잘 해둔 덕일까, 내 이름 석자와 포트폴리오만 치면 내 사이트가 상단에 노출되어 있다. 판매사이트나 회사사이트, 이벤트 페이지라면 너무 좋겠지만 포트폴리오는 내가 지원한 회사만 접근가능 할 필요성을 느꼈다. 처음 시도 해 본 방법은 head 태그에 아래의 메타 태그를 추가하는 방법. 페이지의 색인 생성을 차단하는 방법이라는데 얼마나 걸릴지도 모를 일. 두번째 시도한 방법은 구글 서치 콘솔에서 사이트 소유자 인증을 받고 6개월간 URL 삭제를 요청해 검색이 안되게 신청했다. 한시간 동안 확인해보아도 처리 중이어서 헬스하고 저녁에 집에 돌아와 확인해 보니, 요청 처리 중에서 일시적으로 삭제됨으로 상태가 변경 되었고 이제 구글링해도 나의 포트폴리오가 검색되지 않는다! 성공
-
<meta> 태그 metadata 메타데이터HTML/<meta> 2022. 8. 30. 03:29
메타는 그리스어로 ‘너머(beyon)’를 뜻해 현실세계를 넘어 또다른 공간. 가상세계(메타버스)를 차세대 주요 소셜 플랫폼으로 이끌어 나가겠다고 했다. 페이스북을 사용해봤다면 들어봤을 메타. → 바디태그 너머의 공간에 적어야하는 메타태그 또, 접두사 meta는 '~에 대해서(about)'를 뜻한다. → 웹페이지에 대한 부가속성, 정보를 담아내는 메타태그 예로, 페이지호환성에 대한 부가정보. 위치서비스. 오픈그래프 등등 웹컨텐츠 자체(body 태그)외에도 부가적인 데이터를 담을 수 있게 해주는 것이 바로 meta 태그이다. 보통, name과 content로 정보와 정보에 대한 값을 적는다. 경우에 따라 id도 적어준다. 언뜻보면 content에 원하는 값을 쭉- 적는게 태그에 직접 CSS를 지정하는 '인라..
-
용어 정리HTML 2021. 10. 14. 09:57
HTML에 관한 용어의 한영표기를 정리하며 모호한 개념을 명확히 해두기 위해 서적을 참고했습니다. 요소 = element = object = 객체 : HTML페이지를 구성하는 각 부품입니다. 태그는 이러한 요소를 만들 때 사용하는 작성 방법이며 미리 W3C에서 정해 두었음. 흔히, 요소와 태그를 구분하지 않고 사용함. 속성 = attribute. 태그에 추가 정보를 부여할 때 사용하는 것. 특수문자표기. 공백 non-breaking space > > greater than sign <
-
GIT 저장소 =? 레파지토리HTML 2021. 6. 11. 00:33
이번에 조잡한 계정이름을 통일성있게 변경했는데 (pendato23 => simigeum) pendato23/README.md 를 만든 깃허브 메인화면이 사라져 버렸다. 계정이름과 레파지토리이름이 일치하지않아서 그런 것이다. 처음에 git에서 경로를 설정하려고 했는데 아무리해도 안되서 깃허브에서 간단하게 레파지토리 이름을 simigeum으로 변경해서 해결했다. git remote -v git remote set-url origin [repo 주소] 이런게 반응이 없었다 깃허브에서만 레파지토리를 변경할수있는듯하다..?
-
개발환경 세팅HTML 2021. 6. 10. 18:55
1. github계정 만들기 아이디 너무 대강만들지 말걸.. (ex. rlaalswl94 : 김민지94) 그래서 계정이름을 변경했더니 모든 레파지토리의 주소를 변경해주어야하는 이슈가 발생했다. [git/github] 깃헙 계정 변경 가끔 뭐든지 새로 시작하고 싶을 때가 있지 않나요?ㅎㅎ.. 그래서 프로젝트를 시작할 겸, 새로운 마음가짐으로 시작해보자! 이런 마음으로 블로그, 이메일, 깃 계정을 새로 만들었어요:) 하지만 dev-hyun.tistory.com 이것을 참고해서 해결할 예정. 2. 소프트웨어 설치 비주얼스튜디오코드, 피그마, 깃배쉬, 노드JS를 설치해주고 또 쾌적한 개발환경을 위해 추가로 Extension을 설치하고 적용하기 위한 패키지제이슨파일도 수정해준다. npm과node의 버전 업데이트하..
-
favicon 추가는 어떻게? ico, png 확장자 차이HTML 2021. 6. 8. 13:27
브라우저 탭에 제목은 title 태그를 head태그안에 넣는 걸로 나타낼 수 있고 그 제목 옆에 작은 아이콘은 link 태그를 head태그안에 넣는 걸로 나타낼 수 있다. 내 포트폴리오를 점검해 보면서 이 부분을 항상 빠뜨려서 뭔지모를 허전함을 주었는데 ico png차이와 그에 따른 살짝 다른 표기법에 대해 찾아보면서 정리해 보았다. 1.표기법 ico파일은 png파일과 비교해보면 rel속성에 shortcut을 추가해주고 type속성은 image/png대신 image/x-icon으로 변경해준다. 2.차이점 이 파비콘은 브라우저 탭에 작은 아이콘뿐아니라 북마크, 바로가기 아이콘 등등 활용되는데 png의 경우 16픽셀 사이즈만 덜렁 올려놓게 되면 다른곳에 활용될때 저해상도라 깨져보일 수 있어서 아래와 같이 s..
-
<meta http-equiv="X-UA-Compatible" content="IE=Edge">HTML 2021. 1. 9. 18:27
2줄요약 content=' ' 에 IE= 호환될 버전 을 써주면 된다. 글 작성 기준 엣지가 마이크로소프트 최신버전이기 때문에 IE=Edge을 넣어주면 된다. 배경지식 2021 8월 17일부터 마이크로소프트(MS)가 인터넷 익스플로러 11(이하 IE11) 앱과 서비스를 중단한다. 익스플로러의 단점은 버전별로 지원하는 태그와 속성이 제 각기 달라서 지원하지 않은 태그나 CSS를 사용하면 제대로 나타나지 않는다. 코드를 공부하는 입장에서는 크롬이나 엣지 등 최신 태그와 CSS를 지원하는 환경으로 넘어가면 그만이지만 기업은 그 달라지는 부분을 익스플로러 사용자를 위해 버전별로 퍼블리싱해야했다. 하지만 곧 중단되서 이제 그럴 필요가 없게 될것이다 :) 아무튼 그래서 마이크로는 X-UA-Compatible 태그로..