CSS display

layout을 설정할 때 자주 사용되는 중요한 속성!

기본적으로 HTML 요소는 block 또는 inline 속성을 가짐

block 속성?? inline 속성??

아래서 자세히 설명하겠지만, 이해를 돕기 위해 먼저 간단히 설명하면

block-level Element

내용이 있는 그 자체로 한 줄을 완전히 차지함
ex) <div>, <p>, <form>

inline-level Element

내용이 있는 만큼만 영역을 차지
ex) <span>, <a>, <button>, <input>


위에서 설명한 block-level Element는 display: block,

inline-level Element는 display: inline 속성을 기본으로 가지고 있다.

웹 사이트는 필요한 태그를 용도에 맞게 사용해야 하는데, 모든 태그는 위에서 설명한 것 처럼 display 속성을 가지고 있어, 스타일링을 하면서 변경을 해줘야 하는 순간이 있다.

display 속성의 종류

display: block

흔히 사용하는 div, p 태그를 떠올리면 된다.

특징으로는

  1. 화면 전체 가로폭을 차지
  2. 항상 새로운 라인에서 시작
  3. width, height, padding, margin 설정 가능

이 때 일반적인 경우라면 margin-left는 적용이 되지만,

margin-right는 적용이 되지 않을 것이다.

이유를 생각해보면 단순하다.

block 속성은 한줄 전체를 차지하기 때문에 margin-right가 적용되지 않는 것이다.

주의할 점은 width, height 값을 따로 주지 않았을 때

자식의 width 값은 부모의 width 값을 상속받고,

부모의 height 값은 자식의 height 값을 상속받는다.

말로는 헷갈릴 수 있지만, 머릿속으로 그려보면서 이해하면 당연한 내용이란걸 알 수 있다.

display: inline

흔히 사용하는 a, span 태그를 떠올리면 된다.

특징으로는

  1. content의 너비만큼 가로폭 차지
  2. 줄 바꿈 없이 다른 요소와 함께 배치 가능
  3. width, height 설정 불가능
  4. 상하 여백은 line-heigh, padding 속성으로 지정

별로 헷갈릴 내용이 없고, 컨텐츠의 너비만큼 길이를 가진다는게 전부이다.

display: inline-block

여기부터는 기본적으로 태그가 가진 속성이 아니다.

개인적으로 프로젝트를 하면 이 속성을 가장 많이 쓰는 것 같다.

특징으로는

  1. block과 inline의 특징을 모두 가짐
  2. inline 과같이 한 줄에 표현 가능
  3. width, height, padding, margin 설정 가능
  4. line-height 사용 가능

주의사항은 이 속성을 사용하면 좌우에 4px의 마진이 생기는데,

CSS-reset을 통해 미리 마진을 지워주고 작업하는게 좋다.

가장 많이 쓰는 부분이 컨텐츠를 div로 감쌌을 때, 너비 전체를 차지하게는 안하고 싶다면 inline-block 속성을 주면 된다.

물론 width, height, padding, margin을 잡아줘야 모양이 제대로 나온다.

display: none

그냥 화면에서 아예 안보임

visibility: hidden과의 차이는 display: none은 아예 있어야할 공간 조차 사라짐.

끝으로

CSS는 많이 코드를 쳐보면 쳐볼수록 이해가 더 잘되고, 빨리 습득 할 수 있으니, 직접 쳐보고 차이를 느껴보는게 가장 좋은 방법인 것 같다.

4/159


'개발 > CSS' 카테고리의 다른 글

CSS 변수(variables)  (0) 2017.10.13
CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24

HTML5에서의 시맨틱 웹과 시맨틱 태그(Semantic Web, Semantic tag)

시맨틱 웹이란?

구글에 검색했을때 위키백과에 나오는 내용을 그대로 적어보면 아래와 같다.

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,

현재의 인터넷과 같은 분산환경에서 리소스에 대한 정보와 자원 사이의 관계의미 정보를 기계가 처리할 수 있는 온톨로지 형태로 표현하고,

이를 컴퓨터가 처리하도록 하는 프레임워크이자 기술이다.

웹의 창시자인 팀 버너스리가 1998년 제안했고 현재 W3C에 의해 표준화 작업이 진행 중이다.

쉽게 생각하면 첫 줄만 읽으면 된다.

