HTML & CSS 기초

728x90

1. HTML 그룹화 섹셔닝

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About | Enlighten Designs</title>
    <!-- 아래는 만약 익스플로러 9보다 낮다면 이 코드를 실행하라는 코드이다 -->
    <!--[if lt IE 9]>      
    <script src="js/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <dl class="skip_nav">
        <dt><strong>skip navigation</strong></dt>
        <dd><a href="#contents">Skip to content</a></dd>
    </dl>
    <hr>
    <div id="wrap">
        <!-- header -->
        <header id="header"><!-- 큰 영역은 id라고 하고, 다소 중요하지 않은 부분은 class라고 한다. -->
            <h1>Enlighten Designs</h1>
            <nav>
                <h2>Main menu</h2>
            </nav>
        </header>    
        <!-- //header -->
        <!-- container -->
        <div id="container">
            <!-- contents -->
            <section id="contents">
                <h2>About</h2>
                <h2>Cntact Us</h2>
            </section>
            <!-- //contents -->
            <!-- aside -->
            <aside id="aside">
                <h2>Aside</h2>
            </aside>
            <!-- //aside -->
 
        </div>
        <!-- //container -->
        <!-- footer -->
        <footer id="footer">
            
        </footer>
        <!-- //footer -->
    </div>
 
</body>
</html>

1) 기본적으로 그룹화 하여 섹셔닝 해야된다.

-그룹화 작업할 때는 div 태그로

- id는 큰 영역을 사용 할때 ( 본문 ) // 특정영역 바로가기 사용

- class는 다소 중요하지 않은 부분을 사용할 때 ( 중복사용 가능 )

2) 섹셔닝 요소

Sectioning, section, article, nav, aside, header, footer

2. List 비순차적 목록, 순차적 목록 [ul, ol, li]

See the Pen ul, ol 차이 by SEIN (@JHEcho) on CodePen.

List 형태의 목록을 만들 수 있다.

- ul 안에 li태그를 이용하여 작성하며 ol 타입을 주지 않을 시 숫자로 표시된다.

3. 정의형 목록 [ dl, dt, dd ]

See the Pen dl, dt, dd 사용법 by SEIN (@JHEcho) on CodePen.

4. Table 태그

1) Table 설명

- 테이블 요소들은 레이아웃이 아닌 도표의 의미가 필요할 때에만 사용하며 테이블 요소들은 table 요소안에 포함한다

- tr은 행, td는 셀을 의미한다

- tr이 먼저 만들어지고, 그 안에 td가 들어가는 방식이다

- 헤더, 제목이 되는 셀은 th 사용하며 colspan 속성은 열 병합하고 rowspan 속성은 행 병합한다

- 셀 병합을 할 경우, 병합된 개수 만큼의 셀은 빼야만 한다.

2) Table caption 요소

caption(캡션) 요소는 표의 제목을 나타내며 이 표의 제목 만으로도 표를 쉽게 이해할 수 있게 작성하는게 좋다.

이 요소는 table 요소의 가장 첫 번째 자식으로 와야 한다. 또한 만약 표가 레이아웃을 잡기 위한 용도가 아니라면 필수로 넣기를 바란다. (표준에는 문제가 없으나, 접근성에 있어서 필수입니다.)

<table border width="100%">
	<caption>table caption</caption>
	<colgroup>
		<col width="30%">
		<col width="10%">
		<col width="35%">
		<col>
	</colgroup>
</table>

3) Table 테그 정리

- caption : 표의 제목을 나타내며, 무조건 table의 첫번째 자식으로 와야함.

- summary : 속성은 시각 장애인, 스크린 리더로 접근하는 분들에게 테이블을 어떻게 접근해야하는 지 안내

- colgroup :요소는 열(수직방향)들을 그룹화

- thead : 요소는 테이블의 제목 그룹화, 한 번만 선언 가능하며, tbody나 tfoot 보다 먼저 위치

- tbody : 요소는 테이블 본문을 그룹화, 여러번 선언 가능함

- tfoot : 요소는 테이블의 하단 요약부분을 그룹화, 한 번만 선언 가능

- scope : 속성은 th가 어느 영역의 제목인지를 명시

* 테이블 요소는 접근성이 어려울 수 밖에 없다. 작성 전 꼭 테이블로 작성에 고민하고, 작성하더라도 복잡하지 않도록 구성해야 한다.

See the Pen Table 요소 정리 by SEIN (@JHEcho) on CodePen.

5. FORM 태그

<form action="#" method="get" target="">
</form>

1) form 요소

