1. 프론트엔드에서 잘 짠 코드다? 어떻게 알까?
검색엔진 최적화(seo)라는 개념이 있다
-> 간단한 테스트용 사이트가 있다
Seobility | Online SEO Software & Free SEO Tools
Check your Website with the free SEO software and tools from Seobility. Get insights to improve your search engine optimization.
www.seobility.net
2. vs code 내 'live server' extension
1) 특징
- 학습할 때 쓰기 좋은 확장 프로그램(개발할때x)
- 변경사항 바로바로 확인 가능
- 단, 파일이나 이미지 등 경로 쓸 때 주의 필요(절대경로 인식을 못함, 상대경로로 반드시 작성! - 아래 코드 참고)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<!-- 상대경로 : -->
<!-- 1. ./ : 현재 위치(.) 경로(/) -->
<!-- 2. ../ 한단계 상위 위치(.) 경로(/) -->
</head>
<body>
<h2>안녕안녕안녕안녕</h2>
</body>
</html>3. 반응형 웹 속성
1) navbar의 경우, 어떤 속성으로 언제 반응을 하는 걸까?
-> navbar-expand라는 속성
<nav class="navbar navbar-expand-lg bg-body-tertiary">
2) href에 #id를 넣어주면 해당 위치로 스크롤이 이동하게 하기
<li class="nav-item">
<!-- href에 id를 넣어주면 해당 위치로 스크롤이 이동한다 -->
<a class="nav-link" href="#contact">Contact</a>
</li>
<main>
<section id="contact" class="contact">contact</section>
</main>
4. 배치와 관련된 반응형(grid system)
1) 내가 원하는 화면 크기로 breakpoint 하는 방법
- 예를 들어 내 핸드폰 화면 크기는 500px이고 내 핸드폰에선 빨간색으로 보고싶어.
--> 미디어 쿼리 : css에서 반응형을 구현할 수 있는 기능
# all, screen 등등...
# @: At0rule
# 최대 500px까진 빨간색으로 뜰겁니다
@media all and (max-width: 500px) {
.intro{
background-color:red;
}
}
'SSAFY' 카테고리의 다른 글
| [일기] 남의 학교 도서관에서 장고 공부하다가 뛰쳐나감 (4) | 2024.09.29 |
|---|---|
| [개념정리] 자료구조 (0) | 2024.08.26 |
| [수업기록] Web : Reponsive Web (0) | 2024.08.22 |
| [수업기록] Web : Bootstrap (0) | 2024.08.21 |
| [수업기록] Web : CSS Box Model, CSS position, CSS Flexbox (0) | 2024.08.20 |
