#기억에 남겨둘만한 것만 적는 매우 주관적인 요약!
1. <1-6 자주 쓰이는 CSS 연습하기> - 로그인 페이지 화면구성 중
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
.nav {
width:400px;
margin:auto;
}
.wrap {
width:300px;
height:200px;
text-align:center;
background-image:url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size:cover;
background-position:center;
border-radius:10px;
padding-top:40px;
}
.mytitle {
color:white;
}
.subtitle {
color:white;
}
</style>
</head>
<body>
<div class="nav">
<div class="wrap">
<h1 class="mytitle">로그인 페이지</h1>
<h5 class="subtitle">아이디 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</div>
</body>
</html>1-1) background-img 삽입시 기존 이미지의 크기와 우리가 넣고자하는 html상의 크기가 다른경우가 많기때문에 아래와같이 3줄을 세트로 묶어 쓸 때가 많다
background-image:url("");
background-size:cover;
background-position:center;1-2) 이때 background-size는 default값이 auto이나, 다음과같이 다양하게 수정이 가능하다
background-size: auto | length | cover | contain | initial | inherit
auto : 원본 이미지 크기를 유지 (html에서 지정한 틀의 크기보다 이미지가 클경우 비율 보정없이 잘려나옴, 만약 background-position:center; 마저도 없다면 추측컨데 이미지상 좌표 0,0부터 틀의 크기만큼 보여주는듯)
length : 가로/세로 두가지 값을 요구하며, 한 개 값만을 입력했을 시 이를 가로 값으로 계산 후 세로는 그 비율에 맞춰서 자동으로 조정됨 (원본 대비 백분율로 값을 입력할 수도있음)
cover : 사용자가 설정한 틀 안에 배경요소를 다 채울 수 있도록 이미지를 확대 또는 축소하며 가로/세로 비율을 유지한다 (비율 유지보다 빈공간을 하나의 이미지로 다 채우는데 촛점을 두는듯)
contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소하며 가로/세로 비율을 유지한다, 얼핏 봤을때 cover와 별 차이 없을 것 같지만 틀의 크기가 기준 이미지 비율의 최대치보다 특정부분 더 넓게 잡혀있을 경우 빈 공간을 연속된 이미지로 채워버린다 위의 cover사용 예시와 비교해보면 차이가 확연히 드러남을 알 수 있음
initial : 기본값으로 설정(아직까진 auto와 어떤차이가 있는지 모르겠음... 실제 결과도 auto와 같은형태로 출력)
inherit : 부모 요소의 속성값을 상속받음(부모 요소의 속성값이 별도로 지정되지 않은경우 자동으로 auto/inherit으로 설정되는 듯)
1-3) 화면 상 특정 위치(대개는 중앙)로의 정렬을 위해 margin: auto; 를 쓰는경우 width, height값을 줘야만 기능을 수행할 수 있다. 값 지정이 안되있을 경우 해당 영역이 차지하는 가로/세로축 비율이 입력 여하에 따라 자동으로 0 or 100%로 설정되기때문 (움직일 요소가 없거나 밀어낼 공간이 없음)
2. <1-7 폰트,주석,파일 분리>
style부분은 html 헤더에 넣고 써도 무방하나, 규모가 커지고 코드분량이 많아질 경우 한눈에 확인하기도 어렵고 자칫 지저분해질 수 있으므로 별도의 style.css파일을 만들어 끌어다 쓰게끔 하는게 좋다
<link rel="stylesheet" type="text/css" href="{css파일명}.css">3. <1-9 CSS 꿀팁 한번더 배우기>
3-1) 기본적으로 구성 요소들은 column 방향으로 나열되지만 display: flex; 를 사용하면 row방향으로 영역을 나눠갖게된다(별도의 flex: 지정이없는경우 자동으로 1씩 영역분할) flex-direction: column을 사용한경우와 그렇지 않은 경우의 차이를 보자
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;#이전까지 css작업으로 특정 영역안에 있는 내용물들의 위치를 옮길 경우, 내용물들을 div로 따로 감싸준 후 display:relative, top,left 값 지정등의 방법으로 강제이동(?) 시켰었는데 수업에서 배운내용이 훨씬더 깔끔하고 명확한 정렬방법인 것을 느꼈다
3-2) 버튼의 배경색을 투명하게 바꿔주기 위해 처음에는 opacity값을 조정하는건가...? 와 같은 이상한 생각을 했었는데 background-color: transparent; 를 쓰면 간단히 해결할 수 있었다
3-3) 배경부분의 어두움을 주고싶다면 gradient에서 투명도 부분만을 건드리면 된다. 이외에도 다양한 색감을 조합해서 집어넣고 싶다면 어울리는 색상 팔레트 조합을 찾아주는 https://mycolor.space/ 라던지, 원하는 색상간의 그라디언트를 손쉽게 찾고 코드화해주는https://cssgradient.io/ 를 참조해보면 좋다
# 페이스북에서 지원하는 다양한 이모티콘모음: https://kr.piliapp.com/facebook-symbols/
4. <1-11 Quiz_포스팅박스를 완성하기!>
#뼈대 완성 이후, 기존 요소들의 크기를 max-width, max-height로 지정하고 width,height를 특정 비율(영상에선 95%)로 지정해주면 마치 반응형 웹처럼 동작하게 만들 수 있다
5. <1-12 Javascript맛보기>
1) 스크립트에서 function 작성후, 특정 동작시(혹은 페이지 로딩 직후부터) function을 불러와 동작하게끔 만들어 줄 수 있다(버튼/배경/슬라이드를 눌렀을경우 etc...)
<head>
<script>
function hey() {
alert('안녕!');
}
</script>
</head>
-----------------------------------------
<body>
<button onclick="hey()">영화 기록하기</button>
</body>2. Javascript에서는 a_list에 대해서 값을 추가할때 append가 아닌 a_list.push()를 이용해도 같은 결과를 낸다
3. 기존에 해오던 Python문법과 Javascript문법의 표기방식 차이를 조금씩 더 이해해보자
for (let i = 0; i < mise_list.length; i++) {
if (mise_list[i]['IDEX_MVL'] < 40) {
console.log(mise_list[i]['MSRSTE_NM'])
}
}