Web 06 - Bootstrap Introduction, Utilities(1)

17 Feb 2019 | Web HTML CSS Bootstrap

CSS Framework / Bootstrap

까다로운 CSS 레이아웃을 손쉽게 만들어주는 소프트웨어 프레임 워크

A CSS framework is a software framework that is meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language.

CDN

CDN: Content Deliver (Distribution) Network
컨텐츠(CSS, JS, Image, Text등)을 효율적으로 전달 하기 위해 여러 노드에 가진 네트워크에 데이터를 제공하는 시스템. (컴퓨터에 폰트가 없는 경우, 구글에서 제공하는 웹폰트를 사용하여 적용하는 것과 비슷한 방식)
- 개별 end-user의 가까운 서버를 통해 빠르게 전달 가능(지리적 이점)
- 외부 서버를 활용함로써 본인 서버의 부하가 적어짐
- CDN은 보통 적절한 수준의 캐시 설정으로 빠르게 로딩 할 수 있음.

cf) Reboot / Reset CSS / normalize CSS 브라우져가 들고 있는 CSS를 초기화시킴. (모든 브라우져에서 똑같이 보이게 하기 위한 친구)

Bootstrap 기본 설정

Bootstrap의 CSS와 자바스크립트(JS)를 CDN을 통해 활용하기 위해 아래의 코드를 적용

<!-- CSS -->
<head>
   <link rel="stylesheet" 	 href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>

<body>
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>   
</body>

Utilities

1. spacing

margin과 padding 등 여백과 공간을 설정
https://getbootstrap.com/docs/4.2/utilities/spacing/

<body>
    <--! margin -->
    <h1 class="m-0"> margin의 space를 전부 0으로 </h1>
    <h1 class="mx-0"> x축(좌,우) space를 0으로 </h1>
    <h1 class="my-0"> y축(위,아래) space를 0으로 </h1>
    <h1 class="mt-0"> 위 space를 0으로 </h1>
    <h1 class="mb-0"> 아래 space를 0으로 </h1>
    <h1 class="ml-0"> 왼쪽 space를 0으로 </h1>
	<h1 class="mr-0"> 오른쪽 space를 0으로 </h1>
    
    <--! padding -->
    <h1 class="p-0"> padding의 space를 전부 0으로 </h1>
    <h1 class="px-0"> x축(좌,우) space를 0으로 </h1>
    <h1 class="py-0"> y축(위,아래) space를 0으로 </h1>
    <h1 class="pt-0"> 위 space를 0으로 </h1>
    <h1 class="pb-0"> 아래 space를 0으로 </h1>
    <h1 class="pl-0"> 왼쪽 space를 0으로 </h1>
	<h1 class="pr-0"> 오른쪽 space를 0으로 </h1>
   
    <-- 브라우져의 기본 rem은 16px -->
    <h1 class="m-0"> 0은 0rem 	=> 0px </h1>
    <h1 class="m-1"> 1은 0.25rem => 4px </h1>
    <h1 class="m-2"> 2은 0.5rem  => 8px </h1>
    <h1 class="m-3"> 3은 1rem    => 16px </h1>
    <h1 class="m-4"> 4은 1.5rem  => 24px </h1>
    <h1 class="m-5"> 5은 3rem    => 48px </h1>
     
    <--! 음수도 가능 -->
    <h1 class="mt-n5"> margin의 위(top)의 space를 -48px 
        			   (=48px만큼 위로 이동) 		
    </h1>    
    
    <--! 자동으로 설정 -->
    <h1 class="m-auto"> space를 자동으로 설정 </h1>      

</body>

2. Color

텍스트 및 배경의 색상을 설정
https://getbootstrap.com/docs/4.2/utilities/colors/
Text color

Background color

bg color

예시 코드 ```html

<-- background: primary 색상 / text: sucess 색상 적용 -->

Lorem ipsum dolor sit

## 3. Border

```html
<body>
    <--! 테두리 삽입 -->
    <p class="border">Lorem ipsum dolor sit</p>
        
    <--! 테두리 색상을 Primary로 변경(border을 넣고 추가로 border-이하를 삽입할 것) -->
    <p class="border border-primary">Lorem ipsum dolor sit</p>
    
    <--! 테두리 모양 변경 -->
    <p class="border border-rounded">박스 모서리만 둥글게</p>
    <p class="border border-rounded-circle">박스 전체를 둥글게</p>
    <p class="border border-rounded-pill">박스 양 끝을 둥글게(알약 모양)</p>
</body>

4. Display

<body>
    <a class="d-block"> 태그 안의 내용을 블록 속성으로 변경 </a>
    <a class="d-inline"> 태그 안의 내용을 인라인 속성으로 변경 </a>
    <a class="d-inline-block"> 태그 안의 내용을 인라인-블록 속성으로 변경 </a>
    <a class="d-none"> 태그 안의 내용을 숨기기 </a>
    
    <a class="d-sm-none"> 
     태그 안의 내용을 sm보다 작을 때 none을 주기 
     sm; small device - 750px
     따라서, 태그안 내용이 750px보다 작으면 none이 됨.
    </a>
    
    <-- 테두리 색상을 Primary로 변경(border을 넣고 추가로 border-이하를 삽입할 것) -->
    <a class="border border-primary">Lorem ipsum dolor sit</p>
    

</body>

Bootstrap의 breakpoint

5. Position

