고정 헤더 영역
상세 컨텐츠
본문
오늘은
오늘은 일요일이었습니다
주말임에도 불구하고
또 아직 감기중임에도 불구하고 쉬지 않고
CSS에 대해서 기초적인 공부를 하였습니다
쉴까도 생각했지만
CSS만 끝나면 HTML과 JavaScript를 사용해서
뭔가를 만들어볼 수 있지 않을까 하는 기대감에
조금 열심히 해보았습니다
JavaScript 공부
<<CSS 색상>>
기본적으로 브라우저는 140가지의 색상을 인식한다
모든 색상에 일일이 이름을 붙일 수 없기 때문
-> 그래서 RGB시스템을 사용한다
<RGB 모델>
= 세상 모든 곳에서 활용되고 있다
빛의 여러 색을 섞어서 표현하는 가산 컬러 시스템 중 하나
=> 브라우저의 색상을 빨강, 녹색, 파랑으로 구성
-> 그 채널들의 값은 0에서 255까지이다.
0은 없다는 뜻, 255면 그 색상이 최대치라는 뜻
=> rgb(255,0,0) = 빨강
rgb(0,0,255) = 파랑
rgb(0,0,0) = 검정
rgb(255,255,255) = 하양
=> 이러한 코드를 지겁 생각해 내기 어렵다
-> 그래서 온라인 색 선택기나 컬러 팔레트에서 찾아야 한다
(색 선택기는 컴퓨터에 기본적으로 설치되어 있는 앱이다. 웹에도 있다)
<헥스 컬러 코드>
= 16진법 이용
RBG모델과 동일 기반이지만 16진법으로 표기한다는 차이점이 있다
= 0~9 + A~F까지 6개의 문자를 추가로 사용
여기서 F는 십진법의 15이다 -> 숫자가 아닌 문자로 한 자리에 작성한다
=> 16진법을 사용하는 이유 = 더 짜임새 있는 색상명과 색상 차트를 만들이 위함이다
표기할 수 있는 모든 색상에 숫자를 부여 문자를 사용해 더 짧게 표기
한 자릿수에 더 많은 정보를 담을 수 있기 때문
=> 여섯 자리 숫자가 두개씩 세 쌍을 이룬다 => #ff(빨강)ff(초록)ff(파랑)
-> 범위는 0에서 FF까지가 있다
16진법에서 FF = 255를 의미 -> 결국 표기법일 뿐이다
# 해시기호 = 옥토로프, 파운드 기호 등 으로 불리운다
=> #ffff00 = (255,255,0) = 노랑
#0f5679 = 어두운 청록색
=> RGB 체계를 따르면서도 더 짧게 표시된다
같은 숫자로만 이루어지면 세 개의 16진수만 써도 된다
ex. #ff1133 -> #f13
#cc55ee -> #c5e
* CSS에서의 ;세미콜론 = 매 특성 선언의 끝에 붙는 세미코론;은 필수 사항이다
세미콜론을 빠뜨려도 브라우저에서 경고 창이 뜨지는 않지만
분명 문제가 발생한다
(-> VSChode에서는 에디터가 세미콜론이 필요하다고 알려준다)
=> CSS에게 명령을 내리거나 브라우저가 인식하기 위해서 필요한 것
= 특성 선언을 마치고 다음 특성으로 넘어간다는 뜻
<<CSS 텍스트 속성>>
<텍스트 정렬>
= 요소에 가로 정렬을 설정하려면 텍스트 정렬을 사용한다
페이지 자체에서 요소를 어떻게 정렬할지 조정하는 것은 아니다
= 요소가 표시되는 위치를 정렬하는 게 아니라 요소 내적인 정렬을 의미
텍스트 정렬로 요소 전체를 움직일 순 없다
해당 요소에 대한 내용의 한도 내에서만 작용
=> 문단에 대해서도 마찬가지
각각이 속한 문단 등 콘텐츠 박스 내에서 전부 정렬 가능
<폰트 굵기>
= 선택한 텍스트에서 주어진 부분의 굵기를 조정
여러 키워드와 숫자를 사용한다
= 폰트가 다 굵기 조절이 가능하지는 않다
특정 굵기를 적용할 수 없는 폰트일 경우 브라우저는 가장 비슷한 굵기를 대신 표시한다
->100 ~ 400 = normal ~ 700 = bold ~ 900
<텍스트 데코레이션>
=> 배우려면 오래 걸린다
= 텍스트를 꾸미는 선을 조정
밑줄, 윗줄, 취소선 같은 것들이 있으면 그런 것을 조정하는 것
-> 밑줄 = underline
윗줄 = overline
취소선 = line-though
선 없애기 = none
=> 줄의 색, 모양, 선의 굵기도 조절 가능하다
<줄 간격>
= 텍스트의 줄 간격을 지정하는 것
여러 가지 단위를 사용할 수 있다
-> 그냥 숫자만 넣는 경우 = 요소의 폰트 크기에 적용 -> 기본 값의 배수로 적용된다
=> 텍스트 자체나 그 크기를 조절하는 것이 아니라 간격만 조절한다
=> 텍스트에 하이라이트를 쳐보면 텍스트의 크기를 넘어 줄 높이까지 확장된다
=> 자간도 조절 가능하다 = 텍스트의 글자 사이 간격을 조절하는 것
<폰트 크기>
-> font-size를 입력하고 크기를 설정
* 픽셀(px)
= 가장 흔히 사용되는 절대 단위
=> 최종 결과 크기이기 때문에 절대 단위라고 부른다
다른 요소나 원래 폰트 크기 등의 영향을 받지 않는다면
최소한 내 문서 안에서는 항상 동일하다
=> 디스플레이의 크기나 다른 요소에 따라 픽셀이 다를 수 있지만 그 차이는 아주 작다
<폰트 패밀리>
= 요소의 폰트를 변경할 때 사용된다
* 폰트를 변경하는 작업은 브라우저에 빌트인 된 폰트에 따라 다르다
=> 사용자 지정 폰트를 설치, 삽입하는 방법으로 지원하는 폰트를 늘릴 수 있다
=> 특정한 요소에 이 중 한 폰트를 사용하려 한다면
해당 폰트가 모든 기기에서 지원되지 않을 수 있고
어떤 사용자에게는 다른 폰트로 보일 수 있다는 점을 유의해야 한다
* font stack
= 사용하려는 폰트를 순서대로 적은 목록
=> 백업, 대체 폰트 -> 제네릭 패밀리에서 지정할 수 있다
=> 쉼표로 구분된 목록에 원하는 폰트나 여러 폰트의 이름을 골라서 넣는 것
1순위, 2순위, 3순위 의 식 = 보통 1~정도로 백업을 넣는다
* 사용자 지정 폰트를 사용하게 되면
-> 대부분의 기기에 없지만 꼭 쓰고 싶은 폰트가 있을 때
사용자가 그 폰트에 엑세스할 수 있도록 할 수 있다
= 몇 단계를 거쳐서 사용해야 한다는 의미
CSS
h1 {
text-align: center;
font-weight: normal;
text-decoration: #f78120 underline wavy;
letter-spacing: 10px;
font-size: 100px;
font-family: Arial, Helvetica, sans-serif;
}
a {
text-decoration: none
}
p {
line-height: 2;
}HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Text Properties</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<h1>Cuttlefish</h1>
<hr>
<p>
Cuttlefish or cuttles[2] are marine molluscs of the order Sepiida.
They belong to the class Cephalopoda which also includes squid, octopuses, and nautiluses.
Cuttlefish have a unique internal shell, the cuttlebone, which is used for control of buoyancy.
Cuttlefish have large, W-shaped pupils, eight arms, and two tentacles furnished with denticulated suckers, with which they secure their prey.
They generally range in size from 15 to 25 cm (6 to 10 in), with the largest species, the giant cuttlefish (Sepia apama), reaching 50 cm (20 in) in mantle length and over 10.5 kg (23 lb) in mass.[3]
</p>
<p>
Cuttlefish eat small molluscs, crabs, shrimp, fish, octopus, worms, and other cuttlefish.
Their predators include dolphins, sharks, fish, seals, seabirds, humans, and other cuttlefish.
The typical life expectancy of a cuttlefish is about 1–2 years.
Studies are said to indicate cuttlefish to be among the most intelligent invertebrates.
[4] Cuttlefish also have one of the largest brain-to-body size ratios of all invertebrates.[4]
</p>
<p>
The "cuttle" in cuttlefish comes from the Old English name for the species, cudele,
which may be cognate with the Old Norse koddi (cushion) and the Middle Low German Kudel (rag).
[5] The Greco-Roman world valued the cuttlefish as a source of the unique brown pigment the creature releases from its siphon when it is alarmed.
The word for it in both Greek and Latin, sepia, now refers to the reddish-brown color sepia in English.
</p>
<h2>Range and Habitat</h2>
<hr>
<p>
The family Sepiidae, which contains all cuttlefish, inhabits tropical and temperate ocean waters.
They are mostly shallow-water animals, although they are known to go to depths of about 600 m (2,000 ft).
[11] They have an unusual biogeographic pattern;
they are present along the coasts of East and South Asia, Western Europe, and the Mediterranean, as well as all coasts of Africa and Australia, but are totally absent from the Americas.
By the time the family evolved, ostensibly in the Old World, the North Atlantic possibly had become too cold and deep for these warm-water species to cross.
[12] The common cuttlefish (Sepia officinalis), is found in the Mediterranean, North and Baltic seas, although populations may occur as far south as South Africa.
They are found in sublittoral depths, between the low tide line and the edge of the continental shelf, to about 180 m (600 ft).
[13] The cuttlefish is listed under the Red List category of "least concern" by the IUCN Red List of Threatened Species.
This means that while some over-exploitation of the marine animal has occurred in some regions due to large-scale commercial fishing,
their wide geographic range prevents them from being too threatened. Ocean acidification,
however, caused largely by higher levels of carbon dioxide emitted into the atmosphere, is cited as a potential threat.[14]
</p>
<h3>Cuttlebone</h3>
<p>
Cuttlefish possess an internal structure called the cuttlebone, which is porous and is made of aragonite.
The pores provide it with buoyancy, which the cuttlefish regulates by changing the gas-to-liquid ratio in the chambered cuttlebone via the ventral siphuncle.[23]
Each species' cuttlebone has a distinct shape, size, and pattern of ridges or texture.
The cuttlebone is unique to cuttlefish, and is one of the features that distinguish them from their squid relatives.[24]
</p>
</body>
</html>브라우저 페이지
Coding Test Practice
Description
문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요.
function solution(s) {
return parseInt(s);
}parseInt() 함수 = 첫번째 인수는 문자열을 정수로 변환하고,
두 번째 인수는 변환할 숫자의 기수(진법)를 나타내는데 생략하게 되면 10진법이 적용된다
Description
매개변수로 자연수가 주어졌을 때 , 의 각 자릿수의 합을 반환하는 N함수를 작성하세요 . 예를 들어 N = 123이면 1 + 2 + 3 = 6을 반환합니다.solutionN
function solution(n)
{
var nStr = n.toString();
var answer = 0;
for(var i = 0; i < nStr.length; i++){
answer += parseInt(nStr[i]);
}
return answer;
}
Description
자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다.
function solution(n) {
for(var i = 0; i <= n; i++){
if(n % i == 1)
return i;
}
}
2023. 10. 15 (일)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머 도전기 48일차 (1) | 2023.10.17 |
|---|---|
| 프로그래머 도전기 47일차 (4) | 2023.10.17 |
| 프로그래머 도전기 45일차 (2) | 2023.10.15 |
| 프로그래머 도전기 44일차 (3) | 2023.10.14 |
| 프로그래머 도전기 43일차 (0) | 2023.10.13 |
