고정 헤더 영역
상세 컨텐츠
본문
오늘은
오늘은 낮에 잠깐 비가 내렸습니다
비가 오려고 어제 그렇게 피곤했나봅니다
그래도 내일은 주말이니까 오늘 하루의 마무리를 잘 해야겠습니다
학원 수업
구글 웹폰트
1. <link>태그 이용
2. css - @import 방식
css 선택자 - class, id
전체 선택자 - '*'
그룹 선택자 - ','
css 연결 선택자 - 하위선택자(공백문자= ' '), 자식선택자('>'), 형제선택자('+')
속성 선택자 - <태그>[속성=속성값]
가상 선택자 - 지정하기 어려운 웹 요소를 선택할 수 있는 선택자 (':')
box-sizing: border-box
(default 값 = content-box)
테두리, 패딩이 계산 안됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box-sizing 속성</title>
<style>
div {
width: 300px;
height: 150px;
border: 5px solid #f00;
margin: 10px;
display: inline-block;
padding: 10px;
}
.box1 {
box-sizing: content-box;
}
/* 박스크기에 테두리와 패딩이 포함되지 않음 */
.box2 {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
display = 일률적
float = 약간의 독립성
position = 자유롭게 배치 가능
웹 문서 안에 요소들을 자유자재로 배치 가능
left, right(x좌표), top, bottom(y좌표) = 방향 기준에서의 지정 값 만큼 의 위치
-> absolute = 브라우저 기준 배,
relative = 형제 박스 기준 상대위치 배치
* 부모 박스 - relative, 자식 박스 - absolute => 부모 박스 기준 자식 박스 위치 배치
fixed = 브라우저 기준으로 배치함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position: absolute 속성</title>
<style>
div {
width: 100px;
height: 100px;
background: orange;
position: absolute;
/* 브라우저 기준 위치 */
/* left: 100px; top: 50px; */
right: 100px;
bottom: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position-fixed 속성</title>
<style>
#wrap {
width: 1000px;
margin: 0 auto;
}
#content {
width: 500px;
}
#fix {
width: 100px;
height: 160px;
background: url(./images/bg3.png);
/* position: absolute; - 스크롤을 내리면 사라짐*/
position: fixed; /* 스크롤을 내려도 따라다님 */
top: 20px;
right: 20px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="content">
<p>fixed 값을 사용하는 요소 역시 absolute 값을 사용하는 요소처럼
문서 흐름과는 상관없이 좌표로 위치를 결정하지만,
기준이 되는 요소가 부모 요소가 아니라 브라우저 창이 기준이 됩니다
브라우저 창을 스크롤하더라도 계속 고정되어 표시됩니다
</p>
</div>
<div id="fix">
</div>
</div>
</body>
</html>
* <button>태그
- form 데이터를 서버페이지에 전송
= <button type="submit">가입</button>
= <input type="submit" value="가입"
- 자바스크립트 함수와 연동
= <button type="button" onclick="alert('정말로 삭제하시겠습니다>')">
=> alert() 함수 이용
= <a alert="">
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>button태그의 onclick 속성</title>
<script>
function hello(){
alert("안녕하세요!")
}
</script>
</head>
<body>
<!-- alert() = 알림, 경고창 // confirm() = 확인,취소창 -->
<p>
<button type="button" onclick="alert('hello~')">클릭</button>
</p>
<p>
<!-- confirm()사용시 button type 생략 가능 -->
<button onclick="confirm('정말로 삭제하시겠습니까')">삭제</button>
</p>
<p>
<button onclick="window.open('https://www.naver.com')">네이버 바로가기</button>
</p>
<p>
<button onclick="window.open('https://www.naver.com', '네이버', 'width=200, height=300, top=150, left=200')">
네이버 탭</button>
</p>
<p>
<button onclick="hello()">버튼</button>
</p>
</body>
</html>
* z-index 속성
= 요소 쌓는 순서 정하기
z-index 값이 크면 작은 요소보다 위에 쌓인다
z-index 값을 명시하지 않으면 1부터 시작 1씩 커진다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index 속성</title>
<style>
/* z-index 속성은 값이 크면 위로 배치되고, 작으면 아래로 배치됨 */
/* 맨 위로 보낼때는 10 이상의 큰수, 아래에 위치할 때는 -1 이하의 작은수 사용 */
div {
width: 200px;
height: 200px;
position: absolute;
}
.box1 {
background: #f99;
top: 50px;
left: 50px;
z-index: 100;
}
.box2 {
background: #9f9;
top: 100px;
left: 150px;
}
.box3 {
background: #99f;
top: 150px;
left: 100px;
z-index: -100;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
<선택자>
연결 선택자
section p - 하위선택자(모든 p태그)
section > p - 자식선택자(자식 p태그만)
가상 클래스 선택자
:nth-child(n) - 앞에서부터 n번째 자식 요소에 스타일 적용
nth-child(2n) = 부모 아래 자식의 순서
p:nth-of-type(2): p태그 중 2번째 요소
:enabled, :disabled = 요소를 사용할 수 있을 때와 없을 때의 스타일 지정
#container {
width: 960px;
margin: 0 auto;
}
.contents {
width: 400px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
}
/* 모든 자식 요소 중 첫번재 자식 요소 */
/* = :nth-child(1) */
.contents :first-child{
color: blue;
}
/* 모든 자식 요소 중 n번째 자식 요소 들 */
.contents :nth-child(2n+1){
background-color: yellow;
}
.contents :last-child {
background-color: greenyellow;
}
/* p태그 중 2번째 요소 */
.contents p:nth-of-type(2){
color: red;
}
.contents h2:nth-of-type(2){
color: green;
}
가상 선택자
::before, ::after = 내용 앞 뒤에 컨텐츠 추가
CSS 공부
<<flexbox>>
= 요소를 넣고 공간을 추가하고 분할하면서
웹 페이지 공간을 구성하는 데 매우 유용한 속성
* 미디어 쿼리 = 반응형 웹사이트를 만들기 위해 꼭 필요한 핵심 속성
= 화면 크기가 달라지면 레이아웃을 바꾸는 웹 페이지
* flexbox
= 페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 쓰인다
= 하나의 컨테이너 안에서 어떤 요소를 크게 하고 어떤 요소를 작게 할지
요소들 사이에 공간을 얼마나 띄우고 요소들을 각각 어디에 배치할지
요소들 사이의 공간을 균등하게 만들지 말지 등등
=> 다양한 요소를 보기 좋게 배열하면서 레이아웃을 유연하게 조정할 수 있다
* flexbox는 여러 속성으로 구성된다
많으면 8~10개로 구성되고 함께 작동할수도 있다
* flexbox 안에는 축이 두 게 있다 = 본축 + 교차축
=> 본축의 기본 방향 = 왼쪽에서 오른쪽
* 콘텐츠의 정렬 방식은 주축 방향에 따라 달라집니다
<display 속성>
* display: flex
=> 전부 좌-우 정렬 = 기본적인 작용
* flex-direction
=> 컨테이너 안에서 본축 방향을 결정하는 속성 = 컨테이너 안에서 컨텐츠의 방향을 결정
기본값은 flex-direction:row; 이다 = 좌->우 방향
=> flex-direction:row-reverse; = 방향만 반대로 바꾼 것 => 우->좌 방향으로 정렬
=> flex-direction:column; = 상-하 방향으로 세로 정렬
=> flex-direction:column-reverse; = 하-상 방향으로 세로 정렬
=> 컨테이너 높이 설정에 따라 크기가 달라질 수 있다
<justify-content 속성>
=> 주축을 기준으로 요소와 콘텐츠를 어떻게 배치할지 결정하는 속성
* justify-content: flex;
=> 디폴트 값은 flex-start이다
=> justify-content: flex-end; = 주축이 좌에서 우 방향이라면 시작은 왼쪽, 끝은 오른쪽이기 때문에
이 경우에는 오른쪽 정렬이 된다
=> justify-content: center; = 주축을 따라 중앙으로 옮겨진다
* justify-content: space;
=> justify-content: space-between; = 바깥쪽 여백을 다 없애고 요소 사이에 간격을 띄운다
요소 사이에만 빈 곳이 생기고 요소와 컨테이너 사이에는 빈 곳이 없어진다
=> justify-content: space-around; = 요소의 둘레에 똑같은 면적의 여백을 부여
양쪽 끝에 절반씩 여백이 생기기 때문에 전체가 다 균등하진 않다
=> justify-content: space-evenly; = 요소 사이, 요소와 컨테이너 사이에도 동일한 크기의 여백을 주는 방법
Coding Test Practice
Description
0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.
function solution(numbers) {
var answer =0;
var arr = [0,1,2,3,4,5,6,7,8,9]
var result = arr.filter(item => !numbers.includes(item));
for(var i = 0; i < result.length; i++){
answer += result[i];
}
return answer;
}
filter() 메서드를 사용하여 하나의 배열에서 다른 배열의 요소를 필터링하여 제거
Description
정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다.
function solution(arr) {
var answer = [];
var min = Math.min(...arr);
answer = arr.filter((num) => num != min);
return answer.length == 0 ? -1 : answer;
}
Math.min() 함수 사용 최솟값을 찾음
...arr 스프레드 연산자, 전개 연산자를 사용 배열의 요소를 순회
filter() 함수 사용 최솟값을 제외하고 answer에 나머지 정수 저장
최소값이 제거된 answer 배열의 길이가 0이면 -1을, 아니면 그대로 반환하도록 삼항연사자 사용
Description
단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다.
function solution(s) {
var answer = '';
var result = [];
if(s.length % 2 == 0){
result.push(s[s.length/2-1],s[s.length/2])
}
if(s.length % 2 != 0){
result.push(s[(s.length-1) / 2])
}
return answer=result.join('');
}
.pus()를 사용하여 추출한 문자를 배열에 넣고
.join('')을 활용하여 배열을 문자열로 합쳐줌
2023. 11. 03 (금)
'프로그래머가 될거야!' 카테고리의 다른 글
| 프로그래머도전기 64일차 (0) | 2023.11.07 |
|---|---|
| 프로그래머 도전기 63일차 (0) | 2023.11.05 |
| 프로그래머 도전기 61일차 (2) | 2023.11.01 |
| 프로그래머 도전기 60일차 (1) | 2023.10.31 |
| 프로그래머 도전기 59일차 (2) | 2023.10.30 |