<body>
    <a class="position-static"> 박스의 position을 static으로 설정 </a>
    <a class="position-aboslute"> 박스의 position을 absolute으로 설정 </a>
    <a class="position-relative"> 박스의 position을 relative으로 설정 </a>
    <a class="position-fixed"> 박스의 position을 fixed으로 설정 </a>
    
   	<-- fixed position은 추가로 고정 위치를 설정 할 수 있음 -->
    <a class="position-fixed fixed-top"> fixed + 위치는 위 </a>
    <a class="position-fixed fixed-bottom"> fixed + 위치는 아래 </a>
    <a class="position-fixed fixed-left"> fixed + 위치는 왼쪽 </a>
    <a class="position-fixed fixed-right"> fixed + 위치는 오른쪽 </a>
   
</body>

6. Text/Font

<body>
   	<-- text 정렬  -->
    <a class="text-center"> 특정한 박스의 콘텐츠를 가운데 정렬 </a>
    <a class="text-right"> 특정한 박스의 콘텐츠를 오른쪽 정렬 </a>
    <a class="text-left"> 특정한 박스의 콘텐츠를 왼쪽 정렬 </a>
    <a class="position-fixed"> 박스의 position을 fixed으로 설정 </a>
        
   	<-- font style 적용  -->
    <a class="font-weight-normal"> text의 기본값(Default) </a>
    <a class="font-weight-bold"> text를 굵게 </a>
    <a class="font-weight-bolder"> text를 더 굵게 </a>
    <a class="font-weight-light"> text를 연하게 </a>
    <a class="font-weight-lighter"> text를 더 연하게 </a>    
    <a class="font-italic"> text를 기울임 </a>
        
</body>

7. Layout

container: 기본으로 깔고 가는 bootstrap의 basic layout element
기본적으로 양쪽 끝에 공백이 있음.
공백을 최소화 하고 싶을땐? .container-fluid 입력

<div class="container">
  <!-- Content here -->
</div>

Comment Read more

Web 05 - Responsive Web, View port, Media Query

17 Feb 2019 | Web HTML CSS

Responsive Web

반응형 웹 디자인(responsive web design, RWD)이란 하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말함.
CSS 및 HTML을 사용하여 내용을 조정, 숨기기, 축소, 확대 또는 이동하여 화면에서 보기 좋게 만드는 형식

View port

view port는 가로 해상도를 의미하며, 웹페이지의 사용자가 볼 수 있는 영역을 말함.
뷰포트는 모바일기기에 화면이 로드 되었을 때, 페이지가 적정 해상도로 로드 될수 있도록 돕고 확대나 축소를 허용할 것인지 결정 해줌.
뷰포트는 장치에 따라 다름 (휴대폰화면은 컴퓨터 화면 보다 작음)
View port의 기본 설정
- VS CODE 자동 완성 기능을 통해 view port를 meta tag로서 head 요소 안에 넣어 놓고 진행 해옴.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Media query

media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능.
특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있음.

기본구성(syntax)

@media only|not mediatype and|not|,(or) (media feature) { CSS스타일코드;}

not: 부정
only: 말 그대로 only - 이것만
media type(매체유형)
- all(모든 미디어; 기본값)
- screen(화면이 달린 기기; 스마트폰, 태블릿 PC등)
- print(프린터 기기)
- braille(점자표시장치)
- tv(음성과 영상이 동시 출력되는 TV)
and 또는 , (or): 조건
media feature(표현식): 특정 조건을 입력. 예) min-width: 800px

Media query의 대표적인 조건

1. width

viewport의 너비를 의미하며, 일반적으로 가장 많이 사용 하는 조건.
h2 태그의 색상을 기본적으로 녹색으로 설정하며, 너비가 800px이 되면, 노란색으로 색상이 변경됨
```css h2 { color: green; }

@media (width: 800px) { h2 { color: yellow; } }

### 2. min-width  / max-width

- h3태그의 기본 색상은 회색
- viewport의 너비가 min 600 px 와 max 800 px 조건을 만족할 경우, 색상이 보라색으로 변경됨

```css
h3 {
    color:gray;
}

@media (min-width:600px) and (max-width: 800px) {
    h3 {
        color: purple;
    }
}

3. height / min-height / max-height

h4 태그의 기본색상은 Orange
viewport의 높이(세로 길이)가 min 400 px 와 max 600 px을 만족할 경우, 색상은 검정으로 변경됨

h4 {
    color: orange;
}
@media (min-height: 400px) and (max-height: 600px) {
    h4 {
        color: black;
    }
}

4. orientation

가상 선택자 ::after 을 활용하여, view port의 방향에 따라 조건 적용
view port의 방향이 가로일때는 ‘가로입니다’ 출력
view port의 방향이 세로일때는 ‘세로입니다’ 출력

h1.ori::after {
    content: '가로입니다'

}

@media (orientation: portrait) {
    h1.ori::after {
        content: '세로입니다.'
    }
}

5. 응용: Bootstrap의 Break point 흉내내기

/* Extra small: 0~576px */
.rainbow {
    color: red;
}

/* Small: 576px 이상 */
@media (min-width: 576px) {
    .rainbow {
        color: orange;
    }
}

/* Medium: 768px 이상 */
@media (min-width: 768px) {
    .rainbow {
        color: yellow;
    }
}

/* Large: 992px 이상 */
@media (min-width: 992px) {
    .rainbow {
        color: green;
    }
}

