개발자가 된 핏짜

Section 11 요약:

아래처럼 윈도우 크기 작을 땐 default 설정해서

커지면 아래처럼 가로로 나오게 만들기를 했습니다.

아래는 사용한 css 코드입니다.

html {
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}

body {
    background-color: #60a9ff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.panel {
    background-color: white;
    border-radius: 10px;
    padding: 15px 25px;
    width: 100%;
    max-width: 960px;
    display: flex;
    flex-direction: column;
    text-align: center;
    text-transform: uppercase;
}

.pricing-plan {
    border-bottom: 1px solid #e1f1ff;
}

.pricing-plan:last-child {
    border-bottom: none;
}

.pricing-img {
    margin-bottom: 25px;
    width: 100%;
    max-width: 100%;

}

.pricing-header {
    color: #888;
    font-weight: 600;
    letter-spacing: 1px;
}

.pricing-features {
    margin: 50px 0 25px;
    color: #016ff9;
}

.pricing-features-item {
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;
    line-height: 1.5;
    padding: 15px 0;
    border-top: 1px solid #e1f1ff;
}

.pricing-features-item:last-child {
    border-bottom: 1px solid #e1f1ff;
}

.pricing-price {
    color: #016ff9;
    display: block;
    font-size: 32px;
    font-weight: 700;
}

.pricing-button {
    border: 1px solid #9dd1ff;
    border-radius: 10px;
    color: #348efe;
    display: inline-block;
    padding: 15px 35px;
    text-decoration: none;
    margin: 25px 0;
    transition: background-color 200ms ease-in-out;

}

.pricing-button:hover,
.pricing-button:focus {
    background-color: #e1f1ff;
}

.pricing-button.is-featured {
    background-color: #48aaff;
    color: white;
}

.pricing-button.is-featured :hover,
.pricing-button.is-featured:focus {
    background-color: #269aff;
    color: white;
}

@media (min-width: 900px) {
    .panel {
        flex-direction: row;

    }

    .pricing-plan {
        border-bottom: none;
        border-right: 1px solid #e1f1ff;
        padding: 24px 50px;
    }

    .pricing-plan:last-child {
        border-right: none;
    }
}

저작자표시 비영리 변경금지

'Udemy' 카테고리의 다른 글