의미론적인 웹은 말 그대로 컴퓨터가 웹사이트를 단순한 코드의 구성이 아닌 의미를 가진 사이트라는걸 알 수 있게 만드는 것이다.

시맨틱 웹의 이상향은, 인터넷에 방대한 양의 데이터를 컴퓨터가 자동으로 해석해 사용자가 원하는 결과값을 정확히 주는 것이다.

여기까지 읽었을 땐 단순히 검색엔진 성능 향상에만 유용하게 쓰일 것 같지만, 찾아보니 암 치료 증진에도 기여할 수 있고, 석유가스 산업에도 응용될 수 있으며, 이외에도 많은 기업에서 사용할 수도 있다고 한다.(어떻게 이런 결과가 도출된건지는 잘모르겠다ㅋㅋ)

크게 생각 했을때 데이터들을 관리하고 통합하는 것이기 때문에 위와 같은 기대를 하는 것 같다.

HTML5에서의 시맨틱 웹

HTML5 이전까지는 시맨틱 태그라는 것이 없었다.

그 때의 대부분의 태그는 <div>로 감싸져 있었을텐데,

개발자의 입장에서는 코드로 사이트 전체 구조를 한눈에 파악하기 힘들었을 것이고, 검색 엔진은 사이트의 의미를 정확히 파악하지 못해 검색 결과값의 정확도가 떨어졌을 것이다.

그래서 나온 대안이 시맨틱 웹이고, 그에 따라서 HTML5에서 시맨틱 태그(Semantic tag)라는 것이 나온 것이다.

예를 들어 설명하면

기존에는 <div class="header">헤더입니다</div> 이렇게 썼던걸,

<header>헤더입니다</header> 이런식으로 쓰는 것이다.

<div>태그, <header>태그 둘 다 구역을 나눌 때 쓰는 껍데기 태그인데 둘의 차이는 의미를 가지고 있는지의 차이이다.

태그 이름 그대로 헤더부분을 <header>태그로 감싸는 것이다.

위와같이 div를 대체할 수 있는 태그로 header, nav, article, section, aside, footer가 나왔고, 각각 의미에 맞게 사용하면 된다.

위 태그들은 HTML5 이전에 div태그에서 클래스 명으로 많이 쓰던 것들을 토대로 만들었다고 한다.

결론

안써도 겉으로 보이기엔 똑같지만 검색 엔진 최적화(SEO)에서 중요한 역할을 하기 때문에 검색결과에서 상단을 차지하고 싶다면, 쓰는것을 습관화 하는 것이 좋다.

끝!

2/159

React??

앞으로 쓰게될 React.js에 대해 아주 늦게 첫 발을 디뎠다

새로운 스택을 익히려 하는데 아무리 글을봐도 이해가 안되는 나의 머리를 탓하며 아주 쉽게 정리해보려 함

혹시라도 이 글을 보시게 된다면, 틀린부분이 있을 수 있으니 한번쯤 의심하면서 보시고

틀린부분은 바로바로 지적해주시면 감사하겠습니다

정리하는 글이기에 반말로 적겠습니다.

리액트란?

페이스북에서 만든 사용자 인터페이스 라이브러리

절대적으로 View단을 구성하기 위한 라이브러리이다.

리액트를 만든 이유?

기존 MVC패턴은 확장이 어렵고 거대한 시스템에 어울리지 않는다는 생각을 하게된 페이스북은 새로운 대안으로 Flux라는 데이터 흐름이 단방향인 시스템 아키텍쳐를 만들었다.

이 Flux는 “새로운 패턴이 아니라 MVC의 새로운 이름일 뿐이다” 라는 논란도 일었지만,

둘의 가장 큰 차이는 데이터 흐름이 단방향이라 더욱 직관적이고, 관리하기가 쉽다는 점이다.

리액트의 특징

1.JSX

템플릿을 사용하지 않고 고유의 XML확장 문법인 JSX를 사용한다.

쉽게 이해해 자바스크립트에서 HTML코드를 쓸 수 있게하는 문법이다.

이렇게 작성한 코드는 Babel을 통해 별도의 컴파일 없이 사용 가능하다.

2.Virtual DOM

기존에 DOM을 직접 핸들링하는 제이쿼리는 페이지를 새로고침하면 페이지의 모든 요소를 새로 렌더링하는 반면에,

