몽키의 코딩작업실

< 목차 >

 value

• value 속성은 입력 필드에 사용자가 입력한 값을 저장하는 속성
• 예를 들어, 사용자가 abc를 입력하면, 이 값은 해당 input 필드의 value 속성에 저장됨
• JavaScript로 값을 읽으면 사용자가 입력한 값을 얻을 수 있음
• 페이지 로드 시 value 속성에 미리 값을 설정하면 그 값이 기본값으로 표시됨

<div>
    <input type="text" name="username" id="user" value="abc">
</div>

 -> 페이지가 로드될 때 value="abc"로 설정된 값이 input 필드에 나타남. 사용자가 abc를 수정하거나 새로운 값을 입력하면 이 값이 변경됨

readonly

• readonly 속성은 해당 입력 필드의 값을 읽기만 할 수 있게 만듬
• 마우스 포커스가 들어가도 수정할 수 없지만 값은  볼 수 있음. 마우스나 키보드로 입력할 수 없음
• readonly 속성이 있는 필드에 입력된 값은 폼을 제출할 때 전송될 수 있음. 즉, 사용자가 값을 변경할 수 없더라도, 그 값은 그대로 서버로 전송될 수 있음

<div>
    <input type="text" name="readonlyField" id="readonly" value="읽기만 가능" readonly>
</div>

-> readonly 속성 덕분에 사용자는 readonly 필드의 값을 수정할 수 없으나 이 값은 폼이 제출될 때 전송됨

disabled

• disabled 속성은 해당 필드를 사용할 수 없게 만듬
• 수정도 불가능하고, 폼 전송 시에도 값이 전송되지 않음. 즉, disabled 필드는 완전히 비활성화됨
• 폼이 제출되더라도 disabled가 적용된 필드는 전송되지 않지만, 자바스크립트로는 값을 읽을 수 있
• 시각적으로 흐리게 표시됨

<div>
    <input type="text" name="disabledField" id="disabled" value="이건 전송되지 않음" disabled>
</div>

-> disabled 속성을 가진 필드는 사용자가 입력을 할 수 없고, 폼을 제출하더라도 값이 서버로 전송되지 않음. 다만, 자바스크립트로는 값을 읽을 수 있음

< readonly와 disabled의 차이점 >

• readonly: 사용자가 필드의 값을 보거나 복사할 수는 있지만 수정할 수는 없음. 폼을 제출할 때 값이 서버로 전송됨
• disabled: 필드를 완전히 비활성화시켜서 값도 볼 수 없고, 폼 제출 시 값도 전송되지 않음

maxlength

• maxlength 속성은 사용자가 입력할 수 있는 최대 글자 수를 제한함
• 이 속성을 사용하면 사용자가 정해진 길이 이상의 텍스트를 입력할 수 없게 됨
• ex) 주민등록번호나 전화번호 등을 입력받을 때 유용

<div>
    <input type="text" name="phoneNumber" id="phone" maxlength="10">
</div>

-> maxlength="10"으로 설정하면, 사용자는 최대 10자까지만 입력할 수 있다. 11자 이상을 입력하면 자동으로 제한된다.

placeholder

• placeholder 속성은 입력 필드에 사용자가 무엇을 입력해야 하는지에 대한 가이드를 제공
• placeholder에 설정된 텍스트는 입력이 시작되면 사라지고, 필드가 비어 있으면 다시 보임
• 이 속성은 사용자가 올바른 형식으로 입력할 수 있도록 도와주는 역할을 함

<div>
    <input type="text" name="email" id="email" placeholder="이메일을 입력하세요">
</div>

-> 사용자가 이메일을 입력하지 않으면 "이메일을 입력하세요" 라는 안내 텍스트가 보이고, 입력을 시작하면 사라짐

required

• required 속성은 해당 필드를 반드시 입력해야 한다는 것을 지정
• 사용자가 값을 입력하지 않으면 폼을 제출할 수 없음
• 이 속성은 <form> 태그 안에서만 사용됨
• 폼 제출 시 필수 항목을 체크하는 역할을 함

<div>
    <input type="text" name="username" id="username" required>
</div>

-> username 필드가 비어 있는 상태로 폼을 제출하려고 하면 브라우저가 경고 메시지를 띄우고 제출을 막음

autocomplete=“on”

