오전: WEB

1교시

HTML 태그의 역할과 주의점
CDN(Content Delivery Network; 컨텐츠 전송 네트워크) 방식과 경로 설정
테이블 태그와 셀 병합 방법
태그 기능과 폼의 구성 요소

지난 시간 복습

• 하이퍼링크 태그: a(anchor tag)
  • 특정 컨텐츠를 클릭했을 때 페이지 혹은 사이트로 이동
  • 특정 내용을 연결시키겠다는 개념
  • 반드시 href 속성이 필요
  • <a href="url"> : 이동하고 싶은 주소나 파일명을 href에 넣기
    • url 적을 때 반드시 http/https 적기

• 목록 만들기
  • 리스트 형태를 만드는 태그
    • 네비게이션 바, 화면 상단에 있는 메뉴 바 만들 때 사용
    • 이때 ul 태그의 기호가 예쁘지 않아 보통 CSS로 숨겨서 사용하는 편
  • 종류 2가지: ol(ordered list), ul(unordered list)
    • 공통적으로 li라는 태그와 함께 사용 → li 태그와 함께 사용돼야 특정 리스트 목록을 만들 수 있음
  • 순서가 있는 리스트
    • ol
    • li
  • 순서가 없는 리스트
    • ul
    • li
  • 컴퓨터는 오직 태그로만 소통 → 무언가를 구분지어야 할 때는 반드시 태그가 필요

• 테이블
  • 종류
    • table
    • tr(table row)
    • th(table head), td(table data)
  • 표를 만들 때 가장 첫 번째로 해야 하는 건 몇 줄을 만들 건지 정하는 것
    • 태그 작성 순서: table → tr → th/tr
    • th는 첫 번째 줄에 컬럼을 쪼갤 때 사용
    • td는 첫 번째 줄을 제외하고 나머지 줄들(글자만 채우는 줄들)
  • 속성
    • 디자인 관련 속성 사용은 가능하지만 권장하지 않음 → CSS가 처리하기 때문

• 이미지
  • 파일을 불러오는 방법 2가지
    1. 파일 로드 방식
       • 안정성 보장
       • 용량 차지
    2. CDN(Content Delivery Network; 컨텐츠 전송 네트워크)
       • 코드를 "공유"할 때 사용 ← 용량 차지 X
       • 원본 사라지거나 네트워크 끊기면 사용 불가

• 상대 경로와 절대 경로
  • 상대 경로
    • 출발지에서 내 기준으로: '../'→나가기, '/'→들어가기
  • 절대 경로: 어떤 파일에서 사용하던 똑같은 경로!
    1. 루트 폴더 기준으로 작성
       • 워크스페이스 전체를 가진 폴더
       • 루트 표시: 맨 앞 슬래시(/)
    2. URL 절대 경로

테이블

• 병합
  
  • colspan=""
    • 한 칸을 여러 칸처럼 쓰고 싶을 때
      • colspan="2" 하면 한 칸을 두 칸처럼 사용 가능
        
    • 이 속성은 css로는 안 됨 (태그에만 존재하는 속성)
  • rowspan=""
    • 한 줄을 여러 줄처럼 쓰고 싶을 때
      • rowspan="2" 하면 한 줄을 두 줄처럼 사용 가능
        

• 셀을 병합하고 싶을 때는 2가지: colspan(가로 병합) / rowspan(세로 병합)
  • 합치고 싶은 칸의 수만큼 숫자를 적어주기
• 테이블 태그 사용처: 게시판 만들 때 사용
  • 웹 상에 가장 많이 존재하는 예제 중 하나가 바로 테이블 태그를 이용한 게시판 예제
  • 게시판을 테이블 없이 만드는 게 불가능하지는 않지만 대부분 개발자는 테이블을 이용해 게시판을 만듦
  • 게시판을 포트폴리오로 많이 만드는 이유: CRUD를 모두 활용할 수 있기 때문
    • CRUD: 소프트웨어 개발에서 데이터를 처리하는 기본적인 네 가지 작업인 생성(Create), 읽기(Read), 업데이트(Update), 삭제(Delete)를 의미

