복습/프론트엔드

250205 오전복습

Blue_bull 2025. 2. 5. 14:08

1. Hyperlink와 Hypertext

  • Hyperlink: 웹 문서에서 다른 페이지로 이동할 수 있도록 하는 링크.

    • <a> (Anchor) 태그를 많이 사용함.
    • 예시: <a href="https://www.example.com">Click here</a>
  • Hypertext: 문서 간 연결을 통해 사용자가 원하는 정보를 찾을 수 있도록 만든 텍스트 시스템.


2. <input><select>name 속성

  • HTML 폼에서 데이터를 서버로 보낼 때 파라미터(parameter) 역할을 함.
  • 예시:
    <form action="login.jsp" method="GET">
        <input type="text" name="id">
        <input type="password" name="password">
        <select name="role">
            <option value="admin">Admin</option>
            <option value="user">User</option>
        </select>
        <input type="submit">
    </form>
  • 사용자가 입력한 값은 name=값 형태로 서버에 전달됨.

3. URL에서 ?, &, =의 의미

http://localhost:8989/MyWeb/exercise/to.jsp?id=hong&password=abc1234&mpoint=100
  • ? : 쿼리 스트링(Query String) 시작 (GET 방식 데이터 전달)
  • & : 여러 개의 파라미터를 구분
  • = : key=value 형식으로 값을 전달

위 URL을 해석하면:

  • id=hong → id 값이 "hong"
  • password=abc1234 → password 값이 "abc1234"
  • mpoint=100 → mpoint 값이 100

4. href 속성을 이용한 동적 링크 생성

<a href="<%=baseUrl%>board/boDetailView.jsp?no=<%=bean.getNo()%>">
    <%=bean.getSubject()%>
</a>
  • <%=baseUrl%> : JSP에서 미리 정의한 기본 URL 값 (예: "http://localhost:8989/MyWeb/")
  • board/boDetailView.jsp?no=<%=bean.getNo()%>
    • no 파라미터에 bean.getNo() 값을 추가해 특정 게시글을 조회하는 링크를 생성.
  • <%=bean.getSubject()%>
    • 링크 텍스트로 게시글 제목을 표시.

👉 결과적으로, 게시글 목록에서 특정 게시글로 이동하는 하이퍼링크를 동적으로 생성하는 코드.

'복습 > 프론트엔드' 카테고리의 다른 글

React - useState 사용법  (0) 2025.02.10
JSP(`.jsp`) vs JSX(`.jsx`) 비교 정리  (0) 2025.02.10
250204 오전 복습  (1) 2025.02.04
250203 복습5  (0) 2025.02.03
250203 복습4  (0) 2025.02.03