'분류 전체보기' 카테고리의 글 목록 (20 Page)

728x90

구글 폰트

- 웹사이트에 폰트를 적용하는 방법은 서버에 폰트 파일을 업로드하고 불러오는 방법과 CDN을 이용한 방법들이 있습니다.

- 이번 포스팅에서는 구글 폰트 CDN을 이용해 웹사이트에 적용 시켜 보겠습니다.

구글 폰트 사이트 접속

- 아래의 링크로 연결된 구글 폰트 웹사이트로 접속합니다.

fonts.google.com/

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

- 구글 폰트 API 에서 제공하는 다양한 폰트들을 확인 할 수 있습니다.

- Search를 통해서 원하는 폰트를 찾아 사용할 수 있습니다.

폰트 고르기

- 구글 폰트에서는 '단어'를 입력 하면 각 폰트가 적용된 '단어'를 볼 수 있습니다.

- 빨간색으로 표시된 부분에 'Welcome'을 입력해 보겠습니다.

- 각 폰트들마다 'Welcome'에 적용된 스타일들을 확인해 볼 수 있겠습니다.

- 저는 이중 Noto Sans KR을 선택했습니다.

폰트 적용

- 선택한 폰트를 클릭합니다.

- 선택한 폰트의 Style들을 확인 할 수 있습니다.

- Select this style을 클릭해 해당 스타일을 선택합니다.

- 스타일을 선택하면 오른쪽에 Selected family 라는 사이드 바가 생기면서 내가 선택한 폰트의 스타일이 나타납니다.

- 웹사이트에 CDN으로 적용 시키기 위해서 Embed 항목을 선택합니다.

- 폰트를 적용 시킬 link 태그와 link속성값들 그리고 css에 적용할때 사용할 명령어들이 나옵니다.

- <link>부분을 복사해 html <head></head> 태그사이에 붙여넣기 합니다.

- 우선은 모든 스타일들을 선택한 후 붙여넣기를 진행하겠습니다.

- 스타일들을 모두 선택하면 family 값이 바뀐것을 확인 할 수 있습니다.

- 스타일 이름이 아닌 숫자가 들어 갑니다.

- 이 값들은 font-weight 값을 나타냅니다.

- 이제 <link> 부분을 복사해 붙여 넣기 합니다.

<head>
    <meta charset="UTF-8">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <title>Hello</title>
</head>

- CSS에 적용 시키기 위해서 font-family 부분을 복사해 원하는 곳에 스타일을 지정해 주면 됩니다.

- 저는 HTML전체에 폰트를 적용 시켜 보겠습니다.

html{
    font-family: 'Noto Sans KR', sans-serif;
}

- 잘 적용 된 모습이지만 f12를 눌러서 검사 항목에서 font-family 를 확인해 봅니다.

- 잘 적용 되었네요.

li 폰트 스타일 변경

- 이제 li 태그에 들어간 텍스트들의 폰트 스타일을 변경해 보겠습니다.

- li 태그들에게 적용된 폰트 스타일은 Noto Sans KR 중 Thin 스타일입니다.

- 이 스타일에 맞춰 적용 하기 위해서 li css 스타일중 font-weight 값을 100으로 지정합니다.

- 스타일이 잘 적용 되었네요.

- 다음 포스팅에서는 main안에 컨텐츠 중 Main Text 부분을 진행해 보겠습니다.

728x90

저작자표시 비영리 동일조건

'Web > 포트폴리오 프로젝트' 카테고리의 다른 글

[Web]포트폴리오 웹사이트 제작 - 7 . 레이아웃 구성 (6) - main / Main Image 추가 / 레이아웃 완성 (0)	2020.10.13
[Web]포트폴리오 웹사이트 제작 - 6 . 레이아웃 구성 (5) - main / Main Text 추가 (0)	2020.10.13
[Web]포트폴리오 웹사이트 제작 - 4 . 레이아웃 구성 (3) - 전체 디자인 / main 컨텐츠 수정 - sidebar (0)	2020.10.13
[Web]포트폴리오 웹사이트 제작 - 3 . 레이아웃 구성 (2) - 전체 디자인 / main 크기 / 위치 수정 (0)	2020.10.13
[Web]포트폴리오 웹사이트 제작 - 2 . 레이아웃 구성 (1) - 계획 / 구현 (0)	2020.10.12

