2021_06_30 개발일지

1) 학습한 내용

오늘은 HTML과 CSS 언어를 함께 사용하는 방법에 대해 알아보았다.

먼저 두가지 언어를 섞어 쓰게 되면 코드분량이 길어질 경우 html 언어와 css 의 언어가 혼용돼 가독성이 떨어진다. -> 유지보수에도 어려움이 있다.
그러므로 따로 문서를 생성하여 서로 연동해주는 방식사용이 좋다.
-방법 :
1)css 파일 생성
2)인덱스파일을 기준으로 css 파일을 가져온다.
(변동사항이있을경우 두파일모두 새로저장)
3)두개를 같이 보기 편하도록
'view - layout -columns2 (화면분할기능)'을 이용한다.

1.html 코드

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<style>
		h1 {
			color: red;
		}
	</style>
	
      
  <!--
  <link 태그 사용 rel="어떤문서인지 알려줌" type="어떤 언어로 되어있는지알려줌"
herf="연동된파일의 경로">
-->
    <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">  
	<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>  
    	<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="비밀번호">

    <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>


    <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>

</body>
</html>

*관계도

<header>(부모태그-> css 로 스타일 변경할경우 자식들까지 영향을 미침
                   but 자식 스스로의 유전자가 더 친숙! 
                  and  모든자식들이 영향을 받지는 않음. 태그 자체적으로 컬러를 
                           가지고 있으면 부모의 영향을 받지 않음 ex) a 태그)
    	<ul>(자식태그)
    		<li></li>(형제태그)
    		<li></li>
    		<li></li>
    	</ul>
   	
    </header>
    <div></div>(header태그와 형제)
    <img src="icon.png" width="100px" height="50px" alr="네이버 로고">

css 코드

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;
}

/*고유의값을 지정함으로써 겹치는 태그들을
따로 스타일을 지정할수있도록하는방법*/
/*id속성값(이름- 하나밖에 갖지 못함) 지정법 # 사용*/

#test1 {color: blue;}

/*class (별명- 한사람당 여러개 별명가능, 재사용가능)지정법 . 사용*/

.test2 {color: green;}


/*type을 이용해서 속성값 지정 방법 [] 사용*/

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-size: italic;
}

#intro h2{
	color: red;
}
.container p {
	color: blue;
}
 header div p {
	color: blue;
}
#intro .container p {
	color: blue;
}

/*style속성>id>class>tag마지막>tag 순으로 순위가 정해진다*/


#color-2 {color: pink;}
.color-1 {
	color: green;
}
h1{
	color: red;
}
h1{color: blue;}

/*더 디테일하게 작성할 수 록 우선순위가 높아진다.*/
/*원본코드는 놔두고 새로운 디자인으로 덮어 씌우고 싶을때 */

#intro .container h1 {
	color: pink;
}

#intro div h1 {
	color: green;
}

#intro h1 {
	color: blue;
}
header h1 {
	color: red;
}

/*공간의 디폴트값은 투명,
 px 는 고정값
 브라우저 크기에 따라 공간이 자연스럽게
 resize 를 원할때는 % 를 사용(가변값- 기준점을 기준으로 크기책정) 
*/


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

	min-width: 700px ;
	max-width: 900px;

    border: solid 10px red;
    border-radius: 50px;

	background-color: yellow;

	opacity: 1;
}

h1 {color: rgb(123, 111, 21);
    font-size: 80px;
    font-style: initial;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    text-decoration: underline;
    text-align: right;
    background-color: pink;

}

ul {list-style: none;}

/* ex)font-family: Arial, Times, sens-serif;
font family 에서 정한 여러폰트의 순서대로 우선순위가 적용된다.
브라우저에서 사용가능한 폰트사용을 위해 앞에서 순서대로 적용
항상 어느 브라우저에서도 가능한 suns-serif를 마지막에 넣어준다.

text-align: right; 로 위치를 지정해줄 수 있지만,
    background-color: pink*를 통해서 움직일 수 있는 범위를 확인 하면 좋다.

    opacity: 0~1;/ 1에 가까울수록 선명 */

    #bg {
    	width: 900px;
    	height: 900px;
    	background-color: yellow;
    	background-image: url(icon.png);
    	background-repeat: no-repeat;
    	background-position: center;}
    	
/*배경화면 이미지가 크리가 커질수록 계속 적으로 반복이 되는데,
그거를 제어하기 위해 쓰는것 ,background-repeat:repeat-x,repeat-y,no-repeat 중 하나 사용
background-position: 위치;를 이용하여 공간안에서 이미지의 위치를 정할 수 있다.*/

css 테두리
{border(테두리모양): solid(선) 10px(굵기) red(색);}
font style (구글에서 제작한 웹 폰트들)
fonts.google.com
*img 태그와 background 의 차이점
-img:
1. 크기에 상관없이 비율은 깨지지만 잘리는 현상없이 조정가능
2.정보성을 갖고있는 이미지는 alt 값이 있는 img 를 사용해야한다.(웹접근성)
-backgroun:
1. 이미지는 원래 이미지보다 작거나 크면 잘리거나 반복된다. 원래의 이미지 크기가 변하지 않는다는 의미.

2) 학습내용 중 어려웠던 점

지금까지 배워왔던 이미지 삽입 방법, 글자 크기 조정 등의 방법말고 조금 더 디테일하게 배울 수 있는 시간이었으나,
이전의 내용과 뭔가 비슷한 느낌에 어떤 차이가 있는지 더 자세히 알아야할 것 같았다.

3) 해결방법

아직 해결 했다고 할 수는 없으나, 앞으로 계속 사용해가면서 차이를 좀더 명확하게 알고 사용 할 수 있도록 해야겠다.

4) 학습소감

오늘도 시간가는줄 모르고 동영상강의를 들으며 따라했는 것 같다. 그래서 월말 평가에도 늦을 뻔했다! 얼마나 놀랐는지.. 10분을 남겨두고 알아채 허겁지겁 시험을 치뤘다.
앞으로는 동영상 시청 중간중간에도 공지사항을 확인 할 수 있도록 해야겠다.
그리고 다시 이어서 동영상 강의를 들었는데, 조금 쉬다 다시 들어서 그런지 더 집중할 수 있었던것 같다. 또 여러가지 많은 기능들을 사용해보니 더 지루하지 않아서 좋았다 : )

Author And Source

이 문제에 관하여(2021_06_30 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@526yeo_eunhye/20210630-개발일지