차례
1. TIL 내용 (CSS, html)
2. 퀴즈 내용 (틀린, 몰랐던, 헷갈렸던 부분 위주로 개념 정리)
// 태그 : <tag>, </tag>
// 요소 : <tag>요소입니다.</tag>
// content : 위의 '요소입니다.' 부분이 컨텐트에 해당.
부모 / 자식 요소의 관계
해당 관계는 상대적이다.
후손(자손, 하위) 요소
자식의 자식 ... 태그 => 자식 이하 요소
요소끼리의 부모/자식, 상위/하위 개념은 CSS 구조 파악할 때 중요하다!!
태그의 종류
class
"별명" 이라 볼 수 있다.
<!DOCTYPE html>
<html lang="en">
<head> <!-- 문서의 정보, 웹페이지에 표시되지 않음 -->
<!-- meta : 정보, 빈 태그 -->
<meta charset="UTF-8" />
<!-- name 속성 : 정보의 종류 / content 속성 : 정보 값 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- title : 웹페이지의 제목, 웹페이지 탭에 출력. -->
<title>Document</title>
<!--<link rel="현재 문서-외부 문서의 관계" href="외부문서위치(경로)"/>-->
<link rel="stylesheet" href="./main.css"/>
<style></style>
</head>
<body> <!-- 문서의 구조, 실제로 출력되는 부분 = 웹페이지에 보이는 부분 -->
<div></div>
<h1></h1>
<section></section>
<ol></ol>
<ul></ul>
<li></li>
</body>
</html>
head 태그
title 태그
link 태그
script 태그
JS 작성
style 태그
<div style="color : red;"></div>
body 태그
img 태그
속성 총 2개, src, alt 속성 필수!!!
선택자 {
속성: 값;
속성: 값;
}
/* 태그 CSS */
body {
margin: 0px;
padding: 0px;
}
/* id CSS */
#id {
margin: 0px;
padding: 0px;
}
/* class CSS */
.class {
margin: 0px;
padding: 0px;
}
.menu-item {
float: left; /* 이런 식으로 사용!*/
padding: 8px 10px;
}
body {
margin: 0px;
padding: 0px;
}
auto : 기본 속성 값
div
css에서 div 태그는 위->아래 = 수직으로 쌓인다.
CSS 작성 순서는 html 구조대로 하는 것이 유지/보수하기 편리하다!!
"A라는 class의 하위 요소에 있는 B 태그에 CSS 적용시켜보자!"
/* B태그는 A 클래스 하위 요소니까 .A 뒤에 띄어쓰기 후 B 작성한다.*/
.클래스이름 태그이름 {
width: 32px;
height: 32px;
}
.A B {
width: 32px;
height: 32px;
}
/* 위/아래 좌/우*/
body {
/* margin이 위/아래 8px, 좌/우 10px 적용됐다. 는 뜻 */
margin: 8px 10px;
}
CSS 부모 / 자식 관계
자식 태그에 여백을 주면 부모 태그도 넓어진다.
=> 부모 태그가 자식 태그를 포함하기 때문
부모 태그에 CSS 적용하면 자식 태그에도 적용된다!
=> "부모에 적용시 자식에도 적용되니 부모에 CSS 적용하자!" 는 별로 좋은 방법이 아니다.
해당 자식 태그에만! 적용되는 CSS라면 해당 태그에 CSS 적용하자!
헷갈렸던 선지
else if는 그 자체로 한 개의 키워드이다. (else if가 한 묶음이다.)
=> X
else if는 그 자체로 한 개의 키워드가 아닌 else, if 각각이 따로따로다.
for문은 특정 조건에서 반복을 그만하는 방식으로 작성하고 while은 조건에 해당하는 변수가 특정 구간만큼 증가하는 방식으로 작성한다.
=> O
틀린 부분
Git Staging Area
작업을 마친 시점의 파일들이 커밋을 준비하고 있는 장소이다.
=> tracked & staged 상태
add 명령어를 통해 파일을 Staging Area에 올릴 수 있다.
JS 식별자 네이밍 규칙
문제 풀면서 몰랐던 내용
(학습하지 않은 부분이라 학습 후에 해당 문제 다시 풀어 볼 계획! 다시 풀어보고 정리해야지)