Udemy 유데미 The Web Developer Bootcamp Section 13 반응형 웹사이트 만들기 Museum of Candy Project (0)	2022.10.26
Udemy 유데미 The Web Developer Bootcamp Section 12 bootstrap (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 6~10 css flexbox media queries (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 6~10 css color selector box position transform (0)	2022.10.24
Udemy 유데미 The Web Developer Bootcamp Section 4~5 html (0)	2022.10.23

유데미 웹개발자 부트캠프 섹션 6~10을 한꺼번에 묶어서 쓰려고 했는데 어느 순간 h2 태그가 안먹히고 자동으로 h3가 되서 멈췄습니다. h 태그에 대한 갯수 제한은 원래 없다고 하는데 티스토리만 그런건지는 잘 모르겠네요. 너무 많은 개념을 한꺼번에 배우다보니 소제목을 남발했습니다. 얼른 css 끝내고 JavaScript로 넘어가려고 하는데 css강의는 section 13까지 있습니다. 오늘 섹션 13까지 끝내고 자는 게 목표입니다.

CSS Flexbox

Flexbox is a one-dimensional layout method for laying out items in rows or columns

flex-direction: row(얘가 default), row-reverse, column, column-reverse;
justify-content: flex-start, flex-end, center, space-between, space-around, space-evenly;
flex-wrap: wrap, warp-reverse, no wrap;
align-items: flex-start, flex-end, center, baseline;
align-content: center, space-between, space-around, stretch, fext-start, flex-end;
align-self: flex-end, flex-start; (한개 개체에 적용)

Flex Sizing Properties

Flex-basis: Defines the initial size of an element before additional space is distributed
Flex-grow: Controls the amount of available space an element should take up. Accepts a unit-less number value
Flex-shrink: If items are larger than the container, they shrink according to flex-shrink

Responsive Design (반응형)

예전에는 기기 디스플레이에 맞게 일일히 디자인 해야했지만 지금은 하나 가지고 다 가능함

Media Queries

반응형 웹사이트를 가능하게 함 (기기 사이즈에 따라 수정 가능)
@media (width, max-width, min-width, orientation, ...)

저작자표시 비영리 변경금지

'Udemy' 카테고리의 다른 글

Udemy 유데미 The Web Developer Bootcamp Section 12 bootstrap (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 11 css responsive website 반응형 만들기 연습 (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 6~10 css color selector box position transform (0)	2022.10.24
Udemy 유데미 The Web Developer Bootcamp Section 4~5 html (0)	2022.10.23
Udemy 유데미 The Web Developer Bootcamp Section 1~3 (0)	2022.10.22

Colt Steele의 The web developer bootcamp Section 6 부터는 css에 대한 강의입니다. 그래도 한 번 다른 강의 (스파르타 학원 웹개발 종합반 강의) 들었다고 아는 단어가 몇 개 들립니다. 섹션 하나 당 1시간에서 2시간 걸리는데 코드 따라치고 퀴즈도 풀다보면 거의 한 섹션당 5시간은 잡고 듣는 것 같습니다. 심지어 좀 아는 부분이라고 생각되는데도 그렇습니다. 유데미 웹개발자부트캠프 강의는 섹션 61까지 있습니다.

원래 11월 7일 전까지 유데미 웹개발자부트캠프 강의를 다 들을려고 했는데 더 분발해야겠습니다. 대학생인 동생이 당분간 시험기간이라 새벽까지 공부한다고 하니 같이 조인해볼 예정입니다. 전체 강의의 앞부분은 프론트엔드의 역할에 대한 것들이라 얼른 백엔드 파트도 배우고 싶습니다.

Sololearn 이라는 모바일 학습앱으로 이동하거나 생각날 때마다 JavaScript를 배우고 있는데 꽤 도움이 됩니다. Lesson이 59개로 나누어져 있는데 이제 27개 했습니다. 다음주 안으로 JavaScript를 마치고 Java로 넘어갈 예정입니다.

웹개발 종합반에서 Java와 JavaScript의 차이는 인도와 인도네시아라고 했습니다.

CSS 연결하기

<link rel="stylesheet" href="app.css">
<head>사이에 넣는다</head>

Color

이름있는 색깔 140개 있음
rgb (red, green, blue)
hex

Color Names — HTML Color Codes

HTML color names rule. Modern browsers support 140 HTML color names which we've listed here along with their Hex color codes and RGB values.

htmlcolorcodes.com

Color Picker — HTML Color Codes

Finding that perfect color is easier than you think. Use our color picker to discover beautiful colors and harmonies with Hex color codes and RGB values.

htmlcolorcodes.com

CSS Text Properties

text-align
font-weight: normal(400), bold(700), lighter, bolder, 100, 900
text-decoration: underline, underline dotted, overline, line-through, wavy, dashed, solid, none
line-height (줄간격)
letter-spacing (글자간격)
text-transfer: uppercase, lowercase, capitalize

font-size

font-size: 대부분 px(픽셀)을 사용함; 기기마다 환경에 따라 1 px가 다름

font-family

https://www.cssfontstack.com/

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

Join to access discussion forums and premium features of the site.

www.cssfontstack.com

font-family: 폰트명;

CSS Selectors

universal selector: * { } 전체 다 지정
element selector: 해당 element 다 지정함; eg. img { }, button{ }
selector list: 여러개 같이 지정; eg. h1, h2 { }
descendent selector: body button { } -> body에 있는 모든 버튼을 지정
adjacent selector: h1 + p {} -> h1 바로 다음에 오는 p를 지정
direct child: > 사용해서 그룹 안에 요소 지정

ID selector

#아이디 { }
한 번만 사용함

Class selector

그룹으로 묶어서 사용
.클래스이름 { }

Attribute selector

레이블된 "타입"을 모두 지정
input [type="text"] { } -> input 안에 "text"를 지정함

Trending Color Palettes - Coolors

Get inspired by thousands of beautiful color schemes and make something cool!

coolors.co

Pseudo classes

keyword added to a selector that specifies a special state of the selected element(s)
:active -> 누르면 변하게
:checked -> 체크하면 변하게
:first
:first-child
:hover -> 마우스 올라가면 변하게
:not()
:nth-child()
:nth-of-type() -> n번째 타입이 변하게; 홀수 (2n-1) 짝수 (2n)

Pseudo elements

Keyword added to a selector that lets you style a particular part of selected element(s)
: 원래는 두개 써야하지만 크롬에서는 한개 써도 됨
::after
::before
::first-letter
::first-line
::selection

The Cascade

순서가 중요함 (The order your styles are declared in and linked to matters!) 마지막에 한 걸로 됨
Specificity: ID > CLASS > ELEMENT (더 구체적인 게 이김)
https://specificity.keegan.st/

Specificity Calculator

Specificity Calculator A visual way to understand CSS specificity. Change the selectors or paste in your own.

specificity.keegan.st

Inline Styles

거의 아무도 안씀
비효율적

!important

다른 것들을 다 이기는 스타일이다! Specificity 다 이김
잘안씀

CSS Inheritance

상위 개체의 스타일 그대로 받아옴

Border

border-width (두께) 랑 border-style (solid, dashed, dotted, inset)같이 해야 보임
width style color 순을 써도 됨
border: 2px solid red;

Padding, Margin

padding: 박스 안 들여쓰기
margin: 박스 간격 띄우기

Display properties

display: inline, block, inline-block, none

CSS Units

px: 가장 많이 사용되는 단위; 반응형에는 권장하지 않음
%: 상대적인 비율
em: With font-size, 1em equals the font-size of the parent. 2em's is twice the fontsize of the parent, etc. EM'S ARE RELATIVE UNITS With other properties, 1em is equal to the computed font-size of the element itself.
- 바로 위에 parents를 기준으로 함
rem: Relative to the root html element's font-size. Often easier to work with. ROOT EMS If the root font-size is 20px, 1 rem is always 20px, 2rem is always 40px, etc.
- 최초 root element를 기준으로 함
vh : viewheight: 1vh is 1% of the height of the viewport
vw: viewwidth: 1vw is 1% of the width of the viewport

Opacity & Alpha Channel

Alpha Channel: rbga(red, blue, green, alpha) -> 색깔만 투명해짐
- hex 는 00 to FF
- rbg 는 0 to 1
opacity -> 전체적으로 (포함된 elements 다) 투명해짐

Position Property

https://developer.mozilla.org/en-US/docs/Web/CSS/position
static: 다른 스타일 설정해도 효과 없는 상태임 (default 상태를 유지함)
relative: 기존 default position 대비 움직이고 다른 element에는 영향 없음
absolute: The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
fixed: 항상 고정되어 있음. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by theviewport, except when one of its ancestors has atransform,perspective, orfilterproperty set to something other thannone(see theCSS Transforms Spec), or thewill-changeproperty is set totransform, in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies withperspectiveandfiltercontributing to containing block formation.) Its final position is determined by the values oftop,right,bottom, and left.

position - CSS: Cascading Style Sheets | MDN

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

developer.mozilla.org

CSS Transitions

https://easings.net/
transition: property name, duration timing function delay
ex) transition: background-color 3s 1s; (배경색깔 바꾸는데 3초 걸린다 1초 딜레이 후에)
timing function: ease; ease-in; ease-out; ease-in-out; linear; step-start; step-end; (여러개 동시에도 가능)
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

CSS Transforms

https://developer.mozilla.org/en-US/docs/Web/CSS/transform
rotate
scale
translate -> 움직이기
skew

저작자표시 비영리 변경금지

'Udemy' 카테고리의 다른 글

Udemy 유데미 The Web Developer Bootcamp Section 12 bootstrap (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 11 css responsive website 반응형 만들기 연습 (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 6~10 css flexbox media queries (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 4~5 html (0)	2022.10.23
Udemy 유데미 The Web Developer Bootcamp Section 1~3 (0)	2022.10.22

The web Developer Bootcamp 유데미 강의에서는

developer.mozilla.org 를 강의 자료로 활용을 많이 하는데 확실히 도움이 됩니다.

친절하게 정의랑 여러가지 자료들이 잘 정리되어 있습니다.

오늘 항해99 사전스터디 미팅에서 나온 단어 중에 html5랑 semantic elements가 나왔는데

바로 오늘 유데미 강의에서 정리해줘서 좋았습니다.

저는 이러한 자료들(mozilla 사이트 등)을 조원들이랑 공유하고 싶은데

영어라서 조금 조심스러운 면이 있습니다.

구글이 잘 번역해주니까 괜찮지 않을까 싶기도 해요.

일단은 보류입니다.

HTML5

a buzzword that refers to a set of modern web technologies. This includes the HTML Living Standard, along with JavaScript APIs to enhance storage, multimedia, and hardware access.

API - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

An API (Application Programming Interface) is a set of features and rules that exist inside a software program (the application) enabling interaction with it through software - as opposed to a human user interface. The API can be seen as a simple contract

developer.mozilla.org

Inline elements

<span>: a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate.

Block elements

<div> :the content division elements

other elements

<hr> : 가로 라인 만듦
<br>: break 줄바꿈
<sup>: superscript 작은 글자 위에
<sub>: subscript 작은글자 밑에

HTML Entity codes

코딩 기호들이랑 겹칠수 있는 기호들 (>,<,;, 등등)을 대체해서 쓰는 코드들
ex) < = <
검색하면 나옴

Semantic Markup

relating to meaning
<div>만 있는 거 대신 <main>, <header>, <nav>, <footer>, <section> 등 직관적인 이름을 붙여서 씀
<main>: dominant content of the <body> of a document
<nav>: provide navigtion links (menus, tables of contents, and indexes)
<section>: 말그대로 섹션
<article>: self-contained composition in a document, page, application, or site (e.g. a forum post, magazine, newspaper article, blog entity)
<aside>: a portion of a document whose content is only indirectly related to the document's main content (sidebars, call-out boxes)
<header>: 헤더는 헤더
<footer>: 풋터도 풋터
<time>: represents a specific period in time (24-hour clock,, calender, datetime ...)
<figure>: figure, its caption, and its contents are referenced as a single unit.
- <figure><img src="url" alt="desc"><figcaption>caption</figcaption></figure>
<abbr>, <data>, etc...

Screen reader

command + f5
vocie over 기능

Emmet

VScode 에서 html 빨리 쓸수 있게 도와주는 프로그램

HTML Tables

<td>: The Table Data Cell element - a cell of a table that contains data..
<tr>: table row element
<th>:header cell element
<thead>, <tbody>, <tfoot> :semantic markup
<Colspan> : column 만듦 (줄 몇개 차지)
<Rowspan>: row (열 몇개 차지)

Form Elements

<form>: a shell or container that doesn't have any visual impact; fill the form with a collection of inputs, checkboxes, buttons, etc.
represents a document section containing interactive controls for submitting information
the action attribute specifies WHERE the form data should be sent
The method attribute specifies which HTTP method should be used

<input>

create a variety of different form controls (20+ possible types ...)
여러가지 input type 예시들

<form action="/tacos">
        <input type="text" placeholder="username">
        <input type="password" placeholder="password">
        <input type="color">
        <input type="number" placeholder="숫자">
        <input type="range">
    </form>

Label

a caption for an item in a user interface
<label>
<label>이 안에 <input>넣는게 더 일반적(굳이 id 안넣어도 됨)</label>

<form action="/tacos">
        <p>
            <label for="username">Enter a username:</label>
            <input id="username" type="text" placeholder="username">
        </p>
        <p>
            <label for="password">Enter a password:</label>
            <input id="password" type="password" placeholder="password">
        </p>
        <p>
            <label for="color">Enter a color:</label>
            <input id="color" type="color">
        </p>
        <p>
            <label for="number">Enter a number:
            <input type="number" placeholder="숫자">
            </label>
            
        </p>


    </form>

Buttons

<button></button>
<form action="">이 가라는 곳으로 submit 한다.

Name

<name="이름"> 인풋에 사용
file:///tacos?username=Jenni&password=jennifer&color=%236f2f2f&num=3

 <form action="/tacos">
        <p>
            <label for="username">Enter a username:</label>
            <input id="username" type="text" placeholder="username" name="username">
        </p>
        <p>
            <label for="password">Enter a password:</label>
            <input id="password" type="password" placeholder="password" name="password">
        </p>
        <p>
            <label for="color">Enter a color:</label>
            <input id="color" type="color" name="color">
        </p>
        <p>
            <label for="number">Enter a number:</label>
            <input type="number" placeholder="숫자" id="number" name="num">
        </p>
        <button>submit</button>


    </form>

구글, 유튜브, 레딧 검색창 뺏어오기

 <form action="https://www.reddit.com/search">
        <h1>검색하기</h1>
        <h2>레딧 검색하기</h2>
        <input type="text" name="q" placeholder="reddit.com">
        <button>Search reddit</button>
    </form>


    <form action="https://www.google.com/search">
        <h2>구글 검색하기</h2>
        <input type="text" name="q" placeholder="Google.com">
        <button>Search Google</button>
    </form>

    <form action="https://www.youtube.com/results">
        <h2>유튜브 검색하기</h2>
        <input type="text" name="search_query" placeholder="Youtube.com">
        <button>Search Youtube</button>
    </form>

Radio buttons, Checkboxes & Selects

Checkbox:

<input type="checkbox" name="agree_tos" id="agree" checked>
<label for="agree">I agree to everything</label>

Radio button:

 	<label for="xs">XS:</label>
            <input type="radio" name="size" id="xs" value="xs">
            <label for="s">S:</label>
            <input type="radio" name="size" id="s" value="s">
            <label for="m">M:</label>
            <input type="radio" name="size" id="m" value="m">

Selects:

  <label for="meal">Please select a Meal Type.</label>
            <select name="meal" id="meal">
                <option value="fish">Fish</option>
                <option value="meat" selected>Meat</option>
                <option value="veg">Veggies</option>
                <option value="wat">Water</option>
            </select>

Range & Textarea

Range

<label for="cheese">amount of cheese</label>
            <input type="range" name="cheese_level" id="cheese" step="1" min="1" max="10" value="3">

Textarea

 <label for="text">any special requests?</label>
            <br>
            <textarea name="text" id="text" cols="30" rows="3" placeholder="I request..."></textarea>

HTML5 Validations

글자수나 포맷에 제한 주기
required : 필수입력

  <label for="first">Enter First name</label>
        <input type="text" name="first" id="first" required>
        <button>Submit</button>

minlength: 최소 글자수
maxlength: 최대 글자수
min, max: 최소치, 최대치 (숫자)
pattern: 암호, email, url 등등

<label for="email">Type email...</label> <input type="email" name="email" id="email" required>

저작자표시 비영리 변경금지

'Udemy' 카테고리의 다른 글

Udemy 유데미 The Web Developer Bootcamp Section 12 bootstrap (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 11 css responsive website 반응형 만들기 연습 (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 6~10 css flexbox media queries (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 6~10 css color selector box position transform (0)	2022.10.24
Udemy 유데미 The Web Developer Bootcamp Section 1~3 (0)	2022.10.22

ㅈ유데미 웹개발 부트캠프 Udemy Web developer bootcamp

유데미 웹개발자 부트캠프 강의인 The Web Developer Bootcamp 강의 수강을 시작했습니다.

여러 유튜브와 개발자 블로그에서 추천하는 강의라 궁금했는데

항해99에서 제공하는 사전 스터디용 웹개발종합반 강의를 2번 들어서 시간이 남아 듣기로 결정했습니다.

총 64시간짜리 강의인데 항해99가 11월 7일에 시작이라 그 전에 다 듣는 것을 목표로 달려보겠습니다.

하루에 최소 6시간 정도 공부하면 되지 않을까 생각합니다.

<a> anchor tags

<a href="url"></a>
링크 또는 다른 파일 연결하는 법

<img> image tags

src (source)
<img src="">
alt tag: 이미지 설명을 넣기
ex) <img scr="url" alt="설명">

주석 달기 comments

단축키: command + /

스파르타에서 제공하는 웹개발 종합반 강의를 들어서 그런지 모든 용어들이 생소하지는 않습니다.

요즘 Sololearn이라는 모바일 학습 앱으로 Javascript를 배우고 있는데 모든 학습들이 연결되어 있어 도움이 됩니다.

확실히 유데미는 기초부터 차근차근 배우는 느낌입니다.

웹개발 종합반은 부트캠프도 아니고 그냥 사전 스터디를 위한 자료라서 엄청 딥하게 자세하게 가르쳐주지는 않아서

vscode로 배우는 html css JavaScript가 새롭게 느껴집니다.

그래도 한번 배웠던거라고 진도가 쑥쑥 나가요.

저작자표시 비영리 변경금지

'Udemy' 카테고리의 다른 글

Udemy 유데미 The Web Developer Bootcamp Section 12 bootstrap (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 11 css responsive website 반응형 만들기 연습 (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 6~10 css flexbox media queries (0)	2022.10.25
Udemy 유데미 The Web Developer Bootcamp Section 6~10 css color selector box position transform (0)	2022.10.24
Udemy 유데미 The Web Developer Bootcamp Section 4~5 html (0)	2022.10.23

개발자가 된 핏짜 로고(?)를 만들어보았습니다.

Real estate developer가 되려다가 web developer가 되버렸네요.

돈 많이 벌면 부동산 개발도 언젠간 할 수 있겠죠.

유튜브도 내일쯤 업로드 해야겠어요.

오늘까지 2회차 수강 끝내는 게 목표입니다 :)

Flask

Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음.
서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있음
html 파일을 가져와서 실행 : render_template

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

meta 태그

<head></head> 부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그

1회차일때 안되던 '화성땅 공동구매'를 성공했습니다.

처음과 마찬가지로 코드는 정상인데

KeyError가 떴습니다.

도대체 뭘 잘못친걸까 하고 검색을 해봤는데 답이 안나와서

새로 고침 몇 번 하니까 그냥 되더라고요.

껐다가 키면 된다가 여기서도 통하네요.

저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

사전스터디 토이프로젝트 기획하기 맛집 공유 웹사이트 (0)	2022.10.26
2회차 웹개발 종합반 3주차 Python package requests venv beautifulsoup database MongoDB (0)	2022.10.19
2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON (0)	2022.10.18
2회차 웹개발 종합반 1주차 css html JavaScript (0)	2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기 (0)	2022.10.18

Python

함수

def sum(a,b):
    print('더하자!')
    return a+b
result = sum(1,2)
print(result)

조건문

def is_adult(age):
    if age >20:
        print('성인입니다')
    else:
        print('청소년입니다')

is_adult(13)

반복문

파이썬에서의 반복문은, 리스트의 요소들을 하나씩 꺼내쓰는 형태

fruits = ['사과','배','배','감','수박','귤','딸기','사과','배','수박']

count = 0
for fruit in fruits:
    if fruit == '사과':
        count +=1

print(count)

people = [{'name': 'bob', 'age': 20},
          {'name': 'carry', 'age': 38},
          {'name': 'john', 'age': 7},
          {'name': 'smith', 'age': 17},
          {'name': 'ben', 'age': 27}]

for person in people:
    if person['age']>20:
        print(person['name'])

파이썬 패키지(package)

Python 에서 패키지는 모듈(일종의 기능들 묶음)을 모아 놓은 단위
패키지의 묶음을 라이브러리
패키지 설치 = 외부 라이브러리 설치
패키지 불러오는 법 import

import requests # requests 라이브러리 설치 필요

가상환경 (virtual environment)

프로젝트별로 패키지들을 담을 공구함
같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경
venv 폴더임

beutifulsoup4

bs4 패키지 설치
해당 url html을 가져올수 있음
headers

from bs4 import BeautifulSoup
# 타겟 URL을 읽어서 HTML를 받아오고,
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

# HTML을 BeautifulSoup이라는 라이브러리를 활용해 검색하기 용이한 상태로 만듦
# soup이라는 변수에 "파싱 용이해진 html"이 담긴 상태가 됨
# 이제 코딩을 통해 필요한 부분을 추출하면 된다.
soup = BeautifulSoup(data.text, 'html.parser')

Database

RDBMS(SQL):
행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사
데이터 50만 개가 적재된 상태에서, 갑자기 중간에 열을 하나 더하기는 어려움
그러나, 정형화되어 있는 만큼, 데이터의 일관성이나 / 분석에 용이
ex) MS-SQL, My-SQL 등

No-SQL: 딕셔너리 형태로 데이터를 저장해두는 DB
데이터 하나 하나 마다 같은 값들을 가질 필요가 없음
자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족할 수 있음 ex) MongoDB

MongoBD

접속 패키지: pymongo, dnspython

from pymongo import MongoClient
import certifi

ca = certifi.where();

client = MongoClient(mongoDB URL넣기)
db = client.dbsparta

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

기타

앞에서 두 글자만 끊기! text[0:2]
여백 지우기 -> strip()

저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

사전스터디 토이프로젝트 기획하기 맛집 공유 웹사이트 (0)	2022.10.26
2회차 웹개발 종합반 4주차 Flask meta tags (0)	2022.10.20
2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON (0)	2022.10.18
2회차 웹개발 종합반 1주차 css html JavaScript (0)	2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기 (0)	2022.10.18

jQuery를 이용해 Javascript로 HTML을 제어하고,

Ajax를 이용해 다시 서버에 데이터를 요청하고 받아봅니다.

JQuery

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것; 라이브러리
jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드
전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것
쓰기 전에 "import" -> 아래 코드 참조
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js "></head>
JavaScript : document.getElementById("element").style.display = "none";
= JQuery: $('#element').hide();
css는 class 사용하듯이 JQuery는 id를 사용함

서버-클라이언트 통신 이해하기

Jsonview 설치
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다! q=아이폰 (검색어) sourceid=chrome (브라우저 정보) ie=UTF-8 (인코딩 정보)
프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속

Ajax

Ajax는 jQuery를 import한 페이지에서만 동작 가능
이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");
로딩 후 호출하기:
$(document).ready(function(){ alert('다 로딩됐다!') });

이번 숙제는 1분도 안걸렸습니다.

확실히 한 번 더 듣는 보람이 있습니다.

저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 4주차 Flask meta tags (0)	2022.10.20
2회차 웹개발 종합반 3주차 Python package requests venv beautifulsoup database MongoDB (0)	2022.10.19
2회차 웹개발 종합반 1주차 css html JavaScript (0)	2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기 (0)	2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST" (0)	2022.10.14

2회차에서는 노트 필기를 좀 하면서 개념정리를 하려고 합니다.

1회차에서는 복붙하면서 따라가기에 급급했다면 2회차에는 정리를 할 수 있는 여유가 생겼습니다.

배운 것들을 tistory 블로그에도 적용하면서 써보도록 하겠습니다.

css

Cascading Style Sheet

background-color: green;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("");
background-position: center;
background-size: cover;
border-radius: 10px;
padding (들여쓰기)
padding-top: 40px;
margin (여백)
margin: auto; (상하좌우 최대한 밀기)

구글 폰트 가져오기

https://fonts.google.com/?subset=korean
font 고르기 -> select this style -> 세번째 링크 복사 -> <title> 밑에 붙여넣기
CSS rules to specify families 복사 -> <style> 밑에 *{붙여넣기}

주석 달기

command + /
1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.
주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요.
즉, 개발자 본인 또는 동료를 위해 붙여두는 것!

부트스트랩 (css 꾸러미)

가운데로 위치하기

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

마우스 올렸을 때 스타일 변경 hover

.mytitle > button:hover {
  border: 2px solid white;
}

이미지 어둡게 하기

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("이미지url넣기")

JavaScript

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
<script></script>
검사 -> Console
let 으로 변수를 선언
.push. -> 추가
.length -> 리스트의 길이 구하기
'나눗셈의나머지'를 구하고 싶은 경우 let a = 20 let b = 7 a % b = 6
.split('나누는기준문자') -> 특정문자로 문자열 나누기

1주차 숙제

<!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>
  <link href="https://fonts.googleapis.com/css2?family=Poor+Story&display=swap" rel="stylesheet">
  <style>
    *{font-family: 'Poor Story', cursive;}
    .mytitle{
      color: white;
      width: 100%;
      height: 250px;

      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");
      background-position: center;
      background-size: cover;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box{
      max-width: 500px;
      width: 95%;
      margin: 20px auto 0px auto;
      box-shadow: 0px 0px 3px 0px gray;
      padding: 20px;
    }
    .box > button {
      margin-top: 10px;
    }
    .card {
      max-width: 500px;
      width: 95%;
      margin: 20px auto 0px auto;
    }
  </style>
</head>

<body>
    <div class="mytitle">
      <h1>선셋 팬명록</h1>
    </div>
    <div class="box">
      <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">닉네임</label>
      </div>
      <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">응원댓글</label>
      </div>
     <button type="button" class="btn btn-dark">응원 남기기</button>

    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
</body>

</html>

저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 3주차 Python package requests venv beautifulsoup database MongoDB (0)	2022.10.19
2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON (0)	2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기 (0)	2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST" (0)	2022.10.14
비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup (1)	2022.10.12

어제 사실은 드디어 완강했습니다.

카카오사태로 인해 티스토리 블로그도 먹통이 되었다가 어제 저녁부터 정상화가 된 것 같습니다.

5주차에 배운 것은

서버 연결
AWS 연결
인바운드 규칙 설정
도메인 연결
nohup 사용해서 컴퓨터가 꺼져도 계속 서버 열어놓기
터미널 사용 -> Filezilla -> aws 서버 컴퓨터 접속
og image, title, description 설정하기 / 카카오 캐쉬 지우는 법

중간에 여러 실수가 있었지만 최종적으로는 잘 해냈고 원하는 결과물을 만들었습니다.

2회독할때는 좀 더 능숙하게 할 수 있을 것 같습니다.

두번 들으라는 이유를 알 것 같아요.

아래는 제가 5주차에 서버 연결까지 완료해서 어디에서나 접속할 수 있는 Dwayne Johnson 팬명록입니다.

친구들한테 자랑하라고 하셔서 친구들이 남긴 메세지도 볼 수 있습니다.

Dwayne Johnson 팬명록

응원 한마디 남기고 가세요!

pizzalover.shop

다시 처음 1강부터 들으러 갑니다.

토요일에 본격 사전스터디 미팅이 있는데 그 때까지 2회독 완료가 목표입니다

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON (0)	2022.10.18
2회차 웹개발 종합반 1주차 css html JavaScript (0)	2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST" (0)	2022.10.14
비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup (1)	2022.10.12
비전공자 개발자 도전기 2주차 웹개발 (0)	2022.10.09

전체 글

Section 11 요약:

'Udemy' 카테고리의 다른 글

CSS Flexbox

Flex Sizing Properties

Responsive Design (반응형)

Media Queries

'Udemy' 카테고리의 다른 글

CSS 연결하기

Color

CSS Text Properties

font-size

font-family

CSS Selectors

ID selector

Class selector

Attribute selector

Pseudo classes

Pseudo elements

The Cascade

Inline Styles

!important

CSS Inheritance

Border

Padding, Margin

Display properties

CSS Units

Opacity & Alpha Channel

Position Property

CSS Transitions

CSS Transforms

'Udemy' 카테고리의 다른 글

HTML5

Inline elements

Block elements

other elements

HTML Entity codes

Semantic Markup

Screen reader

Emmet

HTML Tables

Form Elements

<input>

Label

Buttons

Name

구글, 유튜브, 레딧 검색창 뺏어오기

Radio buttons, Checkboxes & Selects

Range & Textarea

Range

Textarea

HTML5 Validations

'Udemy' 카테고리의 다른 글

<a> anchor tags

<img> image tags

주석 달기 comments

'Udemy' 카테고리의 다른 글

Flask

meta 태그

'사전스터디_부트캠프' 카테고리의 다른 글

Python

'사전스터디_부트캠프' 카테고리의 다른 글

JQuery

서버-클라이언트 통신 이해하기

Ajax

'사전스터디_부트캠프' 카테고리의 다른 글

css

JavaScript

1주차 숙제

'사전스터디_부트캠프' 카테고리의 다른 글

'사전스터디_부트캠프' 카테고리의 다른 글

티스토리툴바