리액트는 Virtual DOM(가상돔)을 사용해 변화가 있는 부분을 비교해 최소한의 요소만 다시 렌더링하게되어,

보다 빠른 속도로 화면을 보여줄 수 있다.

3.One Way Data Flow

데이터는 위에서 아래로만 흐르기 때문에 구조가 커졌을 때 양방향 바인딩에 비해 데이터의 흐름을 파악하기가 쉽다.

4.Server Side Rendering

클라이언트에서만 렌더링을 하면 HTML, JavaScript, Data, View 순으로 진행하는 시간 소요로 초기구동 속도가 느리고,

자바스크립트를 실행못하는 검색 엔진 봇들은 처음 렌더링 된 빈 HTML만 수집하기 때문에 콘텐츠가 없다고 판단되어 SEO에 취약하므로, 서버 렌더링을 지원한다.


'개발 > React' 카테고리의 다른 글

4. Redux-saga의 흐름  (0) 2018.11.14
3. React 폴더구조 ( redux, redux-saga )  (0) 2018.11.13
2. React 세팅 (react-router, redux, redux-saga)  (0) 2018.11.13
1. React 설치  (0) 2018.11.13
0. React.js  (0) 2017.08.21

CSS reset

CSS reset이란?

브라우저마다 각 태그에 대한 속성들이 약간씩 다르기 마련인데, 이를 초기화 시키고 작업해 모든 브라우저에서 동일하게 작동하도록 만드는 방법

직접 코드를 작성할 수도 있지만, 다른 사람들이 만들어 놓은 보일러 플레이트 중에 유명한 것을 가져옴

Eric Meyer’s “Reset CSS” 2.0

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

'개발 > CSS' 카테고리의 다른 글

CSS 포지션(position)  (0) 2017.10.12
CSS 디스플레이(display)  (0) 2017.10.12
CSS 박스모델(box-model)  (0) 2017.10.12
CSS reset  (0) 2017.06.09
CSS flex-box 재미있게 익히기  (0) 2017.04.24
CSS / float를 clear하는 방법 네가지(clearfix)  (5) 2017.04.13

Ruby on Rails에 템플릿 넣기

멋사 하프톤을 하면서 전반적으로 템플릿 삽입에 어려움을 느껴 포스팅 해야겠다 생각함
코드 github 주소
파일 minify하기

가독성이 떨어질 수 있으니 각오하고 볼것!

목표

레일즈는 MVC패턴의 고유한 프로젝트 구조를 가지고 있어 템플릿을 넣을 때 까다로운 부분이 많아 가이드라인을 제시하려 함.

레일즈 빈 프로젝트에 부트스트랩 기반 SPA 템플릿인 GraySclae을 넣어보는 것을 해볼 것!

준비

큰 상관은 없겠지만, Ruby는 2.4.0, Rails는 5.0.3 버전, 루비마인으로 진행

보통 템플릿은 라이브러리 사용시 cdn 대신 vendor 폴더에 다운받아서 경로를 참조하는 식으로 하기 때문에 그대로 적용할 예정

