2023.01.27-3 2일차 CSS
CSS
CSS는 웹페이지를 스타일링하는데 사용되는 언어이다.
1.HTML element가 어떻게 출력되어야하는지 설명하는 코드이다. property:value로 이루어져잇음.
https://www.w3schools.com/cssref/index.php css reference
text-align으로 정렬을 해보자.
<h1 style="color: blue; background-color: yellow; text-align: left;">Lorem, ipsum dolor.</h1>
<h1 style="color: red; background-color: green; text-align: right;">Eligendi, cupiditate placeat!</h1>
<h1 style="color: purple; background-color: cyan; text-align: center;">Pariatur, blanditiis impedit?</h1>
어떤 property와 어떤 attribute와 어떤 element를 작성하면 표시되겠구나를 배웠다.
1. color
color property : 컬러명
<h1 style="color:blue">Lorem, ipsum dolor.</h1>color property : rgb함수 red green blue의 값 조합
<!-- rgb(0, 0, 0) : black -->
<h1 style="color: rgb(0,0,0)">Laboriosam, eaque facere.</h1>
<!-- rgb(255,255,255) : white -->
<h1 style="color: rgb(255,255,255); background-color: rgb(0,0,255);">Quis, perferendis quisquam!</h1>2. CSS HEX Colors
hexadecimal(16진법) #RRGGBB로 나타낸것임.
10진법 : 1자리수 표현하는데 10개 0123456789
2진법 : 2개의숫자로 표현 01
8진법 : 8개의 문자로 표현함 01234567
16진법 : 0123456789abcdef 16개
2진법의 기원 컴퓨터는 전기가 들어왓다 안들어왓다 들어옴1 안들어옴 0으로 표현함.
2진법의 3자리 수(0~7) 을 가지고 표현한것이 8진법임 2진법 3자리를 쉽게읽을라고 만든거임.
16진법은 2진법을 4자리로 표현하고 이것 편하게 읽으려고 만듬
10진법 2진법 8진법 16진법
0 000 0 0
1 001 1 1
2 010 2 2
3 011 3 3
4 100 4 4
5 101 5 5
6 110 6 6
7 111 7 7
8 1000 10 8
9 1001 11 9
10 1010 12 a
11 1011 13 b
12 1100 14 c
13 1101 15 d
14 1110 16 e
15 1111 17 f
16 10000 20 10
2진법1100 0011 -> 16진법 c3
윈도우 기본앱 계산기보면 프로그래머 계산기가 있다.
HEX hexadecimal 16진법
DEC decimal 10진법
OCT octaldecimal 8진법
BIN binary 2진법
rgb(0255, 0255, 0~255)
FF / FF / FF
16진법이 가장 큰수를 2자리로 표현이 가능하다. 256은 3자리임
두자리로만 #RRGGBB 할 수있어서 편해서 사용하는 것임.
rgb(255,0,0) == #FF0000 rgb(0,0,255) == #0000FF
HEX 사용할때 중복되는 6자리는 3자리로 표현가능
<h1 style="color: #AA22CC">#AA22CC</h1>
<h1 style="color: #A2C">#A2C</h1>
코드를 좀 더 줄일 수 있다.
color는 자주 사용하는 코드들이다.
RGBA Value
red green blue Alpha(투명도) 4개값으로 표현함.
rgba(255, 99, 71, 1) 0~1사이 투명도
3. CSS Attribute
<h1 style="color:beige; background-color: chocolate;">Lorem, ipsum dolor.</h1>
했는데 색이랑 배경색이 너무 마음에 들어서 이것을 꼐속 반복하고 싶음
그래서 여러개에 다적음. 그런데 글씨 색을 바꾸고 싶어 그러면 다바꿔야해서 비효율적임.
<h1 style="color:beige; background-color: chocolate;">Aut, suscipit reiciendis!</h1>
<h1 style="color:beige; background-color: chocolate;">Tenetur, rerum eligendi.</h1>
<h1 style="color:beige; background-color: chocolate;">Impedit, illo nesciunt!</h1>
<h1 style="color:beige; background-color: chocolate;">Perspiciatis, sint error?</h1>
-> head에 작성하자 head : 문서의 부가정보
style 요소 : 지정된 요소에 스타일(색, 크기, 위치등)을 적용하기 위해 사용한다.
style요소에 작성된 코드가 곧 css 코드이다.
style attriute와 style element 두가지 방법으로 css를 작성할 수 있다.
property들을 중괄호로 묶고 적용할 것을 묶는다.
<style>
h1 {color:greenyellow; background-color: chocolate;}
</style>구분하기 쉽게 프로퍼티마다 엔터해주자.
<html>
<!-- head : 문서의 부가정보 -->
<head>
<!-- style 요소 : 지정된 요소에 스타일(색, 크기, 위치등)을 적용하기 위해 사용 -->
<!-- style요소에 작성된 코드가 곧 css 코드 -->
<style>
h1 {
color:greenyellow;
background-color: chocolate;
}
</style>
</head>
<!-- body : 출력되는 내용 -->
<body>
<h1>Lorem, ipsum dolor.</h1>
<h1>Aut, suscipit reiciendis!</h1>
<h1>Tenetur, rerum eligendi.</h1>
<h1>Impedit, illo nesciunt!</h1>
<h1>Perspiciatis, sint error?</h1>
</body>
</html>
internal css(내부 css) : style요소에 css 작성
<style>
h1 {
color:greenyellow;
background-color: chocolate;
}
</style>
inline css : systle attribte에 css 코드작성
<h3 style="color: yellow">Lorem, ipsum.</h3>이 스타일이 너무 맘에 들어서 다른 페이지에도 작성하고 싶다.
3번페이지 에잇던걸 가져와서 복사 붙여넣기함 그런데 글씨색을 바꿔달라 3페이지도 바꾸러가야함.
100페이지라면? 100번바꿔야한다.
-> 그런데 여러페이지마다 중복해서 작성하면 또 비효율적임.
04style.css을 만들어서 css파일을 따로 만들자.
css파일에는 css코드만 들어가면된다. html문서 밖에 작성하는css인것임.
external css : 외부 css : css파일에 스타일 코드 작성
h1 {
color:greenyellow;
background-color: chocolate;
}
p{
color:gold;
background-color: cyan;
}
h2{
color:blueviolet;
background-color: burlywood;
}4번파일에는 link element를 작성해주는데 css파일의 링크만 제공해주면 된다.
<head>
<link rel="stylesheet" href="04style.css">
</head><!DOCTYPE html>
<!-- html>head>link^body>h1*2>lorem3^h2*2>lorem3^p*2>lorem -->
<html>
<head>
<link rel="stylesheet" href="04style.css">
</head>
<body>
<h1>Lorem, ipsum dolor.</h1>
<h1>Suscipit, praesentium impedit!</h1>
<h2>Lorem, ipsum dolor.</h2>
<h2>Quisquam, quidem modi?</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, fuga! Voluptatem, officia eaque molestiae quae modi hic voluptate itaque quia perspiciatis aspernatur architecto voluptates dolores, facilis, eos fugiat ex nostrum?</p>
<p>Voluptates tenetur nostrum, beatae vitae eveniet iusto quis molestias voluptatem ratione totam? Atque fugiat, porro aut facilis eos dicta, explicabo nulla ipsum voluptatem vitae corrupti dolores doloremque saepe quaerat. Inventore.</p>
</body>
</html>
제목의 글씨 색을 바꾸고 싶다? -> css파일로 가서 바꾸면 하나를 바꾸면 모든 페이지에 적용 되는 것이다.
***문제풀기***
Set the page's background color to red.
body{
background-color: red;
}하면 body전체의 배경색을 바꿔버릴수도 잇다. body도 element이기때문에 가능하다.
4.CSS Syntax(문법)
css를작성하는 방법(문법)
declaration(property:value로 이루어짐)들을 {}안에 묶여있으니 declaration 블록이다.
이것들을 어디에 사용하느냐를 지정하는것 = selector 선택자
이것들을 한꺼번에 명창하는 것이 rule / ruleset이다.
선택자는 자주 사용, 언급하니 기억해두자.
04style.css에는 3개의 ruleset이 있는 것이다.
5. CSS Selectors(선택자)
선택자
https://www.w3schools.com/cssref/css_selectors.php
종류가 정말 많다. element명으로 한 것임. id로하는것도 class로 하는 것이 잇다.
이것을 조합하는 방법도 있다.
5.1 The CSS Universal Selector
selector "*"는 모든 element를 의미한다.
<style>
* {
color : blue;
}
</style>스타일또한 몇백줄 html도 몇백줄이면 선언이 잘 적용됫는지 눈으로 따라가기가 너무 힘들다. 그래서 개발자도구를 만들어 놓앗음.
각 element에 마우스를 올리면 어떤 element인지 보여줌 클릭하면 sytles탭을 보여주고 어떤 선언들이 적용되어 잇는지를 보여줌.
여기에 조작해서 어떤느낌인지 적용해볼 수도 잇음. 따라가면서 잘적용됫는지 보는게 좋음.
5.2 The CSS Grouping Selector
다같은 내용이 적용되고 있을때 코드의 중복을 줄이기 위해서 선택자를 ","로 연결할 수있다.
h1{
color:blue;
}
h2{
color:blue;
}
p{
color:blue;
}h1, h2, p {
color:blue;
}
h1{
text-decoration: underline;
}그리고 하나만 다른 규칙을 적용하고 싶다면 따로 또 작성해주면된다.
***문제 h1 h2 h3을 텍스트를 오른쪽 정렬 ***
h1, h2, h3 {
text-align: right;
}배우는 중에는 안어려운데 실제 프로젝트에서 하면 오래전에 배우기도하고 마음대로 적용이 안되서 어려움.
검사를 자주 활용하는게 필요하다.
2023.01.27 후기
깃허브
학원-> push -> github -> clone(pull)집컴퓨터
<-pull <-push
등원하기전 push 집에서 pull 공부하고 push 다시등원해서 pull
집에서 등록하고 커밋을 안해서 푸쉬를 안함. 그래서 학원와서 버전업 안되잇음.
꼭 커밋하고 푸쉬까지 하자.
CSS의 문법자체는 어려운 점이 없지만 혼자서 공부했을 때 html코드와 css를 작성하여 탬플릿?자체를 디자인 하는 것이 매우 어렵다는 것을 알게 되었다. 필요한 위치에 적절하게 css를 넣는 것이 어려운 것이다. 이런점은 여러 사이트들을 보거나 클론 코딩을 하면서 달라질 수 있을 것 같다는 생각이 든다. 다 배운 후 간단한 페이지를 보는 방법을 따로 공부해보고자 한다.
또한 주말부터 따로 인강을 통해서 더 공부하고자 한다. 백엔드를 지망하고 있지만 학원의 프로젝트 특성상 모든 것을 해야할 것이다. 그래서 잘 알아 두는 편이 나중에 도움이 될 것 같다.
JAVA만 하다가 HTML과 CSS를 배우고 있는데 JAVA가 얼마나 재밌는 것인지를 실감하고 있는 것 같다. 아직 그냥 화면에 표시하는 것만 배우고 있어서 그런건지는 모르겠지만 JAVA만큼 흥미가 올라오는 느낌이 아닌듯 하다. 후에 프로젝트를 할때 이부분에 좀 능통한 사람과 프로젝트를 진행한다면 수월할 것 같다. 하지만 이부분을 놓을 것은 아니고 좀 더 파보고자 한다.