# href

22개의 포스트

[NextJs] Link href 타입스크립트 적용하기

클라이언트 사이드에서 다이나믹하게 동작하게 하기 위해서 컴포넌트를 만든다. href를 받아서 사용하고자 하는데 타입설정이 조금 까다로웠던듯. 다음은 해결안 cmd + shift + p 눌러서 restart typescript 해주자. 오류가 사라진다.

2023년 8월 6일
·
0개의 댓글
·
post-thumbnail

📇 Location

Location 객체 현재 페이지 정보를 반환하거나 제어합니다. .href : 전체 URL 주소 .protocol : 프로토콜 .hostname : 도메인 이름 .pathname : 도메인 이후 경로 .host : 포트 번호를 포함한 도메인 이름 .port : 포트 번호 .hash : 해시 정보(페이지의 ID) .assign(주소) : 해당 주소로 페이지 이동 .replace(주소) : 해당 주소로 페이지 이동, 현재 페이지 히스토리 제거 .reload(강력) : 페이지 새로고침 , true 인수는 강력 새로고침 hash: 하나의 페이지에서 내부에 있는 특정 위치로 이동이 가능하다.(새로고침없이 이동한다) <image src="https://velog.velcdn.com/images/hyeminpak/post/22aa2ce4-23ab-4c38-aeac-c8fa4d6434dc/image.png

2023년 8월 2일
·
0개의 댓글
·
post-thumbnail

요소(element)와 태그(tag)