과정

  1. 레일즈 프로젝트 생성 및 세팅


    routes에 index.html을 root로 설정


    protect 해제


  2. 컨트롤러, 뷰 생성
    rails g controller home index로 home컨트롤러에 index페이지를 만들었고, 여기에 템플릿을 적용할 예정

  3. 템플릿의 head부분 옮기기
    템플릿의 head부분을 그대로 복사해 layout > application.html에 붙인다.
    레일즈는 에셋 파이프라인을 이용하기 때문에 우선은 각종 라이브러리(여기서는 bootstrap, font-awesome) 링크를 지우고, stylesheet,javascript link_tagdata-turbolinks-track을 지우고 자바스크립트를 불러오는 <%= javascript_include_tag 'application' %>는 body태그의 끝으로 보내준다. 끝으로 필요없는 코드를 지우고 정리하면 다음과 같다.

    템플릿의 head


    rails application.html

  4. 템플릿의 body부분 옮기기
    템플릿의 body부분을 그대로 복사해 index.html에 붙이는데 이때 보면 가장 하단에 script부분이 있는데 이는 모두 지워 application.html<%= yield %>의 밑으로 보내준다. 여기서도 마찬가지로 각종 라이브러리 스크립트 태그는 지워준다.
    body태그를 보면 id가 부여되어있는데 이는 페이지 스크롤링에 사용되는 것이다. 지금 만드는 페이지는 싱글페이지이기 때문에 application.html의 body에 id를 적어주면 정상 작동한다.

    4번 이후의 application.html

  5. CSS, JavaScript, img 옮기기
    CSS는 less,sass로도 주어지는데 본인이 쓸줄 안다면 가져와도 되지만, 가장 일반적으로 퓨어 CSS를 쓰기 때문에 grayscale.cssassets/stylesheets로 가져온다. 이때 이 파일을 수정해야 하기 때문에 min파일과 같이 가져오게 된다면, 수정 후에 둘의 내용이 달라 제대로 효과가 적용되지 않을 수 있다.(중요함!!)
    마찬가지로 grayscale.jsassets/javascripts에, 이미지파일 3개도 assets/images에 넣어준다.

  6. vendor 옮기기
    vendor란? 누군가 만들어 놓은, 예를들면 부트스트랩, 제이쿼리같은 라이브러리파일을 담는곳이고, 위에서 CSS,JS,img를 넣은 assets폴더는 커스텀파일을 담는곳이다.
    vendor폴더에 우리가 필요한(head에서 삭제한) 파일들을 가져온다. 이는 우리가 수정할 필요가 없기 때문에 min파일을 가져오든 둘다가져오든 상관없다.(min이란 minify의 약자로 파일의 공백을 제거해 압축하는것)
    vendor > assets > javascriptsbootstrap.min.js, jquery.min.js를 넣고, vendor > assets > stylesheetsbootstrap.min.css를 넣는다. font-awesome은 폰트까지 가져와야해서 그냥 cdn을 썼음(ㅎ) / 4번 이후의 사진 참조

  7. asset pipeline 설정
    커스텀파일을 넣은 assets폴더는 application.jsapplication.cssrequire_tree,require_self라고 입력되어 있는 코드를 통해 알아서 에셋폴더의 파일들을 불러올 수 있지만, vendor폴더는 따로 적어줘야 한다.
    vendor에 들어간 라이브러리 파일명을 각각 js와 css에 맞게 적어준다.
    이때 제이쿼리가 먼저 호출되어야 부트스트랩이 작동하기 때문에 순서에 유의해야 한다.

    assets > application.js


    assets > application.css


  8. img url 설정
    grayscale.css에서 cmd + f로 url이라는 단어를 검색해보면 백그라운드 이미지 url이 절대경로로 되어있다. 이때 파일명만 남겨두고 나머지를 지워주면, 레일즈는 알아서 assets/images에서 파일명을 검색해 불러오게 된다.


    끝! 포스팅이 지저분하긴 하지만 끝까지 참고 만든다면 거뜬하게 완료 / 안된다면 댓글 달아주세요


'개발 > RoR' 카테고리의 다른 글

[RoR]레일즈 템플릿 넣는법  (3) 2017.05.27
루비온레일즈(Ruby on Rails) 루비 기초 문법  (0) 2017.03.29
  1. Hong 2018.05.06 16:57

    좋은정보 감사합니다.

  2. abcdd 2018.05.14 11:43

    같은 문제에 닥쳤는데 덕분에 어느정도 해결이 되었습니다.

    똑같이 진행했는데 smooth scrolling 이 적용이 안됩니다. 아마 js 가 적절하게 적용이 안된 것 같은데

    어디가 문제일까요..

마크업 개발 레벨 테스트

서핑중에 흥미로운 테스트가 있어 해보고, 가져왔음
나름 마크업을 할줄 안다고 생각했는데, 처참히 발렸다..

프론트를 주력으로 하고있다면 아래의 링크로 가서 한번쯤 테스트 해보면 좋을 것 같음

마크업 테스트 출처
답안 참조

위 : 작성한 답
아래 : 검색 결과 (없을 시 답이 맞은것)

