생활코딩의 강좌를 들으며 하는 공부 기록
생활코딩 감사합니다.
https://opentutorials.org/course/1
WebApp 학습계획
- HTML
- CSS
- JavaScript와 PHP 이론
- DataBase
기본 내용
- CSS는 Cascading Style Sheets의 줄임말이다.
- 정보를 담는 것이 주 목적인 HTML과 달리 CSS는 정보를 꾸미는 역할을 한다.
태그 선택자를 사용해 해당 태그의 색깔, 폰트크기, 밑줄 여부를 바꾸는 법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1,h2 {
color:red;
font-size:10px
}
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>
태그의 id를 이용해 해당 id에 여러 모양의 박스를 만드는 법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#selected {
border:red 1px solid;
padding:30px;
margin:50px;
}
#extra {
border:blue 1px solid;
}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="selected">css</li>
<li id="extra">javascript</li>
</ul>
</body>
</html>
float : right, float : left 등으로 설정해주면 이미지의 위치를 정렬해 layout을 정할 수 있다.
border, width, height, nav ol, padding으로 웹페이지를 꾸미는 법
<!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{
list-style:none;
}
article{
float:left;
padding:20px;
}
</style>
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
heyheyheyheyheyheyhey~~~~~
</article>
</body>
</html>
HTML과 CSS를 분리하는 법
- style.css 파일을 만든다.
- 원본 html 파일에서 style tag 내부 코드를 style.css에 붙인다.
- 원본 html 파일의 style 내부에 <link rel="stylesheet" type="text/css" herf="http://localhost/style.css">를 작성한다.
CSS 코드를 별도의 파일로 분리했을 때의 장점
- 이 방법을 사용하면 같은 디자인의 웹페이지 레이아웃을 한번에 바꿀 수 있다.
- css가 각각 있을 때보다 빠르다.
'Web Application > Frontend' 카테고리의 다른 글
| [ WebApp] 웹앱 만들기 기본편 - JavaScript와 PHP (1) | 2020.07.22 |
|---|---|
| [ WebApp] 웹앱 만들기 기본편 - HTML (0) | 2020.07.22 |