---

1) 제목을 만들때, 쓰는 tag

<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>

• h1이 크기가 가장크고 h6이 가장 작다.

  • h1 tag

    hello world

  • h6 tag

    hello world

---

2) 단락에서 줄을 바꾸꺼나 한 줄을 띄울때, 쓰는 tag

<p>안녕하세요 코딩을 배우고 있는 학생입니다.</p>
<p>그랩마켓 강의를 통해서 개발분야를 결정하고 싶습니다.</p>
<br />
<p>자투리 시간에 개발공부하자</p>

안녕하세요 코딩을 배우고 있는 학생입니다.

그랩마켓 강의를 통해서 개발분야를 결정하고 싶습니다.

자투리 시간에 개발공부하자

• 단락에서 줄바꿀때, p tag사용
• 단락에서 한 줄 띄울때, br tag사용

---

3) 이미지 tag

<img src="이미지주소 복붙" alt="이미지 설명" />

<img src="폴더명/파일명.파일종류" alt="이미지 설명" />
<img src="images/icon/avatar.jpg" alt="이미지 설명" />

• images파일안에 icon파일안에 avatar파일명 jpg파일종류
• alt 속성은 이미지 사진이 업로드 되지않을경우, 이미지 설명문구가 나타나게 한다.

---

4) 값을 입력받는 칸을 만들때, 쓰는 tag

<form>
	<label>id</label>
	<input type="text" />
	<br />
	<label>password</label>
	<input type="password" />
	<br />
	<input type="submit" value="전송" />
</form>

id
password

• form tag안에 label tag, input tag 입력가능
  • label tag는 input tag 앞에서 input의 이름을 설정하는 tag이다.
  • input tag는 값을 입력받는 상자이다. type 속성을 통해서 상자의 종류를 결정해야한다
    • input tag의 type 속성이 submit일때, value 속성을 통해서 버튼의 이름을 설정할수있다

<form action="index.html">
  <input />
</form>

• action="index.html" 의미
  • form을 이용하면, index.html로 이동한다.
    • 예시 : form tag의 submit 버튼을 누르면, action의 index.html 페이지로 이동한다.

<input placeholder="id" required />

• placeholder="id" 의미
  • input 네모칸안에 이름을 넣는다.
• required 의미
  • 해당 input칸을 반드시 입력하고, submit버튼을 클릭할 수 있다.

---

4) 주석 단축키

주석 단축키 command + /

---

5) id와 class

p {
	color: tomato;
}

#id-test,
.class-test {
	color: aqua;
}

<div id="id-test">id가 적용된다.</div>
<div class="class-test">class가 적용된다.</div>
<div class="class-test">class가 적용된다.</div>

id가 적용된다.

class가 적용된다.

class가 적용된다.

• id와 class에 css지정하는 법 - id의 속성값앞에 #을 붙인다. class의 속성 값앞에 .을 붙인다.
• id는 중복 불가능(1개만 가능), class는 중복가능

---

6) 부모자식 관계에서 css지정하기

#item-list p {
  color: tomato;
}

• #item-list p의미 -> id item-list를 가진 tag안에 속한 모든 p tag에 css 적용

#item-list > p {
  color: brown;
}

• #item-list > p의미는 id item-list를 가진 tag 바로 안에 속한 p tag에 css 적용
  • item2는 item1에 바로 속한 것이 맞으나, item3은 item1에 바로 속한 것이 아니다.

    <div id="item1">
    	<div id="item2">
    		<div id="item3"></div>
    	</div>
    </div>

---

7) vsc 글자및 메뉴 크기 설정법

• vsc 글자 크기 설정법
  1. 톱니바퀴 click
  2. setting
  3. font size검색
  4. editor: font size의 숫자 값 수정
• vsc 메뉴 크기 설정법
  1. 톱니바퀴 click
  2. setting
  3. window zoom 검색
  4. editor: font size의 숫자 값 수정(기본 값 0)

---

8) 여러가지 css 속성

height: 100px;
상자 높이 길이를 결정

width: 33%;
상자 폭 길이를 결정

background-color: tomato;
상자의 배경색을 결정

color: yellowgreen;
tag가 포함하고 있는 content의 색을 바꾼다.

font-size: 30px;
글자 크기를 바꾼다.

font-weight: 400;
글자 굵기를 바꾼다.

padding: 15px;
상자의 크기를 상하좌우 15px 만큼 넓힌다.

margin: 50px;
margin-left: 15px;
상자의 왼쪽에 15px만큼 빈 공간을 만든다.

border: 3px dashed blue;
경계선을 꾸미는 기능이다.
속성의 값의 순서는 선의 굵기 선의 종류 선의 색상이다.
}

---

9) div들을 가로,세로로 이동시키기(flexbox)

중요 : 배치하고 싶은 div를 포함하는 부모 div에다가 설정해야한다.
결론 : 부모div에다가 flex설정 -> flex방향설정 -> div들을 배치방향, 배치수직방향 움직인다.

display: flex;
세로로 배치된 div들이 가로로 배치하고 싶을때 사용한다.

flex-direction: row;
div들의 배치 방향을 바꿀수있다.
수직방향 : column
수평방향 : row
역방향 : column-reverse, row-reverse

justify-content: flex-end;
div들이 나열된 방향을 기준으로 div들을 움직인다.
맨 왼쪽, 중간, 맨 오른쪽, div들의 간격을 띄우기(space-between)

align-items: center;
div정렬방향의 수직방향을 기준으로 div들을 묶어서 움직인다.

---

10) div들을 한 줄에 배치시키기 힘들 때, 사용하는 방법

• 부모에다가 설정해야함(flex처럼)

flex-wrap: nowrap;(기본값)
자식 div들을 한 줄로 배치하기 어려울때, 자식div들의 폭을 줄여서 강제로 한 줄로 배치한다.

flex-wrap: wrap;
자식div의 폭을 줄이지 않고, div들을 한 줄로 배치시키는 것이 아니라 두 줄로 배치시킨다.

---

11) div들이 남은 공간을 차지하게 설정하는 법

결론 : flex: 1;을 자주쓴다.

flex-basis: 100px;
해당 div의 폭을 설정한다

flex-grow: 1;
남은 공간을 차지하는 비율을 의미한다, 기본값 0;

• 다른 방식
  • 2개의 div가 있을 때, 한쪽에는 width: 10% 설정, 다른 쪽에는 width: 90% 설정

flex-shrink: 5;
부모div가 감소할때(윈도우 창을 줄일때), 자식div가 감소하는 비율, 기본값 1;

flex: 1;
flex-basis, flex-grow, flew-shrink를 한꺼번에 설정하는 방법
flex: grow값 shrink값 basis값
flex: 1 1 100px;
실제로는 flex: 1;을 자주쓴다 -> grow만 설정, 나머지는 기본 값이다.