• autocomplete="on" 속성은 사용자가 이전에 입력한 값을 브라우저가 저장하고, 이후 입력할 때 자동으로 제안해주는 기능
• 브라우저가 웹사이트와 관련된 데이터를 저장하고 관리하는 데 도움을 줌
• 브라우저 캐시와 연결되어 있어서 같은 도메인 내에서는 자동 완성 데이터를 공유

<div>
    <input type="text" name="email" id="email" autocomplete="on">
</div>

-> autocomplete="on"이 설정된 필드에 대해 브라우저는 이메일 입력값을 기억하고, 다른 페이지에서도 자동 완성 기능을 제공

< 타입(type)이 달라도 name 값이 같으면 자동 완성 공유 >

• type 속성이 달라도 name 값이 같으면 브라우저는 같은 필드로 인식하고 자동 완성을 제공
•  ex) type="text", type="email", type="password" 등이 다르더라도, name="email"이 같으면 자동 완성 데이터 공유

autofocus=“on”

• autofocus="on" 속성은 페이지가 로드될 때 자동으로 해당 입력 필드에 포커스를 주어 사용자가 바로 입력을 시작할 수 있음
• 예를 들어, 로그인 페이지에서 아이디 입력 필드에 자동으로 포커스를 주면 사용자가 아이디를 바로 입력할 수 있어 편리

<div>
    <input type="text" name="username" id="username" autofocus="on">
</div>

-> 페이지가 로드되자마자 username 입력 필드에 자동으로 포커스가 가게 됨

<목차>

form 요소

• <form> 태그는 사용자로부터 데이터를 입력받는 HTML 요소로, 여러 입력 필드를 한 번에 묶을 수 있어.
• <input> 태그의 type 속성에 따라 입력 방식이 달라짐. (ex. type="email"은 이메일 입력, type="password"는 비밀번호 입력)
• <label> 태그의 for 속성과 <input>의 id가 같으면 라벨을 클릭했을 때 입력 필드가 활성화됨
• 여러 정보를 함께 입력받는 경우, <form> 태그로 감싸는 것이 일반적
• <form>의 action 속성에 데이터를 전송할 서버 주소를 입력하면, 버튼 클릭 시 해당 주소로 데이터를 보낼 수 있음
• 하지만 SPA나 React와 같은 최신 개발 방식에서는 <form>을 사용하기보다는 다른 방식으로 데이터를 전송함

<form action="서버주소">
    <label for="userEmail">이메일 주소</label>
    <input type="email" id="userEmail">
    <button type="submit">저장</button>
</form>

위 코드에서 <form>은 서버 주소로 이메일을 전송할 때 사용되고, 이메일 입력 필드는 type="email"로 설정. action 속성에 서버 주소를 넣어야 데이터를 전송가능

체크박스

type="checkbox"

• 여러 개의 선택지를 동시에 선택
• <label> 태그를 <input> 태그와 연결하면 라벨을 클릭해도 체크 상태가 변경됨

<input type="checkbox" id="chk_html">
<label for="chk_html">HTML</label>
<input type="checkbox" id="chk_css">
<label for="chk_css">CSS</label>

• 위 코드에서 HTML 라벨을 클릭하면 체크박스가 활성화되지만, CSS 라벨은 연결되지 않아서 클릭해도 반응하지 않음
• 사용자의 편의성을 위해 <label>과 <input>을 제대로 연결해야 함

라디오 버튼

type="radio"

• 한 그룹 내에서 하나의 선택지만 선택
• 같은 그룹으로 묶기 위해 name 속성을 동일하게 설정해야 함
• name 속성이 없으면 각 버튼이 개별적으로 인식되어 다중 선택이 됨

색상 선택

type="color" 

• 색상 팔레트가 나타나 원하는 색을 선택

날짜 및 시간 입력

type="date"

• 캘린더를 통해 날짜를 선택할 수 있음

type="datetime-local"

• 날짜뿐만 아니라 시간을 함께 선택할 수 있음

type="month"

• 연도와 월만 선택할 수 있음

type="week"

• 해당 연도의 몇 번째 주인지 선택할 수 있음

type="time"

• 시간만 입력할 수 있음

숫자입력

type="number"

• 숫자만 입력할 수 있으며, min과 max 속성으로 범위를 설정할 수 있음
• ex) 쇼핑몰 사이트 수량 입력

<input type="number" min="0" max="100">

위 코드에서는 0 이하, 100 이상의 숫자를 입력할 수 없다.

보안 관련 입력

type="password"

• 입력값이 보이지 않도록 가려짐

전화번호 입력

type="tel"

