210630

JunYeupKwon·2021년 6월 30일

개발일지 대구AI스쿨

대구ai스쿨

목록 보기

4/48

3회차강의

1. CSS

1. 기본적인것

간단하게 말해서 꾸미는거
<style>를 사용해서 적용할곳의 이름적고 {}로 감싼다.

color 로 색지정

<head>
<meta charset="utf-8">
<style>
	h1 {
		color: red;
	}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>

h1 에 red색을 입힌것

<h1>안에 style넣기
```
<body>
<h1 style="background-color: pink;">Hello World</h1>
</body>
```
- 이렇게하면 단점 html이랑css 섞이면 가독성도 떨어지고 힘듦
- 해결법 : css랑 html 문서를 따로 작성해서 연동
  - 들여쓰기단축키 : 드래그해서 Crtl+ { or }

CSS 파일 따로 만들어서 연동하기

<head>
<meta charset="utf-8">
<style>
	h1 {
		color: red;
	}
</style>
<link rel="stylesheet" type="text/css" 	href="style.css">
</head>

<link>사용
저장할때 양쪽모두 저장해야함.

CSS 주석처리할땐 /* */ 사용

html은 필연적으로 품고 품는 구조, 형제 자식개념으로 이해하자

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

header h1

header p

footer h1

footer p

이렇게 나올때 CSS 에서
```
header {
	color: red;
	}
```
- 이렇게 입력시 <header>로 작성한부분 전체색 변경
밑에 추가로
```
h1 {
	color: blue;
	}
```
- 입력시 <header>부분은 red로 남아있고 딸려있는h1부분들이 blue로 바뀜
한번더
```
p {
color: green;
	}
```
- 입력시 <h1>부분이 전부 blue <p>부분은 green으로 나옴
<a>처럼 태생적으로 지정된 색은 안바뀜
전체말고 특정것만 변경하고 싶다 는
```
header h1 {
color: blue;
}
header p {
color: green;
}
```
- 앞에 header를 작성해서 footer부분은 놔두고 header안에 있는것들만 색변경

각각 이렇게해도 되긴한다.

header h1 {
color: blue;
}
header p {
color: green;
}
footer h1 {
color: blue;
}
footer p {
color: green;
}

하지만 두번치기 귀찮으니 , 를 사용해서
```
	header h1,
	footer h1 {
	color: blue;
	}
	header p,
	footer p {
	color: green;}
```
- 이렇게 해도된다. , 는 and 의 의미를 갖는다

각각 속성값 부여하고 머해보기

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

이런경우엔 h1에는 앞과동일
```
h1 {
	color: red;}
```
id에 할때는 앞에 #을붙인다.
```
#test1 {
	color: blue;}
```
class에 할때는 앞에 .을 붙인다.
```
.test2 {
	color: green;}
```

input에 할때는

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

이렇게 표현한다.

어떨때 id(이름) 어떨때 class(별명)를 사용하는지

id는 한개만 사용가능 이름이니까, 여러개 중복불가
```
<h2 id="color-1 font-style-1">ID 선택자</h2>
```
```
#color-1 {
		color: red;}
   #font-style-1 {
		font-style: italic;}
```
- 이러면 충돌나서 아무것도 적용안됨

class는 별명개념 여러개가능

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

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

이렇게 해도 다 적용됨

id는 무조건 한개만 class는 여러군데 아무곳이나 적용가능
```
<p class="bg-1">Welcome</p>
<h4 id="color-1"></h4>
```
- 이러면 h4는 출력이 안됨 , 위에잇는 id와 겹쳐서

묶어서 하거나 각각 구분

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

여기엔

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

이런식으로가능

캐스케이딩 : 우선순위

<h1>Hello World</h1>

h1{color: red;}
h1{color: blue;}

이렇게하면 나중에 입력한 값이 우선이라서 파란색으로 나옴

class를 추가하면

<h1 class="color-1">Hello World</h1>

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

이러면 class 우선순위가 높아서 녹색이 나옴

id를 추가하면

<h1 id="color-2" class="color-1">Hello World</h1>

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

이러면 id가 높아서 분홍색

style

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

이렇게까지하면 회색나옴

style속성 > id > class > tag값

다른 예

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

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