/* Extra Large: 1200px 이상 */
@media (min-width: 1200px) {
    .rainbow {
        color: blue;
    }
}

Comment Read more

Web 04 - CSS의 속성(colors, Font-size, Box Model, Display, Visibility, Position, Backgrounds, Font)

17 Feb 2019 | Web HTML CSS

Colors

Color name
Color code
rgb
rgba
- a(alpha)의 범위는 0.0~1.0 으로 값이 작아 질 수록, 색이 투명해짐.

<head>
    <style>
        /* 1. color name */
        h1 {color: red;}
        
        /* 2. color code */
        h2 {color: #0000ff;}
        
        /* 3. rgb() */
        h3 {color: rgb(0,255,0);}
        
        /* 4. rgba() */
        /* 4. a(alpha): 0.0 ~ 1.0 */
        p {color: rgba(255,0,0,0.5)}   
    </style>
</head>
<body>
    <h1>빨간색</h1>
    <h2>파란색</h2>
    <h3>초록색</h3>
    <p>흐릿한 빨간색(투명도)</p>
</body>

Font-sizes

문서 전체의 단위 길이 적용

<head>
    <style>
        /* 단위 길이(font-size) */
        html {font-size: 10px;}
</head>

rem & em
- 단위 길이를 다른 요소들과 비교하여 상대적으로 정함.
- rem : Root Element (html)의 폰트 사이즈가 기준이 됨.
  - 1.2 rem ; 10 px(html) * 1.2 = 12 px
- em : 상위 Element의 폰트 사이즈가 기준이 됨.
  - <li class="em"> 저는 1.2em입니다.</li> 에서, li < ul < body < head 순의 상위 Element 로 이동하여 기준 폰트사이즈 (html: 10px) 를 찾음.
  - 자손 선택자 ul & li (Ul의 자식 선택자)의 폰트 사이즈가 각각 1.2 em인 것을 알 수 있음.
  - 따라서, 최종적으로 10px(html) * 1.2(ul) * 1.2(ul안의 li) = 14.4 px

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        /* 단위 길이(font-size) */
        html {font-size: 10px;}
        
   		/* rem: html에 정의된 font-size에 비례 */
    	ol {font-size: 1.2rem;}
        /* 10px * 1.2 = 12px */
    
    	/* em: 자신의 상위 요소의 font-size에 비례 */
    	ul {font-size: 1.2em;}
    
        .em {font-size: 1.2em;}
        /* 10px(html) * 1.2(ul) * 1.2(ul li) = 14.4px */
     </style>
</head>

<body>
     <ol>
        <li>저는 1.2rem입니다.</li>
    </ol>
    <ul>
        <li class="em">저는 1.2em입니다.</li>
    </ul>  
</body>

https://www.w3schools.com/css/css_units.asp

vh(viewpoint height) & vw(viewpoint height)
- 사용자가 보고있는 브라우져의 세로,가로 길이 (상대적인 값)
- 브라우져의 크기를 의도적으로 수정할 경우, 폰트 사이즈의 크기가 자동으로 변경됨.
- 1vh/vw: 100분의 1 값
  - 브라우저 전체 넓이값이 1000px 일 때, 1vw는 10px
  - 브라우저 전체 높이값이 900 px 일때, 1vh는 9px

<head>
    <style>
        .vh {font-size: 5vh;}
        .vw {font-size: 5vw;}
    </style>
</head>

<body>
    <span class="vh">5vh</span>
    <span class="vw">5vw</span>
</body>

Box Model

모든 HTML 요소들은 박스로 간주 할 수 있으며, CSS Box Model은 문서의 design과 layout을 일컫음.

기본 구성 요소 (참조: https://www.w3schools.com/css/css_boxmodel.asp)

Content

Padding

Margin

Border

box-sizing / width / height

box-sizing : 박스 크기의 기준을 설정할 수 있음. (기본: content-box )
- content-box : 박스 크기의 기준이 cotent(내용)임
- border-box : 박스 크기의 기준은 border이므로, padding 의 공간을 또한 포함함
width & height : 박스의 너비 & 높이

<head>
    <style>
        box {
            box-sizing: content-box;
            width: 100px;
            height: 100px;
         }      
    </style>
</head>

padding & margin

padding : border 의 안쪽 여백
margin : border의 바깥쪽 여백
- padding: 25px 와 같이, 상/하/좌/우의 여백을 동시에 줄 수도 있으며,
- padding-top: 25px 와 같이, 개별적으로 여백을 적용 할 수 있다.
  - cf) padding: 25px 20px 15px 10px 처럼, 연속적으로 각각의 여백을 한줄로 표현도 가능.
- 순서는 위부터 시계 방향(위 / 오른쪽 / 아래 / 왼쪽)

<head>
    <style>
        box {
            /* 안쪽 여백 */
            /* padding: 25px */
            padding-top: 25px; 
            padding-right: 25px;
            padding-bottom: 25px;
            padding-left: 25px;
            /*margin: 25px 20px 15px 10px ; 바깥쪽 여백 */
            margin-top: 25px; 
            margin-right: 25px;
            margin-bottom: 25px;
            margin-left: 25px;
         }      
    </style>
</head>

border

border-width : 테두리의 두께
border-style : 테두리의 스타일
border-color : 테두리 색상
- cf) border: 2px solid purple; 처럼 또한 연속적으로 테두리에 대한 설정을 할 수 있음
- 순서는 두께 > 스타일 > 색상 순임.
border-radius : 테두리 모서리 둥글기 정도

