Intro to CSS
CSS, or Cascading Style Sheets, is a language that web developers use to style the HTML content on a web page.
Inline Styles
Although CSS is a different language than HTML, it’s possible to write CSS code directly within HTML code using inline styles.
To style an HTML element, you can add the style attribute directly to the opening tag. After you add the attribute, you can set it equal to the CSS style(s) you’d like applied to that element.
<p style="color: red;">I'm learning to code!</p>
For now, it’s important to know that inline styles are a quick way of directly styling an HTML element.
If you’d like to add more than one style with inline styles, simply keep adding to the style attribute. Make sure to end the styles with a semicolon (;).
<p style="color: red; font-size: 20px;">I'm learning to code!</p>
The <style> Tag
Fortunately, HTML allows you to write CSS code in its own dedicated section with the <style> element.
그래서 index.html 과 별도로 style css가 병행가능
CSS can be written between opening and closing <style> tags.
To use the <style> element, it must be placed inside of the <head> element.
After adding a <style> tag in the head section, you can begin writing CSS code.
The .css file
You can create a CSS file by using the .css file name extension, like so: style.css
이렇게 html 있는 곳에 stlye 넣어서 해줄 수도 있지만,
Developers avoid mixing code by storing HTML and CSS code in separate files
(HTML files contain only HTML code, and CSS files contain only CSS code).
*주의사항*
Make sure to delete the remaining <style> element (now empty) from index.html.
그리고 해보니까 css 있는 곳에는 style elemet 써도 되고, 안써도 되고 그렇당.
질문은 .... 어디가 arial로 바뀐건지 모르겠다.
Linking the CSS File
When HTML and CSS code are in separate files, the files must be linked.
Otherwise, the HTML file won’t be able to locate the CSS code, and the styling will not be applied.
아 :) 위에 질문은 너무나 당연한거였구나 :)
You can use the <link> element to link HTML and CSS files together.
The <link> element must be placed within the head of the HTML file.
It is a self-closing tag and requires the following three attributes:
- href — like the anchor element, the value of this attribute must be the address, or path, to the CSS file.
- type — this attribute describes the type of document that you are linking to (in this case, a CSS file). The value of this attribute should be set to text/css.
- rel — this attribute describes the relationship between the HTML file and the CSS file. Because you are linking to a stylesheet, the value should be set to stylesheet.
Specifying the path to the stylesheet using a URL is one way of linking a stylesheet.
If the CSS file is stored in the same directory as your HTML file, then you can specify a relative path instead of a URL, like so:
그런데 ./ 안써도 되는듯...?
https://nijinliche.tistory.com/17
태그, 엘리먼트...
출처 : https://eproo.tistory.com/86 태그의 뜻과 요소와 속성 그리고 속성값 이란?1 태그의 응용 코딩문자 배우기 지난 시간에 이어서 HTML/CSS 에 기본적으로 많이 쓰이는 태그와 명령어를 가지고 예제를 만들..
nijinliche.tistory.com
이거 참고해서, 아래 보기
Tag Name
CSS can select HTML elements by using an element’s tag name.
A tag name is the word (or character) between HTML angle brackets.
For example, in HTML, the tag for a paragraph element is <p>. The CSS syntax for selecting <p> elements is: p { }
CSS에서는 <p></p> 이렇게가 아니라 -> 태그이름 {}를 사용한다는 뜻
In the example above, all paragraph elements will be selected using a CSS selector. The selector in the example above is p. Note that the CSS selector matches the HTML tag for that element, but without the angle brackets. <> 필요없다~
In addition, two curly braces follow immediately after the selector (an opening and closing brace, respectively). Any CSS properties will go inside of the curly braces to style the selected elements.
Class Name
CSS is not limited to selecting elements by tag name.
HTML elements can have more than just a tag name; 속성태그를 가질 수 있음! they can also have attributes.
One common attribute is the class attribute. It’s also possible to select an element by its class attribute.
CSS에서 꾸며줄 html 불러낼 때 태그를 선택해서 해줬는데,
속성태그인 class를 선택할 수도 있다는 획기적인(?) 말!
속성태그 내의 element를 불러낼 수 있는거구나!
Multiple Classes
If every HTML element had a single class, all the style information for each element would require a new class.
Luckily, it’s possible to add more than one class name to an HTML element’s class attribute.
*아래 차근히*
ID Name
If an HTML element needs to be styled uniquely (no matter what classes are applied to the element),
we can add an ID to the element. To add an ID to an element, the element needs an id attribute:
<h1 id="large-title"> ... </h1>
Then, CSS can select HTML elements by their id attribute. To select an id element, CSS prepends the id name with a hashtag (#).
For instance, if we wanted to select the HTML element in the example above, it would look like this: #large-title { }
html을 보면,
<h1>Top Vacation Spots</h1>에다가 해주고 싶은게 많구나~
css랑 연결지을 수 있는 속성(attribute)태그가 있어서 참 다행이야!
class로 색깔과 대문자로도 만들어도 주고 / id로는 특이하게 꾸며도 주었음!
cf) class는 중복 적용이 가능하지만, id는 하나밖에 안된다고 함
Classes and IDs
CSS classes are meant to be reused over many elements.
By writing CSS classes, you can style elements in a variety of ways by mixing classes on HTML elements.
For instance, imagine a page with two headlines. One headline needs to be bold and blue, and the other needs to be bold and green. Instead of writing separate CSS rules for each headline that repeat each other’s code, it’s better to write a .bold CSS rule, a .green CSS rule, and a .blue CSS rule. Then you can give one headline the bold green classes, and the other the bold blue classes.
While classes are meant to be used many times, an ID is meant to style only one element. As we’ll learn in the next exercise, IDs override the styles of tags and classes. Since IDs override class and tag styles, they should be used sparingly and only on elements that need to always appear the same.
Specificity
tag < class < id
To make styles easy to edit, it’s best to style with a tag selector, if possible. If not, add a class selector. If that is not specific enough, then consider using an ID selector.
Chaining Selectors
h1.special { }
The code above would select only the h1 elements that have a class of special.
If a p element also had a class of special, the rule in the example would not style the paragraph.
-> h1내의 class="special"인것만 css 규칙해주겠다는 것
만약 p class="speical"이 있으면, class는 같지만 h1이 아니니까 탈락탈락~~
Nested Elements
Chaining and Specificity
In the last exercise, instead of selecting all h5 elements, you selected only the h5 elements nested inside the .description elements. This CSS selector was more specific than writing only h5. (당근당근. tag < class < id 였으니까)
Adding more than one tag, class, or ID to a CSS selector increases the specificity of the CSS selector.
Important
There is one thing that is even more specific than IDs:
!important.
It will override any style no matter how specific it is. As a result, it should almost never be used.
Once !important is used, it is very hard to override.
Since !important is used on the p selector’s color attribute, all p elements will appear blue,
even though there is a more specific .main p selector that sets the color attribute to red.
Multiple Selectors
'2020 > css (codecademy)' 카테고리의 다른 글
| CSS Display and Positioning (0) | 2020.04.12 |
|---|---|
| Changing The Box Model (이건 통째로 다시 공부감) (0) | 2020.04.12 |
| The Box Model (0) | 2020.04.12 |
| CSS Visual Rules (0) | 2020.04.11 |