HTML & CSS
HTML
- Hyper Text Markup Language의 약자.
- 홈페이지를 만들 때 사용하는 컴퓨터 언어.
<!doctype html>
<html>
<head></head>
<body></body>
</html>- html 태그
<strong>두껍게</strong>
<u>밑줄</u>
<h1>글씨크기 h1~6</h1>
<h2>글씨크기 h1~6</h2>
<h3>글씨크기 h1~6</h3>
<ol> <!----목차의 부모태그로 ordered list를 뜻함---->
<li><li> <!----목차의 아기태그로 li안에 목차요소 넣기---->
<ol> <!----<ul>은 unordered list로, dot 표현----->
<br>줄바꿈
<p>단락구분</p>
<img src = ".jpg"> <!----------이미지 삽입--------->
<a href = "링크"></a> <!----------링크 삽입----------->
target = "blank" <!---------새탭에서 열림-------->
> # CSS
* 홈페이지를 만들 때 디자인을 담당하는 컴퓨터 언어.- html에 css를 넣는 방법 -> 1) style 태그 사용 & 2) style 속성 사용
<!doctype html>
<meta charset="utf-8">
<html>
<head>
**<style>이안에서 홈페이지를 css코드 활용해 디자인할 수 있음.</style>**
</head>
<body></body>
</html>
ex)<style>
A {
Color:black;
}
</style>
혹은 body에 fontcolor: black라고 지정해주어야함.
- 선택자
- tag, class(.), id(#)
- 중복을 피하기 위해 선택자를 활용, 그룹을 지정할 수 있음.
- 우선순위 tag<class<id 순서.
- class의 값은 여러개 가능, 띄어쓰기로 구분.
- id 값은 오직 한가지만 가능.
- 가장 밑에 있는 명령에 우선순위를 둠.
<head>
.hi {
color:gray;
}
</head>
<body>
<ul>
<li><a href="b.html" class="hi">HTML</a></li>
<li><a href="c.html" class="hi">CSS</a></li>
<li><a href="d.html">JAVA SCRIPT</a></li>
</ul>
</body>-
Block과 inline
- 화면 전체를 쓰는 tag: block level element
- 자기자신의 부피만큼만 쓰는 tag: inline element* div -> block * span -> inline * contents와 테두리 사이 여백 -> padding * 테두리와 테두리 사이 여백 -> margin
개발 기록