<head>
    <style>
        box {
            
            /*border: 2px solid purple;*/            
            border-width: 2px;
            border-style: solid;
            border-color: purple;
            
            /* 테두리 모서리 둥글기 정도 */
            border-radius: 20px;            
         }      
    </style>
</head>

Display

Block

기본적으로 full width available 을 차지함. (전체 한 라인)
블록 레벨 속성은 항상 새로운 라인에서 시작함.
block 레벨 요소 내에 inline 레벨 요소를 포함 할 수 있음.
- 예) div, h1~h6, p, ol, ul, li, table, form

Inline

자기자신을 담고 있는 곳 까지만 차지함(as much width as necessary)
새로운 라인에서 시작하지 않으며, 문장의 중간에 들어 갈수 수 있음.
width, height, margin(top, bottom) 사용 불가 (상,하 여백은 line-height로 지정함)
- 예) span, a, strong, em, img, input

inline-block

block과 inline 레벨 요소의 특징을 모두 가짐
inline 레벨 요소 처럼 한줄에 표시 되면서, block에서의 width, height, margin(top, bottom) 속성을 모두 지정할 수 있음

None

해당 요소를 화면에 표시 하지 않음(공간 조차 차지 하지 않음)

div 태그는 블록 레벨 속성을 갖고 있음. 따라서 컨텐츠 만큼만 디스플레이를 설정하기 위해서는 아래와 같이 display: inline 으로 의도적으로 변경을 해줘야 한다.

<head>
    <style>
        .box2 {
            display: inline;
            border: 2px solid red;
            background-color: gray;
            visibility: visible;
            opacity: 0.3;
        }
    </style>
</head>
<body>
    <div class="box2">
        이것은 박스 2 입니다.
    </div>
    
</body>

Visibility

Visibility & Opacity
- Visibility: 박스를 보이게 하는 설정(기본값: visible)
- 값을 hidden으로 적용하면 박스를 안보이게 설정 할 수 있음 (공간은 차지)
- Opacity: 박스의 투명도. 범위는 0.0~1.0으로 작아질수록 투명해짐

Position

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

종류: Static / absolute / relative / fixed

top / bottom / left / right 속성을 이용하여 위치 수정 가능

예) top: 50px / left: 50px : 테두리 내 기준으로 위에서 부터 50px, 왼쪽에서 50px 이동

*각 박스의 위치가 겹치는 경우 z-index 속성을 이용하여 우선순위를 설정할 수 있음. static은 다른 박스와 상호작용을 못하기 때문에 z-index가 안먹힘.

Static (Default)

top / bottom / left/ right 속성등에 영향을 받지 않음
위치는 페이지의 일반적인 흐름에 따라 결정됨. (CSS Position의 기본값)

.box-static {
    background-color: gray;
    border: 2px solid red;
    width: 100px;
    height: 100px;}

absolute

좌표(절대값) 기준으로 화면 내 어디로든 자유롭게 이동 가능.
이동할 경우, 기존 위치는 아애 비워져버리므로. static box가 있는 경우, 순차적으로 그자리를 차지해버림. (본가가 이사간다!)

.box-absolute {
    position: absolute;
    background: green;
    width: 100px;
    height: 100px;
    top: 50px;
    left: 50px;
    z-index: 1;}

relative

Normal position (기존 위치)를 기준으로 이동(상대적 이동)
이동하여도, Normal position은 다른 content에 의해 차지되지 않음.
(본가는 그대로 있고, 자취방을 구한다는 개념!)

.box-relative {
    position: relative;
    background: blue;
    width: 100px;
    height: 100px;
    z-index:2;}

fixed

스크롤 바를 내려도 고정적으로 보이는 부분.
이동할 경우, 기존 위치는 아애 비워져버리므로. static box가 있는 경우, 순차적으로 그자리를 차지해버림. (본가가 이사간다!)

.box-fixed {
    position: fixed;
    background: pink;
    width: 100px;
    height: 100px;
    top: 50px;
    right: 50px;}

응용

position을 설정한 태그 안에 추가로 태그를 넣음으로써, 기준점(시작점)을 설정 할 수도 있음.

<body>
	<div class="small-box" id="green">
      <div class="small-box" id="purple"></div> 
        <!-- green 안에 purple -->
    </div>
    <div class="small-box" id="blue">
      <div class="small-box" id="orange"></div> 
        <!-- blue 안에 orange -->
	</div>
</body>

<--! CSS file -->
    
<style>
#purple {
  background-color: purple;
  /* 초록색 기준으로 100 100 만큼 떨어져 있음 */
  position: absolute;
  top: 100px;
  left: 100px;
}

#orange {
  background: orange;
  /* 파란색 기준으로 얼마나 떨어져있는가 */
  position: absolute;
  top: -100px;
  left: 100px;
}
</style>

Background

CSS background의 속성은 선택자의 배경 효과를 설정하는데 사용 The CSS background properties are used to define the background effects for elements.

