https://opentutorials.org/course/3086/18319
박스모델 - 생활코딩
CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항
opentutorials.org
위 같은 모델 : 박스 모델
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
#active {
color:red;
}
.saw {
color:gray;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</body>
</html>
태그 - 화면 전체 / 부분 속성
element - block / inline
- display 속성
- block
- inline
- none : 표시하지 않음.
태그1 {
display : block;
}
태그2 {
display : inline;
}
'공부하기 > CSS' 카테고리의 다른 글
| CSS 연습해보기 - <div> 태그 (0) | 2020.05.10 |
|---|---|
| CSS 그리드 개념 grid (0) | 2020.04.19 |
| CSS 선택자를 알아내는 방법 (selector) (0) | 2020.04.19 |
| CSS 속성을 스스로 알아내기 (0) | 2020.04.19 |
| CSS 소개하기 (0) | 2020.04.19 |
