🐻 VSCode 기본적으로 설치해주면 좋은 플러그인
- Prettier Code Formatter : 단축키 Alt + Shift + F 로 자동 포맷 맞춤
- Auto Rename Tag
- Auto Close Tag
- Live Server : 코드를 바꾼 뒤 저장하면 자동으로 웹브라우저에서 새로고침되어 적용됨
🐶 HTML 문법 정리하기
- HTML의 기본 구조
<!DOCTYPE html>
<html>
<head>
<meta name="내가 넣고 싶을때 넣는 정보" content="넣고 싶은 내용" />
<title>탭에 출력될 정보</title>
<!-- css 파일을 별도로 저장시켜놓고, 페이지 접속 시 css 파일의 경로를 불러와서 보여주는 식-->
<link rel="stylesheet" href="css파일의 경로" />
</head>
<body>
화면에 보여질 내용을 작성
띄워쓰기는 1칸만 가능
개행은 그냥 하면 안된다
<div></div> <!--<div></div>-->
<script>
자바스크립트 코드 작성
</script>
<!--자바 스크립트 코드는 가장 마지막에 넣어주는 것이 가장 좋은 형태라고 알려져서 사용중이다-->
</body>
</html>
- h 태그 : 제목 태그이며, 글자 크기에 따라 1부터 6까지 설정 가능
<h1>제목 태그</h1>
<h2>제목 태그</h2>
<h3>제목 태그</h3>
<h4>제목 태그</h4>
<h5>제목 태그</h5>
<h6>제목 태그</h6>- a 태그 : 클릭 시 해당 주소로 이동 ( 자주 사용됨 )
<a href="https://www.google.co.kr/">구글</a>
<a href="https://www.naver.com/">네이버</a>
<a href="/03_h1%20태그.html?id=test&pw=qwer">h1 태그</a>
<a href="/a/test.html">절대 경로</a>
<a href="./a/test.html">상대 경로</a>- img 태그 : CSS로 처리하기 때문에 잘 쓰이진 않는다.
<img src="https://s.pstatic.net/shopping.phinf/20240102_26/a6d473c3-bb1d-456a-8594-54958c012648.jpg?type=f294_378">
<img src="./common.jpeg" width="200">
<img src="./common.jpeg" style="width: 200px;">
<!--그림이 출력되지 않을 때 설명-->
<img src="./a/common.jpeg" alt="그림 설명" width="200">
<!--이미지에서 사각형의 픽셀값을 지정해서 해당 부분 클릭하면 지정한 링크로 이동-->
<picture>
<img usemap="#testmap" src="https://static.coupangcdn.com/aa/cmg_paperboy/image/1704872362232/P-Top%2C-R1_PC.jpg">
<map name="testmap">
<area shape="rect" coords="40,45,270,180" title="watch" href="www.google.co.kr">
<area shape="rect" coords="290, 170, 333, 250" title="phone" href="www.naver.co.kr">
</map>
</picture>
<!-- 반응형 화면 지정(모바일, 웹페이지 등에서 볼때 화면에 따라 달라짐) 대부분다 css로 처리함-->
<picture>
<source media="(min-width:650px)" srcset="https://s.pstatic.net/shopping.phinf/20240102_26/a6d473c3-bb1d-456a-8594-54958c012648.jpg?type=f294_378">
<source media="(min-width:450px)" srcset="https://static.coupangcdn.com/aa/cmg_paperboy/image/1704872362232/P-Top%2C-R1_PC.jpg">
<source media="(min-width:250px)" srcset="/common.jpeg">
<img src="/common.jpeg" width="width:auto;">
</picture>- 테이블 태그
<table border="1px">
<th>
<td>칼럼 이름1</td>
<td>칼럼 이름2</td>
</th>
<tbody>
<tr>
<td>1 - 1</td>
<td>1 - 2</td>
</tr>
<tr>
<td>2 - 1</td>
<td>2 - 2</td>
</tr>
<tr>
<td>3 - 1</td>
<td>3 - 2</td>
</tr>
</tbody>
</table>- 리스트 태그
<!--정렬 안된 목록-->
<ul>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ul>
<!--정렬 된 목록-->
<ol>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
</ol>- p 태그와 span 태그
<!--해당 글자만 강조하고 싶을때 사용 -->
안녕하세요 저는 <p>테스터</p> 입니다
<!--테스터라는 글자 자체만 스타일을 부여하고 싶을때 사용-->
안녕하세요 저는 <span>테스터</span> 입니다 - form 태그 ( 백엔드 개발자한테 중요 )
<form method="post" enctype="multipart/form-data" action="http://localhost:8080/test/data">
이메일 : <input type="text" name="email"> <br>
비밀번호 : <input type="password" name="pw"> <br>
사진 : <input type="file" multiple accept="image/*" name="files"> <br>
개인정보 제공 : <input type="radio" name="accept" value="동의"> 동의
<input type="radio" name="accept" value="비동의"> 비동의
<br>
점심 메뉴 : <input type="checkbox" name="lunch" value="치킨"> 치킨
<input type="checkbox" name="lunch" value="피자"> 피자
<input type="checkbox" name="lunch" value="삼겹살"> 삼겹살
<br>
예약 날짜 : <input type="date" name="date">
<br>
<input type="reset" value="초기화버튼">
<br>
<input type="button" value="기능없는버튼">
<br>
<!-- submit 버튼을 누르면 input 태그들에 입력한 내용을 form 태그에 지정한 서버로 전송 -->
<input type="submit" value="전송하기버튼">
<br>
<button>전송하기버튼</button>
</form>➡ 전송하기 버튼을 클릭하면, action 에서 지정한 주소로 요청이 들어 오게 된다. 이때
컨트롤러에서 위에서 지정한 각각의 name과 동일한 이름으로 변수를 만들어 놓으면 해당
요청이 각 변수로 매핑되어 들어오는 것을 확인 할 수 있었다.
🐯 CSS 문법 정리하기
- CSS 적용하는 법
<!-- 1번째 방법 : style 태그 사용 -->
<style>
/* CSS 코드 */
</style>
<!-- 2번째 방법 : css 파일 사용 (많이 사용) -->
<link rel="stylesheet" href="./style.css(css 파일의 경로)" />- CSS 기본 구조
선택자 {
디자인 코드 작성
}
선택자 : 태그이름, #아이디, .클래스이름
------------------------------------------------
예시)
.class2 {
background-color: red;
}
.class1 {
color: green;
}
#p1 {
color: blue;
}
#p2 {
color: red;
}
<body>
<p id="p1">안녕하세요</p> // #p1 으로 설정된 부분의 스타일 적용
<p id="p2">안녕하세요</p> // #p2 으로 설정된 부분의 스타일 적용
<p class="class1">안녕하세요</p> // .class1 으로 설정된 부분의 스타일 적용
<p class="class1 class2">안녕하세요</p> // .class1 으로 설정된 부분의 스타일 적용 후 class2 스타일 적용
</body> - backgroud(뒷 배경) 설정
body {
background-color: green;
}
div {
background-image: url('1.png');
background-position: right;
background-repeat: no-repeat; /* 작은 이미지를 여러번 반복해서 박스를 채우도록 하는 설정*/
width: 100%;
height: 70%;
}- border(테두리) 설정
.div1 {
border: 5px solid red;
}
.div2 {
border: 3px dotted green;
}
.div3 {
border: 1px solid gray;
/* 전부 */
border-radius: 5px;
/* 왼쪽 위, 오른쪽 아래 / 오른쪽 위, 왼쪽 아래 */
border-radius: 5px 10px;
/* 왼쪽 위/ 오른쪽 위, 왼쪽 아래, / 오른쪽 아래 */
border-radius: 5px 10px 15px;
/* 왼쪽 위/ 오른쪽 위 / 오른쪽 아래 / 왼쪽 아래 */
border-radius: 5px 10px 15px 20px;
}- padding 과 margin 설정
.div1 {
margin: 10px;
padding: 10px;
width: 50px;
border: 1px solid black;
border-radius: 50px;
}
.div2 {
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
padding: 5px 10px 15px 20px; /* 위에부터 시계방향 순*/
padding: 5rem, 10rem, 15rem, 20rem; /* 화면의 비율로 픽셀을 지정*/
padding-left: 40px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 30px;
width: 50px;
height: 50px;
border: 1px solid red;
border-radius: 50px;
}- 링크 설정
a {
color: red; /* a 태그 글자 색깔 */
text-decoration: none; /* a 태그 밑줄 삭제 */
background-color: black;
text-decoration: none;
}
a:visited {
color: green; /* 한번 클릭했을 때 글자 색깔 */
}
a:active {
color: pink; /* 클릭 했을 때 링크 상태 */
}
a:hover {
color: blue; /* 마우스 위로 올렸을때 보이게하는 색 */
}- 리스트 설정
ul {
list-style-type: none; /* 리스트 앞 표시(기본 : 동그라미) 지정 */
background-color: blue;
}
li {
margin-top: 5px;
margin-bottom: 5px;
background-color: yellow;
}
li:nth-child(2) { /* 리스트의 첫번째 기준으로 몇번째 자식이냐 */
margin-top: 5px;
margin-bottom: 5px;
background-color: red;
}
li:nth-child(3n) { /* 3, 6, 9 순으로 3의 배수에만 적용 */
margin-top: 5px;
margin-bottom: 5px;
background-color: pink;
}
li:nth-child(2n + 2) { /* 지정해 주는 연산에 따라 자식 순번에들에게 적용 가능 */
background-color: green;
}
li:last-child { /* 마지막 번째 자식에 적용 */
background-color: white;
}-
아이콘 설정 ( 무료 아이콘 템플릿 사용 )
➡ 구글 폰트
➡ Font Awesome
<!--font awesome 아이콘 적용 시 적용시킬 css 파일-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
// 아이콘 설정 예시
<a href="https://www.youtube.com/">
<i class="btn fa-brands fa-youtube"></i>
</a>
<a href="https://www.instagram.com/">
<i class="btn fa-brands fa-instagram"></i>
</a>- display 설정
.container {
border: 2px blue solid;
margin-bottom: 30px;
}
.content {
padding: 8px;
margin: 8px;
border: 2px red solid;
}
#c1 > .content {
/* block : 한줄을 다 차지는 설정 */
display: block;
}
#c2 > .content {
/* inline : 내용만 감싸는 설정, 안에 내용을 글자로 취급, 박스 취급 X */
display: inline;
}
#c3 > .content {
/* inline-block : 내용만 감싸는 설정, 박스 취급 */
display: inline-block;
}
#c4 > .content {
/* none : 화면에서 사라짐, 자리 차지 X */
display: none;
}
#c5 > .content {
/* hidden : 화면에서 사라짐, 자리 차지 O */
visibility: hidden;
}
#c6, #c7, #c8 {
/* flex : 화면 크기에 따라서 배치가 달라지는 박스 */
display: flex;
}
.flex-wrap {
/* display가 flex인 태그에서 wrap은 줄바꿈으로 내용 정렬 */
flex-wrap: wrap;
}
.flex-nowrap {
/* display가 flex인 태그에서 wrap은 줄바꿈을 안함 */
flex-wrap: nowrap;
}
.flex-wrap-reverse {
/* display가 flex인 태그에서 wrap-reverse은 줄바꿈 하고 역순 정렬 */
flex-wrap: wrap-reverse;
}
.flex-container {
display: flex;
}
.flex-container > .content {
width: 50px;
}
.flex-start {
/* 왼쪽으로 정렬 */
justify-content: flex-start;
}
.flex-center {
/* 가운데 정렬 */
justify-content: center;
}
.flex-end {
/* 오른쪽으로 정렬 */
justify-content: flex-end;
}
.flex-space-around {
/* 균일한 상/하, 좌/우 간격 벌림 */
justify-content: space-around;
}
.flex-space-between {
/* 균일한 좌/우 간격 벌림 */
justify-content: space-between;
}- 반응형 설정 ( 화면 픽셀 크기에 따라 다르게 보이도록 설정 )
div {
border: solid green;
width: 100px;
}
#div1 {
width: 1000px;
}
#div2 {
width: 100%;
max-width: 1000px;
}
#div3 {
min-width: 800px;
}
/* 세로 모드 모바일 */
@media (min-width: 375px) {
#div4 {
background-color: yellow;
display: none;
}
}
/* 가로 모드 모바일 */
@media (min-width: 576px) {
#div4 {
background-color: red;
display: none;
}
}
/* 일반 태블릿 */
@media (min-width: 768px) {
#div4 {
background-color: blue;
display: block;
}
}
/* 일반 데스크탑 */
@media (min-width: 992px) {
#div4 {
background-color: black;
}
}- position 설정
div {
border: solid red;
}
#div1 {
/* 위치 지정 X */
position: static;
}
#div2 {
/* 위치를 상대적으로 지정 */
display: inline-block;
position: relative;
left: 200px;
top: 100px;
}
#div3 {
/* 브라우저에서 고정된 위치로 지정 */
position: fixed;
right: 30px;
bottom: 20%;
}
#div4 {
/* 절대값으로 위치 지정 */
position: absolute;
right: 300px;
bottom: 200px;
}
#div5 {
/* 화면을 벗어났을 때 fixed 처럼 동작 */
position: sticky;
top: 0px;
left: 50px;
width: 300px;
}
Backend Developer