2020.04.04

HTML

  • HTML DOCTYPE선언

    <!DOCTYPE html>

  • 문자셋(character set)선언

    <meta charset="UTF-8">

  • 상위(조상)요소: 나를 포함하고 있는 모든 요소로 부모요소도 포함

  • 하위(후손)요소: 나를 기준으로 내가 감싸고 있는 모든 요소

  • 블록(block)타입의 요소

      display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 
해당 라인의 모든 너비를 차지함
  block요소 안에 block, inline 넣을 수 있음
  p, div, h, ul, ol, form 요소는 display 속성값이 블록인 대표적인 요소

  • 인라인(inline)타입의 요소

      display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않음
  요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지
  가로, 세로 사이즈 지정 불가능, 좌우 여백을 적용되지만 위아래 여백은 안됨
  inline요소 안에 block 요소 못넣음
  span, a, img 요소는 display 속성값이 인라인인 대표적인 요소

'프론트엔드 > HTML' 카테고리의 다른 글

HTML 클래스 속성 작명법  (0) 2022.04.14
구글 폰트, 구글 머티리얼 아이콘 적용방법  (0) 2022.04.14
파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법  (0) 2022.04.14
HTML 시멘틱태그(sementic tag)  (0) 2022.04.05
특수 문자 용어  (0) 2022.04.05

2022.04.04

* backtick, grave: `
* tilde(틸드): ~
* Exclamation mark(익스클러메이션, 느낌표): !
* At sign(앳, 골뱅이): @
* Sharp, number sign(샵, 넘버, 우물 정): # 
* Dollar sign(달러): $
* Percent sign(퍼센트): %
* Caret(캐럿): ^ (무엇인가의 이상을 가르킬때 주로 사용한다)
* ampersand(엠퍼센드): &
* Asterisk(에스터리스크, 별표): *
* Hyphen, dash(하이픈, 대시, 마이너스): -
* Underscore, low dash(언더스코어, 로대시, 밑줄): _
* Equals sign(이퀄, 동등): =
* Quotation mark(퀘테이션, 큰 따옴표): “
* Apostrophe(아포스트로피, 작은 따음표): ‘
* clone(콜론): :
* semicolin(세미콜론): ;
* comma(콤마, 쉼표): ,
* Period, dot(피리어드, 닷, 점, 마침표): .
* Question mark(퀘스천, 물음표): ?
* slash(슬래시): / (오른쪽 상단에서 왼쪽 하단으로 끝남)
* Vertical bar (버티컬바) : |
* Backslash(백슬래시, 역 슬래시): \ (왼쪽 상단에서 오른쪽 하단으로 끝남)
* Parenthesis(퍼렌서시스, 소괄호, 괄호): ()
* brace(브레이스, 중괄호): {}
* bracket(브래킷): []
* Angle bracket(앵글 브래킷, 꺽쇠괄호): <>

'프론트엔드 > HTML' 카테고리의 다른 글

HTML 클래스 속성 작명법  (0) 2022.04.14
구글 폰트, 구글 머티리얼 아이콘 적용방법  (0) 2022.04.14
파비콘(favicon), 오픈그래프(Open Graph Protocol) 적용방법  (0) 2022.04.14
HTML 시멘틱태그(sementic tag)  (0) 2022.04.05
HTML  (0) 2022.04.05

2022.04.04

프론트엔드

HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 
그것으로 사용자와 상호작용 할 수 있도록 하는 것
즉 웹페이지를 만들어 사용자가에게 보여주는 것

프론트엔드 개발기술

  • HTML(Hyper Text Markup Language 하이퍼텍스트 마크업 언어)
  • 우리가 보는 **웹페이지가 어떻게 구조화**되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어
  • CSS(Cascading Style Sheets)
  • 실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 **시각적인 표현(정적)**담당
  • JS(JavaScript)
  • 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 **동적 처리** 담당
웹의 동작방식
1. 브라우저(크롬, 엣지, 파이어폭스, 오페라, 스윙, 웨일, 사파리)를 연다
2. 통신 프로토콜(communication protocol)은 원거리 통신 장비 사이에서 메세지를 주고 받는 양식 및 규칙의 체계
    (대표적으로 http, https, ftp, ssl)
3. 최초 요청(request)이 서버로 들어감
4. 최초 응답(response) 기본적인 html이 응답됨
5. 추가요청이 들어오면 추가응답을 해줌 (css, js, jpg ...)
웹 표준
# 웹에서 사용되는 표준 기술이나 규칙
    기술이나 규칙은 누가 정하나? W3C에서 제정한다
# W3C 표준화 제정 단계
    1. 초안
    2. 후보권고안
    3. 제안권고안
    4. 권고안
# Corss Browsing(크로스 브라우징)이란?
    어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법
    지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 
    정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드
웹 이미지

  • 비트맵(Bitmap)

      픽셀들이 모여서 만들어짐 rater(.jpeg, .gif, .png) 
  정교하고 다양한 색상을 자연스럽게 표현 
  확대/축소시 계단현상, 품질 저하
    * jpg(jpeg)
        손실 압축. 저장을 할때마다 이미지 손실이 되기때문에 조심해야함
    표현색상 24비트 약 1600만 색상, 이미지 품질, 용량 쉽게 조절가능
    투명도가 지원되지 않기때문에 흰색 영역이 포함되고 싶지 않으면 png로
    * png
        비손실 압축
    8비트(256색상),24비트(약 1600만 색상)컬러
    Alpha channel 지원(투명도)
    * gif
        이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장(움짤, 애니메이션)
    8비트 색상(256) 다양한 색상표현을 할 수는 없음
    * wepb
        jpg, png, gif를 모두 대체할 수 있는 구글이 개발한 이미지 포맷 
    손실/비손실 압축 동시 지원
    gif 같은 애니메이션 지원
    alpha channel 지원(손실,비손실 모두)
    나온지 별로 안됐기 때문에 하위호환성을 꼭 확인해야함

  • 백터(Vector)

    점, 선, 면 등 수학적 정보의 형태로 이루어진 이미지 
정교한 이미지를 표현하기 어려우나 수학적인 정보로 이루어져있기 때문에 확대/축소에서 자유로움
용량 변화가 거의없음 로고, 아이콘 등 material design은 고품질 디지털 경험을 구축할 수 있도록 
google에서 만든 디자인 시스템(방식) 주로 확장자가 .svg 
색상이나 일부 영역의 추가/제거 혹은 간단한 형태 생성 정도로 가볍게 사용

+ Recent posts

티스토리툴바