728x90

Sidebar 수정

- 지난번 포스팅에서는 main의 위치와 크기를 수정해 봤습니다.

- 이번 포스팅에서는 main 안에 있는 컨텐츠 sidebar / maintext / mainimage 중에서 sidebar 부분을 수정해 보겠습니다.

- 먼저 이전까지 구현해놓은 웹사이트의 모습을 살펴 보겠습니다.

- sidebar 부분이 main보다 작게 설정 되어 있습니다.

- Menu Nav에 해당하는 텍스트들을 입력합니다.

- 각 크기와 위치를 조정합니다.

단계

1. sidebar 크기 수정

2. nav태그 추가

3. ul/li 태그 추가

4. li 크기 지정

5. nav 정렬

1. sidebar 크기 수정

- sidebar의 크기를 수정합니다.

- 위치는 좌측에 잘 붙어 있습니다.지금당장 따로 수정할 필요는 없어 보입니다.

- 포토샵을 이용해서 sidebar의 크기를 알아보겠습니다.

- 원하는 위치와 크기에 맞게 가이드 라인을 잡은 후 사각형 툴로 sidebar부분을 그려줍니다.

- 텍스트의 크기와 위치, 간격에 맞춰서 크기를 지정했습니다.

- 사각형의 properties를 보면 크기를 알수 있습니다.

- width 는 200px / height 는 850px입니다.

- 코드를 수정합니다.

#sidebar {
    float: left;
    width: 200px;
    height: 850px;
    border:1px solid gray;
}

2. nav태그 추가

- Menu 항목을 만들기 위해서 sidebar div 태그 안에 nav태그를 먼저 추가해 줍니다.

- 마찬가지로 width/border값을 주어 위치를 확인해 보겠습니다.

- height 값은 Menu 텍스들을 추가 하면 자동으로 지정되게 되므로 이후에 처리해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <title>Hello</title>
</head>

<body>
    <header>header</header>
    <div id="main">main
        <div id="sidebar">Sidebar nav
            <nav>nav</nav>
        </div>
        <div id='maintext'>Main Text</div>
        <div id='mainimg'>Main image</div>
    </div>
    <footer>footer</footer>
</body>
</html>

nav {
    width:200px;
    border:5px solid red;
}

- nav부분이 sidebar 범위에서 튀어나와 보입니다.

- border 를 나중에 삭제하면 알맞게 들어가게 됩니다.

- 아직은 위치나 크기를 확인하는 과정이 필요합니다.

3. ul/li 태그 추가

- 이제 nav에 들어갈 Menu 컨텐츠들을 nav태그 안에 추가합니다.

- 이때 ul / li 태그를 사용합니다.

- ul의 id값으로 sidebarul 을 지정합니다.

        <div id="sidebar">Sidebar nav
            <nav>nav
                <ul id='sidebarul'>
                    <li>Home</li>
                    <li>About</li>
                    <li>Portfolio</li>
                    <li>Blog</li>
                    <li>Contact</li>

                </ul>

            </nav>
        </div>

#sidebarul{
    border:4px solid blue;
}

- 각 텍스트들이 잘 들어간 모습이지만, li 태그 속성 때문에 기본적으로 텍스트 앞에 ● 이 찍혀서 나옵니다.

- ul 의 style 속성 중 list-style 을 None값으로 지정하면 ● 이 없어집니다.

#sidebarul{
    border:4px solid blue;
    list-style: none;
}

- ● 은 없어 졌습니다. 하지만 li들의 텍스트들이 sidebar nav / nav 와 다르게 들여쓰기 상태로 되어있습니다.

- ul padding-left 값을 0px로 지정해서 들여 쓰기를 없애줍니다.

#sidebarul{
    border:4px solid blue;
    list-style: none;
    padding-left:0px;
}

- 들여 쓰기가 없어 졌네요.