background-color : 배경 색상 설정
background-image : 이미지 설정. 예) url(images/minsu.jpg);
background-position : 가로 세로 초점 이동 설정
- 예) background-position: center center
background-size : 배경의 크기 설정
- 직접 수치 입력 (예. 200px 200px)
- contain : 이미지가 완전히 보이도록 배경 이미지 크기 조정
- cover : 전체 컨테이너를 덮을 수 있도록 배경 이미지 크기 조정
background-repeat : 배경 이미지 반복 설정
- no repeat: 반복하지 않음. (이미지는 1번만 표시)
- repeat: 가로/세로로 반복. 적합하지 않을 시, 마지막 이미지가 잘림.
- initial: 속성을 기본값으로 설정
background-attachment : 배경 이미지 고정 / 스크롤 여부 설정
- scroll: 배경이미지가 페이지와 함께 스크롤됨 (기본값)
- fixed: 배경이미지가 페이지와 함께 스크롤 되지 않음

div {
    height: 200px;
}

.background-color {
    background-color: blue;
}
.background-image {
    background-image: url(images/minsu.jpg);
    /* 가로,세로 초점 이동 */
    /*(left, right, top, bottom, center)*/
    background-position: center center; 
    /* contain & 200px 200px & cover */
    background-size: cover;
    background-repeat: no-repeat;
    /* fixed & scroll */
    background-attachment: fixed;
}

Font

