반응형
https://opentutorials.org/course/3086/18319
박스모델 - 생활코딩
CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항
opentutorials.org
밑줄을 긋고 싶다
일단 2.html에서 해본다
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
#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;
}
</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>h1부분에 border-bottom
margin padding
을 변화시켜서 밑에 줄을 만들었다
줄이 그어져있음!!
다음으로 1.2.3.옆에 줄을 그을 예정
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
#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 : 0px;
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>일단
ol 태그에서 border right width margin padding을 고쳤다
그러니까 옆에 줄이 생김!!
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body {
margin : 0px;
}
#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 : 0px;
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>body {
margin : 0px;
}
을 주니까
줄이 화면 전체 꽉 채우게 된다
다음 시간에 css 설명을 옆으로 옮기는 작업을 하겠다
반응형
'웹 프로그래밍 > CSS' 카테고리의 다른 글
| 생활코딩 css 코드의 재사용 - .css 파일을 만들자 (0) | 2021.07.14 |
|---|---|
| 생활코딩 css 반응형 디자인과 미디어 쿼리 소개 (0) | 2021.07.14 |
| 생활코딩 css 그리드2 그리드 써먹기 (0) | 2021.07.14 |
| 생활코딩 css 그리드 (0) | 2021.07.14 |
| 생활코딩 박스모델 (0) | 2021.07.14 |
| 생활코딩 css 선택자를 스스로 알아내는 방법 (0) | 2021.07.12 |
| 생활코딩 css속성을 스스로 알아내는 방법 (0) | 2021.07.12 |
| 생활코딩 css 혁명적 변화 (0) | 2021.07.12 |