△ 링크 색깔 지정하기
-html에 적용
<body link=white vlink=blue alink=yellow bgcolor=black text=#ffcc99> body 안에 있는 것들 </body>
-body 안에 있는 것들은 전부 위 빨간 태그 명령어의 영향을 받는다.
-link=white 는 링크가 걸린 글자를 흰색으로 표시하란 뜻
-vlink(visited link)=blue는 방문 후의 링크색을 파란색으로 표시하란 뜻
-alink=yellow 는 링크를 누르면 순간적으로 나타나는 색을 노란색으로 표시하란 뜻
-bgcolor=black 는 배경색은 검정으로 하란 뜻
-text=#ffcc99 는 글자색을 #ffcc99 색으로 하란 뜻
*ALink(Active Link)는 표시가 잘 안 남.
*body 뒤에 들어가는 추가적 명령어들의 앞뒤 위치는 관계 없으니 아무데나 넣으면 된다.
-css에 적용
-a:link : 방문 전 링크 상태 a:link {color:#000000;}
-a:visited : 방문 후 링크 상태 a:visited {color:#ddd;}
-a:hover : 마우스 오버했을 때 링크 상태 a:visited {color:#black;}
-a:active : 클릭했을 때 링크 상태 a:visited {color:#12dd34;}
*css가 부분적으로 적용하기도 좋고, 차후 수정도 편함.
-링크를 클릭했을 때 새창으로 띄우기
target=_blank 새로운 창으로 보여주기
a 태그에서만 사용 가능.
<a href=img/바보야.png target=_blank>내로라</a>하다 </p>
*이렇게 하면 '내로라'에만 링크가 걸리고 클릭하면 바보야.png 가 새로운 창에서 열린다.
*기본값은 target=_self 인데, 클릭하면 기존 창이 바뀌어버린다.
-리스트 명령어(html)
|
- Unordered List ('점, 흰점, 네모점'등으로 표시) -square circle disc(점) 입력 |
-Ordered List ('1, A, a, I, i'로 표시, 순서 나옴) -타입 뒤에 그냥 기호 입력 |
| -명령어 입력 | -명령어 입력 |
| <ul>먹고 싶은 것 <li>치킨 <li>짜장면 <li>삼겹살 <li>떡볶이 </ul> -<ul type=circle>이런식으로 모양을 정할 수 있음. |
<ol>과목 -<ol type=1>이런식으로 기호를 정할 수 있음. |
| -실행 화면 | -실행 화면 |
| 먹고 싶은 것 ㆍ치킨 ㆍ짜장면 ㆍ삼겹살 ㆍ떡볶이 |
과목 1.국어 2.영어 3.수학 4.과학 |
△ 표 이해하기
-선 관련 명령어
-수평선 긋기
<hr> Horizental Ruler <hr width=350 align=left size=5 noshade color=red>
-선 길이
width=400 (%가 없으면 Pixel) 움직이지 않도록 주로 픽셀로 작업.
-정렬 기능
align=left / center / right (원하는 방향으로 이동)
-선 두께
size=10 (입체적인 텅빈 선이 나옴)
-선 입체감 처리 해제
noshade. 그리고 색 넣기는 칼라
*선은 위아래 구분 용도이지 선 위에 글자를 넣을 수는 없음.
-H Tag (글자 크기)
Heading. Headline. h1~6까지 있음. 얘는 1이 가장 큼. p처럼 고유의 영역을 가짐. (h명령어는 구글링봇이 아주 좋아함)
줄도 바꿈, 글자 크기, 굵기 변화, 위 아래 간격도 벌림.
<h1>사이즈 1 글자 크기</h1>
<h3>사이즈 3 글자 크기</h3>
<h6>사이즈 6 글자 크기</h6>
*구글이나 네이버 등의 포털사이트 들은 이걸(h) 제목으로 서치해가니 매우 중요합니다. 열심히 쓴 글이 제대로 드러나지 않을 수도 있겠죠? ㅜㅜ
-표 만들기 (줄/행 Row. 칸/열 Column)
<table align=center width=200 height=100 border=1 cellspacing=0 cellpadding=0>
-테이블에 들어가는 전체 명령어(cell tag는 tr. td에는 쓸 수 없음, 위처럼 table에만 가능)
<table>
<tr>
<td> 내로라하다
</td>
</tr>
</table>
*1x1 칸 안에 '내로라하다'가 들어감.
*칸)줄)표 크기 순서로 종속되기 때문에 위와 같은 순서로 배치됨.
*css에서는 선의 색, 두께 등 달리 적용이 가능.
<table border=1> border가 들어가야 선이 나타남.
-기본적으로 설정된 선의 여백을 없애려면
cellspacing=0 셀 여백. '0'으로 셀 사이 여백을 없앰.
*원래 기본 여백은 2픽셀로 설정됨.
-표 안에 있는 글자와의 여백 조정
cellpadding=0 전체 여백 제거.
*기본 여백은 2픽셀로 설정됨. 셀 간격이라고 부르기도 함.
*드림위버 같은 프로그램을 사용하다보면 설정이 세밀하지 않아서 명령어(태그)를 알아야 함. 100% 만족하는 사용자는 없으니 자주 사용하는 값은 기억할 것
** cellspacing. cellpadding는 반드시 0으로 설정해서 제거해야 함. 드림위버는 제대로 인식 못 함.
-표 안에 있는 글자 정렬하기
-가로 정렬
top / middle / bottom 위 / 중간 / 아래
-세로 정렬
VAlign=top / middle / bottom
-아래에 실제 적용(가로는 중간 세로는 아래로 설정함)
<td align=middle valgn=bottom>
*테이블은 가로 정렬은 있지만 세로 정렬은 없음.
*각각 종속 관계이므로 테이블 작업 만으로 tr. td도 적용
<table align=center width=200 height=100 border=1 cellspacing=0 cellpadding=0>
-테이블은 중앙 정렬 / 넓이는 200 / 높이는 100
-border=1 선 두께 / cellspacing=0 셀 안쪽 여백 / cellpadding=0 셀과 셀 사이 간격
<tr>
<td align=right valign=bottom>1줄 1칸</td>
</tr>
</table>
*이렇게 하면 1줄 1칸이 만들어짐.
*테이블은 엔터 기능이 있음. <br>값 정도임. <hr>은 줄 바꿈 있음.
<문제> 아래 명령어의 표는 어떤 모양일까요?
<table align=center width=200 height=100 border=1 cellspacing=0 cellpadding=0>
<tr>
<td>영어</td><td>국어</td>
</tr>
<tr>
<td>수학</td><td>과학</td>
</tr>
</table>
정답은
| 영어 | 국어 |
| 수학 | 과학 |
-대충 위처럼 2*2의 표가 화면의 중앙에 위치하고, 200넓이에 100높이로 선두께는 1, 셀 간격과 여백은 0입니다. (화면에 보이는 표는 위 명령어의 넓이가 적용된 건 아님)
-너무 오래전에 정리한 거라 뭔가 이상하다싶으면 진짜 이상한 거지 정보 주시면 감사하겠습니다.^^
-부족한게 너무 많아서 개인소장용이라고 붙였습니다. 나중에 다 완료하고 난 뒤에 재수정해야겠습니다.;;
인터넷 홈페이지의 이해 - 3차시(배경색 바꾸기, 말풍선 넣기) 개인 소장용
'개인 소장용'의 의미는 남이 볼 때 이해하기 힘들 수도 있다는 의미이므로 그럴 땐 도와주시면 감사합니다.^^ 배경색 바꾸기 한 번씩 기분 전환 겸 홈페이지나 블로그의 색깔을 바꾸고 싶다면? 스킨편집으로 가서..
btouch.tistory.com
인터넷 홈페이지의 이해 - 2차시(html. css. 사진 넣기). 개인 소장용
인터넷 홈페이지의 이해 - 2차시(html. css. 사진 넣기) 텍스트만
<-- css에서는 작업할 필요 없음. 과거엔 쓰임. 위 명령어는 전 1차시에 나왔던 것으로. 폰..
btouch.tistory.com
인터넷 홈페이지의 이해 - 1차시(HTML). 개인 소장용
인터넷 홈페이지의 이해 - 1차시(html) 1. 홈페이지를 구성하는 기본 요소는 아래와 같다. html + js + css 기본구조(틀) 동적 시각적 -홈페이지를 알려면 먼저 기본 구조인 html을 익히고, 시각적 구성요소인 css..
btouch.tistory.com
'♡ 베스트 터치 > 요즘 상품들' 카테고리의 다른 글
| 인터넷 홈페이지의 이해 - 5차시(테이블, 아이프레임) 개인소장용 (0) | 2019.10.19 |
|---|---|
| 미니 온풍기 유파 VS 프리미엄 온풍기 대웅. 2년 사용 후기 및 추천 (9) | 2019.10.18 |
| 삼성 클라우드로 대용량 파일 전송 및 공유(7단계)한 후, 모바일과 컴퓨터로 다운 받는 방법 (18) | 2019.10.07 |
| 인터넷 홈페이지의 이해 - 3차시(배경색 바꾸기, 말풍선 넣기) 개인 소장용 (20) | 2019.10.04 |
| 인터넷 홈페이지의 이해 - 2차시(html. css. 사진 넣기). 개인 소장용 (3) | 2019.09.30 |
