html

미적 감각이 0인 상태에서 로그인 페이지를 만들어볼까 합니다. 저번에 만든 title과 nav bar는 그대로 이용할게요. Input Type email & password 사용자로부터 email 주소와 비밀번호를 입력받도록 해볼게요. password 타입은 약간 독특합니다. 보통 우리가 abcd를 입력하면 그대로 abcd가 보이잖아요? 위는 일반 text 입력창이고 아래가 비밀번호 입력 칸이에요. 이렇게 다른 사람들이 볼 수 없도록 동그라미로 표시가 된답니다. 또한 email 타입은 메일 주소를 입력하지 않으면 팝업 메시지가 자동으로 뜬답니다. Input placeholder 속성 이용하기 그냥 텍스트 상자만 덩그러니 놓여있으면 사람들은 이게 무엇을 의미하는지 모를 경우가 있어요. 안내 문구를 상자 안..

GET 요청 방식에 대해서는 지난 글에서 다뤘습니다. 참고해주세요. 2020/07/07 - [웹 개발] - [servlet] GET 요청 처리하기 [servlet] GET 요청 처리하기 드디어 사용자가 입력한 데이터를 받아와서 처리하는 방법에 대해 다룰 시간이 되었습니다. 클라이언트가 서버에 요청하는 방식 중에 하나인 GET 요청을 이용해서 다루려고 합니다. GET 요청이란 coding-nyan.tistory.com POST 요청을 왜 사용하는가? 오늘은 POST 방식에 대해서 알아보려고 합니다. GET 방식에서는 우리가 요청 내용을 URL에 담아서 전송했습니다. 만약에 ID와 비밀번호를 해당 방식으로 보낸다면 어떤 위험이 존재할까요? 당신은 학교 공용 컴퓨터에서 Gmail을 확인할 일이 생겼습니다. 급..

목표 오늘의 운세를 보기 위해 카드를 선택하는 페이지를 만들자. Radio 사용하기 Radio는 여러 항목중에서 단 하나의 값만 선택하도록 합니다. 중요한 점이 있다면 name = "blah" 하면서 모두 같은 값을 넣어주셔야 합니다. name을 따로 지정하지 않으면 각각을 다른 그룹으로 인식해서 중복 선택이 가능합니다. 또한 servlet에서 값을 받아올때도 복잡해지니 name = ""하면서 같은 이름을 지정해주세요. 메이저 타로 카드는 총 22장입니다. 즉 22개의 radio를 만듭니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 The Fool The Magician The High Priestess The Emp..

안녕하세요!! 제가 만들고 싶은 웹을 만들기에는 아직 배워야 할게 많습니다. 그러나 그걸 다 배우고 프로젝트 진행하려면 중간에 까먹을 수 있고 루즈해져서 재미가 없잖아요. 그래서 그냥 잠깐 쉬는 타임으로 공부용 실습이 아닌 개인 실습을 진행할까 합니다. 여러 분들도 중간중간 복습 차원에서 뭔가를 만들어 보시는 게 어떤지요?? Atom 프로젝트 이클립스로 옮기기 초반에는 제가 Git때문에 Atom에서 진행을 했습니다. 그런데 이미 사용중이던 eclipse에서도 지원하는 걸 알게 됐습니다. 톰캣 설정도 다 되어 있는 상태라서 작성중이던 타로 웹을 옮기기로 결정했어요. 기왕 옮기는 거 html로 작성하던 파일도 jsp로 바꾸려고 합니다. 미래를 위하여 미리미리!! New Dynamic Web Project 를..

드디어 사용자가 입력한 데이터를 받아와서 처리하는 방법에 대해 다룰 시간이 되었습니다. 클라이언트가 서버에 요청하는 방식 중에 하나인 GET 요청을 이용해서 다루려고 합니다. GET 요청이란? GET 방식은 URL(URI)을 이용합니다. 일반적으로 많이 사용되는 방식입니다. http://localhost:8080/hello?cnt=3 이런 방식으로 요청합니다. 나 hello라는 문서에 접근할 거야 대신 cnt에 3이라는 값을 넣어줘~ 하는 거죠. 서버에서는 이 값을 받아와서 무엇인가를 처리하면 됩니다. GET 방식의 특징 GET 요청을 캐시 할 수 있습니다 GET 요청은 브라우저 기록에 남아 있습니다 GET 요청을 북마크 할 수 있습니다 민감한 데이터를 다룰 때 GET 요청을 사용해서는 안됩니다 GET ..

HTML(HyperText Markup Language) 마크업 언어는 대부분 태그를 이용해 구조를 표현합니다. HTML 또한 태그를 활용하는 언어입니다. 수많은 태그 중에서 사람들이 자주 사용하는 태그들만 정리해보겠습니다. , , html의 구조를 이루는 태그들입니다. 로 열고 로 닫는 방식으로 사용합니다. 주로 태그 영역 안에 사용합니다. 해당 문서의 이름을 표시합니다. TEST 을 할 경우 다음처럼 브라우저 탭에 이름이 표시됩니다. meta 태그는 의 형식으로 스스로 닫습니다. 를 자주 사용하는데 해당 문서를 어떤 방식으로 인코딩할지 알려줍니다. 그 외에는 meta라는 이름처럼 metadata를 표시하는데 이용합니다. div는 특별한 기능은 없지만 제일 중요하다고 생각합니다. 제가 원하는 부분만큼 ..

지난 시간에는 프론트엔드/백엔드의 차이점을 간단하게 살펴보았습니다. 이 두개가 모두 웹 개발 분야인데 그렇다면 웹이란 무엇일까요?? 웹이란? 웹에 대해서 자세히 알아보기 전에 간단한 OX퀴즈를 내보겠습니다. 인터넷은 웹이다? O/X 인터넷은 네트워크와 네트워크 사이를 연결해서 통신을 합니다. 이 인터넷에서 파일이나 메일, 문서 등을 주고받습니다. 이때 중요한게! 요청하는 쪽이 클라이언트고 제공하는 쪽이 서버입니다. 만약에 서버와 클라이언트가 서로 호환이 안된다면?? 문제가 생기겠죠 이를 위해서 약속을 정의합니다. 파일 = FTP , 문서 = WWW(http) 이런 방식으로요. 즉 웹(WWW)은 인터넷에서 문서를 주고받기 위한 규약이므로 정답은 X입니다. 역사적으로 발전해오면서 웹은 현재와 같은 형태를 갖..