'홈페이지제작/HTML'에 해당되는 글 33건

 

홈페지를 만들기 위해서 필수적으로 알아야할 할

html 명령어입니다. 다는 기억할 수 없다고 하더라고

기능은 어떠한지는 아셔합니다.


<*head*><*/head*> 홈페이지의 머리 부분입니다.
<*title*><*/title*>익스플로러 맨 윗부분에 뜨는 부분입니다.(네이버, 이런식으로)
<*body*><*/body*>홈페이지의 몸통 부분입니다.
<*img src="그림경로"*>이미지 링크 태그입니다.
<*a href="파일주소"*><*/a*> 파일 링크 태그입니다.(다운 가능)
<*iframe*><*/iframe*>iframe을 사용하는 태그입니다.
<*frameset rows/cols"화면을 나눌비율"*><*/frameset*> frame을 사용하는 태그입니다.
<*embed src="음악경로"*> 음악 재생 태그 입니다.
<*b*><*/b*>글씨체를 굵게 해줍니다.
<*i*><*/i*>글씨를 눕게 해줍니다.
<*u*><*/u*>글씨에 밑줄을 긋습니다.
<*font*><*/font*>글씨에 대한 사항을 지정합니다.
- color=글씨색 : 글씨의 색 지정
- size=번호 : 글씨의 크기를 지정합니다.(1~7까지가 있고, 7이 가장 큽니다.)
- face=글씨체 : 글씨의 체를 지정합니다.
<*marque*><*/marque*>글씨에 옆으로 지나가도록 합니다.
<*center*><*/center*>글씨를 가운데 정렬로 합니다.
<*sub*><*/sub*>아래 첨자로 표현합니다.
<*sup*><*/sup*>위 첨자로 표현합니다.
<*pre*><*/pre*>입력한 내용과 형식을 그대로 표현합니다.
<*p*><*/p*> 문단을 띄어줍니다.
<*br*>[enter]키와 동일한 효과입니다.
<*hr*>수평선을 긋습니다.
<*ul type=disc/circle/square*><*/ul*>disc는 ●, circle은 ○, square는 ■로써 무순서 목록앞에 붙음
<*ol start=번호*><*/ol*> 문서에 숫자 순서를 지정한다.
<*caption*><*/caption*>도표 바로 위에 도표의 제목을 지정한다.
<*table*><*/table*>테이블을 만든다.
- <*tr*><*/tr*>도표의 가로줄을 정한다.
- <*td*><*/td*>도표의 새로줄을 정한다.
<*em*><*/em*> 이탤릭체로 표현
<*strong*><*/strong*> 굵은 글자로 표현
<*cite*><*/cite*> 인용문구처럼 표현
<*kbd*><*/kbd*>키보드로 입력받는 것처럼 표현
<*h숫자*><*/h숫자*> 본문에서 제목의 글자를 크게 하기 위해서 사용
- 1~6 1이 가장큼.
<*au*><*/au*>저자의 이름을 표현할때 사용
<*blink*><*/blink*>글씨를 깜빡 거리게 함
<*code*><*/code*>영어 타자체로 표현
<*blockquote*><*/blockquote*>다른 글을 인용할 때 주로 사용하느데, 적당한 왼쪽 여백을 주어서 표현한다.

이 정도의 태그만 알고 계시면 간단한 홈페이지를 만드시는데는 큰 지장이 없다고 봅니다.
만약 더 알고 싶으시다면 인터넷 사이트를 찾아보시구요
사용하실 때에는
* 표시는 제외하셔야 합니다.

태그고 머고 전혀 모르는 님을 위한 기초 전 강좌 임다.
대부분은 아시는 내용이지만, 행여 알짜 초보를 위해
기본적인 내용을 먼저 써 놓습니다.


1. 태그란(Tag)

태그(tag)는 HTML 문에서 쓰이는 일종의 명령언어를 지칭하는
명령문이다.( 영어로 따지면 스펠링 쯤 되겠네욤?? )

예)
1) <html></html>
2) <head></head>
3) <br>
...

 

2. HTML ( Hyper Text Markup Language )

HTML이란 하이퍼 텍스트 마크업 랭귀지의 줄임말로써
태그들로 조합된 하나의 문장이다.
( 영어로 따지면 문장 쯤 되겠네욤?? :; 장문도 있고 단문도 있듯 )
우리가 흔히 인터넷 사이트에서 보여지는 모든 내용들을
HTML로 표현할수 있다.

예)
<html></html>
<head></head>
<!--edt:htmlhead:s-->
<title>야후! 코리아</title>
<link rel="SHORTCUT ICON" href="http://kr.yahoo.com/favicon.ico">
<meta http-equiv="Content-type" content="text/html; charset=euc-kr">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="Wed, 04 Jul 1973 16:00:00 GMT">
<script language=javascript>
<!--
function popWin(url, w, h, t, l) {
var win = null;
win = window.open('','_popup','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width='+w+',height='+h+',top='+t+',left='+l);
if (win == null) return;
win.location.href = url;
}
//-->
</script>
.....

</html>

 

3. 태그의 형식

