My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

• on web, chrome, html&css, bootstrap

HTML/CSS 기초

참고자료 : https://poiemaweb.com/ , 한국어로 된 강의사이트 중에서 가장 좋음.


1- Web

인터넷과 동의어라고 생각해도 무방함.

“많은 정보에 universal하게 접근할 수 있는 하이퍼 미디어이다.”

HTML(hyper text markup language) 과 그 규약 (HTTP : hyper text transfer protocol)에 따라서 단순하게 시행되는 언어라고 보면 된다. HTTP는 매우 단순해서 예전부터 많이 쓰이고 있었는데, 이게 요즘 컴퓨팅 환경을 감당못해서 바꿔야한다는 말이 많이 나오고있음.

  • HTTP(S)

    HTTP + (S : Security) : 보안이 강화된 버전 -> 인증서를 발급받아야함 -> 아마존 인증서


1) 웹사이트와 웹서비스의 차이?

웹사이트(특정 사이트의 특정 리소스) // 웹서비스 (SaaS : Software as a Service)

모든 서비스가 SaaS화 되어가있음

(무언가를 다운로드 받아서 쓰기보다는 모두 브라우저화되어서 웹을 통해서 접근해서 이루어지는 서비스가 대세임.)


2) 서버란?

클라이언트가 요청할 때 응답을 보내는 주체

  • 응답 : 문서(html,json,…)

    그 응답을 받은 문서를 이쁘장하게 만들어주는 것이 브라우저이다.

    (물론 브라우저의 역할은 요청의 접근성을 높이는 것도 있음.)

  • 요청 : GET,POST


요즘은 클라우드서비스를 통해서 가상의 서버를 이용하는데, 가상화 시스템이 그 핵심기술이다.

심지어 AWS lambda도 등장해서 함수를 짜게 되면 그 함수만 계속 돌려주는 서비스가 개발되어 서버 자체도 필요가 없어짐.


3) IP/Domain/URL

  • IP (internet protocol) : 8비트까지의 숫자로 구성된 집함

  • Domain : 네트워크상의 컴퓨터를 식별하는 호스트명

  • URL (Uniform Resource Locator)

    도메인 + 경로 -> 실제로 해당 서버에 저장된 자료의 위치


4) Domain을 산다?

GoDaddy는 비추천함(나중에 가면 비싸짐)

AWS Route 53을 추천함, 관리하기가 용이함 : 우리가 가지고 있는 aws 인스턴스를 연결시켜줄 수 있음.


5) 웹사이트 표준

W3C : World wide web consortium

예전에는 마이크로소프트가 이 표준을 안쓰고 자기만의 규약을 만들어서 인터넷을 주도했는데, 구글이 위의 W3C를 잘 지켜서 크롬을 만들었고, 크롬이 현재 과반수 이상의 점유율을 차지하고 있다
: 표준의 중요성 강조

지금은 브라우저 대응(브라우저마다 코드를 다르게 씀)이 매우 쉬워짐, 크롬에서만 잘 돌아가게 만든다면 좋음.


6) Chrome 꿀팁

  1. Web developer extension

    자바스크립트 같은 레이아웃을 간단하게 알려주는 프레임워크

    1_

    이런걸 하나하나 써보면서 웹사이트가 어떻게 이루어져있는지 알아보는게 중요함.

  2. 옥토트리

    깃허브를 보기 편하게 만들어주는 프레임워크

    2_


