📍 SECTION;0
HTML 과 CSS
HTML ; 정보
: 전자출판을 위해 만들어진 언어
CSS ; Cascading Style Sheet
HTML에서 CSS 가 분화될 수 밖에 없었던 이유
1. HTML 이 정보에 전념하게 하기 위해
2. CSS 는 디자인에 훨씬 더 효율적인 문법체계를 가지고 있었기 때문
<!-- 웹페이지에 있는 모든 li 에 폰트 컬러를 붉은 색으로 변경-->
<style>
li{
color:red;
}
</style>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>💁♀️ CSS 를 사용하면...?
1. 이전에 폰트 태그를 사용한 것보다 훨씬 더 정보와 디자인이 엄격하게 분리됨
2. 만든 웹페이지를 해석해 여러가지들을 처리해야하는 프로그램들이 (검색엔진, 스캔리더 등) 필요한 정보를 훨씬 더 잘 가져와서 처리 할 수 있게 됨
CSS 실행방법
1. 인라인(in line)
<!DOCTYPE Html>
<html>
<head>
</head>
<body>
<h1 style="color:red;">Hello, World1</h1>
</body>
</html>2. 내부 스타일
<!DOCTYPE Html>
<html>
<head>
<style>
h2 {
color: blue;
}
</style>
</head>
<body>
<h2>Hello, World2</h2>
</body>
</html>
📍 SECTION;1
선택자(selector)
태그 선택자
태그를 선택하는 선택자
<style>
li {
color: red;
text-decoration:underline;
}
</style>
<body>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> JavaSctipt</li>
</body>
ID 선택자
특정 텍스트에만 적용하기 위한
# 로 사용
딱 한번만 등장해야함
<style>
li {
color: red;
text-decoration:underline;
}
#select_css {
color: blue;
}
</style>
<body>
<ul>
<li> HTML </li>
<li id="select_css"> CSS </li>
<li> JavaSctipt</li>
</body>
Class 선택자
.을 사용해 style
아이디와 달리 여러 번 등장하려면 클래스 속성을 통해 그룹핑
같은 태그명에만 할 필요는 없음 (h1과 li 등 서로 다른 태그 그룹핑 가능)
<style>
li {
color: red;
text-decoration:underline;
}
#select_css {
color: blue;
}
.select_class{
text-decoration: line-through;
}
</style>
<body>
<ul>
<li class="select_class"> HTML </li>
<li id="select_css"> CSS </li>
<li class="select_class"> JavaSctipt</li>
</body>
부모 자식 선택자
선택자 사용시 띄어쓰기를 하면 부모 밑에 있는 자식에 스타일 적용
<style>
ul li {
color: red;
}
#lecture > li {
border: 3px solid lightseagreen;
}
ul, ol {
background-color: bisque;
}
</style>
</head>
<body>
<ul>
<li> HTML </li>
<li> CSS </li>
<li> JavaSctipt</li>
</ul>
<ol id="lecture">
<li> HTML </li>
<li> CSS
<ol>
<li>selector</li>
<li>declaration</li>
</ol>
</li>
<li> JavaSctipt</li>
</ol>
</body>
가상 클래스 선택자
클래스 선택자처럼 동작하지만 클래스 선택자는 아닌 선택자
여러가지 특수한 선택들을 하는 선택자
각각 element 의 상태에 따라 element 를 선택하는 선택자
link: 방문한 적 없는 링크visited: 방문한 적 있는 링크hover: 마우스 롤오버시active: 마우스 클릭시focus: 포커스될 시 (tab키 등)
📍 SECTION;2
상속
어떤 element 에 프로퍼티 값을 줘 효과를 줄 때 그 element 의 하위 element 가 이어받는 성질
CSS 의 여러 속성들이 모든 상속되는 것이 아니라
어떤 속성은 상속되는 것이 유리하다 아니다 여부를 판단해 동작
( ex. 폰트 컬러는 상속되지만, border은 상속되지 않음 )
<style>
html{
color: gray;
}
#select{
color: blue;
}
body{
border: 3px solid pink;
}
</style>
</head>
<body>
<h1>STUDY</h1>
<ul>
<li>HTML</li>
<li id="select">CSS</li>
<li>JavaScript</li>
</ul>
</body>
캐스케이딩
하나의 태그에 중첩해서 CSS가 적용되었을 때 우선순위가 어떻게 될 것인가?
1. style selector
2. id selector
3. class selector
4. tag selector
<style>
li {
color: lightcoral;
}
#idsel {
color: blue;
}
.classsel {
color: green;
}
</style>
</head>
<body>
<ol>
<li>style attribute</li>
<li id="idsel" class="classsel" style="color:powderblue">id selector</li>
<li>class selector</li>
<li>tag selector</li>
</ol>
</body>
!important
어떤 선택자를 쓰던간데 모든 우선순위를 뛰어넘을 수 있는 방법
<style>
li {
color: lightcoral !important;
}
#idsel {
color: blue;
}
.classsel {
color: green;
}
</style>
</head>
<body>
<ol>
<li>style attribute</li>
<li id="idsel" class="classsel" style="color:powderblue">id selector</li>
<li>class selector</li>
<li>tag selector</li>
</ol>
</body>📍 SECTION;3
font-size
폰트 사이즈 단위 : px, em, rem
px -> 지정한 폰트 크기 지정
rem -> 사용자가 브라우저 설정에 따라 폰트 크기 달라짐 ( 페이지의 폰트를 가변적으로 변경할 수 있게 할 때), HTML 태그의 폰트 크기에 비례
font-color
1. 색 지정
2. rgb
(0,0,0) -> black
(256, 256, 256) -> white
3. 16 진수
red -> #FF0000
green -> #00FF00
<!DOCTYPE html>
<head>
<style>
h1 {
color: tomato;
}
h2 {
color: rgb(0, 0, 256);
}
h3 {
color: #00FF00;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<h2>Hello, world!!</h2>
<h3>Hello, world!</h3>
</body>
</html>
정렬; text-align
right -> 오른쪽 정렬
center -> 중앙 정렬
left -> 왼쪽 정렬
justify -> 좌우맞춰 정렬
서체
font-size -> 폰트 크기
font-family -> 폰트 종류 (안되면 다음거 다음거) + 폰트 꾸밈 종류
font-weight -> 폰트 굵기
line-height -> 줄간격
<!DOCTYPE html>
<head>
<style>
p {
font-size: 3rem;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
line-height: 1.5;
}
</style>
</head>
<body>
<p>Hello, world!<br>
Hello, world!</p>
</body>
</html>
