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-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)