2- HTML

  1. head태그

    • meta태그 : 문서 자체의 특성(검색 로봇에게 해당 페이지의 정보를 알려줌.)

      OG (open graph) : 썸네일 , http://mygumi.tistory.com/24

      4_

      The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.


  2. body태그 : 실질적으로 웹사이트에서 보여지는 태그임.

    • Tag와 DOM(document object model) Tree

      3_

      문서 객체(문서의 태그, 자바스크립트가 이용할 수 있는 객체)들의 모형인데 이게 Tree구조를 이룸.

      Tree구조에 대한 정보(ex, body > p > a)가 있으면 쉽게 검색이 가능

      자바스크립트는 각 태그들을 object로 취급하기 때문에 DOM이 되는 것이다.

      이것에 대한 이해는 단순히 웹페이지를 꾸미는 것 뿐만 아니라 정보를 가져오는데에도 필요함. (Tree를 잘 알게 되면 bs4에 명령을 더 효율적으로 내릴 수 있음.)

    • 태그가 잘 구성된 사이트와 안된 사이트 비교

      (Web developer extension -> information -> view document outline)

      이렇게 태그가 잘 구성되지 않으면, 크롤러가 잘 검색을 못함.

    7_


  3. 시맨틱태그

    사람들이 새로운 ui를 익히는 것에 굉장한 피로감을 느끼기 때문에 원래 많이 쓰이는 웹 구조를 차용하는 흐름이 되어가고 있음

    앞서 본 DOM구조는 구조론적인 정형화라고 하면 시맨틱태그는 의미론적인 정형화를 나타낸다고 보면 됨.

    -> 세부 Component들이 서로 유사하게 지원됨

    (에어비앤비, Tumblbug, 다음웹툰 같은 사이트를 비교해보면 유사한 구조인걸 알 수 있음!)

    TAG 설명
    header 헤더(머릿말)
    nav 페이지 메뉴를 알려줌
    aside 구석에 위치하는 공간
    section 내용들을 묶어주는 공간
    article section태그의 각 원소들
    footer 푸터(맺음말)

    5_


    ex) 에어비앤비 nav태그

    8_


    그리고 Grid system으로 각 태그마다 칸을 할당함으로써 컨텐츠 배치를 편리하게 할 수 있음.

    6_

    요약하자면,

    의미론적으로 중요한 내용 = 시맨틱태그

    본문을 차지하는 내용 = div나 p같은 태그


3- CSS

Cascading Style Sheet

Style Sheet가 폭포수처럼 상속을 통해서 전달되는 형식이라고 함.

CSS는 HTML이랑은 전혀 다른 시기에 개발된 별개의 언어이므로 CSS를 따로 학습해야함.

https://poiemaweb.com/css3-syntax


1) CSS를 HTML에 넣는 방법

  1. Inline style : 각 태그마다 css문법을 집어넣어서 적용하기

    • style = “color : ; font-size : ; “ 같이 사용가능

    • 꼭 하나의 성질 다음에는 ;를 넣어서 구분시켜주기.

    • font-size의 단위

      1. 픽셀 : 원론적으로는 상대적인 단위이다! (고해상도 = 단위면적에 많은 픽셀이 들어감)

        그러나, 최근에는 표준화하여 1/96 인치로 공통적으로 적용하는듯함.

      2. % : 100% = p태그의 글자크기 (절대적인 값은 아니고, 브라우저마다 다르게 렌더함.)

      3. 키워드(이건 필요하면 찾아쓰시오)

      4. em, rem : 1em = 100%, r = root

      5. viewpoint

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

        = 디바이스 폭을 기준으로 크기를 설정하겠다.

    • color단위

      https://htmlcolorcodes.com/

      9_

      저거 가져와서 그대로쓰면됨.

  2. style 태그 : 특정 selector에게 공통적으로 적용되는 css문법을 지정하기

    <style>
        h3 {color:darkviolet}
        p {border-style: dashed; color:gold}
        li{color:greenyellow}
</style>

    만약 충돌되는 CSS가 있다면, 가장 안쪽에 상속되는 CSS가 적용됨(메소드 오버라이딩)

    그리고, 순차적으로 읽어들이기 때문에 쓰는 순서에 따라 다르게 적용될 수 있음

  3. CSS파일을 통해서 렌더링하기

    (1) .css 파일에 스타일 부분을 적는다 (2) link 태그를 통해서 .css파일을 불러온다

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


2) Box Model

우리가 지정한 태그들은 글자범위가 아니라, 사실 박스이다

-> 웹브라우저는 네모네모형태로 이루어져있다.

https://poiemaweb.com/css3-box-model

ex)

10_


이러한 네모들도 체계가 있는데 margin - border - padding 구조로 이루어져있다.

  • margin : 태그를 둘러싼 바깥쪽의 영역, 눈에는 보이지 않음

    11_

  • padding : 컨텐츠 주변을 둘러싼 영역

    12_

  • border : 경계선 자체(설정을 통해서 활성화가능)

    13_


3) Bootstrap

CSS는 일반적인 코딩방식이랑 너무 달라서 곤혹을 치렀는데 bootstrap이라는 CSS개발 프레임워크가 만들어져서 CSS를 사용하기가 편해짐.


