국비 32 일차

HTML 3강

 

시멘틱 태그

문서의 구조와 의미를 전달하는 태그

• 웹 문서를 디자인 할 때는 기본적으로 레이아웃을 잡고 그 안에 문서 내용을 채워 넣는 방식으로 사용한다.

 

•<header>

- 페이지나 섹션의 머리말 표현

- 페이지 제목, 페이지를 소개하는 간단한 설명

•<nav>

-하이퍼링크들을 모아 놓은 특별한 섹션

- 페이지 내 목차를 만드는 용도

•<section>

-문서의 장(chapter, section) 혹은 절을 구성하는 역할

-일반 문서에 여러 장이 있듯이 웹 페이지에 여러 <section>가능

-헤딩 태그(<h1>~<h6>)를 사용하여 절 혹은 섹션의 주제 기입

•<article>

-본문과 연관 있지만, 독립적인 콘텐츠를 담는 영역

-혹은 보조 기사, 블로그 포스트, 댓글 등 기타 독립적인 내용

-<article>에 담는 내용이 많은 경우 여러<section> 둘 수 있음

•<aside>

-본문에서 약간 벗어난 노트나 팁

-신문, 잡지에서 주요 기사 옆 관련 기사, 삽입 어구로 표시된 논평 등

-페이지의 오른쪽이나 왼쪽에 주로 배치

•<footer>

-꼬리말 영역, 주로 저자나 저작권 정보

..<main>,<summary>,<mark>,<time>등등

 

위치와 색, 모양이 자동으로 결정되는 것이 아님

개발자가 CSS3를 이용하여 직접 위치와 색, 모양을 지정해야 함

ex)<style>

        html,body{

            margin:50; padding:50; height:100%;}

        .header{

             width:100%; height:15%; background:yellow;}

        .nav{

            width:15%; height:70%; float:left; background:orange}

        .section{

            width:70%; height:70%; float:left; background:olivedrab}

        .aside{

            width:15%; height:70%; float:left; background:orange}

        .footer{

            width:100%; height:15%; clear:both; background:plum}

       

    </style>

 

    <header class = "header">header</header>

 

시맨틱 블록 태그

<figure>

• 책이나 보고서 등 본문에 삽입하는 사진, 차트, 삽화, 소스 코드 등을 통상적으로 ‘그림’으로 표현

<details>와 <summary>

•<summary>는 <details>로 구성된 블록의 제목표현

•<details>는 상세 정보를 담는 시맨틱 블록 태그 (details안에 summary)

- 사용자가 핸들(▶)을 클릭하여 항목을 보거나 숨길 수 있다.<p>로 세부내용 적을 수 있다.

 

시맨틱 인라인 태그

<mark>

• 중요한 텍스트임을 표시

<time>

• 텍스트의 내용이 시간임을 표시

<meter>

• 주어진 범위나 %의 데이터 량 표시

<progress>

• 작업의 진행 정도 표시

 

<form> 

form 종류

입력양식은 항상 form태그로 시작한다

입력 데이터가 서버 로 보내지는 방식 POST / GET 방식이 있다

 

GET 방식

• GET 방식은 URL 주소 뒤에 파라미터를 붙여서 데이터를 전달하는 방식

• 주소창에 데이터가 노출되므로 보안에 취약하다.

POST 방식

• POST 방식은 사용자가 입력한 데이터를 URL 주소에 붙이지 않고 HTTP Request 헤더에 포함시켜서 전송하는 방식

• 길이 제한이 없으며, 보안이 유지된다.

 

<input>태그 형식

•<input type ="button" value="여기를 누르세요" name="button1">

type속성 입력필드종류 결정 value속성 버튼에 나타나는 텍스트 name속성은 서버로 전달될 때 사용되는 이름

 

파일 업로드 버튼

•<input type ="file" accept="image/jpg,image/gif"">

accept속성은 업로드할 파일의 타입을 브라우저에게 알려준다.

 

텍스트 입력

•<text> <password> 

name요소이름 maxlength문자개수(입력할 수있는 문자 최대 개수) size문자개수(입력 창의 크기) value초기텍스트

•<textarea>

cols열 rows행 name요소이름 wrap="OFF|HARD|SOFT" 자동 줄바꿈 처리 지정

 

데이터 목록을 가진 텍스트 입력 창

<datalist>

•목록 리스트를 작성하는 태그

•<option>태그로 항목 하나 표현

 

텍스트/이미지 버튼 만들기

•<input type ="button|reset|submit|image" value ="버튼의 문자열">

•<button type= "button|reset|submit">버튼의 문자열</button>

src : type = "image"인 경우에만 필요한 것으로 이미지의 URL

 