font-size : font의 크기 설정
font-style : font의 스타일 설정
font-weight: font의 굵음의 정도 설정 (일반적으로 100~900 사이)
font-family : font 종류를 지정
- 컴퓨터에 모든 폰트가 들어 있지 않으므로, font-name 중 원하는 폰트를 여러가지 나열하여, (font-stack) 마지막에 generic-family를 적어줌.
- 이를 통해, 적어도 폰트가 없을 때, 끝에 있는 generic fa,ily에서비슷한 폰트를 브라우저가 찾아서 보여줌.
- web-safe font 종류: verdana / georgia / times new roman / aria
- 구글 폰트( https://fonts.google.com/ )를 통해서 다양한 폰트를 적용 할 수도 있음.
line-height : 줄 간격 설정
- font 사이즈에 비례하여 상대적으로 설정하거나 (기준: font size 1)
- 픽셀 크기로 설정 가능
letter-spacing : font의 장평 조절 (플러스로 가면, 장평이커지고 마이너스로 가면 장평이작아짐)
text-align : 정렬 위치 설정 (center, end, inherit)

.font {
    font-size: 40px;
    font-style: italic;
    font-weight: 700;
    font-family: 'Times New Roman', Times, serif
    line-height: 1.5;
    letter-spacing: 1px;
    text-align: center;
}

Comment Read more

Web 03 - CSS, CSS의 기본구성, CSS 스타일의 종류, 선택자, 선택자의 우선순위

17 Feb 2019 | Web HTML CSS

CSS

CSS(Cascading Stype Sheets): 마크업 언어(HTML)이 실제 표시되는 방법을 기술하는 언어. HTML이 웹사이트의 몸체를 담당한다면, CSS는 옷, 엑세서리와 같이 웹사이트를 꾸미는 역할을 담당한다.

웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우저에 알맞게 보이는 것’이 중요하기 때문입니다. 그래서 웹 표준에서는 구조(Constructure)와 표현(Presentation)과 행위(Behavior)를 각각 분리해서 개발하기를 권유합니다. 이렇게 하면, 각 사용자는 구조화 된 마크업에 따라 다양한 디자인을 제공받을 수 있기 때문입니다. 뿐만 아니라 사이트의 로딩속도도 빨라지고 개발과 유지보수 또한 쉬워집니다.

구조 : 웹 콘텐츠에 의미를 부여하고 구조를 형성 → HTML

표현 : 시각적인 디자인과 레이아웃 표현 → CSS

행위 : 모든 front-end의 브라우저 상호작용을 담당 → JavaScript 출처: http://www.nextree.co.kr/p8468/

Bootstrap: 트위터를 만든 회사에서 만든 CSS Framework를 제공하는 사이트 (http://bootstrapk.com/)
CSS Framework를 활용하면, HTML의 스타일을 직접 하지 않고, 적절한 디자인을 적용할 수 있음. (HTML Style을 도와주는 서비스 혹은 라이브러리의 개념)

CSS의 기본 구성

<!DOCTYPE html>
<html lang="en">
    <head>
		<style>
            h1 {
                color: aqua;
        </style>
    </head>

h1 : 선택자 (selector)
{} : 선언 블록
color: aqua; : 선언문
- color : 속성(property)
- aqua : 값(value)
h1(선택자) + {color: red;}(선언블록) : 규칙(Rule)
규칙 묶음 : 스타일 시트(stylesheet)

CSS 스타일의 종류

Inline style (인라인 스타일)

<body>
	<section id="web">
        <ul style="list-style-type: circle;">
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </section>
</body>

Embedding style (내부참조)
- head 요소 내 style 태그내 적용

<head>
    <style>
        h1 {
            color: red;
    </style>
</head>

Link style (외부참조)
- css 파일 link 하여 css 파일 내 style 적용

<head>
    <link rel="stylesheet" href="style.css">
</head>

선택자 (Selector)

선택자란 말 그대로 선택을 해주는 요소를 말함. 이를 통해 특정 요소들을 선택하여 스타일을 적용 할 수 있게 됨.

전체 선택자

선택자에 * 을 사용 할 경우, head 및 body 안의 모든 내용에 스타일이 적용 됨.

<head>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <p>Red, 전체 선택자</p>
</body>

태그 선택자

스타일을 적용하고 싶은 태그명을 선택자에 입력하면, 그 태그에만 스타일이 적용됨.

<head>
    <style>
        h1 {
            color: rosybrown;
        }
    </style>
</head>
<body>
    <h1>rosybrown, 태그 선택자</h1>
</body>

클래스 선택자

사용자가 지정한 클래스에 대하여 스타일을 적용함.
클래스를 class="blue" 와 같이 적용하고자 하는 태그에 클래스를 지정.
선택자에는 .blue 와 같이, . 을 클래스 앞에 반드시 입력해줘야 함.

<head>
    <style>
        .blue {
            color: blue;
        }
    </style>
</head>
<body>
    <h2 class="blue">blue, .클래스 선택자</h2>
</body>

아이디 선택자

사용자가 지정한 아이디에 대하여 스타일을 적용함.
아이디는 html문서안에 유일하게 하나만 가질 수 있음.
아이디를 id="green" 와 같이, 적용하고자 하는 태그에 아이디를 지정.
선택자에는 #green 와 같이, # 을 아이디 앞에 반드시 입력해줘야 함.

<head>
    <style>
        #green {
            color: green;
        }
    </style>
</head>
<body>
    <h3 id="green">green, #아이디 선택자</h3>
</body>

복합 선택자

자손 선택자
- 모든 자손들이 선택됨.
- 아래의 경우, section 태그 안에 있는 모든 ul 태그에 속성이 적용됨.

section ul {
    margin: 10px 0;}

자식 선택자
- 지정된 자식에게만 속성이 적용됨

section > ul > li {
    font-size: 20px;
    font-weight: bold;
}

형제 선택자
- a + ul : 같은 부모 내, a의 형제 요소 중 바로 뒤 (다음)의 ul에 적용
- a ~ ul : a의 형제 요소 중, a 뒤에 오는 모든 ul에 적용

a + ul {
    background-color: gold;}
a ~ ul {
    border: 1px solid darkgray;}

속성 선택자
- class 속성을 가진 ul 태그 중, li 라는 자손 모두에 적용
- target 속성을 가지며, 그 값이 _self인 a태그에 적용

ul[class] li {
    width: 24%;
    height: 50px;
    display: inline-block;
}

a[target="_self"] {
    border: 1px solid darkgray;
    border-radius: 5px;
    background-color: white;
    padding: 5px;
}

문자열 속성 선택자

선택자의 형태	설명
[속성=”값”]	특정 값인 태그 선택
[속성~=”값”]	특정 값을 단어로 포함하는 태그 선택 / 띄어쓰기 기준 (alt=”바다 사진” / [alt~=”바다”])
[속성\|=”값”]	특정 값을 단어로 포함하는 태그 선택 / 하이픈 기준 (alt=”바다-사진” / [alt\|=”바다”)
[속성^=”값”]	특정 값으로 시작하는 태그 선택 (alt=”apple banana” / [alt^=”app”])
[속성$=”값”]	특정 값으로 끝나는 태그 선택 (href=”ssafy.com/istj” / [href$=”istj”])
[속성*=”값”]	특정 값이 포함된 태그 선택(들어만 있으면 됨) (alt=”미세먼지싫어” / [alt*=”세먼지”])

선택자의 우선순위

태그 vs 클래스: 클래스 선택자 우선
태그 vs 아이디: 아이디 선택자 우선
태그 vs 아이디 vs 클래스: 아이디 선택자 우선
- 최종 우선 순위: 아이디 > 클래스 > 태그 > 전체 (요소들의 갯수 순서대로 라고 볼 수 있음)
Example 1)

<body>
    <!-- vs. -->
    <!-- id > class > tag > *  -->
    
    <!-- 태그 vs 클래스: 클래스 -->
    <h1 class="blue">h1 vs .blue</h1>
    
    <!-- 태그 vs 아이디: 아이디 -->
    <h1 id="green">h1 vs #green</h1>
    
    <!-- 태그 vs 아이디 vs 클래스: 아이디 -->
    <h1 id="green" class="blue">h1 vs #green vs class</h1>
    
</body>

Example 2)
- CSS의 선택자는 아래의 우선순위를 가짐.

<body>
    <div>
        <h1 id="toffee" class="latte" style="color: green;">아이스 토피넛 라떼</h1>
    </div>
</body>

/* 우선순위가 낮은 것부터 적용 */

/* 6. 상위 객체에 의해 상속된 속성 */
div {color: red}
/* 5. 태그 이름으로 지정한 속성 */
h1 {color: blue;}
/* 4. 클래스 이름으로 지정한 속성 */
.latte {color: brown;}
/* 3. id로 지정한 속성 */
/* 동일한 레벨의 속성이 열거될 경우는 후자에 온 속성을 적용함 */
#toffee {color: yellow;}
#toffee {color: purple;}

/* 2. HTML에서 style을 직접 작성한 속성 */
/* 1. 속성값 뒤에 !important를 붙인 속성 */
h1 {color:black !important;}

Comment Read more

Web 02 - HTML 기본구조, DOM TREE, TAG 종류

17 Feb 2019 | Web HTML

HTML

HTML(Hyper Text Markup Language) : 웹페이지를 작성하기 위한 역할 표시 언어 (프로그래밍 언어 x)

Hyper Text
- 기존의 텍스트는 정해진 순서(선형적)대로 이동을 해야 했음.
- 그러나 Hyper Text는 링크를 이용하여 이곳 저곳으로 텍스트를 옮겨 다닐 수 있게 됨.
- HTTP(S): Hyper Text Transfer Protocol의 약자로, 인터넷에서 정보를 주고 받는 통신 규약, Hyper Text를 주고 받는 규칙
Markup
- 태그 등을 이용하여 문서의 구조를 명기하는 언어. 역할에 딷라 다른 태그를 적용하여 문서의 구조를 더욱 세밀하게 표현할 수 있음.

HTML의 기본구조

<!DOCTYPE html> : DOC TYPE 의 선언부. 사용하는 문서의 종류를 선언하는 부분. 보통 html을 사용
HTML 요소: HTML 문서의 최상위 요소로 문서의 root를 뜻함. head와 body 부분으로 구분됨
- head
  - 문서 제목, 문자코드(인코딩)와 같이 해당 문서 정보를 담고 있으며, 브라우저에 나타나지 않음.
  - CSS 선언 혹은 외부 로딩 파일 지정등을 작성ㅇ함
  - og와 같은 메타 태그 선언이 이루어짐
- body
  - 브라우저 화면에 나타나는 정보 내용에 해당함

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

DOM TREE (Document Object Model)

1. 요소(Element)

HTML의 element는 태그와 내용(contents)로 구성됨.
태그는 대소문자를 구별하지 않으나, 소문자로 작성하는 것이 권장 됨 (as per W3C)
요소간 중첩도 가능하다.

<h1>웹문서</h1>
<!-- <h1>: (여는/시작) 태그 -->
<!-- </h1>: (닫는/종료) 태그 -->

2. Self-closing element

닫는태그가 없는 태그도 존재함 예) <img src="url"/>

3. 속성(Attribute)

태그에는 속성이 지정될 수 있음.
id, class, style 속성은 태그와 상관 없이 모두 사용 가능 (Global Attribute)
띄워쓰기를 쓰지 않으며 속성값은 큰따옴표로 감싸는 것이 일반적인 약속임

<a href="https://google.com"/>
<!-- href: 속성명 -->
<!-- google.com: 속성 값 -->

4. DOM 트리

태그는 중첩되어 사용가능하며, 이때 다음과 같은 관계를 갖음.
- body 태그와 h1태그는 부모(parent) - 자식(child) 관계
- li 태그는 형제(sibling) 관계
- h1과 ul 태그는 형제(sibling) 관계

<body>
  <h1>웹문서</h1>  
  <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
</body>

5. 시맨틱 태그

태그 자체가 의미를 가질 때 시맨틱 태그 라고함(컨텐츠의 의미를 설명하는 태그)
- 개발자로 하여금 문서의 의미론적인 구조를 쉽게 파악할 수 있게함
- 검색엔진에게도 의미론적으로 중요한 부분과 덜 중요한 부분을 파악할 수 있게 해주어, 효율적인 검색을 하도록 만든다.
Non-Sementic Tags: div , span 등
시맨틱 태그의 종류

태그	설명
header	헤더 (문서 전체나 섹션의 헤더)
nav	내비게이션
aside	사이등 위치한 공간으로, 메인 콘텐츠와 관련성이 적은 콘텐츠에 사용ㅍ
section	문서의 일반적인 구분으로 컨텐츼의 그룹을 표현하며, 일반적으로 h1~h6 요소를 가짐
article	문서, 페이지, 사이트 안에서 독립적으로 구분되는 영역 (포럼/신문 등의 글 또는 기사)
footer	푸터 (문서 전체나 섹션의 푸터)

Tag

대표적인 HTML의 Tag (1)

제목 / 굵게 / 기울임 / 강조 / 취소선 / 밑줄 / 아래첨자 / 윗 첨자 / 문단 구분 / 줄 구분 / 그대로 입력 / 구분선 / 인용 / 리스트

<body>
    <!-- head: 제목 -->
    <h1>Hi, There!</h1>
    <h2>Hi, There!</h2>
    <h3>Hi, There!</h3>
    <h4>Hi, There!</h4>
    <h5>Hi, There!</h5>
    <h6>Hi, There!</h6>

    <!-- Bold: 굵게 -->
    <b>This is bold</b>      
    <strong>This is strong(semenatic)</strong>

    <!-- italic: 기울임 -->
    <i>This is italic</i>
    <em>This is em.(sementic)</em>   <!-- emphasized -->

    <!-- highlighted: 강조 -->
    <h2>이건 하이라이트 <mark>마크됐나?</mark> </h2>

    <!-- del: 취소선 / ins: 밑줄 -->
    <h2>이건 <del>del</del>.</h2>
    <h2>이건 <ins>ins</ins>.</h2>

    <!-- sub: 아래 첨자 / sup: 윗 첨자 -->
    <h2>이건 <sub>sub</sub>.</h2>
    <h2>이건 <sup>sup</sup>.</h2>

    <!-- p: 문단 구분 / br: 줄 구분 -->
    <p>이건 p tag에 br넣은기고.<br>
            이건 p tag.이건 p tag.
            이건 p tag.이건 p tag.이건 p tag.
            이건 p tag.이건 p tag.이건 p tag.이건 p tag.
    </p>    
    
    <!-- pre: 그대로 보이기 -->
    <pre>
        from flask import Flask
        app = Flask(__name__)

        @app.route('/')
    </pre>

    <!-- hr: 구분선 생성 -->
    <hr>

    <!-- q: quote(인용) / blockquote -->
    <p>
        Junwoo said, <q>Hello World</q>
    </p>
    <blockquote>
        Hello world!
    </blockquote>

    <!-- li: 리스트 작성 -->
    <!-- ol 또는 ul을 쓴 이후, li를 작성 -->
    <ol>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ol>

    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
    </ul>

</body>

대표적인 HTML의 Tag (2)

링크 / 이미지 / 동영상 / 동영상 링크

<section id="link">		
<!-- a(anchor): 정박하다. 링크 등과 연동되는 태그
    href.values
   	 1. 절대 URL 예) google.com
     2. 상대 URL
     3. element id 
		예) #python 등과 같이 입력 후 이동하고자 하는 태그에 
			id="python" 처럼 입력,
     4. mailto:
    
	target
     1. target="_self" - 현재 탭에서 실행
     2. target="_blank" - 새로운 탭에서 실행 -->
    
	<a href="https://www.google.com" target="_self">
        절대 URL</a>
    <a href="index.htm" target="_blank">상대 URL</a>
    <a href="#python">파이썬으로(id python)</a>
    <a href="mailto:nowater.in.the.house@gmail.com">메일보내기</a>