- 앞으로 ul 태그를 추가 하게 될때마다 같은 작업을 반복해야 할 수도 있습니다.

- 차라리 css에서 ul태그 자체에 list-style 과 padding-left값을 주어 추가되는 ul 태그들의 style들도 통일 시킵니다.

ul {
    list-style: none;
    padding-left: 0px;
}

#sidebarul {
    border: 4px solid blue;

}

4. li 크기 지정

- li 태그의 크기를 지정하고 각 텍스트들의 간격을 맞춰 줍니다.

- 각 텍스트들의 폰트 사이즈와 간격이 어떻게 되는지 포토샵 가이드라인과 사각형툴을 통해서 알아 보겠습니다.

- 텍스트 폰트 사이즈는 20px입니다.

- 텍스트 간격에 사각형 툴을 이용해 사각형을 만들고, 높이를 보면 간격이 60px임을 알 수 있습니다.

- li의 전체크기를 이에 맞춰서 정하거나, padding값을 주어 맞추어 줄수도 있습니다.

- 후에 li 태그들에 링크를 걸어 둘것을 생각하면 padding값을 아래 위로 주는 방법이 좋을 것 같습니다.

- css에 li 태그 style을 지정해 줍니다.

li{
    font-size:20px;
    width: 200px;
    height: 20px;
    padding-top:30px;
    padding-bottom: 30px;
    border:4px solid black;
}

- 또한, 텍스트들은 좌측으로부터 일정 간격만큼 떨어져있습니다.

- 위와 같은 방법으로 확인해 보겠습니다.

- 65px만큼 떨어져 있네요.

- #sidebarul 에 padding-left값을 65px로 줍니다.

ul {
    list-style: none;
    padding-left: 0px;
}

- 그런데 그만큼 li가 벗어나게 됩니다.

-li width 값을 65px만큰 차감합니다.

li{
    font-size:20px;
    width: 135px;
    height: 20px;
    padding-top:30px;
    padding-bottom: 30px;
    border:4px solid black;
}

5. nav 정렬

- 이제 nav를 높이 가운데로 정렬 시킵니다.

- #sidebar에 position 값으로 relative 를 지정 후 nav에 position 값으로 absolute를 지정합니다.

- 이제 #sidebar 상단을 기준으로 nav를 아래로 이동시켜 가운데로 맞춰야합니다.

- main의 높이는 850px입니다. 이 높이의 반반큼 아래로 이동시키고, nav높이의 반만큼 위로 이동시킵니다.

- nav의 높이는 li크기들을 모두 합한 것이므로 80px *5 = 400px 이 됩니다.

- main높이 / 2 - nav 높이 /2 를 하면 225px입니다.

- 하지만 이 값은 main 기준으로 가운데에 정렬됩니다.

- main 위쪽으로 header가 50px만큼 자리 잡고 있으므로 50px만큼 위로더 이동시켜 줘야합니다.

- 225px - 50px = 175px입니다.

- 이제 top값으로 175px을 줍니다.

#sidebar {
    position:relative;
    float: left;
    width: 200px;
    height: 850px;
    border: 1px solid gray;
}

nav {
    width: 200px;
    position: absolute;
    top:175px;
    border: 5px solid red;
}

- 가운데로 잘 정렬 된것을 확인 할 수 있습니다.

- 정확한 위치 확인을 위해 index.html 에 있는 sideba nav / nav 텍스트들을 삭제 하였습니다.

- 잠시 nav와 하위 태그들의 border 값들을 없애고 다시 한번 확인 해 보겠습니다.

- 만족 스럽게 됐습니다.

- 다음 포스팅에서는 구글 폰트를 이용해 텍스트들의 폰트를 지정해 보겠습니다.

728x90

저작자표시 비영리 동일조건

'Web > 포트폴리오 프로젝트' 카테고리의 다른 글

