학습한 내용

HTML 작성

<style type="text/css">
	h1	{
		color:  red; 
	}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- link rel stylesheet : 링크 태크 로 연결될 타입, type: 글자는 css언어로 구성, href: 연동될 파일 연결, 양쪽 모두 저장 되어야지 정상 적용 됨 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

<h1 style="background-color: pink;">Hello World</h1>


<header>
	<ul>
		<li></li>
		<li></li>
	</ul>
</header>

<!-- header의 자식은 ul, ul의 부모는 header, li는 형제관계 -->

<header>
	<h1>header h1</h1>
	<p>heaer p</p>
	<a href="#">네이버</a>
</header>
<!-- 부모는 자식에게 색깔 영향 -->
<!-- a태그는 부모의 영향을 받지않음 -->
<footer>
	<h1>footer h1</h1>
	<p>footer p</p>
</footer>
<!-- 부모의 특성보다 나의 특성이 우선 -->
<!-- 디테일하게 적용하려면 css파일에 header의 h1, 또는 header의 p라고 작성하면 됨, 또는 같이 적용 시키고 싶으려면 쉼표를 사용해서 같이 적어주면 됨 -->


<!-- 선택자: css에서 html문서 특정영역에 접근하는 방식 type선택자, class선택자, attribute선택자, ID선택자 -->

<h1>Hello World</h1>
<h2 id="test1">Nice to meet you</h2> 
<!-- id의 이름을 만들어서 색을 바꿔주는 것: id선택자 -->

<h3 class="test2">Welocme</h3>
<!-- class 선택자: id선택자와 비슷하게 별명을 붙여줌 -->

<input type="text" placeholder="이름">
<input type="password" placeholder="비밀번호">
<!-- attribute: html의 type의 속성값을 가지고 디자인 하는 것  -->

<h2 id="color-1">ID 선택자</h2>
<h3 class="bg-1 font-size-1">Class 선택자</h3>
<!-- id와 class의 차이점1 : id는 이름 -> 한개만 가능, class는 별명 -> 여러개 설정 가능 띄어쓰기로 구분 가능 -->

<p class="bg-1">Welcome</p>
<h4 id="color-1"></h4>
<!-- id와 class의 차이점2 : class는 동일한 클래스명을 여기저기 사용해도 됨, id는 속성값이 한개의 문서에 하나만 존재해야함 -->

<header id="intro">
	<div class="container">
		<h2>header h2</h2>
		<p>header p</p>
	</div>
</header>

<p>Out p</p>


<!-- Cascading: 어떤 디자인을 우선적으로 처리할지 -->
<h1 style="color:  gray;" id="color-2" class="color-1">Hello World</h1>
<!-- style의 속성은 id보다 더 높다. id의 속성은 class보다 더 높다. -->


<header id="intro">
	<div class="container">
		<h1>header h1</h1>
	</div>
</header>





<div>
	<h1>Nice</h1>
	<a href="#">네이버</a>
	<ul>
		<li>메뉴1</li>
		<li>메뉴2</li>
	</ul>
</div>




<div id="bg"></div>

<img src="icon.png" width='100px' height="50px" alt="네이버 로고">

<!-- background img 에서는 틀이 이미지보다 작으면 잘림 하지만 img태그에서는 비율로 조정 
정보를 띄고 있다 img태그, 그냥 데코레이션이다 -> background img
-->

CSS 작성

h1 {
font-size: 80px;
}

header {
color: red;
}

header h1,
footer h1 {
color: blue;
}

header p {
color: green;
}

footer p {
color: green;
}

h1 {
color: red;
}
/type 선택자/
#test1 {
color: blue;
}
/id 선택자/

.test2 {
color: green;
}
/class 선택자/

input[type="text"] {
border: solid 10px red;
}

input[type="password"] {
border: solid 10px blue;
}
/attribute 선택자/

.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;
}
/동일한 선택자를 선택했을 경우 나중에 작성한 선택자의 우선순위가 높다->cascading/
/클래스의 우선순위가 태그보다 높다 /

#intro .container h1 {
color: pink;
}

#intro div h1{
color: green;
}
/디테일하게 작성 할 수록 우선순위가 높아짐/
#intro h1{
color: blue;
}

header h1 {
color: red;
}

/cascading: 원본코드를 유지한 상태에서 새로운 css 코드를 추가 할 때 사용/

div {
width: 100%;
height: 300px;

/*공간 만드는 width와 height -> 고정값이라서 브라우저를 늘리거나 줄여도 크기는 동일
%: 비율을 맞추기 때문에 브라우저 크기에 따라 가변,부모의 영향을 받음,   px는 고정자라서 브라우저 크기에 상관없이 유지*/
background-color: yellow;

min-width: 600px;
max-height: 800px;
/*하한선:  min, 상한선: max*/

border: solid 10px red;
border-radius: 50;
/*테두리를 만들고 싶다-> border, 선 굵기: px, 선 색: red */
/*border-radius:  테두리를 둥글게*/
background-color: yellow;

}

h1 {
color: #eaeaea;
font-size: 90px;
font-style: italic;
font-family: 'Noto Sans KR', sans-serif;
font-weight: 100;
text-decoration: underline;
text-align: left;

background-color:  pink;

opacity: 0.5;

}
/글자의 색 크기 폰트 서체 설정
브라우저마다 사용되는 폰트가 정해져 있어서 font-family에 있는 서체들 중에서 앞에서부터 우선순위로 적용된다.
그리고 마지막은 sans-serif로 끝내준다. 왜냐하면 모든 브라우저에서 사용가능한 서체이기 때문
폰트의 굵기: font-weight
text-decoration: 글자의 밑줄(underline 밑줄, line-through 가운데 선);
text-align: right(오른쪽), center(가운데), 글자 위치 조정 하는 것 -> h1태그 영역 안에서 움직임
opacity: 투명도 (0은 안보임 1은 최대치)/

a{
text-decoration: none;
}
/a태그의 밑줄을 없애고 싶다./

ul {
list-style: none;
}

/ul li는 원래 점이 표기 되는데 list-style: none으로 점을 없애줌/

#bg {
width: 300px;
height: 300px;
background-color: yellow;
background-image: url(icon.png);
background-repeat: repeat-x;
background-position: top left;
}

/*background-repeat : no-repeat: 그림 반복 X 하나만 출력
background-repeat: repeat-x : x축만 반복
background-position: center, left, top, bottom, right bottom -> 가운데 왼쪽 위 아래 오른쪽아래에 그림을 위치 할 수 있다)

*/

/공간이 이미지보다 작게 설정하면 이미지는 잘리게 나온다./

html도 작성하고, CSS로 글자의 색 폰트 위치 테두리 색 기타 등을 작성하고 편하게 보기 위해 화면 분할을 하는 방법도 배웠다.

학습내용 중 어려웠던 점

강의를 처음 들었을 때는 이해하고 아 그렇구나 이렇게 생각하는데
다시 들으면 또 새로운 내용이였다.
아무래도 처음 듣는 내용이라 그런것 같다.

해결방법

반복만이 살 길 인것같다. 그리고 홈페이지의 화면을 보면서 이건 어떻게 사용되었고, 확인하기위해 크롬의 검사버튼을 눌러서 확인을 자주 해봐야 할 것 같다.

학습소감

아무래도 낯선 수업이지만 그래도 내가 무언가를 하나 하나 만들고 있다는 거에 신기해하며 발전을 하는 것 같다.