728x90
1. html - css
- 2가지 방법 존재
- 우선권은 html 내부 작성이 가지고 있다.
1. html 내부에 작성
- © 주식회사 느낌 낼수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Home - my first website</title>
<style>
/* put cs/ code in here */
</style>
</head>
<body>
<header>
<h1>The taewan Times</h1>
</header>
<main>
<address>102 Road bunporo</address>
</main>
<footer>© 2022 T.W</footer>
</body>
</html>
2. css file 분리
- <link rel="stylesheet" href="style.css" /> - 분리된 css 연결
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Home - my first website</title>
<link rel="stylesheet" href="chapter3_1styles.css" />
</head>
<body>
<header>
<h1>The taewan Times</h1>
</header>
<main>
<address>102 Road bunporo</address>
</main>
<footer>© 2022 T.W</footer>
</body>
</html>
h1 {
color: rgb(153, 223, 24);
}
2. css
2.1. css 작성
tag { property : value; }property라고 하는 이유
- 이전 포스팅에서 html dom에서 attribute를 property라고 명한다고 했다.
- css는 html file로 부터 만들어지 html dom에 style을 입히는 것으로 property에 value를 넣는게 맞는 말이다.
2.2. css 개념
- property 사용: 절대 스페이스 사용하지않고 -로 표시
- value 설정 : 이때 value는 아무거나 다 가능하지만 property에 맞는 value를 써야 작동
- 마무리 ;
- 구분
- external css: <link rel="stylesheet" href="chapter3_1styles.css" /> this is
- inline css: <style></style>
- 적용
- css는 위에서부터 아래로 읽히고 결국 적용 되는 것은 가장 마지막 코드
- 같은 것을 가리킬 때 가장 밑에 있는 것이 적용된다는 뜻
- inline css가 우선권을 가진다.
- 연습예제
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Home - my first website</title>
<style>
h1 {
color: #d20606;
text-decoration: underline;
font-weight: 700;
font-size: 50px;
font-style: italic;
}
address {
text-align: center;
/* text 중간으로 */
color: tomato;
}
footer {
color: rgb(196, 40, 228);
font-size: large;
}
</style>
</head>
<body>
<header>
<h1>The taewan Times</h1>
</header>
<main>
<address>102 Road bunporo</address>
</main>
<footer>© 2022 T.W</footer>
</body>
</html>
3. block, inline
- html은 2가지 type 으로 구성
- block: div, p tag 같은 경우 box 형태로 옆에 아무것도 두지 않는다.
- inline: span, link, img 등등 div로 쌓여있지 않는다.
- tip
- inline이 몇개 없으므로 span, link, img 등만 외우면 나머진 block이라고 생각하면 된다.
- 차이점
- css 적용시 block에만 적용되는 것들이 존재한다.
- border, height, width 등등 : box에 적용할 수 있는 것들만 사용할 수 있는 property
- 이해
- block은 box에 쌓여있고 inline은 box가 없다고 생각하면 편하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Home - my first website</title>
<style>
div {
height: 150px;
width: 150px;
border-style: dotted;
border-color: black;
}
p,span,a,img {
border-style: dotted;
border-color: black;
}
img,p,span {
/* span은 적용 안됨, img는 자체가 box인거지 block에 들어있는 것이 아니다. */
height: 300px;
width: 200px;
}
</style>
</style>
</head>
<body>
<div></div>
<span>span1</span>
<a href="#">a</a>
<span>span2</span>
<p>p</p>
<span>hello</span>
<img src="img/abc.jpg" />
<span>hello</span>
</body>
</html>
4. display
- display
- property
- default value가 'inline'과 'block' 인 tag의 inline, block 변경 가능
- div inline으로 변경시
- inline 특성상 height와 width가 존재하지 않아서 사라지게 된다.
- 글자를 넣어도 height와 width 없다
- block
- margin, padding, border 3가지 특성
- margin: block 경계면의 바깥 공간
- border: block 경계면
- padding: block 경계면의 내부 공간
- margin, padding, border 3가지 특성
- margin
- body도 block으로 margin을 8px 가진다. (default 값)
- block 마다 margin의 지정 가능
- 예제
- html{} : browser 문서 전체를 의미
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Home - my first website</title>
<style>
html {
background-color: black;
}
/* html은 문서 전체를 의미하는 것임 */
body {
margin-top: 20px;
margin-left: 10px;
margin-right: 5px;
margin-bottom: 10px;
background-color: red;
}
div {
margin-left: 50px;
height: 150px;
width: 150px;
background-color: blue;
}
</style>
</style>
</head>
<body>
<div></div>
</body>
</html>