태그는 태그의 시작과 종료를 알리는 한쌍의 구문으로 이루어진다.
시작은 걍 < > 요거 안에 태그쓰면 시작이구
끝은 </ > 요렇게 하고 태그를 쓰면 끝을 알립니다.

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

html 주석처리는 왜 하는 가?

 

(위에서 보시는 것처럼 1~5까지가  주석처리한 부분입니다.)

그렇다면 주석처리는 왜 하는가 ? 이 질문에 답부터 말씀드리며 나중에 소스를 볼 때 편하게 하기 위해서입니다.

지난 번에 어떻게 작업을 했는지를 알 수 있죠 !!

그래서 "주석처리" 웹일을 하는분들이라면 항상 보셨을거라 생각되는데요. html내에서 아래 처럼 주석처리를 하게됩니다.

<!-- 주석처리 --> 안에 주석처리 라고 되어있는 부분은 브라우저 화면상에서 보여지지 않게 됩니다. 하지만 소스상에는 남아있는거죠.

위에서 말씀드렸다시피 디자인이 수정된경우 나중을 위해서 주석처리를 하시는분들도 있을거고 그냥 싹 지우시는 분들도 있을건데요.

이럴땐 나중을 위해 주석처리를 해두시는게 좋다고 볼수있겠죠? 후에 클라이언트가 이를보고 다시 원래대로 바꿔놔라 했을경우....

 

그러니 주석처리 하는 습관을 꼭 기르시기 바랍니다.

그럼 주석처리 하는 방법을 알았으니 이 주석처리를 또 어떤식으로 활용할수 있는지 다같이 생각해 보자구요.

저희가 홈페이지를 제작하면서 수차례 수정을 합니다. 그리고 유지보수도 하게되죠.

유지보수를 하기앞서 분명 퍼블리싱 가이드를 확인하고 유지보수 하는 분들도 있는 반면, 가이드가 없어 자기만의 스타일로 수정을 하는 분들도 더러 있을 것입니다.

이 과정에서 사이트가 1년이 넘어가고 2년이 넘어가게 되면 분명 소스는 난장판이 될게 뻔할텐데요.

이를 주석처리를 함으로써 좀더 효과적으로 효율적으로 작업을 할수있게 된다면 좋겠죠?

분명 알고계시는 분들도 계실테지만 모르시는 분들을 위해 적어보겠습니다.

<!-- (header) -->

<!-- (lnb) -->

<!-- (contents) -->

<!-- (footer) -->

이렇게 크게 레이아웃을 잡는 머리, left메뉴, 컨텐츠, 바닥글 부분을 주석처리 함으로써 구분을 줌으로써 좀더 보기 쉽게 되었습니다. 그렇죠?

그리고 수정을 하였을때에도 아래처럼

<!-- ( 주석처리_20170512 ) --> 이렇게 날짜를 기입하고놓으면 내가 언제 수정했는지 알수있겠죠?

공동작업시 이처럼 작업해 주시면 유연하게 대처하실 수 있게 되겠습니다.

오늘은 html주석처리를 하면 작업을 효율적으로 할 수있다라는 말로 포스팅을 마칩니다.

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,

[홈페이지제작]을 위한 html5과 css3 예제


html과 css 에 대하여
현재의 웹 페이지 제작 기술들 중에서 가장 큰 화두는 HTML5입니다.
10여년간 꾸준히 사용 되어오던 XHTML+CSS2의 웹페이지 제작기술은 그래픽적인 요소를 표현하기 위해서 이미지를 사용하는 것 외에는 다른 대안이 없었으며 인터렉티브한 요소를 사용하기 위해서는 플래쉬나 다른 ActiveX와 같은 요소를 사용해야 했으며, 무엇보다 표준화 되지 않은 제작기술의 범람으로 크로스 브라우징이라는 당연히 적용되어야 하는 주제를 무척이나 까다로운 이슈로 남겨놓았습니다.
새롭게 등장한 HTML5는 이러한 웹 페이지 제작의 어려움들을 해소하기 위해서 고안되었습니다.
기존에 사용하던 XHTML + CSS2의 표준화된 요소들 위에 더욱 시맨틱해진 태그 요소들과, 그래픽적인 부분을 보완하기 위한 다양한 효과들, 멀티미디어를 HTML 자체에서 지원하기 위한 방법을 제공하는 등 HTML5로 제작된 웹 페이지는 기존의 XHTML 기반의 웹 페이지보다 더욱더 인터렉티브해 집니다.
특히 CSS3에서 추가된 “미디어 쿼리”기능은 한 번의 작업으로 다양한 해상도에 따라 각기 다른 UI 형태를 제공할 수 있도록 하여 PC + 테블릿 + 스마트 폰을 한번에 지원하는 “반응형 웹”이라는 새로운 제작 기법을 탄생 시켰습니다
html5의 간단한 예시블 보도록 하겠습니다.
<!doctype html>:Html을 알리는 태그
<html (lang="ko")>:시작과 끝
<head>:브라우저에게 정보를 주는 태그
<body>: 몸통과 같은 존재(내용)
<meta>: <meta charset="utf-8">
html5에서 한국어뿐만아니라 모든언어를 사용할수있는 문자세트
<div> 전체를 감싸는 요소
<title>
<br>:줄바꿈
<img>,<video>,<audio>
<header>: 머리말
/<nav>: 문서 +사이트 연결 내비게이션 역할
<ul>,<ol>,<li>: 목록 /
<p>:텍스트
<hn>:크기별 제목
<article>:콘텐츠
<aside>:사이드바
<footer>: 저작권표시
<table>,<tr>,<td>,<th>:표
◈<form>,<fieldset>,<legnd>,<label>,<button>,<input> 등: 폼만들기◈
css3의 간단한 예시블 보도록 하겠습니다.
 
