[웹개발종합반] 1주차 개발일지 (1) - HTML과 부트스트랩 응용

수업목표
- 서버-클라이언트 역할 이해
- HTML. CSS 기초지식 이해, 부트스트랩 사용
- Javascript 기초 문법 사용

01~03. HTML, CSS 기본 개념

네이버 웹페이지의 글을 수정했다. 웹서비스의 동작원리가 뭘까?
- 힌트1: 내 컴퓨터에서만 수정된다. 원리가 뭘까?
- 힌트2: 내가 보고 있는 웹페이지는 사실, 인터넷과 관련이 없다.
- 힌트3: 새로고침하면 원상복귀된다.
  - 왜? 서버로 부터 새로 정보를 받아오기 때문이다.
- 브라우저의 역할: 서버에 요청한다 -> 받아와서 그려준다.

html: 뼈대
css: 꾸미는 것(예: 컬러, 폰트사이즈 등을 지정하는 것)
js: 클릭하면 이동하는 것, 움직이는 것 등

영화예매사이트에서 새로고침하지 않아도, 좌석이 실시간으로 보이는 것?
예쁘게 그리지않고, 데이터만 주고받는 형태의 예시이다.
"JSON 형식" 이라고 부른다.

04. 로그인페이지 만들기

HTML
- 메타태그, 타이틀 태그 등 태그로 이루어져 있다.
- 로그인페이지 보고 만들어보기

<h1>로그인 페이지</h1>
<p>ID: <input type="text" /></p>
<p>PW: <input type="text" /></p>
<button>로그인하기</button>

05. CSS 기초

제목에 색 입히기

<head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
    <style>
        .mytitle{
            color:red;
        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인 페이지</h1>

06.자주 쓰이는 CSS

배경에 내가 원하는 이미지를 지정하기
이미지 url, position, size는 항상 같이 간다. 기억하기!

.mytitle{
    background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
    background-position: center;
    background-size: cover;
}

버튼속성을 가운데에 배치하려면, block으로 표시해야함

.mybtn{
    width: 100px;
    margin:30px auto;
    display: block;
}

07.폰트, 주석, 파일분리

폰트사이트: 구글웹폰트
주석처리: 커맨드 + /
스타일부분 파일분리: style.css

08~09.부트스트랩 기초

사이트: https://getbootstrap.com/docs/4.0/components/alerts/
여기서 골라서 코드붙여넣기하면 가넝한.

헤드에 필요한 정보 넣어주기

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

부트스트랩에서 Jumbotron, cards 검색하여 복사, 붙여넣기
src에 원하는 (고양이)사진 넣고
div.wrap으로 감싸서
margin: auto; 넣어주면 가운데 정렬할 수 있다.

고양이 사진 주소(너무길어서 ㅋㅋㅋㅋㅋ ㅠㅠ)

src="data:image/jpeg;base64,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"

10. 부트스트랩에서 가져온 포맷을 변형하기

변형해서 링크 메모장 만들기

상단 헤더

<div class="jumbotron">
    <h1 class="display-4">나홀로 링크 메모장!</h1>
    <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다.</p>
    <hr class="my-4">
    <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
    </p>
</div>

고양이 카드로 바꾸기
아래 코드를 9줄 복사+붙여넣기

<div class="card">
    <img class="card-img-top"
         src="..."
         alt="Card image cap">
    <div class="card-body">
        <p><a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가요</a></p>
        <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 어쩌고</p>
        <p class="card-comment">여기에 코멘트가 들어갑니다.</p>
    </div>
</div>

11. 메모장 사이에 url, 코멘트 입력할 수 있는 포스팅박스 추가하기

<!--  input box  -->
<div class="input-box">
    <div class="article">
        <div>Article URL</div>
        <input type="url" class="article-input">
    </div>
    <div class="comment">
        <label for="exampleFormControlTextarea1">Comment</label>
        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">기사 저장</button>
</div>

아직 1주일차를 다 듣진못했는데, 이틀치 각각 8강까지 수강 완.

내일은 JS배울 차례임.

HTML, CSS, JS사용법은 아는데 부트스트랩은 처음 해봐서 신기했다.

이런 편리한 곳이 있다니..ㅜㅜ

저작자표시 (새창열림)

'Development' 카테고리의 다른 글

[웹개발종합반] 2주차 개발일지 -JS, JQuery, Ajax (0)	2021.07.24
[웹개발종합반] 1주차 개발일지 (2). JavaScript 기초 (0)	2021.07.24
[프론트엔드 개발] 유튜브 클론코딩 완성! (feat. 드림코딩 by.엘리) (3)	2021.07.20
국비지원으로 스파르타 코딩클럽의 웹개발 풀스택강의를 듣기 시작했다. (0)	2021.07.20
[JS] JS활용한 투두리스트 웹 사이트 프로젝트-마무리, 보완할 점 (5)	2021.07.12

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

[웹개발종합반] 1주차 개발일지 (1) - HTML과 부트스트랩 응용

01~03. HTML, CSS 기본 개념

04. 로그인페이지 만들기

05. CSS 기초

06.자주 쓰이는 CSS

07.폰트, 주석, 파일분리

08~09.부트스트랩 기초

10. 부트스트랩에서 가져온 포맷을 변형하기

11. 메모장 사이에 url, 코멘트 입력할 수 있는 포스팅박스 추가하기

'Development' 카테고리의 다른 글

01~03. HTML, CSS 기본 개념

04. 로그인페이지 만들기

05. CSS 기초

06.자주 쓰이는 CSS

07.폰트, 주석, 파일분리

08~09.부트스트랩 기초

10. 부트스트랩에서 가져온 포맷을 변형하기

11. 메모장 사이에 url, 코멘트 입력할 수 있는 포스팅박스 추가하기

'Development' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

'Development' 카테고리의 다른 글

'Development' 카테고리의 다른 글

개인정보

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역