</section>

<!-- Bullet의 모양 변경: 
	none, square, circle, lower-alpha, 
	upper-alpha, upper-roman -->

	<ul style="list-style-type: circle;">
    	<li>HTML</li>
    	<li>CSS</li>
	</ul>

<!-- img: 이미지 등록
	1. src: 이미지 파일에 대한 경로
	2. alt: 이미지 파일에 대한 설명
	3. width & height: 이미지 파일 너비 & 높이 -->
	<img src="images/minsu.jpg" alt="민수" width="400px" 	height="">
	<video src="video.mp4" width="300px" height="" controls></video>

<!-- iframe: 동영상 링크 연결 -->
	<iframe width="560" height="315" src="주소" frameborder="0">
	</iframe>

대표적인 HTML의 Tag (3)

표 만들기, 입력창, 목록상자, 체크박스, 선택박스

<section>
    <!-- table -->
    <table>
        <!-- table row -->
        <tr>
            <!-- table head -->
            <th></th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
        </tr>
        <tr>
            <!-- table data -->
            <td>A 코스</td>
            <!-- rowspan : 세로 칸 늘리기 -->                
            <td rowspan="2">짬뽕</td>
            <!-- colspan : 가로 칸 늘리기 -->
            <td colspan="2">초밥</td>

        </tr>
        <tr>
            <td>B 코스</td>
            <td>김치찌개</td>
            <td>삼계탕</td>   
        </tr>
    </table>