• 전화번호 입력을 위한 필드.
• 숫자 외에 문자를 입력할 수도 있기 때문에, 유효성 검사는 JavaScript로 처리해야 함

URL 입력

type="url"

• URL 형식의 입력을 받음
• <form> 태그 내에서 submit 버튼을 눌렀을 때 올바르지 않은 URL이면 경고 메시지가 표시됨

검색 입력

type="search"

• 일반 text 입력과 유사하지만, 입력하면 X 버튼이 표시되어 빠르게 삭제할 수 있음

파일 업로드

type="file"

• 파일 선택 버튼을 제공하며, 클릭 시 파일 탐색기가 열림

숨겨진 입력필드

type="hidden"

• 사용자에게 보이지 않는 입력 필드
• 보통 개발자가 서버로 특정 데이터를 함께 전송할 때 사용함
• 예를 들어, 사용자는 상품과 수량만 입력하지만, 개발자는 주문한 사용자의 ID나 이메일 정보를 숨겨진 필드에 넣어 서버로 전송할 수 있음

이미지 버튼

type="image"

• 이미지를 버튼으로 사용할 때 사용하지만, 실무에서는 <img> 태그를 사용하는 것이 일반적

<div>
    <img src="./html/img/monkeyLogo.avif" alt="" style="width: 300px; height: auto;">
    <input type="image" src="./html/img/monkeyLogo.avif" style="width: 300px; height: auto;">
</div>

• 첫 번째 이미지는 일반적인 img 태그이며, 두 번째는 input type="image"을 사용한 것
• 실무에서는 input type="image"보다는 img 태그를 사용하고 CSS 및 JavaScript로 버튼 역할을 구현하는 것이 일반적

모바일 환경에서의 입력 필드 최적화

입력 유형에 따라 스마트폰 키보드가 달라짐

=> 이처럼 입력 유형을 적절히 설정하면 모바일 환경에서의 UX가 크게 향상될 수 있음

순서 없는 목록 (ul)

• 순서가 중요하지 않은 항목들을 나열할 때 사용
• <ul> 태그 안에 <li> 태그로 항목을 나열

• 예시: 목록 순서가 중요하지 않은 경우 (예: 쇼핑 목록)

<h3>순서 없는 목록</h3>
    <!-- ul - unordered list -->
    <ul>
        <li>순서 없는 목록1</li>
        <li>순서 없는 목록2</li>
        <li>순서 없는 목록3</li>
    </ul>

순서 있는 목록 (ol)

• 항목에 순서가 중요한 경우 사용
• <ol> 태그로 목록을 만들고, 항목은 <li> 태그로 표시
• 예시: 준비물 목록, 작업 순서 등

<h3>순서 있는 목록</h3>
    <!-- ol - ordered list -->
    <ol>
        <li>순서 있는 목록1</li>
        <li>순서 있는 목록2</li>
        <li>순서 있는 목록3</li>
    </ol>

설명 목록 (dl)

• 특정 용어나 정의를 설명할 때 사용
• <dl> 태그로 시작하고, <dt>는 설명할 용어, <dd>는 그 용어에 대한 설명을 작성
• 예시: 용어집, 제품 설명 등

<h3>설명 목록</h3>
    <!-- dl - discription list -->
    <!-- dt - define term -->
    <!-- describe description -->
    <dl>
        <dt>HTML</dt>
        <dd>- 웹 페이지 개발을 위한 마크업 언어</dd>
        <dt>CSS</dt>
        <dd>- 웹 페이지 디자인을 위한 언어</dd>
        <dt>자바스크립트</dt>
        <dd>- 웹 페이지를 사용자와 동적처리를 위한 언어</dd>
    </dl>

1. 볼드체 태그 (b, strong)

<b> 

• 단순히 텍스트를 굵게 표시하는 태그. 의미는 없고, 오직 스타일링만을 위한 태그

<strong>

• 텍스트를 강조하는 의미를 가진 태그. 시각적으로 볼드체처럼 보이지만, 중요한 내용을 강조할 때 사용
• 검색 엔진이나 스크린 리더기에서는 이를 중요한 문장으로 인식하고, 시각적으로도 중요성을 강조
• 시각장애인에게는 더 크게 읽어줌

2. 이탤릭체 태그 (i, em)

<i>

• 단순히 이탤릭체(기울임꼴)를 적용하는 태그. 디자인적인 효과만 있고, 의미가 특별히 부여되지 않음

<em>