서버와 데이터를 저장하는 데이터베이스를 알아야 함:
사용자가 게시글을 작성해 게시글 올리기를 입력하는 순간 작성한 글과 파일이 서버에 전달되고 서버는 데이터베이스에 글을 저장
사용자가 게시글 조회 버튼을 누르면 컴퓨터가 데이터베이스라는 공간에서 게시글을 가지고 와서 뿌려줌
글 삭제, 업데이트, 댓글, 필터링, 보안 처리, 암호화 등 게시판 하나로 처리할 수 있는 웹사이트 기능 예제가 많음

프론트엔드 개발자 vs. 웹 퍼블리셔:
웹 퍼블리셔는 과거 웹 디자이너라고 불리던 직군에서 간단한 코드까지 커버하면서 새롭게 등장
디자인 코드를 작성하는 사람

입력 양식폼: <form> ★★★

• 웹 페이지에 입력폼을 만들 때 사용하는 태그
  • 폼 태그를 활용한 사용자 입력 데이터 관리 방법
    • 사용자가 입력하는 칸, 제출하는 버튼 등을 묶어서 관리하는 태그
  • 입력할 데이터를 한 번에 묶어주는 역할
• 서버와 통신할 수 있는 태그
  • 서버 개념 이해 필요
  • 사용자가 입력한 데이터를 가지고 데이터를 보내서 저장한다거나 검증하는 과정이 필요
    • 회원 가입, 로그인, 검색 등
• <form>
  • 속성 (필수)
    • action: 입력 데이터의 전달 위치 지정 → 받을 서버의 주소 <필수 속성>
    • method: 입력 데이터의 전달 방식 지정(GET/POST)
    • name: form 태그의 이름 지정
• form이라는 큰 틀과 사용자가 입력할 수 있는 칸과 전송할 수 있는 버튼 3가지로 구성

폼(form) 양식
웹페이지에서 내 정보를 서버로 보내거나 혹은 서버로 보내지 않더라도 자체 웹페이지에서 사용와 상호작용을 하기 위해 입력값이나 버튼과 같은 이벤트 요소가 필요할 때 사용되는 HTML의 태그

