SeaPlus

[ 1. 문제 ](과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)이번 주차를 지나며 겪었던 문제가 무엇이었나요?advanced 과제의 마지막 문제인 랜더링 이슈를 잡는 문제를 해결하지 못했습니다.[ 2. 시도 ]문제를 해결하기 위해 어떤 시도를 하셨나요?다양한 리서치를 통해 문제를 해결하기 위한 접근법을 찾기위해 시도했습니다.[ 3. 해결 ]문제를 어떻게 해결하셨나요? 2주차 과제 피드백을 통해, 주어진 상태를 잘게 나누어 필요한 만큼 provider를 제공해 주어야 한다는 사실을 알게되었습니다. [ 4. 알게된 것 ]이번 주를 마무리 하며 나에게 만족했던 부분은 무엇인가요? 새롭게 이직을 시작하면서 바쁜 와중에도 틈틈히 시간을 내어 과제를 풀기위해 참여했습니다. 이번 주를 마무리 하며 개선이 필요..

1. $변수선언 CSS 는 변수를 사용할 수 없습니다. 때문에 반복적으로 사용되는 코드를 계속해서 입력해야하고, 그 코드가 바뀌면 모든 코드를 수정해야하는 어려움이 있습니다. 하지만 Sass(SCSS)는 그 코드를 변수로 지정해 필요한곳에 사용할 수 있습니다. 이는 나중에 코드를 수정해야할 상황에서 변수의 값만 변경하면 되므로 작업이 간단해 집니다. 예를 들어 $red: #fe3900 $red 라는 변수를 선언하고 사용시 /*scss*/ GNB{background-color: $red;} CTA{background-color:$red;} modal{background-color:$red;} GNB, CTA, modal 세개의 요소 모두 background-color 값을 $red라는 변수를 통해 선언을 ..

✅ 김버그의 UI 개발 부트캠프 자취생 들의 필수어플 "오늘의 집" 의 상품판매 페이지의 UI 를 SCSS 를 활용해 크게는Layout 단위부터 componet 단위까지 자세하게 분석한뒤 똑같이 만들어 볼수 있다. 프런트엔드를 구성하는 가장 기초적인 assets 단위부터 SCSS를 통해 상태관리하는 방법 과 SCSS의 문법 등을 배울수 있다. - 기술스택 : HTML, CSS, SCSS, JavaScript 🔨 구현방법 1. Asset 파일 준비 Image 웹페이지에서 이미지의 용량은 약 60%를 차지할 정도로 코드파일보다 크고 많은 영향을 끼친다. 랜더링 타임을 줄이고 사용성 증진을 위해, 목적에 맞는 이미지 확장자(jpg, png, svg, webp)를 선택. Icon svg 파일을 icon으로 변환..

css는 웹에 표현될 요소들을 시각적으로 풍부하게 꾸며주고, 장식하는 역할을 맡고 있습니다. 이런 css의 장점때문에 오늘날의 웹은 과거와 비교해서 훨씬 세련되게 발전할수 있었습니다. 하지만 시각적으로 화려한 UI와 디자인을 웹에 부여하기 위해서 고도화된 css 코드를 작성해야 하는데, 그에 반해 css문법적 한계는 뚜렷 한 상황 이었습니다. 이때 등장한 것이 바로 "CSS 전처리기(CSS Preprocessor )" 입니다. [CSS 전처리기(CSS Preprocessor )] css 전처리기는 오늘날 복잡해지고 무거워진 css코드를 보다 간결하고 깔끔하게 만들어줍니다. 전처리기는 CSS 문법과 굉장히 유사하지만 선택자의 중첩(Nesting)이나 조건문, 반복문, 다양한 단위(Unit)의 연산 등… 표..

