25 Feb 2019

Web 요약정리

이전 포스트에서 배웠던 웹에 관련한 기본개념들을 요약정리해보았습니다!

WEB 개념 복습

0. Web Service

웹 (World Wide Web)

인터넷에 연결된 컴퓨터들을 통해서 사람들이 정보를 공유할 수 있는 전 세계적인 정보공간, 인터넷이랑은 다른 개념이다.
Web Service

클라이언트가 요청(GET, POST)을 하면 서버컴퓨터에서 브라우저를 통해서 응답을 보내주는 프로그램
IP : 인터넷 프로토콜, 홈페이지 주소

Domain : 네트워크상의 서버컴퓨터 호스트명

URL : Domain + 세부경로 -> 해당 서버에 저장된 자료의 위치

1. HTML

Hyper Text Markup Language
- Hyper Text : 링크(참조)를 통해서 즉시 다른 문서로 접근할 수 있는 텍스트
  
  (즉 비선형적인 텍스트구조를 뜻함.)
- Hyper Text를 주고받는 규칙 : Hyper Text Transfer Protocol(통신 규약)
HTML 문서의 기본 구조

DOM 트리 (트리구조로 태그를 저장함.)
- Head 태그 : 해당 문서의 정보를 담고 있음, 브라우저에 표시되지 않음
  
  ex) open graph
- Body 태그 : 실제 내용에 해당됨.
  - 시맨틱태그
    
    검색엔진은 브라우저를 직접 보지 않고 오직 HTML 코드를 통해서 문서를 해독함.
    
    이 때, 문서를 해독하는 단서 중의 하나가 시맨틱태그이다.
    
    즉, 시맨틱태그에 따라서 태그 안에 담긴 content의 의미를 다르게 해석함.
    
    div와 span말고는 대부분 태그 자체에 뜻이 있다고 생각하면됨.
    
    ex) p태그 : paragraph
    
    HTML5에 새로 추가된 시맨틱 태그들
    
    header, nav, section(본문 컨텐츠 대단위), aside(사이드), article(본문 컨텐츠 소단위), footer
  - 기초 태그
    
    div, p, a, img, table - tr/th/td, li - ul/ol, form 등등!

2. CSS

Cascading style sheet

상대 단위
- px (pixel) : 기본적으로 1픽셀의 크기는 해상도(ex : 1680 * 1050, 1인치 안에 표현되는 픽셀의 수)에 따라 다르지만, 여기서는 브라우저에 따른 절대단위로 인식함
- %, em : 상대단위, 그 요소에 지정된 size를 %단위로 바꿀 수 있음 (1em = 100%와 동일)
  
  font 프로퍼티는 상속되기때문에 변경을 여러번 하게 되면 기준이 되는 size도 상속을 거치면서 변화됨.
- rem : 상대단위, root 요소에 지정된 size를 참고함.
  
  이렇게되면 상속을 여러 번 하여도 root요소의 size를 기준값으로 가져오기 때문에 기준값은 변하지 않음.
- vw, vh : 상대단위, viewport를 기준으로 한 상대적인 사이즈를 가져옴.
  
  이 viewport 크기는 meta태그를 통해서 설정할 수 있다. (설정하지 않으면 기본값은 980px)
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
  가로폭을 디바이스의 가로폭에 맞춘다 + 처음 페이지를 볼 때 줌을 100%로 설정.
선택자 및 우선순위
1. 상속
  - 기본적으로 상속이 되는 프로퍼티들
    
    visibility, opacity, font, color, line-height, text-align, white-space
  - 그러나 위의 프로퍼티들임에도 불구하고 상속을 받지 않는 태그도 존재 (ex : button)
  - 다음과 같이 상속을 강제로 받을 수 있음
    .text-red button { color: inherit; }
2. CSS 적용 우선순위
  - 2-1. CSS가 어디에 선언되었는가?
    
    head 태그에 직접 style태그로 정의 > link 태그에서 css파일을 참고함 > 브라우저 기본값
  - 2-2. 명시도
    
    !important > 태그 내에 직접 선언 > ( id > class > tag > * ) > 상속된 속성
  - 2-3. 선언순서
    
    나중에 선언된 스타일이 우선 적용된다.
박스모델

모든 HTML 요소는 네모 형태의 영역을 가지고 있음.
1. 네모 영역의 구분
  - Content (width, height)
    
    실제 Content가 위치하는 곳
  - Padding (padding)
    
    컨텐츠와 테두리 사이의 여백,
    
    요소에 적용된 color와 image는 패딩 영역까지 적용된다.
  - Border (border)
    
    테두리 영역
  - Margin (margin)
    
    테두리 바깥의 여백, 배경색 지정 불가능
