[WIL] 웹개발 종합반 1주차

이현동·2022년 12월 27일

웹개발종합

목록 보기

1/6

1. 1주차 회고

2022.12.27 웹개발 종합반 1주차 강의를 완료했다. 그동안 간단하게 배워왔던 HTML, CSS, 간단하게 JS를 다시 한번 배워볼 수 있었다.
스파르타코딩클럽에서 제공한 강의자료를 이용해 강의를 통해서 기존에 알고 있던 내용이 아닌 새롭게 알게 된 내용을 정리하려고 한다.

2. 부트스트랩, 예쁜 CSS 모음집

1) bootstrap?

부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)

2) 부트스트랩 시작 템플릿

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>Title</title>
</head>
<body>

</body>
</html>

head의 코드에 부트스트랩에 있는 미리 작성된 코드들을 복사하여 간단하게 예쁜 CSS를 사용가능함!
남이 만들어 둔 것을 조금씩 고쳐 쓰는 방법

3. 모바일 화면처리

모바일에서는 "가로사이즈(width)"가 가장 문제

width: 95%;
max-width: 500px;

어디서나 500px로 맞추어라.
대신, 화면 폭이 500px 이하일 때는 95%이다가 넘으면 500px로 보이도록 할 수 있다.

이현동

https://hdlee.dev

다음 포스트