Codecademy front-end engineer course
DAY5
- Learn CSS: Selector and Visual Rules [2) CSS visual rules]
- Getting started with Text Editors
- CSS structure [CSS 구조]
:The entire code must be surrounded by selector
:The property and value are separated by a colon (:). A semicolon (;) should always be used at the end of a declaration.
| property | the property you’d like to style of that element (ex. color, font-family) |
| value | the value of the property (ex. teal, Arial) |
- Font [폰트]
1) Font-family :To change the typeface of text on your web page
2) Font-size: To change the size of text on your web page
3) Font-weight: controls how bold or thin text appears.
h1 {
font-family: "Courier New";
}
p {
font-size: 18px;
font-weight: bold;
}
- Text align [정렬]
: The text-align property will align text to the element that holds it, otherwise known as its parent. (right, left, center)
h1 {
text-align: right;
}
- Color [글씨, 배경 색]
| color | this property styles an element’s foreground color (text color) |
| background-color | this property styles an element’s background color (behind the text) |
h1 {
color: red;
background-color: blue;
}
- Opacity [투명도]
.overlay {
opacity: 0.5;
}
- Background image [배경 이미지]
* To link to an image inside an existing project, you must provide a relative file path. (like ~.jpg)
/*url*/
.main-banner {
background-image: url("https://www.example.com/image.jpg");
}
/*relative path*/
.main-banner {
background-image: url("images/mountains.jpg");
}
- !important
: it will override any style no matter how specific it is.
Once !important is used, it is very hard to override. So it's good to avoid using !important.
- CSS 관련 article
https://developer.mozilla.org/en-US/docs/Web/CSS
CSS: Cascading Style Sheets | MDN
Tutorials Our CSS Learning Area features multiple modules that teach CSS from the ground up — no previous knowledge required. CSS first steps CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, si
developer.mozilla.org
- 다음은 CSS visual rules를 이용해 만든 코드이다.
- Healthy recepie project
img{height: 150px;}
.description{font-size: 20px;}
#cook-time{font-weight: bold;}
.ingredients li {list-style: square;}
p.time{color: gray;}
.external-link{color: SeaGreen;}
h1,h2,p,li{font-family: Helvetica;}
- Project Olivia Woodruff Portfolio
.header{
background-color: CornflowerBlue;
text-align:center;
}
.about-me{
font-size:20px;
opacity:0.5;
}
.title{
font-weight:bold;
}
h1{
color:Azure;
}
body{
font-family:Georgia;
background-image:url("https://content.codecademy.com/courses/learn-css-selectors-visual-rules/hypnotize_bg.png");
}
- How to deal with Visual Studio Code [비주얼 스튜디오 코드 사용법]
1) Debugging
https://code.visualstudio.com/docs/editor/debugging
Debugging in Visual Studio Code
One of the great things in Visual Studio Code is debugging support. Set breakpoints, step-in, inspect variables and more.
code.visualstudio.com
2)Version control
https://code.visualstudio.com/docs/editor/versioncontrol
Version Control in Visual Studio Code
Visual Studio Code source code support with integrated Git support.
code.visualstudio.com
3) Intergrated Terminal
https://code.visualstudio.com/docs/editor/integrated-terminal
Integrated Terminal in Visual Studio Code
Visual Studio Code has an integrated terminal so you can work in the shell of your choice without leaving the editor.
code.visualstudio.com
4) Tutorial about Visual Studio Code
https://code.visualstudio.com/docs/introvideos/basics
Getting started with Visual Studio Code
Download and learn the basics of Visual Studio Code.
code.visualstudio.com
- a strong starting point for your own developer workflow [웹페이지 파일 짜는 법]
- Create a folder structure to support both your workflow and your web page
- Add HTML content and CSS styling to respective files
- Link the HTML and CSS files together
- View your web page in a browser (and refresh the browser to view new changes)
- 나의 자랑스러운 첫 웹페이지 T^T!
* css파일과 image 파일을 linking하는 데 애를 먹었다. 절대 경로 (./)를 친 뒤, 아래 뜨는 폴더를 선택해서 link함.
- 아래는 코드 flow와 코드 전체.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>ET world</title>
<link href="./css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
<!--Banner section-->
<div class="banner">
<h1>ET's landing banner</h1>
<img id="small-et" src="./images/et.png" alt="">
<p>Welcome to ET world I know it's cool.</p>
<button>Subscribe to me</button>
</div>
<!--ET section-->
<div>
<span class="bold" id='et'>ET</span>
<p class="bold">The music sound is weird but charming.</p>
<form action="">
<input type="text"/>
<input type="submit" value="Submit">
</form>
<div>
<ul>
<li>Hey, it's ET again.</li>
<li>Nice to meet U.</li>
<li>Burp.</li>
</ul>
</div>
</div>
</body>
</html>
/*CSS code*/
.banner{
background-color: #4D00FF;
color: white;
margin-top: 75px;
text-align: center;
padding: 100px 0;
}
#small-et{
height: 100px;
width: 100px;
}
#et{
color: #4D00FF;
font-size: 100px;
}
.bold{
font-weight: 900;
}
'Web' 카테고리의 다른 글
| [CSS] 7) 색 표현법, 색 넣기 (#HSLA # RGB) (0) | 2021.01.19 |
|---|---|
| [Front-end] 6) Github로 웹페이지 만들기/Semantic CSS (0) | 2021.01.19 |
| [CSS] 4)CSS 구조/선택자 Selector (0) | 2021.01.17 |
| [HTML] 3)HTML 구조/ Semantic HTML (#HTML tags) (0) | 2021.01.15 |
| [Front-end] 1)Brief info about Front-end web development (0) | 2021.01.10 |