[Web]포트폴리오 웹사이트 제작 - 6 . 레이아웃 구성 (5) - main / Main Text 추가 (0)	2020.10.13
[Web]포트폴리오 웹사이트 제작 - 5 . 레이아웃 구성 (4) - 구글 폰트 사용하기 / Noto Sans KR (0)	2020.10.13
[Web]포트폴리오 웹사이트 제작 - 3 . 레이아웃 구성 (2) - 전체 디자인 / main 크기 / 위치 수정 (0)	2020.10.13
[Web]포트폴리오 웹사이트 제작 - 2 . 레이아웃 구성 (1) - 계획 / 구현 (0)	2020.10.12
[Web]포트폴리오 웹사이트 제작 - 1 . 레이아웃 구성 (0) - 기본 구조 / 코드 (0)	2020.10.08

728x90

레이아웃 전체 디자인

- 이전의 레이아웃을 이제 색상과 텍스트를 정확하게 입력해서 전체 디자인을 완성해 보겠습니다.

- 먼저 이전의 레이아웃 디자인을 살펴 보겠습니다.

- 각 부분들의 크기와 위치를 살펴 보기 위해 임의의 배경색을 입혀 놨습니다.

- 위치는 그럭저럭 제가 생각한 곳에 위치해 있습니다.

- 제가 원하는 디자인은 Simple하면서 깔끔한 디자인입니다.

- 이제는 각 컨텐츠에 넣고 싶은 텍스트와 이미지를 입력하여 전체적인 디자인을 구성했습니다.

디자인 수정 - 전체 디자인

- 디자인을 썩 잘하는 편은 아니라 심플하게 구성을 했습니다.

- 전체적인 바탕은 흰색으로 하고, 좌측 sidebar에 Menu Nav들 넣고 가운데에 Main text와 Main img를 넣었습니다.

- 이제 위 이미지를 가지고 코드로 구현합니다.

코드 구현

- 먼저, 기존에 만들어 놓은 index.html 의 각 태그들의 style들을 배경색이 아닌 border를 통해 각각 어떻게 위치하는지 알아보겠습니다.

- 위에서 아래로 header/ main/ footer가 위치해 있고, main 안에 sidevar nav / Main Text / Main image가 위치해 있는 것을 확인 할 수 있습니다.

- 새롭게 수정한 전체적인 디자인을 보면 header 부분과 footer부분의 바탕색이 흰색이고 중요한 컨텐츠들이 아직은 없음을 알 수 있습니다.

- 레이아웃의 크기는 1440*900에 맞춰져 있습니다. 크기 지정은 프로젝트마다 다르겠지만, 저는 1440*900이 가장 무난하다고 생각되어 선택했습니다.main의 크기를 레이아웃 크기로 맞추고 가운데 정렬 시킵니다. 각 컨텐츠들의 위치와 크기를 조정합니다.

단계

1. header, footer 높이 수정

2. main 크기 수정

3. main 가운데 정렬

4. main 안의 컨텐츠들의 크기와 위치 수정(다음 포스팅)

1.header, footer 높이 수정

- header,footer height:100px => height:50px 로 수정합니다. 향후 필요에 따라 수정 될 수 있습니다.

header {
    width: 100%;
    height: 50px;
    border:1px solid black;
}

footer {
    width: 100%;
    height: 50px;
    border:1px solid black;
}

2. main 크기 수정

- 1440*900 에 맞춰 width 와 height를 수정합니다.

- width는 1440px에 맞춰도 문제가 없습니다.

- height는 header 와 footer를 고려 합니다. 하지만 footer의 경우 크게 상관하지 않고 header부분만 고려 하겠습니다.

- header의 height가 50px 이므로 main 의 height 를 850px로 수정합니다.

#main {
    position: relative;
    width: 1440px;
    height: 850px;
    border:5px solid black;
}

3. main 가운데 정렬

- 이제 main을 가운데 정렬 시킵니다.

- margin을 사용해서 정렬 시킵니다.

#main {
    margin: 0 auto;
    position: relative;
    width: 1440px;
    height: 850px;
    border:5px solid black;
}

- 가운데로 잘 들어 왔네요.

- 다음 포스팅에서 각 컨텐츠들을 수정해 보면서 완성해 보겠습니다.

728x90

저작자표시 비영리 동일조건

'Web > 포트폴리오 프로젝트' 카테고리의 다른 글

