네카라쿠배 [패스트캠퍼스 네카라쿠배 2기] - 22일차 공부 실습을 하면서도 어떻게 하면 웹 접근성을 늘릴 수 있는 가에 대한 설명을 하시기 위해 라는 사이트에 들어가서 크롬 확장 프로그램인 HeadingsMap을 통해 보았는데 다음과 같이 실제 화면에서는 나타나지는 않지만 마크업언어의 웹 접근성을 위해 Site Navigation과 같은 요소를 추가해준 사실을 확인할 수 있었다. 옛날에는 가로로 요소들을 정렬하기 위해 float과 overflow:h... aria패스트캠퍼스htmlcss네카라쿠배aria [패스트캠퍼스 네카라쿠배 2기] - 10일차 공부 Branch 전략: git flow 나는 로컬에서 git branch practice명령어로 생성 하였는데 생성하면 다음과 같은 화면을 볼 수 있다. 다음의 화면에선 git switch(checkout) practice로 하면 자신이 생성한 branch로 넘어 갈 수 있다. branch에서 작업 중 add와 commit을 하지 않고 switch를 하게 되면 main이나 자신의 기존 branc... Git&Github패스트캠퍼스네카라쿠배Git&Github [패스트캠퍼스 네카라쿠배 2기] - 34일차 공부 twitter 디자인 dd와 dt를 선택하지 않고도 옆으로 흘러가게 --> 부모요소에 display:inline-flex (더 유연한 방법) figure부분에 border: 50%를 주고 overflow:hidden을 주어 튀어 나와있던 이미지의 크기를 안보이게 처리함 shape-outside 속성 알아두기 아래와 같이 이미지 모양 대로 흘러가게 만들어줌 footer 디자인 @include ... 네카라쿠배패스트캠퍼스htmlcsshtmlcss [React] - 12일차 수업 SKHeading 컴포넌트 웹 표준과 웹 접근성을 위한 Dialog HTMLAreaElement - has href attribute HTMLVideoElement - has controls attribute HTMLAudioElement - has controls attribute has tabindex attribute has contenteditable attribute focusbal... React패스트캠퍼스네카라쿠배React [TIL] 반응형 웹 디자인 리셋 css 전체를 border-box로 만들어 레이아웃을 우리가 예상하지 못한 방향으로 흘러가지않게 막아준다. margin과 padding도 0으로 초기화시켜준다. h1~h6까지 스타일링도 원하는대로 해주기위해 따로 초기화 시켜줄 수 있다. a태그의 밑줄을 없애며 초기화를 할 수 있다 (폰트색상은 상속이 된다) 스타일링 css (main css) 디버깅을 하는 여러가지방법이 존재하지만, b... html네카라쿠배CSSTILCSS [패스트캠퍼스 네카라쿠배 2기] - 31일차 공부 sass/scss --> 사스는 문법이 2개 sass문법, scss문법 (둘다 sass! 어떤 문법을 쓰느냐에 따라 달라짐) Dart Sass를 최근 많이 씀 node-sass 대신 수업은 Dart Sass로 진행 sass:math math:div(12px, 2); package.json script는 명령어를 설정하는 부분(start를 실행하는 경우 그냥 run을 안쓰고 npm start만... 패스트캠퍼스htmlcss네카라쿠배htmlcss [React] - 8일차 수업 참고 사이트: Webpack 자체적으로 Assets 관리 이미지 전용 웹팩 설정 config.dev.js asset/inline으로 바꾸면 data-uri 방식으로 바뀌어 용량을 줄일 수 있다. src로 불러오는 것이 아닌 직접 리액트 컴포넌트에서 파일(이미지)을 불러와 작성 App.js 리액트 로고를 화면에서 볼 수 있다.(8KB보다 작으니(내가 설정한 maxSize) data-uri방식으... React네카라쿠배패스트캠퍼스React
[패스트캠퍼스 네카라쿠배 2기] - 22일차 공부 실습을 하면서도 어떻게 하면 웹 접근성을 늘릴 수 있는 가에 대한 설명을 하시기 위해 라는 사이트에 들어가서 크롬 확장 프로그램인 HeadingsMap을 통해 보았는데 다음과 같이 실제 화면에서는 나타나지는 않지만 마크업언어의 웹 접근성을 위해 Site Navigation과 같은 요소를 추가해준 사실을 확인할 수 있었다. 옛날에는 가로로 요소들을 정렬하기 위해 float과 overflow:h... aria패스트캠퍼스htmlcss네카라쿠배aria [패스트캠퍼스 네카라쿠배 2기] - 10일차 공부 Branch 전략: git flow 나는 로컬에서 git branch practice명령어로 생성 하였는데 생성하면 다음과 같은 화면을 볼 수 있다. 다음의 화면에선 git switch(checkout) practice로 하면 자신이 생성한 branch로 넘어 갈 수 있다. branch에서 작업 중 add와 commit을 하지 않고 switch를 하게 되면 main이나 자신의 기존 branc... Git&Github패스트캠퍼스네카라쿠배Git&Github [패스트캠퍼스 네카라쿠배 2기] - 34일차 공부 twitter 디자인 dd와 dt를 선택하지 않고도 옆으로 흘러가게 --> 부모요소에 display:inline-flex (더 유연한 방법) figure부분에 border: 50%를 주고 overflow:hidden을 주어 튀어 나와있던 이미지의 크기를 안보이게 처리함 shape-outside 속성 알아두기 아래와 같이 이미지 모양 대로 흘러가게 만들어줌 footer 디자인 @include ... 네카라쿠배패스트캠퍼스htmlcsshtmlcss [React] - 12일차 수업 SKHeading 컴포넌트 웹 표준과 웹 접근성을 위한 Dialog HTMLAreaElement - has href attribute HTMLVideoElement - has controls attribute HTMLAudioElement - has controls attribute has tabindex attribute has contenteditable attribute focusbal... React패스트캠퍼스네카라쿠배React [TIL] 반응형 웹 디자인 리셋 css 전체를 border-box로 만들어 레이아웃을 우리가 예상하지 못한 방향으로 흘러가지않게 막아준다. margin과 padding도 0으로 초기화시켜준다. h1~h6까지 스타일링도 원하는대로 해주기위해 따로 초기화 시켜줄 수 있다. a태그의 밑줄을 없애며 초기화를 할 수 있다 (폰트색상은 상속이 된다) 스타일링 css (main css) 디버깅을 하는 여러가지방법이 존재하지만, b... html네카라쿠배CSSTILCSS [패스트캠퍼스 네카라쿠배 2기] - 31일차 공부 sass/scss --> 사스는 문법이 2개 sass문법, scss문법 (둘다 sass! 어떤 문법을 쓰느냐에 따라 달라짐) Dart Sass를 최근 많이 씀 node-sass 대신 수업은 Dart Sass로 진행 sass:math math:div(12px, 2); package.json script는 명령어를 설정하는 부분(start를 실행하는 경우 그냥 run을 안쓰고 npm start만... 패스트캠퍼스htmlcss네카라쿠배htmlcss [React] - 8일차 수업 참고 사이트: Webpack 자체적으로 Assets 관리 이미지 전용 웹팩 설정 config.dev.js asset/inline으로 바꾸면 data-uri 방식으로 바뀌어 용량을 줄일 수 있다. src로 불러오는 것이 아닌 직접 리액트 컴포넌트에서 파일(이미지)을 불러와 작성 App.js 리액트 로고를 화면에서 볼 수 있다.(8KB보다 작으니(내가 설정한 maxSize) data-uri방식으... React네카라쿠배패스트캠퍼스React