action
- 양식 데이터를 처리할 프로그램의 URI.
method
- 양식을 제출할 때 사용할 HTTP 메서드.
  post: POST 메서드. 양식 데이터를 요청 본문으로 전송합니다.
  get: GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송합니다.
  dialog: 양식이 안에 위치한 경우, 제출과 함께 대화 상자를 닫습니다.
target
- 양식 제출의 결과를 표시할 위치를 나타내는 표준 키워드 혹은 사용자 지정 이름. 가능한 값은 브라우징 맥락(탭, 창, <iframe>)의 이름 또는 키워드입니다. 지정한 경우, 버튼의 양식 소유자가 가진 target 특성보다 우선합니다. 다음 키워드는 특별한 뜻을 가지고 있습니다.
- _self: 응답을 현재 브라우징 맥락에 표시합니다. 기본값.
- _blank: 응답을 새로운 브라우징 맥락에 표시합니다. 보통 새 탭이지만, 사용자가 브라우저 설정을 통해 새 창으로 바꿀 수 있습니다.
- _parent: 응답을 현재 브라우징 맥락의 부모에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.
- _top: 응답을 최상단 브라우징 맥락(현재 맥락의 부모면서 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시합니다. 부모가 존재하지 않으면 _self와 동일하게 행동합니다.

2) input type

1. input type = "text" , input type = "password"

이름 : <input type="text" name="my_name" size="20">
비밀번호 : <input type="password" name="my_password" size="20">

<input type="text" name="my_name" size="20" value="수정불가" readonly>

2. input type = "radio"

<input type="radio" name="food" value="치킨" checked>치킨
<input type="radio" name="food" value="피자">피자
<input type="radio" name="food" value="짜장면">짜장면
<input type="radio" name="food" value="짬뽕">짬뽕

3. input type = "checkbox"

<input type="checkbox" name="computer" value="CPU" checked>CPU
<input type="checkbox" name="computer" value="Memory">Memory
<input type="checkbox" name="computer" value="HDD">하드디스크
<input type="checkbox" name="computer" value="CDROM">CDROM
<input type="checkbox" name="computer" value="GRAPIC_CARD">GRAPIC_CARD

4. select option

<table>
    <tr>
	<td colspan="2">
		<h2>가장 재미있는 것을 선택해 주세요.</h2>
	</td>
    </tr>
    <tr>
	<td valgn="top">
		<select name="items1">
			<option value="HTML">HTML</option>
			<option value="자바스크립트">자바스크립트</option>
			<option value="CSS">CSS</option>
		</select>
	</td>
    </tr>
    <tr>
	<td valign="top">
		<select name="items2" size="3">
			<option value="HTML">HTML</option>
			<option value="자바스크립트">자바스크립트</option>
			<option value="CSS">CSS</option>
		</select>
	</td>
    </tr>
</table>

5. input type ="button" ,input type = "submit", input type = "reset"

<input type="button" value="로그인화면">
<input type="submit" value="회원 가입">
<input type="reset" value="다시 입력">

6. input type ="image"

이미지:<input type="image" src="aaa.gif">

7. input type ="file"

파일명:<input type="file" name="fileName">

저작자표시

'HTML & CSS' 카테고리의 다른 글

[CSS] 자주 사용하는 글자 스타일들 (0)	2022.11.09
Vscode 태그 자동 완성 방법 (0)	2021.08.09
Vscode 설치 및 확장 플러그인 (0)	2021.08.04
웹표준 이란? (0)	2021.08.04

Developer

HTML & CSS 기초

1. HTML 그룹화 섹셔닝

1) 기본적으로 그룹화 하여 섹셔닝 해야된다.

2) 섹셔닝 요소

2. List 비순차적 목록, 순차적 목록 [ul, ol, li]

3. 정의형 목록 [ dl, dt, dd ]

4. Table 태그

5. FORM 태그

1) form 요소

2) input type

1. input type = "text" , input type = "password"

2. input type = "radio"

3. input type = "checkbox"

4. select option

5. input type ="button" ,input type = "submit", input type = "reset"

6. input type ="image"

7. input type ="file"

'HTML & CSS' 카테고리의 다른 글

댓글

티스토리툴바

HTML & CSS 기초

1. HTML 그룹화 섹셔닝

1) 기본적으로 그룹화 하여 섹셔닝 해야된다.

2) 섹셔닝 요소

2. List 비순차적 목록, 순차적 목록 [ul, ol, li]

3. 정의형 목록 [ dl, dt, dd ]

4. Table 태그

5. FORM 태그

1) form 요소

2) input type

1. input type = "text" , input type = "password"

2. input type = "radio"

3. input type = "checkbox"

4. select option

5. input type ="button" ,input type = "submit", input type = "reset"

6. input type ="image"

7. input type ="file"

'HTML & CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바