[Web]포트폴리오 웹사이트 제작 - 5 . 레이아웃 구성 (4) - 구글 폰트 사용하기 / Noto Sans KR (0)	2020.10.13
[Web]포트폴리오 웹사이트 제작 - 4 . 레이아웃 구성 (3) - 전체 디자인 / main 컨텐츠 수정 - sidebar (0)	2020.10.13
[Web]포트폴리오 웹사이트 제작 - 2 . 레이아웃 구성 (1) - 계획 / 구현 (0)	2020.10.12
[Web]포트폴리오 웹사이트 제작 - 1 . 레이아웃 구성 (0) - 기본 구조 / 코드 (0)	2020.10.08
[Web]포트폴리오 웹사이트 제작 - 0 . 시작하기 / 개발환경 / (0)	2020.10.08

728x90

2.freepik

Freepik | Graphic Resources for everyone

Discover millions of copyright-free vectors, photos and PSD

www.freepik.com

3.unsplash

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

unsplash.com

HTML/CSS 무료 템플릿 <포트폴리오> 소개-1 (0)	2019.11.08

pd.cut()

- 데이터 값을 분할 하고 정렬하려는 경우 사용하는 판다스 함수

- 카테고리 범주 별로 구분하거나 groupby() 와 같이 사용 하여 각 범주별 특정 값들을 구하는데 사용할 수 있다.

예제

- numpy 배열 생성

import pandas as pd
import numpy as np

data = np.array([1, 7, 5, 4, 6, 3])
data

>>> array([1, 7, 5, 4, 6, 3])

- 동일한 길이의 bins 값으로 분할

pd.cut(data, 3)

>>> [(0.994, 3.0], (5.0, 7.0], (3.0, 5.0], (3.0, 5.0], (5.0, 7.0], (0.994, 3.0]]
Categories (3, interval[float64]): [(0.994, 3.0] < (3.0, 5.0] < (5.0, 7.0]]

- return bins

- bins를 반환할깨 사용합니다. 기본 값은 False 입니다.

pd.cut(data,3,retbins=True)

>>> ([(0.994, 3.0], (5.0, 7.0], (3.0, 5.0], (3.0, 5.0], (5.0, 7.0], (0.994, 3.0]]
 Categories (3, interval[float64]): [(0.994, 3.0] < (3.0, 5.0] < (5.0, 7.0]],
 array([0.994, 3.   , 5.   , 7.   ]))

- 분할 값에 특정 레이블 할당

- parameter => label

- default = None

pd.cut(data, 3, labels=["bad", "medium", "good"])

>>> ['bad', 'good', 'medium', 'medium', 'good', 'bad']
Categories (3, object): ['bad' < 'medium' < 'good']

- 레이블 할당 시 범주 정렬 사용 하지 않음

- parameter => orfered

- default = True

pd.cut(np.array([1, 7, 5, 4, 6, 3]), 3,labels=["B", "A", "B"], ordered=False)

>>> ['B', 'B', 'A', 'A', 'B', 'B']
Categories (2, object): ['A', 'B']

참고

pandas API Reference

pandas.cut(x, bins, right=True, labels=None, retbins=False, precision=3, include_lowest=False, duplicates='raise', ordered=True)

Bin values into discrete intervals.

Use cut when you need to segment and sort data values into bins. This function is also useful for going from a continuous variable to a categorical variable. For example, cut could convert ages to groups of age ranges. Supports binning into an equal number of bins, or a pre-specified array of bins.

728x90

저작자표시 비영리 동일조건

'programming language > Python' 카테고리의 다른 글

[Python] Colab Selenium - 코랩 셀리니움 사용법 (0)	2020.11.26
[Python] 파이썬 넘파이 (Numpy) - numpy.log1p() / numpy.expm1() (0)	2020.10.22
[Python] 넘파이 (Numpy) - 공부하기_Numpy.c_ .2 (0)	2020.10.20
[Python] 넘파이 (Numpy) - 공부하기_random sampling.1 (0)	2020.10.20
[python] 판다스 날짜 데이터 타입 변환 - pandas / to_datetime() (2)	2020.10.08

Hiio.com