웹표준에 대해 설명하기 전에 웹표준은 "웹 접근성 향상을 위한 보편적인 가치"로 통용되고 있습니다. "웹 접근성" 에 대해 모르시는 분들이라면 우선 알고 가시면 좋을것 같습니다. 웹 접근성(Web Accessibility) 이란? [1. 접근성 이란?] 웹 접근성을 살펴보기전에 서비스를 제공하는데 있어 접근성이 무엇인지부터 확인해 봐야 합니다. 접근성은 사용자마다 각자 다른 환경과 상황에서 컨텐츠 를 접하거나, 사용 seaplus.tistory.com [1. 웹표준 이란?] 웹 표준이란 "웹에서 표준적으로 사용되는 기술이나 규칙" 을 의미하는데, 여기서의 표준이란 W3C의 토론을 통해 나온 권고안을 의미하며 이외의 스펙은 비표준 이거나 독자 확장 요소를 의미하기 때문에 구분해서 사용해야 합니다. 비표준 ..

[1. 접근성 이란?] 웹 접근성을 살펴보기전에 서비스를 제공하는데 있어 접근성이 무엇인지부터 확인해 봐야 합니다. 접근성은 사용자마다 각자 다른 환경과 상황에서 컨텐츠 를 접하거나, 사용하게 될때를 고려하여, 다양한 환경에서 접근하고자 하는 정보컨텐츠에 원활히 접근 할수 있도록 선택지를 넓히고 배려하는 방법 입니다. [2. 웹에서의 접근성] 그렇다면 웹에서의 접근성은 무엇일까? , 법적인 관점에서의 웹 접근성은 "모든사용자가 신체적.환경적 조건에 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것" 여기서 신체적 조건이란 문자 그대로 사람의 신체 즉 장애 여부나 연령을 의미하고 환경적 조건은 사용자가 접근할때 사용할 다양한 디바이스(PC, Mobile, PDA등), OS(윈도우, 리눅스 등), 웹 브..

[ 1. 크로스 브라우징 이란? ] 크로스 브라우징 이란 웹페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 동등한 수준의 정보를 사용자들에게 제공하는 방법론이다. (HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보이고 작동되는 기법.) 그렇다면 크로스 브라우징을 해야만 하는 이유는 무엇일까? 왜 모든 브라우저가 똑같은 화면을 보여주지 못하는 것일까? 그 이유는 바로 브라우저마다 렌더링 엔진이 다르기 때문이다. - 브라우저에서 지원이 안 되는 HTML5, Javascript 코드 - 브라우저에서 해석 못하는 CSS 코드 존재 - 브라우저마다 자체적인 CSS 스타일 - 브라우저 자체 버그 ..

1. Font Awesome Font Awesome Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용 되는 라이브러리 입니다. 심플하고 플랫한 디자인의 아이콘들이 많지만 최근에 일부 아이콘들이 유료화 되었습니다. [사용법] 간편하게 CDN을 제공하기 때문에 회원가입 한 뒤에 쉽게 사용할수 있습니다. (해드 태그에 사용) - Font Awesome 5 2. Ionicons Ionicons: The premium icon pack for I..

[구현] 1. SVG 태그란? - SVG태그는 Scalable Vector Graphics의 약자로 벡터 기반 그래픽을 XML 형식으로 정의하는 것을 의미한다. - SVG태그는 SVG그래픽을 담기 위한 요소이다. - SVG태그 내부에 담을 수 있는 것은 원, 사각형, 다각형, 라인, path 등이 있다. - SVG태그는 파일의 모든 요소와 모든 속성에 애니메이션을 적용할 수 있다. - svg는 컨테이너로 묶음을 의미합니다. 내부에 그래픽을 담기 위한 그릇과 같은 태그이다. 2. SVG의 stroke 속성 - stroke : 선색 속성 - stroke-width : 선 굵기 속성 - stroke-linecap : 선의 양쪽 끝 모양 속성 - stroke-dasharray : 점선처리 속성 ( 홀수번째 적은..

[구현] 1. HTML & CSS 아이콘: 아이온 아이콘(ionicons) 폰트 어썸과 동일하게 CDN을 제공해서 사용법도 간단하고 깔끔한 아이콘도 많다. 일반적으로 어떠한 크기던 얼마든지 변경 가능하고 CSS를 이용해 다양한 효과를 줄 수 있는 게 특징이다. Ionicons Usage Guide: Tips for installing and using the Ionicons free icon library Ionicons: The premium icon pack for Ionic Framework Ionicons is an open-sourced and MIT licensed icon pack. ionic.io white-space : nowrap white-space는 스페이스와 탭,줄바꿈, 자동 줄 ..