</section>

<section>
<!-- form: 입력창 태그 -->
<form action="" method="GET">
    <input type="text"><br>
    <input type="password"><br>
    <input type="number" min="15" max="30" step="5"><br>

    <!-- radio: 선택박스 -->
    <div>
        <input type="radio" name="sandwich">에그 마요<br>
        <input type="radio" name="sandwich">비엠티<br>
        <input type="radio" name="sandwich">터키 베이컨<br>
    </div>

    <!-- checkbox: 체크박스 -->
    <div>
        <input type="checkbox" name="topping">토마토<br>
        <input type="checkbox" name="topping">오이<br>
        <input type="checkbox" name="topping">할라피뇨<br>
        <input type="checkbox" name="topping">핫 칠리<br>
        <input type="checkbox" name="topping">바베큐 소스<br>
    </div>

    <!-- select: 목록상자 -->
    <div>
        <select name="" id="">
            <option>허니오트밀</option>
            <option disabled>플랫브레드</option>
            <option selected>파마산 오레가노</option>
        </select>
    </div>

    <input type="submit" value="로그인">
</form>

Comment Read more

Older Newer

해리의 데브로그

Web 06 - Bootstrap Introduction, Utilities(1)

CSS Framework / Bootstrap

CDN

Bootstrap 기본 설정

Utilities

1. spacing

2. Color

Text color

Background color

4. Display

5. Position

6. Text/Font

7. Layout

Web 05 - Responsive Web, View port, Media Query

Responsive Web

View port

Media query

기본구성(syntax)

Media query의 대표적인 조건

1. width

3. height / min-height / max-height

4. orientation

5. 응용: Bootstrap의 Break point 흉내내기

Web 04 - CSS의 속성(colors, Font-size, Box Model, Display, Visibility, Position, Backgrounds, Font)

Colors

Font-sizes

Box Model

box-sizing / width / height

padding & margin

border

Display

Block

Inline

inline-block

None

Visibility

Position

Static (Default)

absolute

relative

fixed

응용

Background

Font

Web 03 - CSS, CSS의 기본구성, CSS 스타일의 종류, 선택자, 선택자의 우선순위

CSS

CSS의 기본 구성

CSS 스타일의 종류

선택자 (Selector)

전체 선택자

태그 선택자

클래스 선택자

아이디 선택자

복합 선택자

선택자의 우선순위

Web 02 - HTML 기본구조, DOM TREE, TAG 종류

HTML

HTML의 기본구조

DOM TREE (Document Object Model)

1. 요소(Element)

2. Self-closing element

3. 속성(Attribute)

4. DOM 트리

5. 시맨틱 태그

Tag

대표적인 HTML의 Tag (1)

대표적인 HTML의 Tag (2)

대표적인 HTML의 Tag (3)