2. 영역을 조절하는 프로퍼티들
  - width, height : Content 영역을 변경함.
    1. box-sizing 기본값 : content-box
      
      border-box 라고 하면 border 까지를 지정할 수 있다.
  - margin, padding ( 북 -> 동 -> 남 -> 서)
    1. auto : 해당 요소를 브라우저 중앙에 위치시킴
    2. max-width : 브라우저 너비가 요소의 너비보다 좁아질 때 자동으로 요소의 너비가 줄어든다.
Display
1. block
  - 기본적으로 width : 100%
  - width를 작게 지정하면 나머지는 margin으로 바뀜
  - div, h1~h6, p, ol, ul, li, table, form 태그가 있다.
2. inline
  - Content 너비만큼 가로폭을 차지한다.
  - width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없음.
    
    (margin-top, margin-bottom을 대체하여 line-height를 사용가능)
  - inline 요소 내에 block 요소를 사용할 수 없다!
  - span, a, strong, img, input, button 태그가 있다.
3. inline-block
  - inline이지만 width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 있음
4. none : 화면에 표시하지 않음
  - visibility 프로퍼티로도 조절가능하다
    1. hidden : 보이지는 않지만 공간은 남아있음.
    2. none : 보이지도 않고 공간도 사라짐.
5. flex
  
  이 요소(flex-container 라고 부름) 안에 있는 아이템들이 flex property를 따르게 만들어줌.
  - flex-direction : 요소들을 쌓는 방향을 정함
  - flex-wrap : 요소들을 wrap할 것인가? (기본값 : nowrap)
  - flex-flow : flex-direction flex-wrap
  - justify-content : flex item들을 어떻게 쌓을 것인가?
  - align-items : flex item들의 세로축을 어떻게 할 것인가?
  - align-content : flex line들에 대한 정렬방식, flex line이 생기려면 wrap을 통해서 여러 flex line을 만들어야함!
Position : 위치가 어디인지?
1. static (기본값) : 부모요소의 위치를 기준으로 자식요소들을 순서대로 배열함.
2. relative : static + 좌표 프로퍼티 사용
3. absolute : static이 아닌 가장 가까이 있는 요소의 위치를 기준으로 함.
  - display : block이어도 content만큼 width를 차지하게 바뀌어버림.
4. fixed : 브라우저의 viewport를 기준으로 함.
  - display : block이어도 content만큼 width를 차지하게 바뀌어버림.
  - 이걸 이용해서 footer나 sidebar를 만들 수 있음!

3. Bootstrap

Utility
- 텍스트
  - text-center ( text-align : center
    
    block 요소 안에 있는 inline 요소들을 정렬시키는 것임! 말은 텍스트라고 적혀있지만 이미지같은것도 가능!!
  - font-weight-bold ( font-weight : 700 )
- 색상
  - primary, info, dark, light, warning, danger, success 등등
  - component에 따라서 정의가능 (ex: border, bg, text, btn, navbar…)
- 스페이싱
  - m,p : margin padding
  - t,b,l,r : top bottom left right
  - size : rem 단위 사용 (0.25, 0.5, 1, 1.5, 3)
  - auto : block으로 바꾸고 margin을 auto로 바꿈 (ex: mx-auto)
- border
  - border 클래스 = border 1px solid #dee2e6
  - rounded-circle , rounded-pill (알약모양)
- display
  - d-inline, d-block, d-inline-block, d-none
  - d-sm-none 같이 media query를 병합한 클래스도 존재함
    
    (small device에서만 display : none으로 바꾸라는뜻)
- position
  - position-static, position-relative, position-absolute, position-fixed
  - fixed-top, fixed-bottom : 위에서 말한 position fixed를 이용하여 정의하였음.

Grid system

flex개념을 사용하여 마치 그리드를 짜맞추듯이 요소들을 배치할 수 있는 기능.

일단 flexbox를 만들어야함 : row클래스

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
     
.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

container 클래스는 꼭 필요한건 아니지만 margin이랑 padding을 보니까 서로 짝이 맞는듯함.

row 라고 이름을 지으니 한줄로만 될 것 같지만 flex-wrap : wrap이기 때문에 여러 줄로 flex item들을 감싸는 형식이다.

row 요소에는 총 12개의 column이 있으며, col-4라고 하면 4개를 할당받게됨.
- offset : 빈 공간

반응형 그리드 설정가능

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`

Components

https://getbootstrap.com/docs/4.3/components/