본문 바로가기

♡ 베스트 터치/요즘 상품들

인터넷 홈페이지의 이해 - 4차시(링크와 표 이해) 개인 소장용

반응형

지정하기

 

-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>과목
<li>국어
<li>영어
<li>수학
<li>과학
</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

 

반응형