HTML

  1. Doctype을 사용하지 않을 때는 무슨 일이 발생할까요?

    HTML5이전 버전으로 렌더링되어 레이아웃이 깨짐

    웹이 quirks mode로 작동해 구형 브라우저에서 동작하던 것과 같이 동작함

  2. 웹표준에 맞게 작업할 때 b, i 태그 대신 적합한 태그는 각각 무엇일까요?

    <strong>, ?

    <strong>, <em>

    <b>,<i>는 표준에 맞지 않는것을 알고 있어서 사용을 안좋아했는데 <em>을 처음 알고 표준에 맞다는 사실도 알았음

  3. block 요소와 inline 요소에 해당하는 태그들을 각각 5개씩 적어보세요.

    div, p, a, h1, nav… / span, strong, li…

    블록 : div, p, h1~h6, ul, li…
    인라인 : a, img, span, select, td…

    몇개 잘못알고있었다.

  4. blockquote 태그는 어떤 용도로 사용해야 할까요?

    인용구 사용시

  5. 인라인 스타일(style=“property:value”)을 가급적 사용하지 말아야 할 이유는 무엇일까요?

    유지보수가 힘들어짐

    구조와 표현의 분리를 위함

  6. myPhoto.jpg 파일을 img 태그로 작성해보세요.

    <img src="myPhoto.jpg" alt="myPhoto">

  7. HTML에서 id 속성을 사용하는 이유와 주의 할 점은 무엇일까요?

    태그에 고유 id를 붙여 스타일링할때, class보다 우선순위로 적용되는 부분을 주의해야함

    페이지 당 한번만 써야함 / 알고있었지만 기억이 안났음

  8. ‘TopArea’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

    script단과 맞춰주려면 kebab-case로 작성해야해야함

    Top이라는 방향성을 가지고 있어서, 접근성 차원에서도 방향은 의미가 없음

  9. ‘blue-box’라는 클래스명이 좋지 않은 이름이라면 그 이유는 무엇일까요?

    음..클래스 이름이 의미하는것이 분명하지 않은 것 같다.

    색상이 CSS에서 변경될 수 있음

  10. HTML5에 새롭게 추가된 aside 태그는 어떤 용도로 사용해야 할까요?

    이름그대로 사이드에있는 nav라고 이해하고 있음

    컨텐츠의 주요 내용이 아니고 부수적인 내용일 때

  11. input 태그와 항상 함께 사용해야 할 태그는 무엇일까요?

    <button>

    <label>

    꼭 필요한건지 몰랐는데 처음 알았다

  12. 모바일 웹 또는 반응형웹디자인 프로젝트에서 각 기기에 적합한 화면을 보여주기 위해 필요한 meta 태그는 무엇일까요?

    device ~~ 속성을 썼는데 정확히는 모르겠다

    <meta name="viewport" content="width=device-width">

    보니까 알것같다

