1) 학습한 내용
*폰트 적영 css태그 위쪽
<!DOCTYPE html>
<.html>
<.head>
<.mata charst="uft-8">
<.style>
h1 {
color: red;
}
</.style>
+<.link rel="preconnect'" href="https://fonts.gstatic.com">
+<.link href="https://fonts.googleapos.com/css2?family=Noto+Sans+KR:waht@100;300;400;500;700;900$display=swap" res="stylesheet">
<.link rel="stylesheet" type="text/css" href="style.css">
</.head>
<.body>
<.h1 style="background-color: pink;">Hello World<./h1>
<.header>
<.h1>header h1</h1>
<.p>header p</p>
<.a hret="#">네이버</a>
<./header>
<.footer>
<h1.footer h1</h1>
<.p>footer p</p>
*CSS에서 HTML 특정영역에 접근하는 방법.
<.h1>Hello World</h1>
<.h2>Nice to meet you</h2>
<.h3>Welcome</h3>
*아이디 태그 선택자
<.h1>Hello World</h1>
<.h2 id="tedt1">Nice to meet you</h2>
<.h3>Welcome</h3>
*클래스 태그 선택자
<.h1>Hello World</h1>
<.h2 id="test1">Nice to meet you</h2>
<.h3 class="tesr2>Welcome</h3>
*속성 선택자
<.input type="text" placeholder="이름">
<.input type="password" placeholder="비밀번호">
<.h2 id="color-1 font-style-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="comtainer">
<.h2>header h2</h2>
<p.>header p</p>
<.div>
</.header>
*케스케이딩
<.h1 style="color: grat;" id=:"color-2" class="color-1">Hello Wold<h1>
header id="intro">
div class="container">
h1>header h1</h1>
/div>
/header>
header>
div>
<.h1>Nice<h1>
<.ul>
<.li>메뉴1</li>
</.div>
/header>
*백그라운드 속성
div id ="bg"></div>
img src="icon.png" width="100px" heigth="50px" alt="네이버 로고">
<./body>
<./html>
_폰트 크기 파일 css
*주석하는방법 /* */
h1 {
font-size: 80px;
}
header {
color: red;
}
h1 {
color: blue;
}
p {
color: green;
}
*푸터를 제외하고 상단영역에 색깔을 입히고 싶다.
header {
color: red;
}
+ header h1 {
color: blue;
}
+ header p {
color: green;
*헤더뿐만 아니라 푸터에도 각각 컬러를 적용하고싶다.
header {
color: red;
}
+ header h1 {
color: blue;
}
+ header p {
color: green;
}
++ footer h1 {
color: blue;
++ footer p {
color: green;
}
*
header {
color: red;
}
+ header h1,
footer h1 {
color: blue;
}
+ header p,
footer p {
color: green;
};
~~*CSS에서 HTML 특정영역에 접근하는 방법.
> h1 {
color: red;
}
#test1 [
color; blue;
}
.tesr2 {~~
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;
}
header h2 {
color; red;
}
header p {
colorL blue;
}
#intro h2 {
color; red;
}
#intro .cotainer p {
colorL blue;
}b
캐스케이딩 : 나중 입력된게 우선순위
style > id > class > tag 우선순위
> #color-2 {
color: pimk;
}
.color-1 {
color: green;
}
h1 {
color: red;
}
h1 1{
color: blue;
--
}
#imtro .container h1 {
color: pink;
}
#intro div h1 {
color: blue;
}
#intro h1 {
color: blue;
}
header h1 {
color: red;
}
--
header {
widtf: 500px'
}
div {
width: 300px;
height: 300px;
min-widtf: 600px;
max-widtf: 800px;
border-solid 10px red;
border-radius 50px;
background-color: yellow;
opacity; 0.5;
}
--폰트에 영향을 미치는 태그
> *rgb, #eaeaea 폰트색지정
font-family 폰트지정
font-weight 폰트크기
text-decoration 밑줄
text-align 글자 정렬 바꾸기
opacity 글자 투명도
h1 {
color: rgb(123, 22, 111);
font-size: 80px;
font-style: italic;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 100;
text-decoration: unferline;
text-align: center;
background-color: pimk;
}
ul {
list-style: none;
--백그라운드 속성
background-repeat: 반복효과 제어
background-position: 사진 자리
#bg {
width: 300px;
heigth: 300px;
background-color: yellow;
background-image: url(icon.png);
background-repeat: no-repeat;
background-position: right bottom;~~~~
2)학습내용 중 어려웠던 점
오늘도 어김없이 모든 내용이 어려웠습니다......
역시 코딩은 저랑 안맞나봅니다... '
그치만 열심히 해서 자격증 꼭 따겟습니다..
3) 해결방법
열심히 강의를 들으면서 코딩의 대한 이해도를 좀 더 높여나가겠습니다..
4) 학습소감
아 진짜 오늘하루분 다 들으려다가 제 머리가 팝콘처럼 팡팡 터질거같아서
못 들었는데 괜찮나요 괜찮다고 해주세요 제발요 네? 감사하겟습니다..
~~