선택형 입력 : 체크박스와 라디오버튼

<input type="checkbox">체크박스 만들기

<input type=“radio”>라디오버튼 만들기

name 속성 값이 같은 라디오버튼들이 하나의 그룹 형성(같은 값중 하나 choice)

속성 checked있으면 초기 선택 상태로 출력

 

<select>

• 드롭다운 리스트에 목록 출력, 목록을 선택하는 입력 방식

<option>태그로 항목 하나 표현

속성 multiple 이 있으면 다수 항목 선택 가능

 

<label>

• <label>태그로 캡션과 폼 요소를 한 단위로 묶음

2 가지 방법

•<label>사용자 ID:<input type ="text"></label>

•<label for ="loginID">사용자 ID:</label>

 <input type="text" id="loginID">

 

선택형 요소에 <label>태그 사용

• 캡션 텍스트나 이미지를 선택해도 폼 요소를 선택한 것으로 처리

 

HTML에서의 색 표현

색 코드 - #rrggbb

• rr은 빨간색, gg는 초록색, bb는 파란색 농도

<input type ="color' value="#00ff00"> value는 초기 색

 

시간 정보 입력 폼 요소

<input type="month|week|date|time|datetime-local">

 

스핀버튼과 슬라이드 바로 편리한 숫자 입력

 

<input type = "number">

• 스핀버튼으로 정교한 값 입력

(min, max, step)

<input type ="range">

• 슬라이드 바로 대략적인 값 입력

(min, max, step)

option value값을 넣어서 기준(표시label)가능

 

폼 요소의 그룹핑

<fieldset>

<legend>회원정보</legend>-그룹의 제목

</fieldset>

 

CSS(Cascading Style Sheet)

HTML 문서의 색이나 모양 등 외관을 꾸미는 언어

CSS로 작성된 코드를 스타일 시트(style sheet)라고 부름

현재 CSS3

 

스타일 시트의 차이에 따른 웹 문서 효과

• http://www.csszengarden.com/

CSS Zen Garden: The Beauty of CSS Design

 

 

CSS의 장점

• 거대하고 복잡한 사이트를 관리할 필요가 있을 때

• 모든 페이지들이 동일한 CSS를 공유

• CSS에서 어떤 요소의 스타일을 변경하면 관련되는 전체 페이지의 내용이 한꺼번에 변경

 

CSS의 기본 문법

• 선택자 {속성: 값;}

• 반드시 속성: 값 끝에 ;를 붙여준다.

CSS에서 사용하는 주석 /*….*/

 

스타일 시트 적용방법

1. 인라인 스타일 시트(inline)

- 각각의 HTMl요소마다 스타일 지정

- 2개이상 선언이 있다면 반드시 끝에 ;을 적어준다

2. 내부 스타일 시트 (internal style sheet)

내부 스타일 시트는 HTML안에 CSS를 정의하는 것이다 <style>안에서 표현 

<style>태그는 여러 번 작성 가능

3. 외부 스타일 시트 (external style sheet)

• 스타일 시트를 HTML문서 외부, 즉 별도의 파일로 저장하는 방식 이다.

• 유지보수라는 측면에서 가장 권장하는 방식

<link type ="text/css" rel="stylesheet" href="mystyle.css">

<head>안에다 적어준다.

 

다중 스타일 시트

• 하나의 요소에 대해서 내부, 외부, 인라인이 서로 다르게 적용되면

우선순위

1.인라인 스타일 시트

2.헤드 섹션에 저장된 내부 스타일 시트

3.외부 스타일 시트

4.웹 브라우저 디폴트 값

 

CSS3 스타일 시트 구성

셀렉터 • CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름 ex)span

프로퍼티 • 스타일 속성 이름. 약 200개 정도의 프로퍼티 있음 ex)font-size

값 • 프로퍼티의 값

주석문 • 스타일 시트 내에 붙이는 설명문으로 /* ... */. 여러 줄, 아무 위치에나 사용 가능

 

CSS3 스타일 시트 파일을 불러오는 방법 2 가지

<link>태그 이용

<link type ="text/css" rel="stylesheet" href="mystyle.css"> -<head>내부에서

@import 이용

@import url(mystyle.css); -<style>내부에서

 

 

CSS3 규칙 – 스타일 상속

CSS3 스타일은 부모 태그로부터 상속

부모 태그(부모 요소)

• 자신을 둘러싸는 태그

ex) <p style ="color:green">안녕하세요

     <em style = "font-size:25px">자식입니다.</em>

     </p>

<em>태그는 글자크기 25px, 글자색 부모<p>태그를 상속받아 green