웹개발 종합반
1. 1주차
1-2. 웹 브라우저의 원리
서버에서 HTML, CSS, 자바스크립트를 다운받아 클라이언트(브라우저)에서 실행
1. 렌더링 엔진의 HTML 파서, CSS 파서에 의해 HTML, CSS는 파일파싱(Parsing)되어
DOM, CSSOM 트리로 변환되고 렌더 트리로 결합
2. 자바스크립트는 자바스크립트 엔진이 처리
3. 렌더링 엔진의 HTML 파서는 script 태그를 만나면, DOM 생성 프로세스를 중지하고
자바스크립트 코드를 실행하기 위해 자바스크립트 엔진으로 제어 권한을 넘긴다
4. 이처럼 동기(Synchronous)적으로 처리를 하기 때문에 script 태그의 위치에 따라
'DOM 생성이 지연'될 수 있다.
💡 DOM?
문서 객체 모델
컨텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현(tree형태)하여
프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록
API를 제공하는 일종의 인터페이스
1-4. HTML, CSS
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시합니다. 파서가 가장 먼저 만날 문장.
<html> : HTML 문서의 루트(root) 요소를 정의합니다.
<head> : HTML 문서의 메타데이터(metadata)를 정의
<title> : HTML 문서의 제목(title)
<body> : 내용(content)
<h1> ~ <h6> : 제목(heading)
<p> : 단락(paragraph), 줄바꿈
...
💡 메타데이터(metadata)?
HTML 문서에 대한 정보(data), 웹 브라우저에는 표현되지 않는 정보를 의미
<title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현
1-7. CSS 기초
<style> : 해당되는 클래스의 색이나 모양을 바꿈
<head>
<style>
.myh1{
color : red;
}
</style>
</head>
<body>
<h1 class = "myh1"> HelloWorld </h1>
<p><input type = 'text'></p>
</body>1-8. 많이 쓰는 CSS 연습 (1)
h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding 등
<style>
.mystyle {
background-color: green;
width: 300px;
height: 200px;
border-radius: 10px;
color: white;
text-align: center;
padding: 30px 0px 0px 0px; // 요소의 내부 여백
margin: 30px 0px 0px 0px; // 요소의 주변 여백
background-image: url('이미지 주소');
background-position: center;
background-size: cover;
}
</style>
1-9. 많이 쓰는 CSS 연습 (2)
<div>를 이용하여 컨턴츠를 이동시킨다
💡 Division의 약자, 레이아웃을 나누는데 주로 쓴다.
특별한 기능이 없고 가상의 레이아웃을 설계하는데 쓰이며, 주로 CSS와 연동하여 쓴다.
<head>
...
<style>
.mytitle {
...
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>...</h1>
<h5>...</h5>
</div>
</div>
</body>1-10. 구글 폰트 사용하기
1. [fonts.google.com](fonts.google.com)
2. Sellect Regular 400 + 클릭
3. 오른쪽 위 사각형 3개, + 버튼 클릭
4. @import 선택, 아래 2개 붙여넣기<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
*{
font-family: 'Nanum Pen Script', cursive;
}
</style>1-12. 파일분리
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
1-14. CSS 꿀팁 한번 더 배우기
<head>
...
<style>
@import url('구글폰트');
* {
font-family: 구글폰트
}
.mytitle {
width: 100%;
height: 250px;
background-image:
/* 이미지 어둡게 하기, 이미지 url*/
linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('이미지 url');
background-position: center;
background-size: cover;
color: white;
/* 내용물 세로정렬*/
display: flex;
flex-direction: column; /* 가로 => row*/
align-items: center;
justify-content: center;
/* 내용물 세로정렬*/
}
.mytitle>button {
background-color: transparent; /*부모 배경색*/
...
border: 1px solid white;
/* 1px 하얀 실선*/
}
/* 마우스 포커스가 위에 있는 버튼*/
.mytitle>button:hover {
border: 2px solid white;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
</body>1-20. 숙제
https://rnjswo9578.github.io/Week/
백준
2-1 1018. 체스판 다시 칠하기
브루트포스 알고리즘
1. W시작 시 다시 칠해야하는 개수를 판별하는 함수 만들기
2. B시작 시 다시 칠해야하는 개수를 판별하는 함수 만들기
3. 받은 배열을 8X8형태로 함수에 삽입
파이썬에서는 2차원 배열의 arr[0:8][0:8] 불가(1차원만 적용됨)...
사용하려면 numpy를 사용 해야하는데 백준은 지원안함.
--> 8xN, 두번째 배열 원소의 시작점을 받아 함수를 제작
4. 개수들을 저장 ==> 가장 작은 원소를 출력
2-1 1024. 수열의 합
k개의 음이 아닌 정수의 개수: n, n+1, ... n+k-1
N = 수의 합
N = ((n + n + k - 1)k)/2
n = ((2*N)/k - k + 1)/2
L <= k <=100 이기 때문에 100-L번 반복을 돌아서 n을 찾는다.
n >=0 인 정수 float(n).is_integer()을 사용하여 판별
arr에 n, n+1, ... n+k-1을 넣어서 출력