<style>, .class , #id : 스타일 정의하고 적용!
font-size,wieght,align,shadow,height,style: 텍스트 꾸미기
color, background(배경)
margin(박스 바깥 여백)/ padding(박스안쪽 바깥 여백)
border(테두리) -radius(둥글게)
transform(웹요소변형)
transition(애니메이션효과),animation(애니메이션)
@media(반응형웹디자인)
 
 
웹문서의 기본적인 스타일을 미리 지정해둔 스타일시트. html로는 웹문서를 다양하게 설계하고 수식하는데 한계가 있기 때문에 이를 보완하기 위해 만들어진 것으로, 문서의 일관성을 유지하고 이용하기 편리하다는 특징이 있다.html이 웹문서의 뼈대를 잡기 위한 도구라면, CSS(스타일시트)는 그 뼈대를 더 예쁘게 꾸미는데 필요한 도구라고 설명할 수 있다.
 
◈ CSS(스타일시트)의 선택자
- 태그 : 선택한 태그가 사용된 모든 내용에 대해 스타일을 적용하는 것 / ex) a 태그의 기본 기능인 파란글씨/밑줄을 없애는 것
- 클래스 : 비슷한 계열의 내용에 같은 스타일을 적용하는 것 / 같은 이름의 클래스가 존재할 수 있음
- 아이디 : 한 '화면'에서 유일한 값으로 특정 범위에만 스타일을 적용하는 것 / 같은 이름의 아이디가 존재할 수 없음
 
 
◈ CSS(스타일시트)의 문법
태그명 { 속성명:값; 속성명2:값2; }
#아이디명 { 속성명:값; 속성명2:값2; } /* 설명을 써주세요 */
.클래스명 { 속성명:값; 속성명2:값2; }
CSS(스타일시트)는 html과 다르게 () 대신 {}중괄호를, = 대신 :(콜론)를 사용하며, 값 뒤에는 반드시;(세미콜론)을 붙여야 한다.
또한 스타일시트에서는 '/* */'를 주석으로 쓰며, /* 와 */ 사이에 내용을 입력하면 된다.
 
2. font 태그(글자)와 관련된 CSS 속성
1) color : 색상값 ; - 글자 색상
2) font-size : 사이즈값 ; - 글자 크기
3) font-family : 폰트명 ; - 글자 폰트(폰트명이 길어 띄어쓰기된 경우 작은따옴표로 묶어줘야 함 / ex) 'time new roman'
4) font-style : (italic/normal) ; - 글자 기울임꼴 지정 / 태그 자체에 글자 기울임꼴이 지정되어 있는 경우가 있어 바꾸기 위한 기능
5) font-weight : (bold/normal) ; - 굵은 글꼴 / 태그 자체에 굵은 글꼴이 지정되어 있는 경우 바꾸기 위한 기능 / ex) th 태그
6) text-align : (left/center/right) ; - 글자의 가로 정렬 / 컨트롤에서 많이 쓰임 / ex) 버튼 위 글씨라서 가운데 정렬이 필요할 때
7) test-decoration : (underline/none) ; - 글자의 밑줄 / ex) a 태그에서 밑줄 지울 때
 
+ 사이즈를 나타내는 단위
절대크기 - pt, mm, cm, inch
상대크기 - px(해상도에 따라 달라짐), %, em
 
CSS(스타일시트)를 적용해볼 예시
◈ 태그에 CSS(스타일시트) 적용하기
<p> 태그에 스타일시트로 속성을 변경한 경우
  
 

 
위의 예시에서 <body> 부분은 전혀 건드리지 않고, p 태그에 스타일시트를 이용해 오렌지색 / 10pt / 기울임꼴 / 가운데 정렬을 속성으로 설정한 결과 아래와 같이 내용의 스타일이 변경되었다.
+ 참고로 스타일시트는 <head><body> 사이에 작성하며 <style> ........ </style>의 형태로 내용을 쓴다
◈ 클래스에 CSS(스타일시트) 적용하기
 
 
클래스에 스타일시트를 적용하는 것이기 때문에 .(점)을 클래스명 앞에 붙인 후 중괄호로 속성을 적용한다.
빨간색 / 20pt / 글자 밑줄을 "testA"라는 클래스에 적용한 예시이며, "testA"클래스를 제외한 나머지 내용에는 직전에 적용한 p태그의 스타일시트가 그대로 남아있음을 알 수 있다.

 

 

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)

 

블로그 이미지

itworldkorea

IT korea가 세상(world)을 변화시킨다.

,