CSS

  1. 화면 상에는 보이지 않으나, 스크린 리더에서 읽혀야 하는 요소에 주어야 할 스타일링을 작성해보세요.

    img alt속성, html lang속성, 태그의 name속성 밖에 모르겠다

    IR기법이라 부르며 display: nonez-index는 잘못된 방법임. text-indentz-index를 활용

    처음봄. 자세히 알아봐야 할 필요가 있음

  2. float 속성을 가진 자식을 품은 부모요소는 높이 값이 0이 되는 때가 있습니다. 이 현상을 해소하는법(clearing)을 알고 있나요?

    부모요소:after에 content: ''; display: table; clear: both 적용

  3. border-box와 content-box의 차이점은 무엇일까요?

    width, heigth 기준(box-sizing)을 border와 content로 지정

  4. position: relative는 어떤 경우에 사용 하나요?

    부모요소를 기준으로 요소를 배치하고 싶을 때

    좌표를 재정의할 때

  5. CSS Reset은 무엇이며 왜 사용할까요?

    리셋하지 않으면 기본적으로 태그가 가진 속성이 스타일링에 포함되어 레이아웃이 뭉개질 수 있음

    크로스 브라우징(브라우저마다 약간씩 차이가 있으므로)

  6. Sass, less, Stylus와 같은 CSS 프리프로세서를 사용해본적이 있나요?

    Sass 공부중

  7. id, class, inline style, !important를 우선순위 순으로 나열해보세요.

    !important, inline, id, class

  8. CSS에서 상속이 되는 속성을 2개만 꼽아보세요.

    width, height? 잘모르겠다

    color, size가 상속

  9. Sprite image 기법을 사용하는 이유는 무엇일까요?

    처음 들어봤다

    로딩 속도 감소, 서버로의 요청 횟수 최소화
    이미지를 한개의 파일로 합쳐 background-image로 적용 후에 해당 이미지 위치에 레이아웃을 배치하는 방법, 자동화 툴도 존재함

    이것역시 공부해야 함

  10. Sprite image 기법을 사용하는데 필요한 CSS 속성들을 꼽아보세요.

    역시 모른다

    background-position

  11. 점진적 향상(Progressive Enhancement)의 뜻을 설명 할 수 있나요?

    이것도 모른다..3연속 blank..

    내용이 길어 다른 링크로 첨부

  12. 웹폰트를 적용하기 위해서는 어떤 확장자의 폰트 파일들이 필요할까요?

    ttc, ttf

    ttf,eot,svg 왼쪽 두개만 있어도 대부분 지원된다고 한다

  13. 개발사 접두어(vendor prefix)를 꼭 사용해야 할 CSS 속성(property)를 2개만 꼽아보세요.

    잘 모르겠다

    앞에 webkit(크롬,사파리), moz(파폭), o(오페라), ms(IE) 등이 붙는것

  14. 반응형웹디자인의 3가지 요소를 꼽아보세요.

    grid, …

    Media Query, Flexible Image, Fluid Grid

  15. 모바일기기를 대응할 때 기준으로 삼는 해상도 사이즈는 몇이며 그 이유는 무엇인가요?

    560px..? 잘 모르겠다

    320px!

  16. :first-child와 :last-child가 지원하는 IE의 버전명을 적어보세요.

    모르겠다

    7, 9(first-child로 예외처리를 많이 한다고 함)

  17. 포토샵(또는 다른 그래픽툴)에서 이미지를 자를 때 어떤 기능을 사용하나요? (메뉴명, 단축키 등)

    ?

    cmd + t

  18. jpg, gif, png의 차이점을 설명해보세요.

    png가 화질이 짱이다(주륵)

    jpg: 손실 압축, 용량을 줄임, 가장 널리 쓰임
    png: 비손실 압축, 투명 가능
    gif: 비손실 압축, 움직이는 이미지 제작 가능

  19. 가상컨텐츠(:before, :after)는 어떤 용도로 사용할까요?

    clearfix시 사용하기도 하고, 버튼으로 토글시에 사용함

  20. 블럭요소 안의 어떤 자식 요소를 정중앙에 놓는 방법을 알고 있습니까?

    부모요소에 position: absolute, 자식요소에 position: relative; top: 50%; left: 50%; 맞나..

    그냥 flexbox 쓰는게 짱인것 같다.

후기

모르는걸 많이 배운 것 같다. CSS는 진짜 알다가도 모르겠다

Graceful Degration 과 Progressive Enhancement

포스팅 참고 출처

Graceful Degration

우아한 낮춤? 적절한 퇴보 등으로 해석되며, 최신 기술 기반 또는 기기에서 동작하는 기능을 만들고 나서 오래된 기술 기반 혹은 기기에서도 유사한 성능으로 동작하도록 조치하는것

예를들어 자바스크립트가 동작하지 않는 브라우저에서 접속 했을 때 “자바스크립트를 지원하는 브라우저를 사용하거나, 자바스크립트를 활성화해주세요”같은 메세지를 띄우는 것이다.

이는 자바스크립트를 모르는 사람에게 어리둥절을 선사하는 방법이다
이와 반대하는 개념이 Progressive Enhancement!

Progressive Enhancement

점진적 향상이라 부르며, 말 그대로 가장 기초적인 기술을 기반으로 점차 향상시키는 방법이다.

웹을 예시로 들면 HTML로 마크업 후, CSS효과를 주고, JS를 적용시키는 단계로 구성하는 것이다.

정리

요즘 시대에서 Progressive Enhancement로 웹을 구성하기는 Graceful Degration과 비교해서는 시간과 노력을 훨씬 더 필요로 하는 매우 비효율적인 일이지만,

웹을 구성함에 있어 잊으면 안되는 원칙 “Web for All”을 생각한다면 충분히 가치가 있는 방법이라고 생각한다.

Nuxt Toy Project

문서를 한번씩 훑었다고 생각되어 혼자서 웹페이지를 만들어보려 함(많이 부족한건 팩트 ㅜㅜ)

