posted by Full-stack Developer 2011. 11. 8. 17:28
시작하기전에
-apache서버를 설치를 해야하는데 구글링해서 무료라서 설치하기 쉬울것이다.
apavhe서버를 (단, windows OS일 경우)설치하면 
C:\Program Files\Apache Software Foundation\Apache2.2\htdocs 에 수정한 html파일을 넣어두면 127.0.0.1로 접근하면 파일리스트가 보일것이다. 
그래서 파일을 실행하여 결과화면을 보면서 개발하면된다.

-크롬 요소검사사용을 추천한다. 위에 자신이 개발한 html코드를 작성하고 우클릭->요소검사를 하면 
html css 등 여러 데이터를 분석하는데 큰 도움이 된다.



1.Web programming
-keyword는 소문자로
-html은 이미지, 텍스트같은 데이터만
-css는 테마, 스타일을 설정
-javascript는 동작, 반응 리엑션을 다룬다.
-php는 DBconnection과같이 DB데이터를 다룬다. 페이지를 만들수도 있다.
-기타 프로그래밍과같이 모듈화를 잘해야 한다.
2.기본구조
<html>
<head>
            </head>
            <body>
            </body>
</html> 

3.keyword
<a> - 링크 
<ul> - 리스트 그룹 (ul안에 li를 넣는다)
<li> - 리스트 아이템 
<img> - 이미지 (img는 img안에 넣을 것이 없어서 <img src="dir/images.jpg"/> 와같은식으로 효기된다.)

4.한글깨짐 문제
-meta데이터 html데이터를 설명하기위한 데이터 charset을 설정해주어야 한글이 안깨진다.
<head>
<meta charset="UTF-8"/>
</head>

5.style 설정
style은 <head> 안에 넣는다 </head>
<head>
<style type="
text/css">
...
</style> 
...
</head>
 
6.예제를 통한 설명
-style에 데이터를 지우면서 차이를 비교하세요. 
-하단에 주석이 없는 깨끗한 예제가 있습니다. 

 
<html>
<head>
<meta charset="UTF-8"/>//한글깨짐 해결해주는 부분

<style type="text/css">//스타일 시작부분
body {//style를 적용할때  적용대상(body) { 식으로 시작한다.
margin: 0;
}

li {//리스트 아이템에 style 적용하는 부분 - 아래와같이 적용을 안할경우 기본브라우저가 자동생성해주는 부분이 있어서 자신의 style에 맞게 설정해주어야 한다.
background-color: none;
list-style-type: none;
padding-bottom: 5px;
border-bottom: 1px solid #e3e3e3;//boder-bottom-width, boder-bottom-style, boder-bottom-color을 한번에 설정해줄수있다. 1px solid #e3e3e3  와같이 설정 데이터 사이에 ,은 안넣어준다.
}
ul{//리스트 그룹에 style 적용
-webkit-padding-start: 0px;
}
div#rt_news{//div중 rt_news에 style을 설정한다는 의미다. 아래 보면 id 지정해준 부분이있다.
만약 div #re_new로 div와 #사이를 띄어줄경우 모든 div안에있는 id가 rt_news인 element의 스타일을 설정한다는 의미다. 
width:218px;
}
</style>

</head>
<body>

<div id="rt_news">//div는 박스 개념으로 보면된다. 대세는 div라고한다. 예전에는 table을 많이 사용했다고함.
<img src="images/sokbo.png" />
<ul>//리스트 그룹
<li id="myLi">//리스트아이템(li)을 ul안에 넣는다.
<a>기사입니다! 첫번째</a>
</li>
<li class="myClass">
<a href="http://codedb.tistory.com">기사 두번째!</a>//a는 링크로 기사 두번째! 와같이 표기되게 바꾸어 클릭하면 href로 설정한 url로 이동한다.
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
</ul>
</div>

</body>
</html>
---------------------예제------------------------
 <html>
<head>
<meta charset="UTF-8"/>

<style type="text/css">
body {
margin: 0;
}

li {
background-color: none;
list-style-type: none;
padding-bottom: 5px;
border-bottom: 1px solid #e3e3e3;
}
ul{
-webkit-padding-start: 0px;
}
div#rt_news{
width:218px;
}
</style>

</head>
<body>

<div id="rt_news">
<img src="images/sokbo.png" />
<ul>
<li id="myLi">
<a>기사입니다! 첫번째</a>
</li>
<li class="myClass">
<a href="http://codedb.tistory.com">기사 두번째!</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
<li>
<a>기사 세번째이여요옹~</a>
</li>
</ul>
</div>

</body>
</html>

'Programming > Web Programming' 카테고리의 다른 글

JavaScript 개요  (0) 2014.06.24
webapp deploy in tomcat 7.0  (0) 2014.04.16
javascript - oop  (0) 2014.03.14
javascipt Date객체 formatting yyyy-MM-dd hh:mm:ss  (0) 2014.01.13
jQuery - jQuery 시작하기  (0) 2011.11.10