2교시: form (cont'd)

• form 태그는 데이터를 묶어주는 껍데기 역할
  • 사용자가 입력한 값을 버튼을 누르는 순간 form 태그에 묶어서 보내준다는 개념
  • "보내준다" → 어디로?
    • form 태그의 action 속성에 작성된 곳으로!
  • "사용자가 입력한 값" → 어떻게 받지?
    • input 태그!

form 태그의 속성

• action
  • form을 전송할 서버 쪽의 script 파일을 지정
    • 전송되는 서버 url 또는 html 링크
• method: 전송 방식 선택
  • 통신 방식을 따로 지정하지 않는다면 기본 값은 get으로 설정됨
  • get
    
    • 데이터를 주고받을 때 url 뒤에다가 값을 담아서 보내주는 방식
      • url에 내용이 뜨면(데이터가 보이면) get 방식임
      • 데이터가 url에 동반되어 보내진다!
        
      • 단점: 보안에 취약 ← 데이터가 url에 다 보이기 때문
      • 개인 정보나 중요한 정보가 담길 때는 get 형식을 쓰면 안 됨
  • post
    • 개인 정보나 중요한 정보 보낼 때
    • get 방식보다 뛰어난 보안 방식 → 중요한 데이터를 숨겨야 할 때 사용
    • 서버 입장에서 보면 데이터가 숨겨져서 오기 때문에 한 번 더 풀어주는 과정이 필요
    • 버퍼 형태의 데이터: 데이터를 쪼개서 하나하나 암호화시켜 보낸다 → 데이터를 꺼낼 때 암호화되어 있는 쪼갠 데이허를 다시 합쳐주는 작업이 필요: post 방식의 데이터를 꺼내는 게 더 어려움
• name
  • form의 이름
  • 서버로 제출된 폼 데이터(form data)를 참조하기 위해 사용

input tag

• 닫는 태그가 없음
  • 컨텐츠가 없기 때문
    • 컨텐츠라는 건 개발자가 써놓은 글자를 사용자에게 보여주기 위한 공간
    • input tag는 글자를 사용자가 적는 것이기 때문에 컨텐츠 공간이 필요하지 않음
      
• 다양한 속성이 존재
  • type
  • name
  • value
  • placeholder
  • autofocus
  • maxlength
  • readonly
• 반드시 type 속성, name 속성이 동반되어야 함: type을 통해 모습 결정됨
  • 사용자가 입력하는 게 어떤 의미(타입)인지 알려주는 것
  • 사용자가 입력한 내용을 가져오기 위해 딕셔너리 키 역할을 해 주는 이름(name)이 있어야 함
    • name 속성 안 넣으면 보낼 때 오류 발생함

• <input type = "text">
  • text는 글자 쓰는 공간

• input 태그는 사용자가 입력한 값이 눈에 보이지 않음 → 어딘가에 숨겨져서 저장이 되고 있다는 뜻
  • 우리 눈에는 보이지 않지만 사용자가 입력한 정보가 value라는 공간에 자동으로 저장됨
    
  • 사용자가 입력을 끝내는 순간 숨겨져 있던 value 속성에 해당 입력 내용이 저장됨 → input 태그는 value라는 눈에 보이지 않는 속성 값에 값을 자기가 알아서 저장시키고 있음
    • 나중에 input 태그에 있는 입력 내용을 꺼내고 싶을 때 value를 꺼내면 됨 → 우리가 나중에 값을 꺼내보고 싶을 때 value 속성에 접근해야 함

• <input type="password">
  • 비밀번호를 입력 받을 때 사용
  • 비밀번호 입력 필드
    • 기본적으로 비밀번호는 숨겨줘야 함
    • 텍스트는 입력한 값이 그냥 보여짐
  • password는 입력한 내용이 보이지 않음 → 비밀번호 숨김

• <input type = "text" placeholder = "ex) 000101">
  • 입력해야 하는 형식을 미리 보기로 제공 → 가이드라인: 힌트 표시
    • 필드 클릭 시 내용사라짐

• <input type = "text" placeholder = "ex) 000101" maxlength = "6">
  • 최대로 입력할 수 있는 문자의 개수 지정

서버와 통신하기 때문에 규칙과 제한을 많이 걸어둠 → 그래야 데이터를 주고받을 때 오류가 발생하지 않음

• <input type="checkbox">: 여러 항목을 동시에 선택할 때
  
  • checkbox는 value 꼭 써 주어야 함
    • 다른 특성은 value 절대 쓰면 안 됨 → 사용자한테 보임 & 사용자가 미입력하면 value에 써져 있는 값이 전송됨 이슈
      

• ★★★ name과 value의 역할을 기억하는 게 매우 중요 ★★★
  • input tag는 값을 value라는 속성에 자동으로 저장
    • 설정도 가능
  • name 속성은 구분자 역할을 하기 때문에 반드시 필요함
    • name은 '그룹'임 → 그럼 그룹 안의 값 하나하나는 어떻게 구별짓나요? value!
    • 그래서 checkbox는 value 꼭 써 주어야 하는 것임

3교시: form (cont'd)

input tag (cont'd)

• checkbox
  • 사용자로부터 체크를 통해서 입력 받을 수 있는 속성
  • 반드시 같은 그룹의 name은 같게 입력할 것
    • 같은 네임으로 구별지어줘야 컴퓨터가 같은 그룹이라는 것 인식할 수 있음
    • 치킨, 피자 checkbox가 있다면 두 개의 name은 food로 같아야 함
  • 대신 value 속성을 반드시 다르게 넣어줘야 함 → value를 통해 값을 구분지어줌
    • 치킨 checkbox에는 value = "chicken", 피자 checkbox에는 value = "pizza"
  • checkbox의 특징: 중복 선택 가능
    • 둘 중 하나 또는 여러 개 중 하나만 하고 싶을 때는 checkbox로 하면 안 됨! → radio(1개만 선택 가능)

• <input type="radio">

  • 여러 항목 중 하나만 선택할 때
    • 라디오 버튼
  • 내국인이면서 외국인일 수 없으니 이런 경우에는 radio를 써야 함

• <input type="submit" value="회원 가입">

  • 서버전송 버튼
    

• 서버전송 처리를 button 태그로 할 수도 있음
  • button으로 submit 처리하는 개발자가 많은 이유
    • css에 버튼 관련 디자인이 훨씬 많음
  • 주의 사항: form 태그 안에 button 태그를 넣으면 기본 설정이 submit이 되어버림
    • 중복 체크 버튼으로 만든 건데 submit이 되면 안 됨 → button 태그 type = "button"으로 바꿔주기

• 이메일 선택은 select
  
  • 독립적인 값을 구별짓기 위해 option 태그 필수
  • <select>: 목록 상자를 생성해 선택이 가능

• 폼 필수 입력 메시지 변경 방법

• HTML disabled 속성

• 그 외 input 태그 type 속성에 들어가는 값과 기능
  • <input type="file">: 파일 업로드 시 사용
  • <input type="color">: 색을 지정할 때 사용
  • <input type="range">: 수치를 입력할 때 사용
  • <input type="reset">: Form 내 모든 요소 값을 초기화

• 사용자가 입력한 데이터를 한번에 묶어서 보내는 태그: form
  • action 속성: 데이터를 받을 주소를 적는 공간 (필수값)
  • method 속성: 통신 방법을 설정 (get, post)
    • get 방식은 데이터가 url에 동반
    • post 방식은 데이터가 숨겨져서 넘어간다.(버퍼 형태의 데이터)
  • 포인트: 통신 방법을 설정하지 않는다면 기본 값은 get 방식
• 사용자가 입력하는 창을 제공할 때는 input 태그를 활용한다.
  • 포인트 1: input 태그는 모습을 type으로 결정한다.
  • ★ 포인트 2 (중요): input 태그는 값을 value 속성에 자동으로 저장한다. ★
    • 설정도 가능하다.
  • 포인트 3: placeholder, maxlength 속성 등을 통해서 사용자에게 입력 제한이 가능하다.
    • 사용자도 편하고 받는 사람(서버)도 편함
• 사용자가 체크를 통해서 입력받는 속성은 checkbox
  • ★ 포인트 (중요): 반드시 같은 그룹을 표현하기 위해서 name 작성, 값을 구분하기 위해서 value 넣는다. ★
• Tip: button 태그를 form 태그 안에 작성하면 기본 기능이 submit으로 setting됨 (기본 type이 "submit"으로 바뀜)
  • form 태그 밖에서는 그냥 버튼으로 동작
  • 해결책: form 태그 안에 button을 만들려면 type="button"으로 지정하기
  • 이유: button이 디자인 코드가 더 많고 쓰기 편하다. + 기능을 만들어 연결 가능하다. (새 창 열기 등)

오후: 8월 미니 프로젝트 준비

• 상황에 따른 어투 및 문장 변환
  
  • 대화체에 견고한 정중체 변환기
    • 카카오톡 AI 말투 변환기의 역공학 엔지니어링
  • Gemma2 2b 한국어 방언 통역기 v0.2.0
  • Few-shot으로 특정 발화자의 문체를 복사하는 모델 개발해보기
  • 텍스트 스타일을 바꾸는 딥러닝 기술
  • StyleKQC: A Style-Variant Paraphrase Corpus for
    Korean Questions and Commands
    - 논문
  • korean writing style
• 맞춤법 예문으로 퀴즈
  • 객관식 - OX, 주관식 - 마스킹
• 사용자가 지정한 난이도(ex 상중하) 로 원어로 된 텍스트를 통해 수준에 맞는 어휘 교육

"상황에 따른 어투 및 문장 변환"으로 결정

작업 시 같이 보면 좋을 내용

• [초점] 당신도 모르게 '챗GPT 말투'에 감염되고 있다
  
• 말버릇·추임새도 사람처럼 따라 하는 AI 대화 생성 모델 개발
• 지극히 사적인 나만의 LLM, 가질 수 있을까?

• 특정한 목소리나 스타일을 가져야 하는 챗봇 만들기: 해적
  
  • 사람들이 문구를 입력하면 그 챗봇이 그 문구가 충분히 “해적스러운”지를 결정
  • 충분히 해적스럽지 않다면, 그 문구를 수정하고 해적 말투로 바꾸기

1. 문구가 해적 말투인지 아닌지를 분류
2. 해적 말투가 아니라면 그 문구를 해적 말투로 바꾸는 과정
3. 생성된 문구와 원래의 문구 사이의 유사성을 비교했고, 그들이 충분히 유사할 경우에만 새로운 문구를 반환

→ 세 가지 사용 사례 카테고리를 활용: 분류(Classify), 재작성(Rewrite), 검색/유사성(Search/Similarity).

Large Language Models and Where to Use Them: Part 2

AI 캐릭터 챗봇
Persona Prompts

---

---

하루 돌아보기

👍 잘한 점

• 8시에 도착해서 정보처리기사 기출 문제 풀었음

👎 아쉬웠던 점

• 내일 시험이라 프로젝트 참여를 잘 못했음

🔬 개선점

• 시험 끝나고 프로젝트 내용 따라잡기