디자인을 따로 하긴 힘들어 https://startbootstrap.com/template-overviews/grayscale/ 템플릿의 레이아웃을 그대로 하드코딩해서 만들어 볼 예정

틀린 내용이 있을 수 있으니 피드백 부탁드립니다

참고 사이트

Nuxt 공식 한글 문서

Vue 공식 한글 문서

github 주소

진행과정

찾아본 내용과 찾아봐야 할 내용을 정리

2017.05.04

시작 / Nuxt starter로 프로젝트 생성 및 nav바 생성

2017.05.05

프로젝트 구조에 대해 이해할 필요를 느껴 샘플 사이트 코드 분석하려 함
백엔드는 알고있는게 루비온레일즈 밖에 없기 때문에 루비온레일즈의 프로젝트 구조와 비교해 예제 사이트 와 공식문서를 참고해 알게된 내용을 정리

  1. layouts폴더의 dafult.vue
    application.html 파일 처럼 페이지 전역에서 보여줄 기본 레이아웃을 설정하는데 사용 / 예를들어 전역에서 상단에 띄워놓을 navbar를 dafault.vue에다가 삽입
    default.vue의 <nuxt/> 태그가 <%= yield %> 같은 기능을 하는 태그 같음

  2. nuxt-link
    다른 vue파일로 이동할 때 a태그와 같은 용도로 사용되는것 같음 >> 알아보니 렌더링 되면 a태그가 된다 함

  3. middleware
    레이아웃이 렌더링되기 전에 사용할 함수를 정의할 수 있음(js파일), 사용예를 보니 vue파일에 methodscomputed에 필요한 함수를 middleware에 정의하고 import하는 식으로 사용

2017.05.06

결국 자료를 읽어보고 프로젝트 엎고 다시 시작함.
nav바 및 intro 구현

  1. assets 디렉토리
    컴파일되지 않은 LESS, SASS, JavaScript 등을 포함하는 디렉토리, 레일즈에서의 assets과 같은 역할인 듯 함. 예를들어 이미지 파일을 assets에 넣으면 nuxt는 file-loaderurl-loader를 통해 자동으로 url주소를 변경해 파일을 불러옴. webpack을 거치지 않고 static파일을 사용할 수도 있는데 둘의 정확한 차이를 모르겠음. 어떨때 assets을쓰고 어떨때 static을 쓰는지..궁금하다

  2. cover
    단순한 CSS문제 / 뷰포트에 이미지 cover 방법 찾기

2017.05.07

  1. Component화의 문제
    큰일났다. 컴포넌트를 그냥 편한대로 semantic tag에 따라서 쪼갰는데 막상 만들고나서 생각해보니까 컴포넌트는 기능별로 나눠야 한다는 부분에서 현자타임이 왔다..
    일단 쪼개놓고 완성은 해놓고 나중에 실력이 늘었을 때 보면서 반성하는 용으로 완성은 해놓고 생각해야겠다.

  2. fontawesome icon
    살짝 픽셀이 밀려서 원하는 모양이 안나오는데 해결 방법을 모색해봐야 할 듯

  3. 전역 CSS
    nuxt 가이드대로 CSS를 설정했는데 적용이 안돼서 결국 scoped로 적용하고 있는데 방법을 찾아야 함.

  4. 레이아웃 완성 / 자바스크립트 효과 넣으면 끝!

2017.05.08

  1. store
    React의 Flux처럼 Vue에서 상태관리를 위해 사용.
    대충 흐름은 파악해 놓았지만 어떻게 사용하는지는 잘 모르겠다.

  2. 자바스크립트 구현
    어떻게 어떤 디렉토리에 JS파일을 만들고 불러와야하는지 잘 모르겠다 ㅜㅜ 유튜브 강의 뒤져볼 예정

'개발 > Vue.js' 카테고리의 다른 글

Nuxt 토이 프로젝트(포트폴리오 페이지)  (0) 2017.05.08
Vue.js 정리  (0) 2017.04.25
Vue 기본자료 포스팅 완료!  (0) 2017.04.06
10. 컴포넌트  (0) 2017.04.06
9. 폼 입력 바인딩  (0) 2017.03.31
8. 이벤트 핸들링(v-on)  (0) 2017.03.31

+ Recent posts