I am an potato!.

4 minute read

프론트 엔드 개발

html, css, js를 사용해 데이터를 그래픽 사용자 인터페이스, 즉 GUI로 변환하고, 그것으로 사용자와 상호작용 할 수 있도록 하는 것

사용자에게 보이는 웹페이지를 만드는 기술

웹이미지

비트맵 vs 벡터

  • 비트맵 : 픽셀들이 모여 만들어진 정보의 집합 , 래스터(Raster)이미지 라고도 불린다.

    정교하고 다양한 색상을 다양하게 표현가능, 확태/축소시 계단현상 발생

  • 벡터 : 점, 선, 면의 위치(좌표), 색상 등 수학적 정보의 형태(Shape)로 이루어진 이미지

    확대/축소에서 자유로우며 용량변화가 없다.

    정교한 이미지를 표현하기 어렵다. 머터리얼 디자인에 많이 사용

비트맵

  • Jpg

    손실 압축= > 용량이 작은 장점

    단, 반복적으로 저장하는 행위는 조심하는 것이 좋다.

  • PNG

    비손실 압축 => 용량이 단점

    Alpha Channel을 지원해 투명한 영역을 처리 가능하다. W3C권장 포맷

  • GIF

    이미지 파일 내에 이미지 및 문자열 같은 정보들을 저장한다.

    비손실 압축 , 여러장의 이미지를 한개의 파일에 담을수 있어 움짤, 애니매이션 등에 쓰인다.

  • WEBP

    JPG, PNG, GIF를 모두 대체할 수 있는 구글이 개발한 이미지 포맷’

    완변 손실/비손실 압축을 동시에 지원한다.

    GIF과 같은 애니메이션을 지원하며, Alpha Channel을 지원한다.

    단, IE에선 지원하지 않는다.’

벡터

  • SVG

    마크업 언어 기반의 벡터 그래픽을 표현하는 포맷

    해상도의 영향에서 자유로우며, CSS와 JS로 제어가 가능하다.

    또한 파일 및 코드를 삽입 가능하다.

