css문제 풀이
1강.
Change the Color of Text
색 바꾸기.
CatPhotoApp
Use CSS Selectors to Style Elements
style로 css를 스타트
Use a CSS Class to Style an Element
클래스 선언하기.
CatPhotoApp
Style Multiple Elements with a CSS Class
Change the Font Size of an Element
Set the Font Family of an Element
p { font-family: monospace; }
Import a Google Font
font-family: FAMILY_NAME, GENERIC_NAME;
h2{
font-family: Lobster;
}
Specify How Fonts Should Degrade
모든 브라우저에서 쓸 수 있는 기본 폰트들이 있다.
monospace, serif and sans-serif.
만약 브라우저에서 특정 폰트를 못써서 깨지면, 이런 기본폰트로 다운그레이드 시켜서 쓸 수 있다.
lobster폰트를 제거. 그러면 더이상 유효하지 않으므로
h2 {
font-family: Lobster,monospace;
} 기본 폰트 monospace로 교체한다.
Size Your Images
.smaller-image {
width: 100px;
}
Add Borders Around Your Elements
.thick-green-border {
border: 10px solid green;
}
클래스 두 개를 띄어씌기를 하는 것으로 한번에 넣어둠.
Add Rounded Corners with border-radius
이미지 border-radius로다가 이미지 테두리를 둥글게 하기.
.thick-green-border {
border-radius: 10px;
}
Make Circular Images with a border-radius
이미지 완전 둥글게-- 픽셀이 아니라 퍼센트로다가 지정하기.
border-radius: 50%;
Give a Background Color to a div Element
.silver-background {
background-color: silver;
}
Set the id of an Element
form id="cat-photo-form"
Use an id Attribute to Style an Element
#cat-photo-form {
background-color: green;
}
Adjust the Padding of an Element
padding: 20px;
Adjust the Margin of an Element
margin: 20px;
Add a Negative Margin to an Element
요소의 여백을 음의 값으로 설정하면 요소가 더 커집니다.
Add Different Padding to Each Side of an Element
상하좌우에 다른 패딩값을 줄 수 있다.
padding-top: 40px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 40px;
Use Clockwise Notation to Specify the Padding of an Element
저렇게 여러 줄로 쓰는 대신에 한줄로 쓸 수 있다.
top, right, bottom, left 순서로다가.
padding: 40px 20px 20px 40px;
Use Clockwise Notation to Specify the Margin of an Element
마진도 한줄로다가.
margin: 40px 20px 20px 40px;
Use Attribute Selectors to Style Elements
id와 클래스만이 아니라 다른 선택자로도 css 스타일을 지정해 줄수 있다.
type, radio로 지정.
[type='radio'] {
margin: 20px 0px 20px 0px;
}
체크박스 지정.
[type='checkbox'] {
margin: 10px 0px 15px 0px;
}
Understand Absolute versus Relative Units
픽셀 대신에 쓸수 있는 단위.
인치(in)와 밀리미터(mm)
em 또는 rem과 같은 상대적인 단위
em은 요소의 글꼴 크기를 기준
em은 요소의 글꼴 크기를 기준
padding: 1.5em;
Style the HTML Body Element
body {
background-color: black;
}
Inherit Styles from the Body Element
HTML 페이지에 본문 요소가 있고, 본문 요소 또한 CSS로 스타일링할 수 있다는 것을 증명
HTML 요소와 마찬가지로 본문 요소를 스타일링할 수 있으며, 다른 모든 요소는 본문 요소의 스타일을 상속
body{
color: green;
font-family: monospace;
}
Hello World
Prioritize One Style Over Another
중복되는 스타일이 있으면 무엇에 우선권이 있는지에 대해.
.pink-text
{
color: pink;
}
Hello World!
Override Styles in Subsequent CSS
.blue-text{
color: blue;
}
Hello World!
Override Class Declarations by Styling ID Attributes
브라우저는 충돌이 일어나면 맨 마지막에 나온 놈의 말을 따른다.
#orange-text{
color: orange;
}
Hello World!
Override Class Declarations with Inline Styles
스타일 요소 CSS에서 선언된 위치에 상관없이 id 선언이 클래스 선언보다 우선한다
white
그러나 id보다 우선할 수 있는 것은 태그 내부에 적은 인라인 스타일이다.
Override All Other Styles by using Important
인라인 스타일이 스타일 요소의 모든 CSS 선언을 무시한다
CSS를 무효화할 수 있는 마지막 방법이 하나 있다
가장 강력한 방법
!important 키워드를 사용한다.
.pink-text {
color: pink !important;
}
앞에 다 씹고 important한것만 색이 바뀐다.
Use Hex Code for Specific Colors
CSS에서 색을 표현할 수 있는 다른 방법
16진수 코드
십진수와 마찬가지로 기호 0-9는 0에서 9까지의 값을 나타냅니다. 그러면 A, B, C, D, E, F는 10에서 15까지의 값을 나타냅니다. 전체적으로 0에서 F까지는 16 진수로 숫자를 나타낼 수 있으므로 총 16 개의 가능한 값을 얻을 수 있습니다.
https://www.freecodecamp.org/news/hexadecimal-number-system/
CSS에서는 6개의 16진수를 사용하여 색상을 나타낼 수 있으며, 빨간색(R), 녹색(G), 파란색(B) 구성요소에 각각 두 개씩 사용할 수 있습니다. 예를 들어, #000000은 검은색이며 가능한 가장 낮은 값이기도 합니다.
https://www.freecodecamp.org/news/rgb-color-html-and-css-guide/#whatisthergbcolormodel
body {
background-color: #000000;
}
Use Hex Code to Mix Colors
숫자 0은 16진수 코드 중 가장 낮은 숫자이며 색이 완전히 없음을 나타냅니다.
숫자 F는 16진수 코드에서 가장 높은 숫자이며 가능한 최대 밝기를 나타냅니다.
Use Abbreviated Hex Code
많은 사람들은 1,600만 개 이상의 색상의 가능성에 압도당하고 있다고 느낍니다. 그리고 16진법 코드를 기억하는 것은 어렵습니다. 다행히 줄일 수 있어요. 예를 들어, 레드의 16진수 코드 #FF0000은 #F00으로 단축할 수 있습니다. 이 단축 형식은 빨간색은 한 자리, 녹색은 한 자리, 파란색은 한 자리입니다. 이것은 가능한 색상의 총 수를 약 4,000개로 줄인다. 그러나 브라우저는 #FF0000과 #F00을 정확히 같은 색상으로 해석합니다.
Cyan #0FF
Green #0F0
Red #F00
Fuchsia #F0F
Use RGB values to Color Elements
색을 표현하는 다른 방법, 색상 코드가 아니라 rgb값을 쓰는 것.
body {
background-color: rgb(0, 0, 0);
}
Use RGB to Mix Colors
Use CSS Variables to change several elements at once
CSS 변수는 하나의 값만 변경함으로써 많은 CSS 스타일 속성을 한 번에 변경할 수 있는 강력한 방법입니다.
펭귄 클래스에서 검은색 값을 회색으로, 회색 값을 흰색으로, 노란색 값을 주황색으로 변경합니다
--penguin-skin: gray;
--penguin-belly: white;
--penguin-beak: orange;
Create a custom CSS Variable
CSS 변수를 만들려면 앞에 두 개의 하이픈이 있는 이름을 지정하고 다음과 같은 값을 지정
--penguin-skin: gray;
--penguin-skin이라는 변수가 생성되고 회색 값이 할당
Use a custom CSS Variable
변수를 만든 후 지정한 이름을 참조하여 해당 값을 다른 CSS 속성에 할당할 수 있습니다.
background: var(--penguin-skin);
Attach a Fallback value to a CSS Variable
변수를 CSS 속성 값으로 사용할 때 지정된 변수가 잘못된 경우 브라우저가 되돌릴 폴백 값을 첨부할 수 있습니다.
background: var(--penguin-skin, black);
검정이 펭귄 스킨이 잘못됐을 시의 폴백 값이다.
Improve Compatibility with Browser Fallbacks
브라우저 호환성 문제
잠재적인 문제를 방지하기 위해 브라우저의 예비 정보를 제공하는 것이 중요
브라우저가 웹 페이지의 CSS를 구문 분석할 때 웹 브라우저는 인식하지 못하거나 지원하지 않는 속성을 무시
기존 선언 바로 앞에 다른 백그라운드 선언을 추가하여 브라우저 호환성을 개선하고 그 값을 빨간색으로 설정
background: red;
background: var(--red-color);
Inherit CSS Variables
변수를 만들 때 변수를 만드는 선택기 내부에서 변수를 사용할 수 있습니다. 또한 해당 선택자의 하위 항목에서도 사용할 수 있습니다. 이는 일반 속성과 마찬가지로 CSS 변수가 상속되기 때문에 발생합니다
상속을 이용하기 위해 CSS 변수는 종종 :root 요소에 정의된다.
:root은 문서의 루트 요소(일반적으로 html 요소)와 일치하는 유사 클래스 선택기입니다. :root에서 변수를 생성하면 전역적으로 사용할 수 있으며 스타일시트의 다른 선택기에서 액세스할 수 있습니다
:root {
--penguin-belly: pink;
}
Change a variable for a specific area
--penguin-belly: white;
Use a media query to change a variable
@media (max-width: 350px) {
:root {
--penguin-size:200px;
--penguin-skin: black;
}
}
완료!
