고정 헤더 영역
상세 컨텐츠
본문
오늘은
오늘은 비도 내리고 감기가 심해져서 컨디션이 좋지 않았습니다
만.. CSS가 너무 궁금해서 쉬엄쉬엄 맛보기를 해보았습니다
CSS 공부
CSS DAY1
CSS를 이용해서 HTML요소 스타일을 정하기 때문에
CSS를 배울대는 HTML이 많이 이용된다
CSS는 HTML의 새로운 요소이다
<<CSS개념>>
= CSS는 스타일을 정하고 시각적으로 보이는 형태를 만든다
페이지에 입력된 HTML 콘텐츠를 시각적으로 표현한 것
=> HTML로 만들기 때문에 HTML이 꼭 필요하다
= CSS는 캐스케이딩 스타일 시트이다
= 프로그램 언어는 아니지만
문서를 시각적으로 표현하고 나타내기 위해서 사용하는 언어라고 할 수 있다
* CSS를 입력하려면 CSS규칙이 필요하다
=
선택자selector {
특성property : 값value;
}
// 기본적인 패턴이자 템플릿->
h1 {
color : purple;
}
// 페이지에 있는 h1요소를 바꾸는 과정 -> h1요소가 보라색으로 바뀜
->
img {
width: 100px;
height: 200px;
}
// 이미지의 너비와 높이 설정
->
input[type"text"]:nth-of-type(2n) {
border:2px solid red;
}
// 모든 텍스트에 설정되도록 입력값을 넣지 않음
// 따라서 입력값 종류는 텍스트 -> 두 번째 텍스트마다 변경되도록 설정됨=> 이렇게 패턴은 모두 동일하고 h1, 사진, 텍스트를 선택해서 입력하면 된다
= 선택자를 입력 -> 특성을 성정 => 스타일이 정해짐
<<CSS담기>>
1. HTML 요소에 직접 스타일 작성
=> 단점이 많다 - 복사하지 않고는 스타일을 공유할 수가 없다
= 유형화하여 동일한 스타일을 지정하고 싶을 때
모두 각각 따로따로 변경해주어야 한다
- 문서 간에 스타일 공유도 되지 않는다
= 다른 페이지나 응용 프로그램에 관한 HTML 문서가 있을 수 있는데
스타일을 통일해야 할 경우 공유가 불가능하다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Intro</title>
</head>
<body>
<h1 style="color:purple">Hello World</h1>
<button style="background-color: palegreen;">I AM BUTTON</button>
</body>
</html>
2. 요소와 중첩되거나 포함되지 않는 스타일 요소 사용
=> 문서 대신 CSS를 직접 작성하는 방법
만약 <h2>를 넣는다면 <head>에 스타일 요소를 추가하거나 CSS를 작성
-> 여러 개의 <h2>를 만들면 모두 같은 스타일을 공유한다
단점 = 내 웹 사이트의 여러 문서나 여러 페이지에
동일한 스타일을 적용하려는 경우 -> 복사해서 각각 붙여 넣어야 한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Intro</title>
<style>
h2 {
color: palevioletred
}
</style>
</head>
<body>
<h2>I am an h2</h2>
<h2>I am an h2</h2>
<h2>I am an h2</h2>
</body>
</html>
3. 외부 스타일 시트에서 스타일을 작성하는 방법
=> CSS작성을 위해 완전히 별개인 새 파일을 만든다
= 파일 확장자는 .css로 끝나야 한다
= 그 파일은 우리 문서나 다른 문서에 포함시킬 수 있다
=> 스타일 규칙을 작성한 후 -> <link>라는 새 요소를 사용하여
HTML 파일에 정보를 알려야 한다
<link>요소는 <head>에 들어간다
= <link> 요소는 <body>에 표시할 내용이 아니기 때문
//형식
<head>
<title> 제목 </title>
<link rel="styleesheet" href="my_styles.css">
</head>
<link>요소를 사용하여 시트알시트를 포함하게 한다
<link>를 쓴 다음 href 속성을 특정해야 한다
= 넣어야 할 스타일시트의 경로나 위치 등
= 이것들은 메타 정보이고 스타일시트 자체이다
= <link> 요소는 <body>에 표시할 내용이 아니기 때문
=> 스타일 시트를 만들 때 이름이 뭐건 .css로 끝나야 한다
그 후 그것을 별도의 문서인 HTML파일에 추가할 때는
<link> 요소를 사용하고 href속서을 지정해야한다
// CSS파일 mystyles.css
h2 {
color: indigo;
}
// HTML 문서에 링크
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Intro</title>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>
<h2>I am an h2</h2>
<h2>I am an h2</h2>
<h2>I am an h2</h2>
</body>
</html>
<<CSS색상 시스템>>
color특성 = 다양한 유형의 값을 허용한다
=> 색상의 이름, 16진수, rgb, hsl, hsla, rgba....
저장 및 표현 방식은 다르지만 모두 텍스트를 사용하여 색상을 표현하는 것
ex. color: #00ff00;
= color 특성은 텍스트 색상을 바꿔준다
배경 색이 아니라 글자색을 바꾼다 = 단순한 텍스트를 말하며 이게 전부이다
background-color 특성 = 선택한 요소, 그 요소들의 배경색을 바꿔준다
= 요소의 색상과 배경색을 모두 설정할 수 있다
* 이런 요소는 컨테이너에서 사용 가능한 공간을 모두 차지한다
텍스트 자체는 작지만 기본값 때문에 모든 배경을 채워버린다
* 엄밀히 말해 background 와 background-color는 다르다
background 특성으로는 많은 것을 할 수 있다
background-color는 색상만을 변경하기 위한 좁은 버전
// HTML문서
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Intro</title>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>
<h2>I am an h2</h2>
<h2>I am an h2</h2>
<h2>I am an h2</h2>
<button>Button 1</button>
<button>Button 2</button>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex optio veniam incidunt omnis voluptates dolorem eaque minus aut nihil? Tempora dignissimos impedit a eveniet laborum adipisci magnam corrupti voluptas eius!
Temporibus nulla modi dolorum odio libero, quis voluptatem explicabo voluptate? Atque fuga, quibusdam possimus dolore qui voluptate delectus beatae aut harum itaque similique labore debitis autem at, voluptatem exercitationem excepturi!
Quisquam consequuntur dicta ducimus, natus enim nisi laboriosam mollitia aliquam placeat pariatur sunt accusantium officia. Earum, inventore? Perferendis dignissimos rem esse dolore autem molestias repudiandae, eligendi dolor eaque ab non?
</p>
</body>
</html>// CSS파일
h2 {
color: indigo;
background-color: plum;
}
button {
color: magenta;
background-color: cyan;
}
p {
color: olive;
}
Coding Test Practice
Description
정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요.
function solution(arr) {
var answer = 0;
for(var i = 0; i < arr.length; i++){
answer += arr[i]
}
return answer / arr.length;
}
Description
정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요.
function solution(n) {
var answer = 0;
var num = [];
for(var i = 0; i <= n; i++){
if(n % i == 0){
answer += i;
}
}
return answer;
}
Description
정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요.
function solution(num) {
return num % 2 == 0 ? "Even" : "Odd";
}
Description
자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다.
function solution(n) {
var num = n.toString().split('').map(Number).reverse();
return num;
}
Description
함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요.
function solution(x, n) {
var answer = [];
var count = 1;
while(answer.length < n){
answer.push(x * count)
count++
}
return answer;
}코딩테스트가 0 레벨에서 1레벨로 넘어갔는데
긴장했던 것보다 기초적인 문제들부터 나와서
워밍업인가보다 하는 생각이 들었습니다
2023. 10. 14 (토)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 47일차 (4) | 2023.10.17 |
|---|---|
| 프로그래머 도전기 46일차 (0) | 2023.10.16 |
| 프로그래머 도전기 44일차 (3) | 2023.10.14 |
| 프로그래머 도전기 43일차 (0) | 2023.10.13 |
| 프로그래머 도전기 42일차 (4) | 2023.10.12 |
