Part of your World

• 엘리먼트가 배치되는 방식(위치)

(1) static(기본)

• 순서대로 배치

(2) absolute

• top/left/right/bottom
• 상위 엘리먼트의 기준점 기준으로 위치 지정

(3) relative

• top/left/right/bottom
• 원래 자기의 위치를 기준으로 위치 지정

(4) fixed

• 전체화면(viewport) 기준으로 위치 지정

(1) block

속성이 block인 엘리먼트는 벽돌을 쌓듯이 쌓임

대표적인 block 속성 엘리먼트

-div, header, h*, hr, canvas, article, section, ol, ul

width, height 값을 지정할 수 있음

(2) inline

한 줄을 다 차지하지 않고 우측으로, 아래쪽으로 빈자리를 차지하며 흐름

대표적인 inline 속성 엘리먼트

-span, br, button, map, select, strong, textarea

width, height 지정은 할 수 있으나 무시당함

(3) flex

block 속성의 태그들을 여러 형태로 배치해주는 스타일 block 속성의 태그를 가로로 배치함

• 엘리먼트(버튼 등 웹을 구성하는 모든 것)을 화면에 배치하는 것
• 기본적으로 위에서부터 아래로 배치
• 웹은 다양한 표현이 가능해야 하므로, 다양한 배치를 위해 속성을 활용

※ 중요 속성

display : block, inline

position : static, relative, absolute, fixed

float : left, right

link : 아직 한 번도 방문한 적 없는 상태
visited : 한 번이라도 가 본 적 있는 상태
hover : 링크 위에 마우스를 올려놓은 상태
active : 링크를 마우스로 누르고 있는 상태

페이지 책갈피
현재 페이지에서 이동하고 싶은 곳으로 이동하는 법
<a> 태그의 name속성을 이용하여 책갈피 생성

(1) 테이블

여러 종류의 데이터가 행과 열로 정리된 표

<table> 태그 사용

<table border=”테두리굵기(1~)” align=”정렬위치” width=”col넓이”>

<tr height=”행높이”>

<th>컬럼명<th>

<td>데이터<td>

…

<td>데이터<td>

</tr>

<tr>…</tr>

…

<table>

(2) 병합

1. 열병합

colspan=”몇개합칠겨?” : 좌에서 우로 합쳐지고 해당 행에만 적용

1. 행병합

rowspan=”몇줄합칠겨?” : 현재 행과 아래 행들이 합쳐짐

                                내가 맨 아래 행이면? > 치느라 수고

(3) 캡션

<caption> 태그를 사용하면 테이블의 상단에 짧은 설명을 붙일 수 있다.

table 하나당 한 개만 가능

(4) colgroup

뒤에 나오는 컬럼(td태그)에 적용할 스타일을 미리 적용할 수 있게 한다.

(5) thead, tboby, tfoot

행을 묶어서 스타일 지정

하나의 테이블에 하나씩 사용 가능

시각 장애인을 위한 화면 판독기 가능(웹 접근성 보장)

1. HTML의 요소 <p> HI HTML </p> 1 3 2요소의 이름은 일반적으로 소문자로 사용
2. 1 : Opening Tag - 요소의 이름과 <>로 구성 2 : Closing Tag - Opening Tag와 같지만 이름 앞에 /가 있음 3 : Contents : 요소의 내용이며, 단순한 텍스트
3. Nested Elements(중첩 엘리먼트) 요소 안에 다른 요소를 넣는 기법
4. <p> I'm <strong>So</strong> happy</p>
5. 단락 태그(Paragraph Tag) 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분 문단이라고도 함 <p> 태그로 단락 표현서식 태그 <strong>, <b> : 강조(진한글씨), strong이 접근성 높음 <em>, <i> : 글씨 기울이기(이탤릭), em이 접근성 높음 <mark> : 하이라이팅(형광) <del> : 취소선, 텍스트 중간에 가로줄 만들기 <ins> : 텍스트 밑에 줄 긋기 <sup>, <sub> : 위첨자, 아래첨자
6. 문단 제목 태그 <h1> ~ <h6>
7. 링크(link) HTML 링크 : 현재 페이지에서 다른 페이지로 이동하고자 함 하이퍼링크 또는 링크라고 부르며, <a> <a href="경로 또는 외부사이트 주소" target="보여줄 창"> 문자열 또는 이미지 </a>
8. 이미지(img) 웹페이지에서 주고 사용되는 이미지의 종류
   1. JPEG : .JSP, .Jpeg 휴대폰, 카메라 사진
   2. GIF : .gif 움직이는 이미지
   3. PNG : .png 배경을 투명하게 할 때 사용
   <img src="이미지경로" alt="대체문자열">참고) 무료 icon 사이트 : www.iconfinder.com
9. 이미지 경로는 절대경로와 상대경로가 있음 절대경로는 C:/, D:/ 등은 안됨 상대경로는 파일이 위치한 곳에서 ..(한단계위), .(현재위치)
10. 리스트
    1. 순서없는 리스트(UL) : unordered list ul과 li로 구성 <ul> <li>텍스트1</li> <li>텍스트2</li> </un>
    2. 순서있는 리스트 (OL) : ordered list <ol type="타입값" start="시작값"> <li>텍스트1</li> <li>텍스트2</li> </ol>
    3. 타입값 : 1(숫자), A(영대문자), a(영소문자), i(로마숫자), I(로마숫자)
11. imput 사용자로부터 입력받기 위해 사용하는 태그
12. 속성리스트 size : 글상자의 크기 maxlength : 값의 최대 길이 liaceholder : 어떤 값을 넣어야 하는지 안내 readonly : 수정 불가능 value : 미리 설정할 값 required : 필수항목 type text : 텍스트 입력 password : 비밀번호 radio : 하나만 선택가능한 라디오버튼 checkbox : 여러개 선택 가능한 체크박스 file : 파일 전송 color : 색상 email : 이메일 url : http:// 체크 tel : 휴대폰 번호 data : 날짜 number(min="" max"" step="") : 숫자크기를 조절하는 상하버튼 range : 일정 범위 안의 값만 입력 가능 search : 검색어, 우측에 X버튼 생김
13. 버튼의 타입 button : 버튼

type sumit : 데이터를 서버의 form으로 보내는 버튼 reset : 리셋버튼