<label> 태그 — 클릭 범위 확장

  • <label>로 이미지 + 라디오버튼을 감싸면 이미지 클릭 시에도 선택됨
  • 라디오버튼 동그라미를 정확히 클릭해야 하는 불편함 해소
<label>
  <input type="radio" name="menu" value="짜장">
  <img src="짜장.jpg"> 짜장면
</label>

컬러 코드 (Color Code)

  • 구성: RGB 3바이트, 앞에 # 붙임 (예: #FF6347)
  • 색상명(red, blue 등)으로 대략적인 색 지정 가능
  • 미세한 색 조절은 컬러 코드로 정밀 지정 필요

⭐ 이벤트 프로그래밍 첫 번째 예시 — input type="color" + onchange

  • input type="color": 색상 선택 UI 제공
  • value: 초기 색상값 (예: value="skyblue")
  • onchange 이벤트: 값이 바뀌는 순간 = 뒤 코드 실행
<input type="color" value="skyblue"
       onchange="document.body.style.color = this.value">

코드 의미

document 현재 HTML 파일 전체
.body <body> 태그
.style.color 글자색 스타일 속성
this 현재 이벤트 발생 태그 자신 (= 이 <input>)
this.value 선택된 색상값 (예: #ff0000)
  • 색상 선택기 값이 바뀌면 <body> 글자색이 즉시 반영 → 이게 이벤트 프로그래밍의 핵심

날짜/시간 관련 input

  • 날짜 계산은 반드시 날짜 함수 사용 (머리로 계산하면 틀림)
  • 캘린더 데이(Calendar Day): 달력상 일수 (1달, 2달 등)
  • 워킹 데이(Working Day / 영업일): 은행/회사가 실제 영업하는 날
    • 예: 금요일 펀드 해약 → 제3영업일 = 월요일 (은행 영업일 기준)
    • 회사마다 창립기념일 등이 달라 내장 함수 없음 → 직접 구현
  • LocalDate: 현재 내가 위치한 나라의 현지 시간

스핀 버튼 (Spin Button)

  • 숫자 입력 시 옆에 붙는 ▲▼ 버튼 → 값 조금씩 증감
  • step 속성으로 증가 단위 설정 (예: step="0.1" → 0.1씩)
<input type="number" min="0" max="100" step="0.1" value="50">

input type="range" + datalist 연결

<input type="range" min="0" max="100" list="temperature">
<datalist id="temperature">
  <option value="50">
  <option value="90">
</datalist>
  • list="id값"으로 datalist와 연결 → 특정 값에 눈금 표시

email / url / search input — placeholder 힌트

<input type="email" placeholder="example@mail.com">
<input type="url" placeholder="http://">
<input type="search">
  • 입력 전 옅은 글씨로 힌트 표시
  • 형식 불일치 시 브라우저가 자동 경고

<fieldset> + <legend> — 폼 요소 그룹핑

  • <fieldset>: 폼 요소들을 테두리 박스로 묶어주는 태그
  • <legend>: 박스 상단의 설명 문구 ⚠️ <caption> ❌ → <legend> ✅
<fieldset>
  <legend>회원정보</legend>
  <input type="text" name="id"> 아이디<br>
  <input type="password" name="pw"> 비밀번호
</fieldset>

4장 — CSS3로 웹 페이지 꾸미기

CSS란?

  • CSS(Cascading Style Sheet): HTML 문서의 색이나 모양 등 외관을 꾸미는 언어
  • 현재 버전: CSS3 (CSS4 표준화 작업 중: CSS1 → CSS2 → CSS3 → CSS4)
  • CSS3 기능 영역: 색상/배경, 텍스트, 폰트, 박스 모델, 비주얼 효과, 리스트, 테이블, 사용자 인터페이스
  • 실무에서는 디자이너가 만든 CSS 파일을 개발자가 include해서 사용 (삼성 전용 폰트, 현대차 색상 등 회사 디자인 가이드)

CSS3 스타일 시트 구성

span { color: blue; font-size: 20px; } /* span 태그 스타일 선언 */

구성요소 설명

셀렉터 CSS를 HTML에 적용하도록 만든 이름 (예: span, h3)
프로퍼티 스타일 속성 이름, 약 200개
값 프로퍼티의 값
주석 /* 내용 */ (여러 줄, 아무 위치 가능)
  • ✅ 대소문자 구분 없음 (color와 Color 동일)

HTML에서 CSS 작성하는 방법 3가지

① <style> 태그 — 페이지 전체 적용

<head>
  <style>
    body { background-color: mistyrose; }
    h3 { color: purple; }
    hr { border: 5px solid yellowgreen; }
    span { color: blue; font-size: 20px; }
  </style>
</head>
  • <head> 안에서만 사용 가능
  • <style> 태그 여러 번 작성 가능 (합쳐서 적용)
  • 웹 페이지 전체에 적용

② style 속성 — 해당 태그에만 적용 (인라인)

<p style="color: magenta; font-size: 30px">축구를 좋아합니다.</p>
  • 해당 태그에만 스타일 적용 / 우선순위 가장 높음

③ 외부 CSS 파일로 분리 — 사이트 전체 일관성

<!-- <link> 태그 이용 -->
<head>
  <link href="mystyle.css" type="text/css" rel="stylesheet">
</head>

<!-- @import 이용 -->
<style>
  @import url(mystyle.css);
</style>
  • 여러 페이지에 동일 스타일 적용 시 중복 작성 불필요
  • 웹 사이트 전체 디자인 일관성 확보

<span> 태그

  • 문자열 일부분에만 색깔/크기 적용할 때 사용
  • </span> 끝남과 동시에 원래 스타일로 즉시 복구
<p>나는 <span style="color:blue; font-size:20px">웹 프로그래밍</span>을 좋아합니다.</p>

⭐ 스타일 상속 (Inheritance)

  • 자식 태그는 부모 태그의 스타일을 상속받음
  • 부모 태그 = 자신을 둘러싸는 태그
<p style="color:green">안녕하세요
  <em style="font-size:25px">자식입니다</em>
</p>

→ <em>은 font-size: 25px만 지정했지만, 부모 <p>의 color: green을 상속받아 초록색 출력

⭐ 스타일 합치기(Cascading)와 오버라이딩(Overriding)

  • 태그에 적용 가능한 스타일 우선순위 (낮 → 높):

순위 출처

1 (낮음) 브라우저 디폴트 스타일
2 외부 스타일 시트 파일 (.css)
3 <style> 태그에 선언된 스타일
4 (높음) style 속성에 선언된 스타일 (인라인)
  • cascading(합치기): 서로 다른 속성은 모두 합쳐서 적용
  • overriding(덮어쓰기): 동일 속성은 우선순위 높은 것이 적용
예시: <p> 태그 최종 스타일 계산
  브라우저 기본  → color: black;  font-size: 16px;
  external.css  → background: mistyrose;
  <style> 태그  → color: blue;   font-size: 12px;  ← color, font-size 오버라이드
  style 속성    →                font-size: 25px;  ← font-size 오버라이드
  ─────────────────────────────────────────────────
  최종 적용     → background: mistyrose; color: blue; font-size: 25px;

셀렉터(Selector)

  • HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능
  • 예: h3 { color: brown; } → 페이지 내 모든 <h3> 태그에 일괄 적용
h3 { color: brown; }

주요 개념

  • 이벤트 프로그래밍: 이벤트(onclick, onchange 등)가 발생하면 실행할 코드를 연결하는 방식 — 웹 인터랙션의 핵심
  • this: 현재 이벤트가 발생한 태그 자신을 가리키는 키워드
  • <fieldset> + <legend>: 폼 그룹핑 시 <caption> 아닌 <legend> 사용
  • 캘린더데이 vs 워킹데이: 영업일은 회사마다 달라 내장 함수 없음, 직접 구현 필요
  • CSS 스타일 작성 3가지: <style> 태그 / style 속성(인라인) / 외부 파일
  • 스타일 상속: 자식 태그는 부모 태그의 스타일을 자동 상속
  • cascading + overriding: 스타일은 합쳐지되, 동일 속성은 우선순위 높은 쪽이 덮어씀

다시 보기

Q. onchange와 onclick의 차이는?

  • onclick: 마우스로 클릭했을 때 발생
  • onchange: 값이 바뀌었을 때 발생
  • 색상 선택기는 클릭이 아니라 색상 값이 바뀌는 것이므로 onchange 사용

Q. this.value에서 this가 뭔가?

  • this = 현재 이벤트가 발생한 태그 자신
  • onchange="document.body.style.color = this.value"에서 this는 <input type="color"> 태그
  • this.value = 그 태그에서 선택된 색상값 (예: #ff0000)

Q. <fieldset> 제목을 <caption>이 아닌 <legend>로 써야 하는 이유?

  • <caption>은 <table> 전용 제목 태그
  • <fieldset>의 제목은 반드시 <legend> 사용
  • 헷갈리기 쉬운 부분이므로 주의

Q. CSS 스타일 우선순위는?

  • style 속성 > <style> 태그 > 외부 .css 파일 > 브라우저 기본값
  • 우선순위 높은 쪽이 같은 속성을 덮어씀 (오버라이딩)
  • 서로 다른 속성이면 모두 합쳐짐 (cascading)

Q. 워킹데이 함수가 따로 없는 이유?

  • 영업일은 은행마다, 회사마다 창립기념일·임시공휴일 등이 달라 표준화 불가
  • 캘린더데이 관련 함수는 내장되어 있지만, 워킹데이는 직접 로직 구현 필요
  • 날짜 계산이 1일이라도 틀리면 월급/결제에서 큰 문제 발생

Q. 스타일 상속이 뭔지 헷갈릴 때?

  • 부모 태그 = 자신을 감싸고 있는 태그
  • 부모에 color: green 지정 → 자식 태그도 별도 지정 없으면 초록색
  • 단, 자식 태그에서 같은 속성을 재지정하면 오버라이딩되어 자식 것 적용

'웹프로그래밍' 카테고리의 다른 글

[웹프로그래밍] JavaScript 연산자와 조건문 — 형변환과 if-else  (0) 2026.06.01
[웹프로그래밍] JavaScript 입문 — 인터프리터 방식, 이벤트, 대화상자·변수·타입  (0) 2026.06.01
[웹프로그래밍] 시맨틱 태그와 웹폼 — form·input·GET·POST  (0) 2026.06.01
[웹프로그래밍] iframe과 미디어 태그 — audio·video 속성  (0) 2026.06.01
[웹프로그래밍] 링크·리스트·테이블 태그와 메타데이터  (0) 2026.06.01

티스토리툴바