우선순위가 같으면 더 디테일한것 여기선 결국 분홍색
원본코드는 유지하면서 새로운 색 넣을때, 결국 덮어쓰기할때

공간 만들기
```
<div>
	<h1>Nice</h1>
</div>
```
```
div {width: 100%;
	height: 300px;
```
min-width: 600px;
max-width: 800px;
background-color: yellow;}
- width랑 height로 공간 설정
  - px로 잡으면 고정값
  - %로 사용하면 유동적인데 body를 기준으로 가져온다.
  - 평상시엔 투명이니 background-color로 색보면 편함
    -min 이나max 로 최대 최소 설정
```
border: 10px red solid;
	border-radius: 50px;
```
- border 는 테두리 설정
```
h1 {color: rgb(192, 168, 2);
	font-size: 80px;
	font-style: italic;
	font-family: Arial,Times,sans-serif;}
 	font-weight: 100;
   	text-decoration: underline;
        text-align: right;
```
- size는 크기
- style은 기울기 그런거
- family는 폰트 서체 설정인데 순서대로 불러오는것
  다적용되는건 아니고 불러올수있는건 불러오고 안되면 다음단계로 가고 그런거 마지막엔 항상 `sans-seif
  
  구글폰트
- 여기서 링크를 만든다음 html문서 상단에 css링크 위에 붙여넣기 한후에 css에서 사용가능
- weight는 글짜 굵기
- text-decoration은
  - underline
  - line-through 등이 있음
  - 이걸로 <a>에 있는 기본적인 언더바도 삭제가능
```
a{text-decoration: none;}
```
- align은 정렬 하는거
  - left,center,right등등
  - 주의점 : h1태그의 영역안에서만 움직임
```
background-color: pink;
```
  - 이거쓰면 대충 움직이는 범위를 볼수있음

<ul>안 <li>에서 나오는 기본적인 값인 점제거하기
```
ul {
list-style: none;}
```
opacity 는 투명도
- 0~1사이의 값
background
```
<div id="bg"></div>
```
- Css
```
#bg {
	width: 900px;
	height: 900px;
	background-color: yellow;
	background-image: url(icon.png);
	background-repeat: no-repeat;
  	background-position: left;
```
  - img넣을땐 저렇게, 파일경로가 같으면 그냥 파일명.확장자
    저거만 해놓으면 꽉채울때까지 반복
  - repeat 이용해서
    - x,y,no 해서 반복방향이나 한번만 등 설정
  - position으로 그림 위치변경
html에 이미지 바로넣을때랑 CSS에 넣을때 차이

- html은 그냥 사진을 어케 꾸겨넣어도 유지함
- CSS는 짤림
- CSS는 <alt>를 이용해서 정보를 담을수없다.

2.어려웠던 내용

당장에는 무슨 암기과목을 하는기분인듯
어떤상황에 어떤걸 사용하는지 아직 잘모르니 외우고 그런방향으로 접근해야하나 고민됨

3.해결방법

몇번의 반복으로 익숙해지기

4. 소감

흠,, 화면이 넓고 여러개면 좋을꺼같닼ㅋ

JunYeupKwon

이전 포스트

210629

다음 포스트

210630

대구ai스쿨

3회차강의

1. CSS

1. 기본적인것

header h1

footer h1

캐스케이딩 : 우선순위

공간 만들기

구글폰트

`<ul>`안 `<li>`에서 나오는 기본적인 값인 점제거하기

`opacity` 는 투명도

`background`

`html`에 이미지 바로넣을때랑 `CSS`에 넣을때 차이

2.어려웠던 내용

3.해결방법

4. 소감

210629

210701

0개의 댓글

관련 채용 정보

210630

대구ai스쿨

3회차강의

1. CSS

1. 기본적인것

header h1

footer h1

캐스케이딩 : 우선순위

공간 만들기

구글폰트

<ul>안 <li>에서 나오는 기본적인 값인 점제거하기

opacity 는 투명도

background

html에 이미지 바로넣을때랑 CSS에 넣을때 차이

2.어려웠던 내용

3.해결방법

4. 소감

210629

210701

0개의 댓글

관련 채용 정보

`<ul>`안 `<li>`에서 나오는 기본적인 값인 점제거하기

`opacity` 는 투명도

`background`

`html`에 이미지 바로넣을때랑 `CSS`에 넣을때 차이