요소(element)와 태그(tag) 요소(element)의 구조 요소는 시작태그와 컨텐트, 그리고 종료태그로 정의된다. 요소와 태그를 혼용해서 쓰는 경우가 많아 문맥에 따라 이해하면 되고, 요소가 태그를 포함하는 좀 더 큰 개념이라고 생각하면 된다. 태그(tag) HTML의 태그들은 민감하지 않다. `를 쓰던 `를 쓰던 상관이 없다. 하지만 W3C에서는 소문자 태그를 권장하니 되도록이면 소문자로 쓰도록 한다. 태그를 작성할때 종료태그를 반드시 작성한다. `` 태그에 css를 추가해서 테두리와 크기, 그리고 간격을 추가할 수 있다. `` : 줄 바꿈 태그이다. `` : 특정 구역을 정의할 때 쓰인다. block요소 `<textare

2023년 7월 8일
·
0개의 댓글
·
post-thumbnail

[Healthier World!] 2. 4월 3째주 오운완 완료! - 홈페이지 링크 넣기, 각 메뉴 꾸미기, 현황 체크 구성

▲ 운동 중에 만난 서울 한복판의 튤립 정원 생각보다 부트캠프 진도 따라가면서 내가 만들고 싶은 홈페이지를 만들어 본다는 것이 어렵다. 왜냐면... 수업듣고 복습하고 쉬고 싶은데 쉬면서 또 공부를 하기가 싫은 인간의 마음이란.. ㅋㅋㅋㅋ ㅠㅠㅋ 그래서 조금 더디지만 ^^7 우리 팀원들과 나의 오운완 완료 기록을 누락시킬 순 없기에, 부끄럽지만 ㅋㅋㅋㅋ 미완성 홈페이지 중간을 계속해서 기록할 예정 🌷 홈페이지 링크 넣기 요 메뉴 자리 클릭 시 새로운 창이 열리도록 설정 list 함수를 사용해 메뉴를 만든다. 'a'태그를 활용해 각각 클릭했을 시 또다른 html사이트로 넘어갈 수 있도록 구성 🌷 각 메뉴 꾸미기 ![](https://velog.velcdn.com/image

2023년 4월 24일
·
0개의 댓글
·
post-thumbnail

Behind the Lucky-Market

Lucky-Market 2023.03.31 > 나만의 중고마켓 만들기 (chat-GPT / VS코드) 'chat-GPT'에게 어떻게 명령을 내리고, 'chat-GPT'가 써준 코드를 어디에다가 어떻게 가져다 써야 되는지 알아보기 먼저 vs코드에 새폴더와 index.html 파일을 만든다. 미리 chat-GPT 사이트에 가입한다. (https://chat.openai.com/chat) chat-GPT는 같은 의미의 명령이라도 말이 달라지면, 다른 코드를 제시할 수 있다. 이곳에 올린 코드들과 명령들은 예시로 올린

2023년 4월 1일
·
0개의 댓글
·
post-thumbnail

Lucky-Market

[Lucky-Market] (https://developerpyk.github.io/Lucky-Market/) // Description This was made by using chat-GPT to practice coding and experience chat-GPT. So, this site is unavailable and the products are not for sale. // https://velog.io/@developerpyk/Behind-the-Lucky-Market // If you want to know the codes I used, visit https://github.com/developerpyk/Lucky-Market

2023년 4월 1일
·
0개의 댓글
·

URL 링크 만들기

✏️ Thymeleaf 로 link 만들기 📍 controller 매개변수 1 과 2 를 넘겨줌 📍 web 기본 정적 링크 /hello Query Parameter 방식 /hello?paramA=data1&paramB=data2 링크 뒤에 괄호 ( ) 를 열어 안에 파라미터명과 객체를 입력해준다. Pathvaliable 방식 /hello/data1/data2 / 로 객체를 연결하고, 괄호 ( ) 안에서 객체를 정확하게 지정해줌 Parameter 방식과 비슷하지만 이 방법은 / 와 객체를 연결해 주고 있다. 혼합 방식 /hello/data1?param2=data2 두 동적 url 방식을 혼합한 방식 / 에 객체가 연결되지 않은상태로 괄호 ( ) 안에 있는 내용은 모두 Parameter 로 전달된다.

2023년 3월 24일
·
0개의 댓글
·
post-thumbnail

230316 스물 한 번째 수업_HTML

\*자동완성 벗어날 때 ctrl + spacebar 하면 선택됨 하이퍼링크: 하이퍼링크 기능은 웹 문서의 가장 핵심 클릭을 통해 연결된 웹으로 이동하여 사용을 편리하게 함 텍스트를 클릭하여 링크로 이동하는 방법, 이미지를 클릭하여 링크로 이동하는 방법, 현재 페이지 내에서 링크로 이동하는 방법 a태그는 href 태그가 반드시 쌍으로 같이 써줘야 됨 화면에는 링크표시 문구만 보여짐 img에서 src를 꼭 써줘야 이미지가 보여지는 것처럼 a에서는 href를 꼭 써줘야함 폼(form) 태그: 서

2023년 3월 16일
·
0개의 댓글
·
post-thumbnail

[Front-end] 수업 #069일 2-5

복습 1. ES5 변수 , ES6 변수 : (var , let , const) ES5 : 가변변수 (VAR) VAR : 재선언 가능 , 재사용 가능 , 값이 바뀌는 변수 >🕵️‍♂️ 예제 : > 결과 : a + b = 11 결과 a * b= 70 > 이렇게 재선언과 재사용이 가능하다. 하지만 var 변수의 문제점이 있는데, num변수에 '8'을 부여했고 오류가 떠야 하지만 자바스크립트는 무시하고 8이 나온다. 또한 고유 스코프 안에 선언되면 외부로 나가지 않아야 하는데 var변수는 <

2023년 1월 31일
·
0개의 댓글
·
post-thumbnail

[HTML] 9. 링크 걸기 및 웹사이트 완성 <a>, href

웹사이트에서 어느 탭을 클릭했을 때 새로운 페이지가 뜨면서 해당 링크로 이동하게 만드는 태그 💎 클릭 시, 이동될 링크 만들기 기존 1.html 하나뿐이었던 페이지를 복사 -> 새로만들기 -> 이름바꾸기 작업을 거쳐 다음과 같이 완성. 1.html : 1. cording 에 관련된 새 링크로 2.html : 2. markeiting 에 관련된 새 링크로 3.html : 3. Tiffany's story 에 관련된 새 링크로 index.html : 웹사이트를 처음 마주한 메인 홈페이지 화면 내 경우, 처음부터 작업할 때 tiffany's story 내용은 3번인데 1번인양 작성해온 오류가 있었음. 쭉 그렇게 만들다가 지금 발견해서,, 전체적으로 순서와 사진 유무 등

2023년 1월 31일
·
0개의 댓글
·
post-thumbnail

[230116] 멋쟁이사자처럼 AI SCHOOL 8기 '대통령 연설문 웹스크래핑_박조은강사님' 복습(2)

📝Today I learned 🚀 TIL 목차 🚀 >- requests와 BeautifulSoup을 활용한 게시글 내용 웹 스크래핑 게시글 내용 웹 스크래핑 ---아래의 내용은 이전 게시물과 연결됩니다.--- requests와 BeautifulSoup을 활용한 게시글 내용 웹 스크래핑(2) 1) 게시글 내용의 "링크" 웹 스크래핑 🔹 1페이지에서 가져온 목록 테이블을 데이터 프레임으로 변환 🔹 게시물 목록 페이지에서 내용 페이지로 들어가는 경로 찾기 ![](https://velog.velcdn.com/images/whtpdus97/post/6df37473-19f1-461e-8cbe-c3b2ee8ab611/image.pn

2023년 1월 19일
·
0개의 댓글
·

장고 delete 기능

장고 delete 기능 생성시 주의할 점 href은 get method로 요청이 되기때문에 delete는 href로 하면 안된다. -> delete로 할 경우 url창에 delete의 url를 입력하면 해당 페이지가 삭제된다. delete를 post방식으로 바꾸려면? 이를 위해서는 form태그를 사용해야 하는데 form태그에 method를 작성하지 않으면 get으로 디폴트 되기 때문에 꼭 post 적어주어야 한다.

2022년 10월 11일
·
0개의 댓글
·
post-thumbnail

생활코딩 - <Web> 14 : 우리가 가장 많이 사용하는 태그인 '링크' 태그 <a> 사용하기, 새 탭으로 링크 여는 방법, 마우스를 올렸을 때 설명 박스 뜨게 하는 법

14) HTML 태그의 제왕, "링크" 태그가 웹의 왕국이라면 이 태그는 이 왕국의 제왕이다. 현대의 HTML은 150여 개 태그로 이루어져 있지만 이들 모두 이 태그 아래에 있다. 검색 엔진들은 이 태그 덕분에 전 세계의 웹을 항해하면서 웹페이지를 발견할 수 있었고 이 태그 덕분에 최고의 검색 결과를 만들 수 있었다. 이 태그가 없다면 검색 엔진은 존재하지 않을 정도이다. 우리의 일상에서 검색 엔진이 없다면 어떤 일이 생길까? 이 태그는 도시의 길과 인체의 혈관과 같은 것이다. 이 태그가 없었다면 전 세계 모든 웹 페이지는 고립될 것이고 정보 혁명도 시작되지 않았을 것이다. 이 태그는 우리가 가장 많이 접하고, 사용하는 태그이다. HTML의 약자이며 **H

2022년 8월 25일
·
0개의 댓글
·
post-thumbnail

html 첫작품

어처구니가 없는 나의 html 첫 작품...;;;;ㄷㄷㄷ 충격 그 자체

2022년 8월 8일
·
0개의 댓글
·
post-thumbnail

2022. 06. 03 복습(국비지원)

Head head란 문서의 정보를 나타낸다. 웹 제목, 설명, 파일의 위치, style 등 눈에 보이지 않는 정보를 작성하는 곳으로 이해 그래서 css를 보통 연결할 때 HTML에서 head에서 link로 연결 link link란 외부문서를 가져올 때 사용한다. (대부분 css 파일이 대다수) rel link에 있는 rel은 relation. 즉, HTML과의 관계. href 주소

2022년 6월 2일
·
0개의 댓글
·

a 링크 noreferrer, noopener

1. noopener noopener 지정 시 링크된 페이지에서 window.opener을 사용해서 링크를 건 페이지를 참조(reference) 불가. 링크된 페이지와 링크를 건 페이지가 별개의 프로세스로 취급, 퍼포먼스저하되지 않음 2. noreferrer noreferrer 지정 시 다른 페이지로 이동할 때, 링크를 건 페이지의 주소 등의 정보를 브라우저가 Referer: HTTP 헤더로 리퍼러(referer 또는 referrer)로서 송신하지 않음 코드 작성

2022년 5월 6일
·
0개의 댓글
·
post-thumbnail

HTML

Microsoft의 Word나 구글 독스 등을 생각해봅시다. 이런 문서 편집기들은 여러 폰트와 사이즈, 스타일을 사용하죠. 또 여러분도 문서를 작성하며 제목, 본문, 마무리, 테이블, 이미지 등 다양한 콘텐츠를 사용해봤을거에요. 우리는 이런 문서를 볼 때 단숨에 본문과 해더, 이미지 등을 구별할 수 있습니다. 문맥을 파악할 수 있죠. 하지만 컴퓨터는 그런 직관을 가지고 있지 않습니다. 브라우저에서 문서를 정확하게 렌더링하기 위해선 각각의 콘텐츠가 무엇인지 명시적으로 표현해 주어야 하죠. 이 그림을 보고 단숨에 페이지의 콘텐츠들이 파악이 되죠? 우리의 컴퓨터는 그런 행위가 불가능합니다. HTML을 이용한 구조 정의 구체적으로 어떻게 브라우저에 명시적으로 표현해 줄 수 있을까요? 여기서 바로

2022년 4월 22일
·
1개의 댓글
·

HTML①-간단한 페이지로 확인하는 기초문법

html 코드는 크게 두 덩어리로 나눌 수 있다. 메타데이터(주:데이터에 대한 데이터)를 담고 있는 head부분과 본문내용이 담긴 body부분이다. 이 두 부분은 html 태그로 감싼다. 1. Head 1) Doctype Doctype은 본문이 html5를 따른다는 선언이다. 코드의 가장 위에 위치한다. 2) head head 안에는 데이터를 설명하는 데이터인 메타데이터가 담긴다. 한줄 한줄 뜯어보자 본문에 작성한 한글을 웹페이지에 깨지지 않고 표기되도록 UTF-8임을 명시한다. 윈도우 익스플로러에서만 적용되는 코드다. 과거 웹표준에 맞지 않게 작성된 페이지를 볼 때 호환성 보기를 꺼준다. 최신의 렌더링 엔진으로 강제함으로써 화면이 깨지지 않도록 한다. viewport : 메타 태그는 브라우저에서 웹 페이지를 표기할 때 크기를 설명한다. width=device-width : *반응형 디자인

2022년 1월 19일
·
0개의 댓글
·
post-thumbnail

링크를 달아보자!!

우선 나의 감정을 말해본다면 코딩의 짜릿함을 느꼈다. 나 혼자 그냥 이렇게 해보면 어떨까 싶었는데 구현이 되어서 놀랐다. 약간 이런 짜릿함에 코딩을 하는 것이 아닐까 싶다. 내가 원하는 것이 구현 될때 너무 보람차다 약간 이게 되네??! 이런느낌쓰!! 오늘 배운 내용 내용 -> 링크를 만들어준다 여기서 a는 anchor를 뜻하며, 그냥 링크를 하는 태그라고 생각하면 편하다 근데 그냥 만 태그하면 아무것도 이루어지지 않는다. 왜냐하면 링크인건 알지만 어디로 가야하는지에 대한 정보를 브라우저가 모르기 때문이다. 그래서 tag에 부가적인 정보를 주어야 하는데 그것을 attribute (속성)이라고 한다. 여기서 우리는 href 라는 속성을 사용해줄 것이다. 문득 궁금해진점은 이런 문법은 마치 정해져잇는것 처럼 느껴진다. 이런건 누가 정하지? 어떻게 등장했는지 기원이 궁금하다 추가로 target= _s

2021년 7월 18일
·
0개의 댓글
·

Hyperlink(HTML5Tag - Link)

Hyper Textdml Hyper는 텍스트 등의 정보가 다중으로 연결되어 있는 상태를 의미 사용자가 원하는 순서대로 원하는 정보를 취득할 수 있는 기능을 제공 하이퍼링크(Hyper link): 한 텍스트에서 다른 텍스트로 건너뛰어 읽을 수 있는 기능 HTML link = hyperlink = a(anchor) tag가 그 역할 1. Href attribute : 이동하고자 하는 파일의 위치(경로)를 값으로 함 (1)디렉토리(Directory) : 파일과 다른 디렉토리를 갖는 파일 시스템 내의 존재물(폴더) 1)루트 디렉토리 : 파일 시스템 계층 구조 상 최상위 디렉토리 unix:/ windows: C:\ 2)홈 디렉토리 : 시스템의 사용자에게 각각 할당된 개별 디렉토리 uniw: /User/{계정명} windows: c\Users\{계정명} 3)작업 디렉토리

2021년 5월 26일
·
0개의 댓글
·