웹 외부 테스트 임시 서버 구축하기(ngrok)개발을 하면 내 컴퓨터가 아닌 다른 컴퓨터에서도 잘 되는지 확인을 해봐야합니다. 내 컴퓨터 안에는 이미 캐시파일이 가득하기 때문에 잘 되는 것일수도 있으니까요. 그밖에도 많은 이유가 있을 텐데요. 예를 들어,클라이언트에게 실시간으로 개발 상황 시연모바일 기기에서 로컬 웹 서비스 테스트API를 외부 서버나 챗봇 플랫폼과 연동이럴 때 테스트를 하고 싶다면 ngrok이 제격입니다.ngrok이란?ngrok은 로컬 서버를 외부 인터넷에 노출해주는 보안 터널링 서비스입니다. 'localhost:포트번호'로 이루어진 로컬 서버는 인터넷에서 인식이 되지 않습니다. 도메인이 필요한데 이 도메인을 임시로 만들어주어서 외부에서 접근할 수 있도록 만들어 줍니다.장점설치와 사용이 ..
바이브코드 활용해 자주 쓰이는 UI 기능 용어로 10배 빠르게 구현하기UI(사용자 인터페이스)와 UX(사용자 경험)는 프로그램의 얼굴이자 핵심입니다.그런데, 직접 코드로 하나하나 구현하려면 생각보다 시간이 오래 걸립니다.툴팁(Tooltip) 하나 넣는 것도 프레임워크별 문법을 찾아보고, 예제 코드를 보고, 테스트를 거쳐야 하죠.하지만 ChatGPT, Cursor AI, GitHub Copilot 같은 AI 코딩 도구를 활용하면 훨씬 빨라집니다.오늘은 자주 쓰이는 UI 기능 용어를 중심으로, AI 코드를 이용해 편하게 일하는 방법을 소개합니다. 1. 자주 쓰이는 UI 기능 10가지아래 기능들은 웹·데스크톱·모바일 어디서나 자주 보이는 요소입니다.기능설명예시Tooltip마우스를 올리면 설명 표시버튼에 “저장..
📎 HTML 링크 다는 법 완벽 가이드: a 태그로 쉽게 연결하기웹사이트를 만들 때 다른 페이지나 외부 사이트로 연결되는 링크는 필수입니다. HTML에서는 a 태그를 사용해서 링크를 쉽게 만들 수 있는데요. 오늘은 HTML에서 링크를 다는 방법을 기초부터 응용까지 정리해보겠습니다. 🔗 1. 기본 링크 구조HTML에서 링크를 다는 기본 문법은 아래와 같습니다:이동할 텍스트설명:a: anchor(앵커) 태그, 즉 링크를 만드는 태그입니다.href: hypertext reference의 줄임말로, 이동할 URL을 적는 속성입니다.태그 사이에 있는 "이동할 텍스트"는 사용자에게 보여지는 링크 문구입니다.예시:구글로 이동결과:👉 구글로 이동🌐 2. 새 창에서 링크 열기링크를 클릭했을 때 새 창(또는 새 탭..
블로그를 쓸 때 매번 Visual Studio 켜서 쓰고 결과 확인해서 붙여넣는 걸 반복하니 귀찮기도 하고, 그림이 들어가면서 글 전체 모양도 안 좋아지는 것 같아 어떻게 할까 하다 와 태그를 알게 되었다. 아직 html이 익숙하지 않아서 애를 먹고 있었는데 너무나도 유용한 태그를 알게 되어 기쁘다. 태그 html에서는 아무리 내가 Enter를 쳐도 줄바꿈이 일어나지 않는다. html 안에서는 를 하거나 를 써야만 줄바꿈을 할 수 있다. 하지만 태그 안에서는 일일히 태그를 쓰지 않아도 문서에서 다루는 Enter, Tap, Space 기능을 쓸 수 있다. 예 줄바꿈을 br 없이 하려면 pre를 이용하세요~! html 내에서 줄바꿈을 해도 pre를 쓰지 않은 상태에서 실행을 하면 이와 같은 결과가 나온다. ..
HTML 을 작성하다 보면 색상이 많이 필요하다. 또, 단순한 색상이 아니면 색상을 RGB 로 표현하거나 코드로 표현해야 하는데 뭘 써야 하는지 모를 때가 있다. 색상 코드를 알아내고 싶다면 Color Cop 을 사용해 외부에 있는 색의 코드를 알아내면 된다. 스포이드를 클릭한후 드래그해서 원하는 색상에 놓으면 알아서 코드와 RGB좌표를 알려준다. 설치하려면 다음 링크로 들어가면 된다. 프리웨어~ 마음껏 쓸 수 있다. http://colorcop.net/download/ download The easiest way to install Color Cop is to download the self-installing version. If you use the installer it's easy to remo..
오늘은 float 과 clear 를 소개하려고 한다. 웹페이지를 만들 때 이미지를 넣고 글을 쓰는 경우가 종종있는데 글이 이미지를 둘러쌀지 말지 결정하는 속성이다. float float 은 둘러싸기를 지정하는 속성이다. 둘러싸는 방식에는 왼쪽으로 이미지를 놓고 뒤에 계속되는 요소는 오른쪽으로 둘러싸게끔 하는 left 오른쪽에 이미지를 놓고 뒤에 계속되는 요소는 왼쪽에 둘러싸게끔 하는 right 둘러싸기를 하지 않는 none 이렇게 세가지 방식이 있다. float을 쓰려면 에서 쓰면 되고 이건 이미지에 대한 속성 부여이므로 img{float:right;} 으로 쓰면 된다. class는 레이아웃이나 전체 틀을 보정하거나 글자의 속성부여하는 것이고 img 는 이미지에 대한 속성을 부여한다는 것을 알아두면 헷갈..
CSS 에서 중요한 개념인 박스에 대해서 알아보자. 사실, 모든 요소는 박스라는 틀 안에 있어서 박스를 조정한다는 것은 요소를 이루고 있는 틀을 변경한다고 볼 수 있다. 박스의 폭과 높이 박스의 폭과 높이를 지정하려면 width 와 height 를 사용하면 된다. 박스가 그려지는지 보기 위해서 테투리에 선을 추가해서 보이겠다. .mybox 에 폭 200px, 높이는 100px 로 지정하였다. 다음과 같이 나온다. '리스트' 바깥에 테두리가 설정되었다. 테두리만큼의 박스가 형성됨을 알 수 있다. 폭(width)과 높이(height)는 아무 지정을 안 하면 auto(자동) 로 지정된다. 여백, 패딩, 테두리 박스의 여백과 패딩 테두리를 설정할 수 있는데 설정값이 많을 뿐 크게 어려운 건 없다. margin ..
list-style-type list-style-type은 리스트의 마크를 지정한다. none 마크 없음 disc 검정 동그라미(●) circle 흰 동그라미(○) square 검정 사각(■) decimal 숫자 decimal-leading-zero 맨앞에 0를 붙인 숫자(01,02,...) lower-roman 소문자 로마 숫자 upper-roma 대문자 로마 숫자 lower-latin, lower-alpha 소문자 알파벳 upper-latin, upper-alpha 대문자 알파벳 armenian 아르메니아 숫자 geogian 그루지아 숫자 많은 마크가 있다. 그 중에 쓰고 싶은 것을 쓰면 된다. class로 먼저 만들어서 쓰거나 ul 안에 style태그를 넣어서 쓸수 있다. 하나는 class 로 해보..
웹 페이지를 보면 배경에 그림이 있고 심지어 같이 움직이는 경우가 있는데, css 로 배경 이미지를 만들 수 있다. 이것도 css 기 때문에 class 지정으로 하면 된다. background 관련 문법을 살펴보자 background-color 배경색 지정이다. 배경색은 색을 지정하는 것이므로 글자색 지정하는것과 동일한 방법으로 하면 된다. 색을 어떻게 지정하는지 모르면 다음의 포스팅을 참고하면 좋을 것 같다. https://seong6496.tistory.com/10 [CSS] 글자 꾸미기(color, font) HTML 에서 가장 많이 손을 봐야 하는게 글자의 스타일 변경하는게 아닐까 싶다. 앞서 보았던 선택자 태그 중 classs 태그를 이용해 글자의 색을 지정하고 모양 변경(스타일,굵기)하는 방법..
텍스트를 입력하면 그 텍스트를 어느 쪽으로 정렬할지 글자간격은 좁게할지 넓게 할지 설정을 해야 할 때가 있다. 그런 경우에 사용하는 기능이다. --line-height 행의 높이를 지정하는 line-height 이다. normal(표준) 이나 %나 px 로 지정하게 되는데, %가 아마 가장 편할 것이다. 클래스 설정은 다음과 같다. .mytext{line-height : normal;} 몇 가지 예를 보면 이해가 빠를것이다. 똑같은 문장을 다른 line-height 로 나타냈다 개인적으로는 %가 편하다. normal 은 안 써도 그만 써도 그만이어서 잘 안 쓰게 된다. 따로 설정을 안 하면 normal 이 초기값으로 되므로 쓸일이 사실상 없다. --letter-spacing 이번엔 글자 간격을 지정하는 ..
HTML 에서 가장 많이 손을 봐야 하는게 글자의 스타일 변경하는게 아닐까 싶다. 앞서 보았던 선택자 태그 중 classs 태그를 이용해 글자의 색을 지정하고 모양 변경(스타일,굵기)하는 방법을 보려고 한다. -색 변경하기 먼저 색을 변경하기에 앞서 색을 어떤 방식으로 지정하는지 살펴보자. 색을 지정할 때 기본적으로 빛의 삼원색인 빨강, 녹색, 파랑의 세가지(RGB 값)으로 지정한다. 아래와 같은 서식으로 나타낸다. 색명 red rgb() 와 %값 rgb(100%,0,0) rgb()와 십진수 값 rgb(255,0,0) 0~255 수치로 표현 #와 16진수 값 #ff0000 # 뒤에 6자리 중 1,2번째는 빨강, 3,4 번째는 녹색, 5,6 번째는 파랑. 00~ff의 16진수(256단계)로 표현한다 즉, ..
id, class 태그는 비교가 명확하지 않아 먼저 정리를 한다. 굳이 구분을 짓는다면 id 는 스타일 지정할때 한페이지에 한 가지만 지정 가능한 것이고, class는 스타일 지정할때 여러개 지정가능하다고 보면 된다. 혹시 css를 어떻게 쓰는지 모른다면 아래포스팅을 참조하면 된다. https://seong6496.tistory.com/8 CSS란? CSS CSS(CAscading Style Sheets)는 웹 페이지에서 디자인이나 레이아웃과 같은 문서의 모양(스타일)에 관한 부분을 지정하기 위한 장치이다. HTML은 틀을 담당하고, CSS 는 장식을 담당한다고 생각하면 된다. 즉,.. seong6496.tistory.com 일단 id 와 class 의 차이를 찾아보자. - id id 같은 경우, 다음과..
CSS CSS(CAscading Style Sheets)는 웹 페이지에서 디자인이나 레이아웃과 같은 문서의 모양(스타일)에 관한 부분을 지정하기 위한 장치이다. HTML은 틀을 담당하고, CSS 는 장식을 담당한다고 생각하면 된다. 즉, CSS를 활용해서 글꼴,배경색, 너비높이, 테두리 등 여러가지를 지정할수있다. 그래서 그런지, CSS 를 '스타일시트'라고도 부른다. 예전에는 HTML 에서 꾸미는 역할도 담당해서 HTML 문서를 수정할때 일일히 수정해야 하는 번거로움이 있었지만, CSS를 활용해서 틀과 장식부분을 분리해 그런 부담을 줄였다. css 파일에 스타일시트를 다 모아두어서 틀과 장식을 분리해서 활용하면 css 파일을 수정하면 HTML 전체가 수정되는 엄청난 장점이 있다. CSS 작성하는 방법 ..
meta 태그 meta 태그는 메타정보를 지정하기 위한 태그이다. 메타 정보는 화면에는 표시되지 않는 정보라서 웹페이지 상에서 뭘 넣었는지 직접 볼 수는 없지만 HTML 문서의 내용이나 문자 코드, 검색 엔진용 키워드 등을 지정할 수 있다. 메타 정보를 넣을 때는 태그 안에다 넣는다. HTML은 부터 내용을 넣는데, '이 페이지의 정보는 이런 방식으로 넣을거야~' 선언하고 구체적 내용을 쓰는 방식으로 써 내려가도록 해놓은 것 같다. 메타 정보의 종류 -작성자 정보 작성자의 이름을 지정할 때 쓴다. name 에는 author 를 지정하고 content 에는 작성자의 이름을 지정한다 - 검색 엔진에 대한 키워드 지정 name 에 keywrods 를 지정 그리고 content 에는 키워드의 값을 지정한다. -..
폼요소에서 Input 태그 말고 다른 태그들을 살펴보자. - select 태그 select 를 사용하면 여러 개의 선택지에서 선택하는 메뉴를 만들 수 있다. option 태그로 항목을 만들고 선택지를 지정한다. Example) 어떤책을 샀습니까? HTML Python CSS Java 다음과 같은 결과를 얻을 수 있다. 어떤 책을 샀습니까? HTML Python Java CSS - button 태그 button 을 추가할때는 button 태그를 이용할 수 있다. input type='button' 으로 해도 된다. 다만, button type 속성값이 존재하는데 그중에서 submit, reset, button 세개가 주로쓰는 button type 속성값이다. button ,input 으로 작성을 하게 되면..