1주차 - HTML, CSS

폰트

1. 구글 폰트 검색

2. language korean 선택, 원하는 폰트 클릭

3. 우측상단 Selected Family 클릭

4. <link href= ~ 태그 복사 후 <title> </title> 뒤에 복붙

5. font-family:~ 복사 후 <style> 태그 안에 복붙

<style>
        *{
            font-family: 'Nanum Pen Script', cursive;
        }
</style>

CSS 파일분리

<head>
    <meta charset="UTF-8">
    <title>파일분리ㄱㄱ/title>
    <link rel="stylesheet" type="text/css" href = "파일명.css">
</head>

파일명.css 파일을 위 html 파일과 같은 폴더에 만들고 style 태그 안 내용을 작성

이미지 어둡게 하기

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");

모바일 처리

max-width: 500px
width: 95%;

화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px (모바일 가로 사이즈)

부트스트랩 시작 템플릿

<!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>
</head>

<body>
    <h1>시작!!</h1>
</body>

</html>

사이트

부트스트랩

https://getbootstrap.com/docs/5.0/components/buttons/

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

이모티콘

https://kr.piliapp.com/facebook-symbols/

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원

kr.piliapp.com

Visual Studio Code

주석: Ctrl+k+c
줄 맞춤: Ctrl+k+f
html 코드 자동생성: 1. 파일 이름 .html로 저장 2. 우측하단 설정 HTML로 되어 있는지 확인 3. !+Talb 혹은 html 타이핑 후 HTML:5선택

728x90

'항해99 > 웹개발 종합반' 카테고리의 다른 글

1주차 - HTML 태그 (0)	2022.09.05
4주차 - FLASK 시작하기 - 서버, 클라이언트 파일 만들기 (0)	2022.09.02
3주차 - 파이썬 패키지 사용 & 크롤링 (0)	2022.09.01
2주차 - JQuery, Ajax (0)	2022.08.29
웹개발 종합반 1주차 숙제: 팬명록 메인 페이지 만들기 (0)	2022.08.28