1-1 HTML 베이스 코딩
▶HTML의 베이스 태그들과, 속성, 값을 코딩한다.
1-2 CSS문서 모양 코딩 추가
<style> 태그 추가
▶<head>태그안에 <style>태그를 주어 내가 디자인하려는 <body>를 포함한 <body>
내의 태그들에 자신의 개성에 맞추어 스타일 코딩한다.
▶HTML 문서 모양을 꾸미는 방법은 크게 3가지로 다음과 같다.
①스타일시트를 활용
②<head>태그 내에 코딩
③<body>태그 내에 코딩
※ 참고
1)제목 태그 : 제목을 표시하는 태그로 h1~h6까지 사용할 수 있으며 h1이 가장 크다.
<hn>....</hn>
2)본문 태그
<p>...</p> : 단락을 만드는 태그
<br> : 줄 바꾸기
<hr> : 수평선을 긋는 태그
<blockquot>...</blockquote> : 인용문을 넣는 태그
<pre> : 글자, 글꼴, 줄 바꿈을 입력한 그대로 출력하는 태그
3)<style>태그 내의 속성
background-color : 배경색
color : 글자색
margin-left : 왼쪽 여백
margin-right : 오른쪽 여백
text-align : 텍스트 정렬
width : 가로 길이
height : 세로 길이
border : 테두리 선
1-3 자바스크립트 코딩 추가
<script> 태그 추가
▶<head>태그 안에 <style>태그 밑에 <script>태그를 주어 자바스크립트를 활용해
자신이 원하는 구현을 동작시킨다.
▶위 이미지는 사진을 보여주고 숨기는 기능을 구현하기 위한 자바스크립트 코딩이다.
자바스크립트 속성과 값은 나중에 다루기로한다.
※ 자바스크립트 태그는 나중에 다루기로한다.
1-4 HTML이 CSS, 자바스크립과 연동하기위한 코딩 추가
<body>태그 내용입력 + CSS와 자바스크립트 구현을 위한 <body>와 <style>내에 코딩 추가
▶<body>태그 안에 출력하고자 하는 내용을 각자의 개성에 맞게 태그를 주고 입력한다.
▶<body>태그 내에 입력한 태그들중 CSS와 호환이 필요한 <span>은 <style>태그 내에 <span>태그 코
딩을 실시해주고 자바스크립트와 호환이 필요한 <h2>에 자바스크립트와의 연동을 위한 속성과 값을
코딩한다. 그리고 <div>에 대한 코딩을 실시한다. <div>태그는 내가 출력하고자 하는 위치를 <body>
코딩 내에서 선정해 위치시킨다.
※참고
onmouseover, onmousehide
이 두개의 속성중 전자는 마우스를 텍스트에 올려놓을때 입력한 값이 동작한다는 것이고 후자는 마우스를 텍스트에서 벗어났을때 입력한 값이 동작한다는 것이다. 값으로는 "show()", "hide()" 등이 있다.
<span>...</span>
①문서의 인라인 요소로를 그룹화
②시각적으로 변경되지 않으며, 텍스트의 일부 혹은 문서의 일부에 후크를 추가하는 방법 제공
③inline block 영역을 나타냄
<div>...</div>
①HTML 문서에서 부분, 혹은 섹션을 정의
②div 요소는 CSS스타일을 지정하거나 자바스크립트로 특정 작업을 수행하기 위해 다른 HTML요소의 컨테이너로 사용
③div요소는 CSS와 함께 웹 페이지를 레이아웃 할 때 자주 사용
④div 태그는 block 영역을 정의
1-5 최종 코딩자료 이미지
1-6 최종 코딩자료를 크롬 브라우저에 출력한 결과
onmouseout 하였을때
onmouseover하였을 때
'HTML' 카테고리의 다른 글
| HTML / DOM요소는 어떻게 만들어지나 (0) | 2020.12.25 |
|---|---|
| HTML / 스크립트 태그 작성 방법 (0) | 2020.12.25 |
| H4. 미디어 삽입, 웹폼 (0) | 2020.03.06 |
| H3. 표, 하이퍼링크, 앵커, 파일다운로드 링크, 인라인프레임 (0) | 2020.03.05 |
| H2. HTML의 기본 태그 살펴보기! (0) | 2020.03.05 |