• 강조된 이탤릭체. 텍스트를 강조하는 의미를 담고 있어. 시각적으로는 이탤릭체지만, 스크린 리더기나 검색 엔진에서는 강조된 텍스트로 해석되며 더 중요한 텍스트로 인식

3. 기타 텍스트 스타일 태그

<small>

• 텍스트를 작게 표시

<mark>

• 형광펜으로 마킹한 것처럼, 중요한 부분을 강조하고 싶을 때 사용. 스타일로도 할 수 있지만, mark 태그를 쓰면 의미적으로 중요함을 부여할 수 있음

<del>

• 텍스트에 취소선을 그어, 삭제된 내용을 표시. 스타일에서도 할 수 있지만, 취소선을 의미적으로 표현하고 싶으면 태그 사용

<ins>

• 텍스트에 밑줄을 그어, 추가된 내용을 표시.

<sub>

• 아래첨자를 표시할 때 사용

<sup>

• 윗첨자를 표시할 때 사용

4. 인용 관련 태그

<blockquote>

• 긴 인용문을 표시할 때 사용. cite 속성을 통해 원본 출처를 지정할 수 있음(ex. 누군가의 말이나 책, 글에서 직접 인용할 때)

<q>

• 짧은 인용문을 표시할 때 사용. q는 자동으로 쌍따옴표를 붙여줌

<cite>

• 작품명, 영화명, 책명, 음악명 등을 나타낼 때 사용 (ex. 책 제목이나 영화 제목에 사용)

5. 기타 중요한 태그

<abbr>

• 약어를 풀어 쓸 때 사용. title 속성에 약어의 풀네임을 적을 수 있음

<address>

• 주소를 표시할 때 사용. 일반 텍스트와 구분되도록 주소를 나타낼 수 있음

6. 의미 없는 태그

<div>

• 블록 요소로, 컨테이너 역할. 배경색을 넣으면 한 줄을 차지하고, 그 안에 있는 모든 요소들을 감싸는 역할. 하지만 의미가 없는 태그

<span>

• 인라인 요소로, 콘텐츠의 크기만큼만 차지. 여러 요소를 가로로 나열하거나 스타일을 지정할 때 사용. div와 마찬가지로 의미가 없음

정리

• 의미 있는 태그들(strong, em, del, ins, q, cite 등)은 그 자체로 의미를 부여하고, 스크린 리더기나 검색엔진이 이를 인식하여 특별한 처리를 할 수 있도록 도와준다. 이런 태그들은 웹 접근성과 검색 최적화(SEO)에 중요한 역할을 한다.

• 반면, div와 span은 구조적인 역할만 하는 컨테이너 태그로, 특별한 의미는 없다. 이 태그들은 레이아웃 구성을 위해 사용된다.

1. 인라인 스타일 (Inline Style)

• HTML 태그 안에 style 속성을 사용해서 스타일을 지정하는 방법

• 이 방식은 태그마다 직접 스타일을 적용하므로, 다른 부분에 영향을 주지 않고 해당 태그만 스타일을 수정가능

 <p style="color: red;">빨간색 글자입니다.</p> 

2. 익스터널 스타일 (External Style)

• 외부 CSS 파일을 만들어서 링크하는 방법

• 보통 여러 페이지에 동일한 스타일을 적용할 때 이 방법을 사용

• HTML 파일과 CSS 파일을 분리하면, 코드 관리가 쉬워지고 유지보수도 간편

<link rel="stylesheet" href="styles.css">

CSS 파일 (styles.css):

p {
    color: red;
}

3. 인터널 스타일 (Internal Style)

• HTML 파일 내 <head> 태그 안에 <style> 태그를 사용해서 스타일을 정의하는 방법

• 인라인 스타일보다는 조금 더 구조적인 방법이라서 여러 개의 스타일을 한 곳에 정의할 수 있음

• 페이지 내부에서만 스타일을 정의하려면 유용하지만, 외부 파일로 분리하는 게 보통 더 효율적

<style>
    p {
        color: red;
    }
</style>

어떤 방식이 좋을까?

• 인라인 스타일은 짧은 HTML 문서에서 빠르게 스타일을 적용할 때 유용하지만, 유지보수가 어려움

• 인터널 스타일은 한 페이지에만 스타일을 적용할 때 괜찮고, 외부 파일을 만들지 않아서 간편하지만 코드가 복잡해지면 관리하기 어려울 수 있음.

• 익스터널 스타일은 여러 페이지에서 공통된 스타일을 적용할 수 있어서 대규모 프로젝트에서는 가장 추천되는 방법!

글로벌 속성