그 중에서도 Bootstrap CDN(Content Delivery Network)을 사용할 것이다.

:콘텐츠를 효율적으로 전달하기 위해 여러 노드에 가진 네트워크에 static file을 제공하는 시스템

  1. 여러 노드 -> 가장 빠르게 다운로드가능한 노드 사용가능
  2. 외부 서버를 활용함 -> 본인 서버에 부하가 적음
  3. 캐싱 -> 이미 사이트에 들어왔던 고객들이면 캐싱을 통해서 Bootstrap을 다시 리로드 안해도됨, 즉 빠르다!

그 중에서도, Bootstrap은 기존의 html의 불필요한 설정을 없애기도 한다.

ex) top, bottom margin 제거


부트스트랩을 완전히 사용하기 위해서는 이 link를 head 파일에 추가를 해주면 된다

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

위의 href속성값인 “https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css” 에 들어가보면

엄청난 문서가 있는데 Class formatter에서 이걸 붙여넣어서 확인해보면,

bootstrap도 사실 여러개의 CSS구조로 이루어져있는 것을 알 수 있다.

즉, predefined된 클래스를 적절히 활용하면 좋은 성능을 낼 수 있다.


4) Bootstrap 활용하기

https://getbootstrap.com/docs/4.2/getting-started/introduction/

  1. Content -> Typography

    ex) m, p // l, r, t, b, x, y // 0, 1, 2, 3, 4, 5, n1,n2,n3,n4,n5 -> mx-0같이 배합가능

    n1같은건 negative를 뜻하는데, 기존에 상속받은 부모 CSS style이 positive margine인데 특정 클래스를 마진없이 쓰고 싶다면 negative로 감소가능함.

    ex) Color : 파스텔화시켜서 무난히 좋은 색깔 가능함.

    14_

    text-primary // bg-primary // btn-primary // border border-primary같이 각 기능에 사용가능.

    이외에 navbar(네비게이션 바), alert(알람)과 같은 부트스트랩만의 Component에도 해당하는 칼라 클래스가 존재함.

    ex) rounded : border를 네모가 아니라 둥글게 만들어줌.

  2. layout (grid system)

    요즘 고객들에게 심리적으로 중요한게 비율을 맞추는것이다.

    특히나 인간들은 가로배치에 대해서 소름돋는 직관을 가지고 있기 때문에 픽셀단위로 짜다가 어긋나버리면 이상한 페이지가 되어버림.

    -> Bootstrap이 12 격자 페이지(약수가 매우 많기 때문에 분배하는 경우의 수가 많음)를 CSS로 지원하여 비율을 쉽게 맞출 수 있게 되었다.

5) 그리드 시스템 써보기

  • Bootstrap -> Components -> Card

    <div class="container">
    <div class="row"> 
        <div class="col vb">
            1
        </div>
        <div class="col vb">
            2
        </div>
        <div class="col vb">
            3
        </div>
    </div>
</div>

    container -> row 클래스 : “틀”

    col 클래스 : 일단 컬럼을 만든다. (12 / col 클래스의 개수)만큼 그리드를 할당받는다.

    16_

    반응형이므로 웹사이트를 줄이면 그리드에 맞게 줄여진다.

    17_

    만약 그리드를 13개를 만든다면 OutOfGrid가 됨. -> 하나의 태그는 독립적으로 행동함.

    15_

  • 여러개의 그리드를 할당받고싶다면 col-3, col-4같이 표현하면됨.

    -> 그렇기 때문에 아무것도없는 그리드를 할당해서 공백을 잘 만들수도 있음.

    <div class="container">
    <div class="row">
        <div class="col-3"></div>
        <div class="col-3 vb">
            1
        </div>
        <div class="col-3 vb">
            2
        </div>
        <div class="col-3 vb">
            3
        </div>
    </div>
</div>

  • 이걸 응용해서, form태그가 게맛살처럼 길게 늘여지는 현상을 방지할 수 있음.

    <div class="container">
    <div class="row">
        <form class="col-3"></form>
        <form class="col-6">
       		<!-- form 태그 생략 --->
        </form>
        <form class="col-3"></form>
    </div>
</div>

    18_

comments powered by Disqus