6월 30일 Velog

류영서·2021년 6월 30일

학습한 내용

CSS 적용법

(1) head > style > h1{}

<head>
	<meta charset="utf-8">

	<style>
		h1 {
			color: red;
		}
	</style>	
</head>

<body>

	<h1>Hello World</h1>
    
</body>

(2) html 안에 style=“” 적용

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

CSS 코드는 중괄호{} 안에 입력해야 한다.
(2)은 추천하지 않는 방법

(3) link
[html]

<head>
	<link rel="stylesheet" type="text/css" href="style.css">

</head>

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

[css]

h1{
	font-size: 80px;
}

css 파일과 html을 연결하는 태그, css는 단독으로 html에 적용할 수 없다
rel(링크 태그로 연결되는 파일의 타입) = “stylesheet”(디자인)
type(연동되는 파일의 글자 타입)
href(연동되는 파일의 경로)
(3) link 태그를 실무에서 많이 사용한다
View-Layout-Column2 : 화면 분할
CSS 주석 : /* */

태그의 상속

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

	<div></div>

부모/자식 태그(header>ul>li), 형제 태그(header-div)

[html]

	<header>
		<h1>header h1</h1>
		<p>header p</p>
		<a href="#">네이버</a>
	</header>

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

[css]

header{
	color: red;
}

 h1{
	color: blue;
}

p {
	color: green;
}
 
 header h1, 
 header p {
	color: yellow;
}

a 태그는 그 자체로 파란색을 나타낸다 (부모 태그의 영향 받지 않음)
부모를 명시하면(header h1/header p) 특정 태그에만 적용 가능하다
쉼표 사용하여 묶어줄 수 있다 : header h1, header p{}

선택자

(1)
[html]

	<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="비밀번호">

[css]

h1 {
	color: red;
}
#test1 {
	color: blue;
}
.test2 {
	color: green;
}
input[type="text"]{
	border: solid 10px red;
}
input[type="password"]{
	border: solid 10px blue;
}

타입 선택자 : h1{}, html 태그를 기준으로 접근
id 선택자 : <h2 id="test1">Nice to meet you</h2> + #test1{}
class 선택자 : <h3 class="test2">Welcome</h3> + .test2 {}
속성 선택자 : input의 type 기준 [type=""] 으로 설정

(2)
[html]

	<h2 id="color-1">ID 선택자</h2>
	<h3 class="bg-1 font-size-1">Class 선택자</h3>

	<p class="bg-1">Welcome</p>
	<h4 id="color-2"></h4>

[css]

.bg-1{
	background-color: red;
}
.font-size-1{
	font-size: 50px;
}
#color-1{
	color: red;
}

※ id와 class의 차이점

id : 속성값으로 여러 가지 이름을 정할 수 없다, 한 문서에 속성값이 한 곳에 있어야 한다
class : 속성값으로 여러 가지 이름을 정할 수 있다 ( <h3 class="bg-1 font-size-1">), 한 문서에 속성값이 여러 곳에 있어도 된다.

선택자의 다양한 표현

[html]

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

	<p>Out p</p>

[css]

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

header h2 = #intro h2
header p = heder div p = header .container p = #intro .container p

Cascading

(1) 선택자의 우선순위
[html]

<h1 style="color:gray; "id = "color-2" class="color-1">Hello World</h1>

[css]

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

우선순위 : 태그(h1) < class < id < html 내의 style 속성
-> red < blue < green < hotpink < yellow < gray
동일한 선택자를 사용했을 때 아래쪽에 있을수록 우선 순위가 높다

(2) 예제
[html]

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

[css]

#intro .container h1{
	color: pink;
}
#intro div h1 {
	color: green;
}
#intro h1 {
	color: blue;
}
header h1 {
	color: red;
}

우선순위 : header h1 < #intro h1 < #intro div h1 < #intro .container h1
디테일 할수록 우선순위가 더 높다

※ 원본 코드를 유지하고 새로운 CSS 코드로 디자인을 변경하고 싶을 때
-> 캐스캐이딩 사용

CSS의 속성

[html]

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

[css]

div{
	width: 100%;
	height: 300px;
	min-width: 600px;
	max-width: 800px;

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

	background-color: yellow;

	opacity: 0.5;
}

h1 {
	color: black;
	font-size: 80px;
	font-style: italic;
	font-family: 'Noto Sans KR', sans-serif;
	font-weight: 300;
	text-decoration: underline;
	text-align: center;

	background-color: pink;
}

a {
	text-decoration: none;
}
ul {
	list-style: none;
}

공간 만들기 : width(가로), height(세로) ＋ 배경색(background-color)을 넣어주면 좋다
width/height : 300px (공간 고정값), 100% (공간 가변값, 기준 : 부모 태그가 차지하는 브라우저 크기)
min-width/max-width : %로 지정된 width 안에서 사용
border: solid 10px red; : 테두리 만들기, 속성값 3개(선의 종류/굵기/색)
border-radius: 50px; : 테두리 라운드
opacity : 투명도
color의 속성값 종류 : 색상 이름/색상코드(#eaeaea)/rgb(123, 111, 21)
font-size : 글씨 크키
font-style : 기울임(italic)/default(initial)
font-family : 서체
font-family: Arial, Times, sans-serif; : 사용가능한 폰트가 왼쪽부터 우선적으로 사용됨
※ 마지막은 sans-serif : 모든 브라우저에서 사용 가능하기 때문에

font-weight : 글씨 크기
text-decoration : 밑줄(underline), 글자 중간에 글(line-through)
text-align: left/center/right, 정렬
※ text-align은 h1 내에서만 움직인다. -> background-color: pink; 로 확인
a 태그는 그 자체로 밑줄을 가지고 있다.
-> a 태그의 언더바를 제거하고 싶다 : text-decoration: none;
ul(li) 태그는 태생적으로 .을 가지고 있는데 없애고 싶다 : list-style: none;

※ 구글 폰트 사용법 https://fonts.google.com/
-> 폰트 선택
-> [link] 복사 후 html의 head에 붙여넣기
-> 링크 아래 font-family : ~~ css에 속성으로 붙여넣기

백그라운드 속성

[html]

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

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

[css]

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

공간보다 이미지의 크기가 작다면 이미지가 반복적으로 나타남
background-repeat : repeat-x/repeat-y/repeat/no-repeat, 반복 효과 제어(x축으로만, y축으로만, x&y 축 둘 다 반복, 반복 안 함)
background-position : left(왼쪽 중앙)/right/top(상단 중앙)/bottom/center(정중앙)/right top/right bottom/left top/left bottom
이미지보다 공간의 크기가 작다면 이미지(background-image)는 짤린다.
-> width: 100px, height : 100px 로 바꿨을 때
※ html의 img 태그는 공간이 작아도 깨지지 않고 비율만 줄어든다.
※ img는 정보성을 가지고 있다(alt 속성)/background-image는 데코용