draggable = “true” : 요소를 마우스로 끌어서 이동할 수 있도록 설정함

• 화면에서 직관적으로 어떤 요소가 움직이게끔 할 수 있음

• 파일을 휴지통으로 드래그 하여 삭제할때
• 엑셀에서 컬럼의 위치를 변경할 때

lang : 어떤 언어로 텍스트가 구성되어 있는지 검색엔진 등에 알려줌

• 구글이나 네이버 같은 검색엔진에서 검색하고 분석하는 검색봇들이 우리가 만들고 있는 웹사이트를 분석하는데 이렇게 알려주면 좀 더 빠르고 정확하게 웹페이지를 분석할 수 있음.

• lang = “en” : 해당 HTML 페이지의 주 언어가 영어임을 표시
  
• lang = “ko” : 해당 HTML 페이지의 주 언어가 한국어임을 표시

활용

• 검색엔진(구글, 네이버 등)이 웹사이트를 분석할 때, 지정된 언어 정보를 바탕으로 페이지를 빠르고 정확하게 해석함.
• 예를 들어, lang="en"인 경우 PC 기본 언어가 한국어라면 “이 페이지를 번역하시겠습니까?“라는 메시지가 뜸.

hidden : 요소를 화면에 보이지 않게 설정함

• 속성 값이 필요하지 않음. 단순히 hidden만 작성해도 동작함.

id : 고유한 값으로 지정되어야 하며, 다른 태그와 중복될 수 없음.

• 예시: 주민등록번호처럼 유일성을 가지는 속성

name : 고유할 필요는 없으며, 동일한 값을 여러 태그에서 사용할 수 있음.

• 예시: 같은 이름을 가진 사람처럼 여러 태그에서 같은 name을 설정 가능.

label : 특정 입력 필드와 연결되는 텍스트를 제공함

    <label for="userId">사용자 아이디</label>
    <input type="text" name="" id="userId">

for 속성 : label 태그에서만 사용 가능한 로컬 속성.(글로벌 속성 아님!)

• 검색엔진이나 스크린리더가 입력 필드와 텍스트 간의 관계를 인식할 수 있도록 돕는 역할.

•주의 : for 속성 값은 연결되는 입력 필드의 id와 동일해야 함.

contenteditable

contenteditable = ‘true’ : 사용자가 해당 영역의 텍스트를 수정 가능하도록 설정

spellcheck

spellcheck="true" : 텍스트의 철자 오류를 감지하여 하단에 점선으로 표시함

style : CSS 스타일을 인라인으로 작성할 수 있는 속성.

• 여러 스타일 속성을 한 번에 작성 가능

<p style="color: red; font-size: 16px;">스타일 적용 예시</p>

tabindex : 탭 키를 눌렀을 때 요소 간 이동 순서를 지정함.

•  기본 동작 : 지정하지 않을 경우, HTML의 위에서 아래로 순차적으로 이동.
• 데이터 입력이 많은 폼에서 유용함.

<input type="text" tabindex="1">
<input type="password" tabindex="2">

title : 요소에 대한 추가 설명을 제공하며, 마우스를 올리면 해당 설명이 툴팁으로 표시됨.

• 사용 가능 태그 : 모든 태그에서 사용 가능 (예: button, a 등)
• 검색엔진 최적화에도 도움을 줄 수 있음

<button title="클릭하면 저장됩니다">저장</button>

로컬 속성

< a 태그 관련 로컬 속성>

herf : 이동할 페이지의 URL을 지정함

<a href="https://naver.com">네이버</a>

target : 링크를 클릭했을 때 페이지를 열 위치를 지정함

옵션

- "_blank" : 새 창에서 열림

<a href="https://naver.com" target="_blank">네이버를 새 창에서 열기</a>

- "_self" : 현재 창에서 열림 (기본 값)

<a href="https://naver.com" target="_self">네이버를 현재 창에서 열기</a>

< img 태그 관련 로컬 속성 >

src : 이미지를 불러올 경로를 지정함.

<img src="image.jpg" alt="이미지 설명">

alt : 이미지를 로드하지 못했을 때 표시되는 텍스트

• 시각장애인을 위한 스크린리더에서도 사용됨

<img src="broken.jpg" alt="이미지를 불러올 수 없습니다.">

글로벌 속성과의 차이

글로벌 속성: 모든 태그에서 사용 가능 (ex. style, id, class).

로컬 속성: 특정 태그에서만 사용 가능 (ex. href는 a 태그, src는 img 태그).