HTML문서에서 데이터를 받아오는 방법은 크게 두 가지로 나뉜다. 서버 사이드 렌더링과 클라이언트 사이드에서의 동적 데이터 로딩이다. 서버 사이드 렌더링 (SSR) 서버 사이드 렌더링에서는 서버에서 HTML 문서를 생성할 때 데이터를 함께 처리하여 최종적인 HTML 문서를 클라이언트 (브라우저)에 보냅니다. Thymeleaf, Jinja, ERB, ASP.NET Razor 등 다양한 서버 사이드 템플릿 엔진이 이 역할을 한다. 예시: Thymeleaf를 사용한 데이터 렌더링 Hello, User Name! 서버에서 userName 션수의 값을 처리하여 최종 HTML 문서에 포함시킨다. 클라이언트는 이미 데이터가 삽입된 완성된 HTML을 받게 된다. 클라이언트 사이드에서의 동적 데이터 로딩 클라이언트 사이..

input 입력창을 클릭하지 않고 다른 곳을 클릭해도 클릭한 것처럼 해당 인풋창으로 입력 스크롤이 지정된다거나, 버튼이나 지정 텍스트를 클릭하면 페이지 내부로 이동하는 기능 보셨을 겁니다. 요약 클릭하면 이동시킬 텍스트를 만들어 HTML태그 안에 href="#id"값을 준다. ex) 마지막으로 이동하기 이동되고 싶은 화면 쪽 태그에 id값을 move라고 지정해 준다. ex) 여기로 이동했습니다 마지막으로 이동하기 label 태그는 for속성으로 id값을 지정해 주면 같은 id값으로 이동해 스크롤을 지정할 수 있습니다. id 아이디 : id 여기 클릭해 보세요 아이디 : ↑↑↑ 여기로 스크롤 이동 될 겁니다. (회원가입 HTML 예제 만들었을 때 사용했었네요) 페이지 내 링크이동 태그 #id 값으로 해당 ..

개인적으로 IT 시대에서 검색 또한 자신의 지식이라고 생각합니다. 그러니 이래저래 공부하는 태그들은 외울 필요 없이 빠르게 공부하고 넘어가는 걸 추천드립니다. 위에 코드는 정보는 흔히 사용하는 제출 버튼을 생성하는 코드입니다. 버튼 안에 '제출'이라는 글씨를 바꾸고싶으면 value 속성을 축가 하면 됩니다. 모두 한 정보 기입 코드로 적어보면 ↓↓결과 창 ↓↓ text란에 정보를 기입하고 '전송' 버튼을 누르면 form 태그에 있는 URL로 정보가 날아가고 '버튼'이라는 버튼을 누르면 자바스크립트 코드로 hello,world가 출력되며 초기화 버튼을 클릭하면 text필드에 적은 정보가 지워지고 정보를 기입하기 전, 초기 상태로 돌아갑니다. 초기화 버튼만 작동하네요... - butten 태그는 이름이 벗기..

사용자에게 데이터를 받을 때 여러 데이터 중 한 가지를 선택받거나 여러 개를 선택받을 수 있는 input type이 존재합니다. 웹 페이지 안에서 여러가지 항목들을 선택하거나 수정 또는 삭제 등의 작업을 수행해야 하는 경우에 자주 사용됩니다. type="radio" 같은 value 중 한가지만 선택가능, 단일 선택 type="checkbox" 같은 value 중 다중 선택 가능, 다중 선택 radio button(라디오 버튼) name, value 속성을 사용해서 서버로 보낼 값을 정해주면 한 개만 선택할 수 있는 라디오 버튼이 만들어집니다. 예시로 성향검사 할때 사용했었습니다. 검정 : 빨강 : 파랑 : 속성 중 checked를 적용시켜 두면 위에 사진처럼 사용자에게도 미리 선택돼 있는 모습입니다. c..

drop down이라고 불리는 이 기능은 여러 가지 선택지 중 하나를 선택하게 하는 dropdown List 제한된 공강에서 여러개를 선택하게 하는 기능으로 select와 option으로 이루어져 있습니다. 일 이 삼 위에 코드를 입력하면 밑에처럼 보입니다. 선택하면 밑으로 펼쳐지죠. 사용자에게는 일,이,삼 으로 보이지만 실제로 넘어가는 데이터와 다루는 데이터는 1,2,3 인것이죠 (value가 넘어갑니다) multiple 속성 숫자 일 이 삼 색깔 검정 주황 흰 multiple 속성이 붙으면 사용자가 ctrl키를 누르고 선택 항목에서 다중 선택을 할 수 있습니다. 생활코딩님에게 배운 바로는 백엔드 개발자가 여기 url로 정보 보낼 수 있게 해 주세요~라고 하면 으로 태그 안에 있는 사용자가 기입한 정보..

HTML 팁 줄 바꿈에는 태그가 있듯이 공백에는 를 입력하면 공백이 생겨납니다. HTML을 개발도구를 이용해서 정리할 때 A태그 안에 B태그가 포함되어 있으면 B태그는 TAB키를 눌러보기 좋게 정리해 주는 것이 좋습니다. 빠르게 보기 See the Pen Untitled by loginshin (@loginshin) on CodePen. I D : P W: address : 태그에 태그를 사용하면 type 속성에 따라 여러 텍스트 필드를 만들 수 있습니다. 즉, 사용자로 부터 좀 더 효율 적으로 정보를 입력받을 수 있습니다. 이런 식으로 양식을 만들 수 있는데 방법은 간단합니다. 이런 식으로 해석해 봤네요 추가로 정보가 입력하면 *모양으로 가려지는 input 태그를 만들어보겠습니다. I D : P W: ..

시간절약 이름성별나이 신정환남자24 최진영여자26 여자 시작 과거에 HTML은 table 태그로 레이아웃을 만들려고 사용하기도 했다고 하네요. 지금은 css를 이용한 태그를 사용하지만요 table 태그로 표를 만드는 건 어렵지 않지만 html을 사용하면서 그나마 번거롭다는 생각이 드네요. 위에 그림을 만들어보자면 이름성별나이 신정환남자24 최진영여자26 이런 느낌이겠네요. 하지만 마크다운이 없다면 당연히 text들이 전부 붙어서 나옵니다. 표 한칸 한 칸 안에 들어가는걸 table data라고 해서 태그로 감싸주겠습니다. 물론 닫아주셔야 합니다. 이름성별나이 신정환남자24 최진영여자26 table date 태그로 감싸줘도 바뀌지는 않습니다. 아직 table raw태그 즉, 로 각 태그들은 감싸주지 않았으..

코딩 언어 중 html은 '웹페이지'를 만들기 위한 언어로 Hyper Text Markup Language의 줄인 말입니다. html을 공부하시면서 티스토리를 꾸미거나 사이트도 만들 수 있습니다. 물론 웹사이트가 인간이라고 한다면 뼈대 역할만 할뿐이지만요. css는 옷, javascript는 근육처럼 생각하면 되겠네요. Tag는 웹 문서를 만들기 위한 가장 기본적인 요소입니다. 이런 식으로 생겼죠. 은 태그를 열었다하고, 은 열었던 태그를 닫아주는 겁니다. HTML 대표적인 태그 제목과 본문 관련 태그 : 헤딩 제목을 표시합니다. : 본문의 내용을 표시합니다. 링크와 이미지 관련 태그 : 다른 웹 페이지로 이동하거나, 문서 내의 위치로 이동하는 링크를 생성합니다. : 이미지를 표시합니다. 목록 관련 태그..