2023. 4. 8. 15:29ㆍ항해99
스파르타 코딩클럽 웹개발 종합반 수업내용을 정리한 것입니다.
웹 브라우저의 원리
- 웹 페이지를 개발자모드에서 수정시 나에게만 바뀐 것으로 보인다는점
- 페이지를 띄운 후로는 와이파이와 관계가 없는점
- 새로고침을 하면 다시 원래대로 돌아간다는 점
위 예를통해 알 수 있는 건
naver.com 입력 > 서버에 요청이간다 > 서버가 HTML,CSS,JS 페이지를 준다.
HTML
- 태그로 구성된다.
- 웹 사이트에 뼈대이다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
하이요~
<!-- 저는 주석이에요 컴퓨터는 못알아듣죠 -->
<!-- 일하는 사람간에 소통을 위해 사용해요 -->
</body>
</html>CSS
- 꾸미기 입니다.
- 대상의 이름을 지정해서 사용한다.
- head 태그 안에 style 태그를 넣어서 사용하거나 별도 css 파일을 만들어 분리해서 사용할 수도 있습니다.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hi{
color:red
}
</style>
</head>
<body>
<p class="hi">하이요~</p>
</body>
</html>또 자주 쓰이는 속성들이 있는데 이는
- background-image : url(’ 배경이미지url ’);
- background-size: 20px; // 배경 이미지의 크기
- background-position : center; // 배경이미지의 위치를 지정
- color : red // 글자색
- width: 100px; // 가로길이
- height: 50px; // 세로길이
- border-radius:9999px; // 박스모서리 둥글기
- margin : 20px auto 20px auto; // 박스 바깥 여백지정
- padding: 20px 0 20px 0 ; // 박스 안쪽 여백
- display: flex; // flex 시리즈는 정렬을 편하게 해준다.
Flex 의 경우는 아래에 사이트로 공부하면 좋습니다.
Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
Bootstrap
- 남이 만들어 놓은 CSS 를 가져오는 것이다.
- 아래 공식문서에 마음에 드는 코드를 찾아 원하는 위치에 넣고, 많은 수정이 아닌 적게 수정한다.
https://getbootstrap.kr/docs/5.2/getting-started/introduction/
Bootstrap 시작하기
Bootstrap은 강력하고 기능이 풍부한 프론트엔드 툴킷입니다. 프로토타입부터 프로덕션까지 뭐든지 빠르게 빌드해보세요.
getbootstrap.kr
정적페이지 배포 git pages
- Github 로 정적 페이지를 배포하는 방법이다.
- 저장소 생성 > 파일 업로드 > 설정 > Pages > Branch 를 main 으로 변경후 세이브 > 기다리면 완료
회고
기본적인 것들을 배웠던 수업이고, 항상 개발할때 html, css 를 하나 하나 만들었는데 부트스트랩을 처음 사용해보고 정말 편하다는 것을 느꼈다.
'항해99' 카테고리의 다른 글
| 엑셀보다 쉬운 SQL 1주차 (0) | 2023.06.01 |
|---|---|
| 웹개발 종합반 5주차 (0) | 2023.04.09 |
| 웹개발 종합반 4주차 (0) | 2023.04.08 |
| 웹개발 종합반 3주차 (0) | 2023.04.08 |
| 웹개발 종합반 2주차 (0) | 2023.04.08 |