210630

Boyun Jang·2021년 6월 30일

배운내용

1.  <style>
    h1{color: red;}
	</style>

2. <h1 style="background-color: pink;">hello world</h1>

두 가지의 단점: 대량 텍스트일 경우, 가독성이 떨어짐.  
보완 방법: 실무에서는 html, css 파일을 따로 만들어서 연동함. 

링크 태그를 이용해서 연동하는 방법[실무]
```<link rel="stylesheet" type="text/css" href="style.css">```


sublime text 레이아웃 변경[병합된 두 파일을 열어놓고 작업할 때]
상단메뉴 view-layout-columns2 

1. html 주석 처리는 <!-- -->
2. css 주석 처리는 /*  */ 


- html 
<header>
	<h1>header h1</h1>
	<p>header p</p>
</header>

<footer>
	<h1>fooder h1</h1>
	<p>footer p</p>
</footer>


- css
header{ color: red; }
h1{color: blue;}
p{color: green;} 
header h1, footer p{color: blue} 디테일하게 선택해서 색 변경, 콤마(,)도 가능

ID 선택
html 의 <h2 id="test1">Nice to meet you</h2>
css의 #test1{color: blue;}

Class 별명 선택
html의 <h3 class="test2">Welcome</h3>
css의 .test2{color: blue;}

디자인 적용 속성의 우선순위
style > id > class > tag


원본코드를 놔두고 우선순위 코드를 이용하여 속성을 변경할 수 있다. 
또는 더 디테일한 코드를 이용하는 게 우선순위 ex) intro div h1 > intro h1

* css

div{ 
  wigth:100;
  heigh: 300px; 공간의 크기를 조정할 때
  
  background-color: yellow;}

"background-color"를 넣어서 확인해보기

resize가 웹사이트에 따라 변경되기를 원한다면,  
* css
div{ 
  wigth:100%; %를 사용할 때는 부모의 영향을 받는다. 
  heigh: 300px;
  
  min-width: 600px;
  max-width: 800px;

  border: solid 10px red; 박스의 테두리(solid 선의 종류)
  border-radius: 50px; 박스의 테두리가 둥근 형태
  background-color: yellow;}

font-family: 복수의 폰트 서체를 지정할 수 있음. 앞에 기입한 폰트부터 적용가능한 걸로 적용됨. 
 -  sans-serif 를 항상 마지막에 배열하기. 왜? 모든 브라우저에서 적용 가능한 폰트임
 
font-weight:300; 폰트의 굵기
text-decoration: underline(밑줄); line-throgh(글자중간줄); 
tex-align: right(오른쪽 정렬);
a{text-decorationl: non;} html의 a태그에 글자 밑줄을 없애기

*css 에서 백그라운드에 이미지 넣기
#bg {
	width: 300px;
    height: 300px;
	background-color: yellow; 이미지의 배경
	background-image: url(icon.png) ; 폴더에 저장한 아이콘 파일
	background-repeat: no-repeat; 이미지가 반복되지 않도록
	background-position: right top; 오른쪽 상단에 배치하고 싶을 때


* 참고사이트: fonts.gogle.com