1. HTML
- hypertext: 문서와 문서가 링크로 이어져 있다
- markup language:
- tag: 시작 태그 - 끝 태그 사이 "컨텐츠"에 특정한 효과를 줄 수 있음
2. Semantic Web (HTML5)
의미가 잘 드러나는 웹
- <ol> 링크 </ol>
- <ul> 본문 </ul>
HTML5 태그:
특정 영역이라는 표시를 알려주는 태그 사용
- <nav> : nav 사이들 사이가 탐색 위한 곳이라는 것을 알려줌
- <header> : 여기가 헤더다
- <article> : 여기가 본문이다
<!DOCTYPE html>
<html>
<head>
<meta charset = ‘utf-8'/>
</head>
<body>
<header>
<h1>드라마로 배우는 중국어</h1>
</header>
<nav>
<ol>
<li>천성장가</li>
<li>포말지하</li>
<li>About us</li>
</ol>
</nav>
<article>
<h2>천성장가</h2>
천성장가는 넷플릭스 드라마이다.
<ul>
<li>니니, 천쿤 주연</li>
<li>출시연도: 2018</li>
</ul>
</article>
</body>
</html>index.html
대문 페이지라는 것이 약속되어 있음
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
</head>
<body>
<header>
<h1>JavaScript</h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/tianshengchangge.html">천성장가</a></li>
<li><a href="http://localhost/paomozhixia.html">포말지하</a></li>
<li><a href="http://localhost/aboutus.html">About us</a></li>
</ol>
</nav>
</body>
</html>
이 메뉴바는 항상 떠야하기 때문에 그래서 다음 링크 페이지에도 항상 추가해줘야함 (page_html)
page_html.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
</head>
<body>
<header>
<h1><a href="http://localhost/index.html">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/tianshengchangge.html">천성장가</a></li>
<li><a href="http://localhost/paomozhixia.html">포말지하</a></li>
<li><a href="http://localhost/aboutus.html">About us</a></li>
</ol>
</nav>
<article>
<h2>천성장가</h2>
주연
<ul>
<li>천쿤</li>
<li>니니</li>
</ul>
</article>
</body>
</html>*링크 연결하기: <a href="링크 주소">링크 이름</a> 해주면 링크랑 연결됨!
3. CSS
디자인 언어, HTML없이는 살 수 없다
<style> 태그 사용
- <style> </style> 사이에 CSS코드가 들어가는 것임
h1: 선택자(selector)
{} : 서술(description)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<style>
h1, h2 {
color:red; //;로 구분, h1 이라는 태그를 가진 것의 색을 붉은 색으로 해라
font-size:10px // 폰트 사이즈를 10픽셀로 해라
}
h2{ //h2만 단독으로 효과 주고 싶을 때
text-decoration:underline;
}
header h1{ // 어디 부분의 뭐만 효과를 주고 싶을 때
border:1px solid red;
}
</style>
</head>
<body>
<header>
<h1>CSS</h1>
</header>
<h2>JavaScript</h2>
<h3>HTML</h3>
<h1>PHP</h1>
</body>
</html>
박스모델
<style>
li {
border:1px red solid;
}
</style>
* 박스 요소:
border: 1px: 굵기 / red: 붉은 색 / solid: 실선 / dotted: 점선 >> 순서는 바뀌어도 상관없음
padding: 패딩 넣기(4면 모두)
margin: 위 아래 요소들이랑 간격이 떨어지게 됨 (4면 모두)
<li id="selected">css</li>
<li id="extra">javascript</li>
//이렇게 지정해두면 이 id를 가진 것에만 특정 스타일 적용 가능
<style>
#selected {
border:1px red solid;
padding:30px;
margin:50px;
}
#extra{
border: blue 1px solid;
</style>
웹브라우저 (ex. 크롬)에서 오른쪽 클릭 > 요소 검사 하면 html 코드랑 해당 코드에 해당하는 곳 표시되도록 개발자도구를 킬 수 있음
-> 일일이 코드 고치고 F4할 필요 없이 구글 개발자 도구로 바꿔가면서 해볼 수 있음
float
웹페이지 레이아웃 디자인 시 중요한 속성
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<style>
img{
border:1px solid red;
float:left;
}
</style>
</head>
</body>
<img src="https://imgnews.pstatic.net/image/108/2021/03/30/0002943434_001_20210330150932080.jpg?type=w647" />
</html>
- <img src="이미지 url" /> 로 이미지를 띄울 수 있고, 이미지의 스타일 설정위해 똑같이 style태그를 이용한다.
- float는 글자가 그림 옆으로 자동으로 올 수 있도록 해주는 것 (float: left/right) -> 이걸 안해주면 그림=한 줄로 설정되어서 못생기게 됨
실제 디자인 하기:
- border-bottom/right: 구분선 만들어주기
- width, height: 그 컨테이너(?)의 크기 지정
- list-style: 리스트의 숫자 등 없애주는 것
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<style>
header{
border-bottom:1px solid gray;
padding: 20px;
}
nav{
border-right: 1px solid gray; //오른쪽에 칸막이
width:200px;
height:600px;
float:left; // 나머지 컨텐츠 오른쪽에 쭉 올 수 있도록
}
nav ol{ // nav 아래 ol에 지정하는 스타일
list-style: none; // 숫자 리스트 없앰
}
article{
float:left; // 컨텐츠 오른쪽에 쭉 뜰 수 있게 해줌
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1><a href="http://localhost/index.html">드라마로 중국어배우기</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/tianshengchangge.html">천성장가</a></li>
<li><a href="http://localhost/paomozhixia.html">포말지하</a></li>
<li><a href="http://localhost/aboutus.html">About us</a></li>
</ol>
</nav>
<article>
<h2>천성장가</h2>
<ul>
<li>주연: 니니, 천쿤</li>
<li>보는 곳: 넷플릭스</li>
</ul>
</article>
</body>
</html>
4. JavaScript & PHP
JavaScript, PHP 두 언어의 사용 예시:
- html과 css는 고정적이지만 javascript를 통해 디자인을 사용자 선택에 따라 바꿀 수 있음.
- php는 css+html에서 css만 추출해서 html이 css파일을 로드할 수 있도록 했듯이, 기본틀을 유지한 채 일부분의 수정을 용이하게 한다.
html위에 javascript와 php가 공존
HTML 태그
<?php /*지금부터 php코드의 시작이라고 php엔진에 알리는 역할*/ ?>
<script> 자바스크립트 코드 </script>
Javascript, PHP 차이
php는 서버에서 해석해서 처리하는 언어, 따라서 서버에서 이미 연산 후에 결과값들을 클라이언트에게 보내준다.
반면에 자바스크립트는 클라이언트 웹브라우저에서 해석 처리되는 언어이므로, 서버에서 코드 그대로 넘겨준다.
연산 차이
자바스크립트는 "문자열"+"문자열"로 문자열 붙여줄 수 있음
php는 "10"+"10"이라고 치면 자동으로 10을 숫자로 계산해서 20을 출력함. 문자열 합치려면 '.' 연산자 사용
디버깅
1) 자바스크립트
크롬에서 메뉴 > 도구 더보기 > 개발자 도구 > Console 하면 에러 내용이 뜬다.
보면 위에 빨간색 엑스표시에 에러 개수 나와있고, 아래 에러 내용과, 에러가 발생한 위치를 표시해주고 있다.
2) PHP
Bitnami > wamp~ > apache2 > logs > error.log 맨 아래쪽에 최근 발생한 에러를 출력한다.
마찬가지로, php error가 발생했으며, 문법 오류라고하고 예상되지 않은 토큰 <이 3.php 파일의 18번째 줄에서 발생했다고 나와있다.
변수의 사용
1) 자바스크립트:
name = "chagawo"
주의) 형 같은 것을 사용하지 않는 다는 것 주의!
2) PHP:
$name = "chagawo"
사용자가 제출한 값 읽기
1) 자바스크립트
입력받기:
pw = prompt("비밀번호");
2) PHP
PHP에서 로그인 앱 만들기
8-1.php에서 바디 안에 이러한 폼을 만들어줌. 그러면 password에 input이 들어감
<form action="8-2.php">
<p>비밀번호를 입력해주세요.</p>
<input type="text" name="password">
<input type="submit">
<!-- 8-2.php?password=입력값으로 연결됨 -->
</form>
8-2 코드에서 $_GET["name"]으로 받아서 사용 가능
<?php
$password = $_GET["password"];
if($password == "1111"){
echo "you may enter";
}else{
echo "get off";
}
?>추가) php 나 javascript의 문자열에 html 태그 넣으면 작동하는 듯
배열
1)자바스크립트
list = new Array"(1, 2, 3);
list[0];2) PHP
$list = array(1, 2, 3);
$list[0];
함수
자바스크립트, PHP
function myFunc(myInput){
// 함수 내용
}
myFunc(6);
//PHP의 경우 변수는 항상 $가 붙으니까 $myInput으로 치환하면 됨
'웹프로그래밍 > 기초' 카테고리의 다른 글
| 7. 라이브러리 (twitter bootstrap) (0) | 2021.06.16 |
|---|---|
| 5. 관계형 데이터베이스 (0) | 2021.06.16 |
| 4. 데이터베이스 (0) | 2021.06.16 |
| 3. PHP 실습 (0) | 2021.06.16 |
| 1. 웹 기초, 개발도구 (0) | 2021.06.16 |