3번째지만 사실 벌써부터 어려움이 온다... ㅋㅋㅋㅋ 에휴
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습</title>
<link href="/03.css" rel="stylesheet" />
</head>
<body>
<div class="challenge2">
<h1>HTML Tutorial</h1>
<p class="sub-header">HTML is the standard markup language for Web pages. With HTML you can create your own Website. HTML is easy to learn - You will enjoy it! </p>
<p>
The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. ... HTML elements are the building blocks of HTML pages.
</p>
<h1>CSS Tutorial</h1>
<p class="sub-header">CSS is the language we use to style an HTML document.CSS describes how HTML elements should be displayed.This tutorial will teach you CSS from basic to advanced.</p>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
</p>
</div>
</body>
</html>
html은 이제 대략적으로 익혀가는 과정이다.
css랑 연결하는 부분이 중요함
<link href="css/03.css" rel="stylesheet" />
css
@charset "utf-8";
.challenge2 {
background-color: #fff;
background-image:
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
background-size: 100% 1.2em;
padding-left:10% ;
}
p {
font-style: italic;
font-size: 16px;
font-family: Verdana;
}
P::first-letter {
font-size: 200%;
color: #2980b9;
}
.sub-header {
color: #2980b9;
}
h1 {
color:#9b59b6;
}
h1::before {
content: "Topic: ";
}
h1:first-child {
text-align: center;
}
css
font-style:italic;
= 기울어진 글씨체
font-family
= (글꼴 패밀리를 지정) 기본값을 브라우저 따라 다르다.
first-letter
= 첫번째 글자 강조하는 스타일
::before / ::after
예로
h1::before {
cotent: "Topic : "
}
= h1 글자 앞에 "Topic : " 라고 들어간다.
근데 여기서 문제는
linear-gradient (선형 그라디언트) 과정을 모르겠다 .......
검색해서 찾아보니
linear-gradient {direction, color1, color2, ..., color3}
dirextion: 그라디언트 방향 이라고 적혀있는데 음
모르겠음
일단 선생님께서 올려둔 정답에 복사해서 완성했지만 이부분은 풀리지 않는다....
완성본
어렵구먼 그라디언트. 선 부분은 더 공부해야할듯
그리고 단위 !!!!!
em /deg 모르겠음 ㅎ ㅠㅠ
'코딩 > html, css' 카테고리의 다른 글
| html 기초 (0) | 2022.04.29 |
|---|---|
| html chatper01, 03 (0) | 2022.04.27 |
| [코딩 알려주는 누나] #2 html css display:none; / visibility:hidden; (0) | 2021.12.28 |
| [코딩 알려주는 누나] 강의 #1 html (0) | 2021.12.28 |
| [html, css] form 형식 (회원가입양식) 넣기 #2 (0) | 2021.12.22 |
