지난 2주간 학습하였던 인공지능과 python의 기초적인 부분에 대한 월말고사를 실시함.
(20문항 中 1문항 감점: 머신러닝과 딥러닝에 정확한 개념이 헷갈려 틀림)
본 강의는 CSS에 대한 내용 시작
CSS(cascading style sheet)라는 것은 HTML 태그로 작성한 웬 문서 내용에 디자인으로 옷을 입혀 주는것인데, 웹디자인이나 웹 개발에서 매우 중요하다.
그리고 창을 HTML + CSS로 연동해서 하는 작업이 필요한데(화면분할작업),
view → Layout → Column 2(두가지로 나누어짐)
![(https://images.velog.io/images/yeonsuhong5684/post/a37f1077-862b-4845-bba4-b2597170a54b/image.png)
HTML과는 다른 주석처리 방법 : /, /
cascading → 동일한 속성값을 적용했을때 나중에 것이 우선순위가 높다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 디자인 적용할 태그를 선택 color는 속성 red는 속성값
아래 2가지 방식에는 치명적인 단점이 있다. HTML, css 혼재하면 가독성이 많이 떨어진다.
<style>
h1 {
color: red;
}
</style> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400&display=swap" rel="stylesheet">
<Link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--
<h1 style="background-color: pink;">Hello World</h1>
header는 ul에게 부모 tag,li들 끼리는 형제 관계
<header>
<h1>header h1</h1>
<p>header p</p>
<a href="#">네이버</a>
</header>
<footer>
<h1>footer h1</h1>
<p>footer p</p>
</footer>
<h1>Hello world</h1>
<h2 id="test1">Nice to meet you</h2>
<h3 class="test2">Welcome</h3>
<input type="text" placeholder="이름">
<input type="password" placeholder="비밀번호">
-->
<!-- class 속성값 여러개의 별명을 지어줄수 있다.ID는 하나만 선택하여야 한다. 오로지 한개만 있어야 한다. -->
<!--
<h2 id="color-1">ID 선택자</h2>
<h3 class="bg-1 font-size-1">Class 선택자</h3>
<p class="bg-1">welcome</p>
<h4 id ="color-1"></h4>
-->
<!--
<header id="intro">
<div class="container">
<h2>header h2</h2>
<p>header p</p>
</div>
</header>
<p>Out p</p>
-->
<!-- style속성 > id > class > tag -->
<!--
<h1 style="color: gray;" id="color-2" class="color-1">Hello World</h1>
-->
<!--
<header id="intro">
<div class ="container">
<h1>header h1</h1>
</div>
</header>
-->
<!--
<div>
<h1>Nice</h1>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
</ul>
</div>
-->
<div id="bg"></div>
<!-- 정보를 가지고 있는 이미지는 img를 써야 한다.
<img src="icon.png"
width="100px" height="50px" alt="네이버로고"
>
-->
</body>
</html>
** ## CSS 창
**
Style은 ID보다 우선순위가 ↑
Border: solid 10px red;
선의 종류 선의 굵기 선의 색깔
색상변경 방법 3가지 : 1. #eaeaea;
2. rgb(123, 111, 21)
3. red
font-famaily → 3개의 폰트 관련된 값을 지정
font-family: Arial, Times, sans-serif
앞에 것이 먼저 적용된다.
*sans-serif 같은 경우 모든 브라우저에서 사용가능.
/*
h1 {
font-size: 80px;
}
header{
color: red;
}
header h1,
footer h1
{color: blue;
}
header p,
footer p
{
color: green;
}
footer h1 {
color: blue;
}
footer p {
color: green;
}
h1 {
color: red;
}
#test1 {
color: blue;
}
.test2{
color: green;
}
input[type="text"]{
border:solid 10px red;
}
input[type="password"]{
border:solid 10px blue;
}
}
.bg-1{
background-color: red;
}
.font-size-1 {
font-size: 50px;
}
#color-1{
color: red;
}
#font-style-1{
font-style: italic;
}
#intro h2{
color: red;
}
#intro .container p{
color: blue;
}
#color-2{
color: pink;
}
.color-1{
color: green;
}
h1{
color: red;
}
h1{
color: blue;
}
#intro div h1 {
color: green;
}
#intro h1 {
color: blue;
}
header h1{
color: red;
}
#intro .container h1{
color: pink;
}
/*%하면 가변값으로 바뀌게 된다. 부모의 크기에 영향을 받는다.
header {width: 500px;}
div {
width: 100%;
height: 300px;
min-width: 600px;
max-width: 800px;
border: solid 10px red;
border-radius: 50px;
background-color: yellow;
opacity: 1;
}
h1 {
color: rgb(123, 111, 21);
font-size: 90px;
font-style: initial;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 100;
text-decoration: underline;
text-align: center;
background-color: pink;
}
ul {
list-style: none;
}
*/
#bg {
width: 256px;
height: 256px;
background-color: yellow;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: top left;
}
# 2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들
생각보다 진도가 빠른데, 가지고 있는 책(한권으로 끝내는 웹 기본 교과서)을 기준으로 이틀만에 1/3 분량을 나갔다. 사실 집이 아닌 밖에서 학습을 하다보니 듀얼모니터가 불가능하여, 태블릿으로 영상을 보고 노트북으로 실습을 하는데, 배속기능이 없어서 힘들고, 필히 최소 2번은 보아야 세부적인 기능 습득이 온전히 이루어 질꺼 같다.
일지 쓰는것에서 세부내용을 다 언급하기는 힘들어 어렵거나 필수적인 것만 쓰고 있는데, 주말에 일주일치를 몰아서 보완하거나 업데이트를 해야할 것 같다.
해결하지 못한점은 핵상 옵션의 정확한 종류와 #eaeaea;일때 왜 옅은 회색이 나오는지는 찾아봐야할꺼 같다. rgb type으로 색상을 넣는것도 규칙이 있을텐데, 수업시간에 언급이 없어서 역시 self-study로 해야할 몫이다.
위에서 언급한것 처럼 가장 좋은 방법
*듀얼모니터 시스템(빠른 배속으로 1회) + (빠른 배속으로 2회)
파일에 주석으로 정리하고, 주말에 일지 업데이트.
말그대로 언어 (사용자들간의 규약) 이다. 문법과 용어는 반복해서 암기를 해야할것 같다. 가장 좋은 방법은 실습을 풍족하게 하여야 하는데, 시간이 빠듯한 것 같다. HTML 누적 복습도 오늘 밤에 할 예정.