특수문자 용어

  • ` : 백틱, 그레이브

  • ~ : 틸드, 물결 표시
  • ! : 엑스클러메이션, 느낌표
  • @ : 앳, 골뱅이
  • # : 샵, 넘버사인, 우물 정
  • % : 퍼센트
  • ^ : 캐럿
  • & : 엠퍼센드
  • *: 에스터리크스, 별표
  • - : 하이픈, 대시, 마이너스
  • _ : 언더스코어, 로대시, 밑줄
  • = : 이퀄, 동등
  • ” “ : 쿼테이션, 큰 따옴표
  • ’’ : 아포스트로피, 작은 따옴표
  • : : 콜론

  • ; : 세미콜론

  • , : 콤마, 쉼표
  • . : 피리어드, 닷, 점, 마침표
  • ? : 퀘스천, 물음표
  • / : 슬래시
  • : 버틸컬 바 == \/\/

  • \ : 백슬래시, 역슬래시

  • (): 퍼렌서시스, 소괄호, 괄호
  • {} : 브레이스, 중괄호
  • [] : 브래킷, 대괄호
  • <> : 앵글 브래킷, 꺽쇠괄호

단축키

html 파일에서 !을 눌러 첫번째 껏을 선택하면 html 의 기본코드가 나타난다

beautify를 깔아서 Ctrl+alt+L키를 누르면 정렬되도록 바인딩 하였다.

  • 사이드바 열고/닫기 : Ctrl + B
  • 빠른 열기(파일이나 기로 탐색) : Ctrl +P
  • 찾기(검색) : Ctrl + F
  • 이전 편집기열기 : Ctrl + PageUp
브라우저 스타일 초기화

reset-css 사용 : https://www.jsdelivr.com/package/npm/reset-css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css"> 의 html 코드를 이용한다.

-> 브라우저에서 기본적으로 제공하는 padding, margin등이 없어진것을 확인할 수 있다.

처음에 초기화 해두고 프로젝트를 시작하면 편하다!! (권장)

  • codepen에서는 어떻게 기본스타일을 초기화?

    pen Settings에서 CSS Base를 Reset으로 설정해준다.

  • codepen에서 emmet사용하는 법

    tab키 쓰면됨

    ex) div>ul>li*4{$} 같은것도 사용가능

    ​

인라인(inline)요소

span

대표적인 inline요소이다.

기본적으로 요소가 수평적으로 쌓이며, 포함한 콘텐츠의 크기만큼 자동으로 줄어든다.

요소의 가로, 세로 너비를 정해도 반응이 없으며

외부, 내부여백을 설정하면 좌우여백은 설정이되지만 상하여백은 설정이 되지않는다.!!

또한 자식요소로 블록요소를 집어넣을수 없다. (인라인 요소 안에 블록요소 사용 불가능!)

  • img
  • a
  • <br> (break)
  • label

블록(block) 요소

div

요소가 수직으로 쌓인다.

가로너비는 부모요소의 크기만큼 자동으로 늘어나려고 한다. (최대한 늘어나려고 한다)

반면에 세로는 포함한 콘텐츠의 크기만큼 자동으로 줄어든다.

요소의 가로, 세로, 외부여백, 내부여백을 설정할수 있다.

  • p
  • h1,h2,h3 … heading
  • ul, li

inline-block

글자요소이기는 한데 상자요소의 특성을 사용할수 있다.

=> 수평으로 쌓리며, 가로, 세로, 여백을 설정 가능

  • input : 사용자가 데이터를 입력하는 요소

    ` `

    • type : 입력받을 데이터의 타입
    • value : 미리 입력된 값(데이터)
    • placeholder : 사용자가 입력할 값의 힌트
    • disabled 입력 요소 비활성화

defer

script요소의 defer속성 : html구조가 준비된 후에 js를 해석하겠다는 의미

이 속성을 이용하면 html의 head부분에 js를 연결해도 오류

참고

프로그래머의 가장 좋은 스승

그동안 프로그래밍 언어를 잘 활용할 수 있는 방법들을 살펴봤습니다. 하지만 이게 바로 내 코드에 적용시키는게 어려울 수 있는데요. 아무래도 처음 배우는 거다 보니, 낯설어서 그렇겠죠.

개발자에게 있어서 가장 좋은 스승은 잘 짜여진 좋은 코드입니다.

훌륭한 개발자들의 코드를 잘 살펴보고, 그 코드는 어떻게 구조가 짜여져 있는지, 스타일 가이드는 어떻게 적용하고 있는지, 변수 이름이나 주석은 어떻게 쓰고 있는지, 어떤 라이브러리나 프레임워크를 사용하고 있는지, 이런 것들을 잘 살펴볼 필요가 있습니다.

이 코드를 계속 관찰하고 마주칠 때마다 유심히 살펴보아야 좋은 코드를 눈에 익히고 내 것으로 만들어 실력을 늘릴 수 있습니다.

좋은 코드를 찾을 수 있는 곳 1: 라이브러리

좋은 코드는 어디서 찾을 수 있을까요? 프로그래밍 특유의 공유 문화 때문에, 금세 좋은 코드들을 많이 찾을 수 있는데요. 먼저, 라이브러리 내부의 코드들이 있습니다.

여러 사람이 공유해서 함께 쓰려고 만든 라이브러리라면, 그 코드의 퀄리티가 높아야겠죠? 그만큼 훌륭한 사람들이 신경도 많이 써서 만들었을 겁니다.

프로그래밍을 하다가 라이브러리를 쓰게 됐다면, 그 라이브러리의 내부를 한번 살펴 보세요.

예를 들어, 데이터 사이언스에 사용하는 파이썬 라이브러리로 pandas, seaborn 같은 걸 아까 소개해 드렸죠? 이건 파이썬 라이브러리이니까, 그 내부도 파이썬 언어로 되어 있습니다. 모든 걸 다 이해하긴 어렵겠지만, ‘아! 이름은 이렇게 지었구나’, ‘코멘트는 이렇게 달았구나’ 하면서 유심히 살펴보시면 좋습니다.

코드를 공부할 만한 라이브러리를 몇 개 소개시켜드리겠습니다. 라이브러리 공식 홈페이지에는 라이브러리 사용법과 예시가 잘 나와있습니다. Seaborn 라이브러리 - https://seaborn.pydata.org/tutorial.html Pandas 라이브러리 - https://pandas.pydata.org/docs/user_guide/10min.html

좋은 코드를 찾을 수 있는 곳 2: 개발 문서

프로그래밍에서는 개발 문서가 매우 많이 등장합니다. 라이브러리나 프레임워크 같은 걸 만들 때도, “이렇게 쓰면 됩니다!” 라며 알려주는 문서들이 있고, 언어 자체에도 공식 설명 문서들이 있습니다.

공식 문서에서는 매우 신중하게 예시를 작성해서 공유합니다. 그 예시가 곧 가장 엄선된 정석 코드여야 하기 때문이죠. 이런 문서들을 자주 읽으면서, 사람들이 어떤 방식으로 코드를 공유하는지 잘 살펴 보세요.

몇 가지 언어의 공식 사이트 링크를 공유드립니다. Python - https://docs.python.org/ko/3/ Javascript - https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide Ruby- https://www.ruby-lang.org/ko/documentation/ Java- https://docs.oracle.com/en/java/

좋은 코드를 찾을 수 있는 곳 3: 커뮤니티

특정 상황에 대한 좋은 예시가 궁금하다면, 인터넷에 검색해 보세요. 개발자들이 이미 여러 방식의 장단점을 고민하고 논의해둔 기록들이 있을 겁니다.

그리고 프로그래밍에는 공유의 문화가 잘 되어 있기 때문에, 좋은 사례와 이유 같은 걸 적어둔 사이트, 블로그 등도 많습니다.

구글 검색을 할 때 Best Practice라는 키워드로 검색을 해보면, 어떤 게 가장 좋은 코드인지 사람들의 논의 혹은 예시 코드들을 발견할 수 있을 겁니다.

관련 질문

Tags: ,

Updated:

You may also enjoy