운동과 개발

0. 들어가며... CSS 의 Flexbox와 grid는 웹 페이지의 레이아웃을 만드는 데 사용할 수 있는 (예시로, float와 비교해서) 비교적 최신 기술이다. (flexbox는 2012년등장, 2017년 10월 17일 Microsoft Edge 브라우저는 CSS Grid 구현을 출시 했다.) flexbox와 grid의 사용법에 대해 자세히 정리된 글들은 이미 많이 있으므로 둘을 비교하며 어떤상황에서 어떤 기술을 사용할지에 대한 고민을 담은 글이고, 이에 대해서는 정답은 없다고 생각한다. 혹시나 flexbox와 grid에 대해 아직 잘 모르겠다면, 제대로 공부해보고 싶다면 아래 사이트(1분코딩) 에 들어가서 천천히 익혀보기를 추천한다. (내가 도움을 많이 받은 사이트이다.) https://studio..

상속 1. 자손 결합자 ( 공백) 하위에 있는 태그, 자식 태그들로 범위를 좁혀서 선택한다. 2. 자식 결합자 (>) 바로 아래 자식만 좁혀서 선택한다. 형제 1. 일반 형제 결합자 (~) 내 뒤에 있는 형제를 선택한다. (여기서 형제 = 같은 레벨 을 말한다.) 2. 인접 형제 결합자(+) 바로 뒤에 있는 형제만 선택한다. 형제를 선택할때는 '순서'가 중요하다. [선택자1] ~ [선택자2] 선택자 1의 '뒤에'있는 선택자2를 선택한다. 다음 예시를 천천히 보면서 이해해보자. See the Pen Untitled by ITK-SHIN (@itk-shin) on CodePen. index.html Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello H..

1. 들어가기에 앞서... FOIT 와 FOUT 라는 용어에 대해 알아보자. FOIT (Flash of Invisible Text) 란? 브라우저가 웹페이지가 로드될 때, 웹 폰트가 아직 다운로드되지 않았기 때문에, 일시적으로 텍스트가 화면에 표시되지 않는 현상을 말한다. 특히 대체 폰트가 지정되지 않은 경우 브라우저가 폰트를 렌더링하기 위해 다운로드를 기다리는 동안 발생할 수 있다. FOUT(Flash of Unstyled Text)란? 웹 페이지에서 원하는 글꼴이 로드되기 전에 브라우저에서 기본 글꼴로 표시되는 현상을 의미한다. 이와 같은 폰트 이슈가 생기는 이유는 브라우저 동작에 있어서 폰트 리소스 요청의 경우에는 다른 리소스 요청보다 늦게 처리되기 때문이다. 따라서 웹 사이트를 구성하는 사이에 폰..

지난 4주간의 기록 코딩테스트 알고리즘 / CS 지식 / 블로그작성 / html / css / javascript 1. 코딩테스트 (알고리즘 공부) 와 첫 연습코딩테스트 4.3일부터 기록을 시작해 프로그래머스 lv0, lv1 + 최근나온 기초코딩트레이닝의 문제를 푼 기록이다. 1. 이전에 프로그래머스 lv0 day2까지 풀다가 포기했던 기록이 있는데, 이번 제로베이스를 시작하면서 다시 매일(주말포함) 3시간씩 풀기를 시작했다. 2. 매일 3시간 투자는, 다른 계획들을 수행하는데, 지장이되어 2시간으로 줄이게 되었다. 3. 날짜별 기록을 보면 갑자기 문제를 많이 푼기록이 있는데, 최근 프로그래머스에서나온 기초코딩트레이닝 문제의 경우 1~5분내로 대부분 풀려서 그렇다. 당연한 것이지만, 아직도 많이 부족함이..

1. 크로스 브라우징이란 무엇인가? 2. 크로스 브라우징이란 개념이 생기게 된 이유는 무엇인가? 3. 크로스 브라우징은 어떻게 하는건데? 4.서비스 중에 발생할 수 있는 다양한 호환성에 대한 문제와 해결방법 5. Metatag의 다른 설정 방법 1. 크로스 브라우징이란 무엇인가? 웹 페이지가 웹 브라우저의 종류에 구애받지 않고 제작자의 의도에 맞게 보여지거나 동작할 수 있게 하는 작업이다. 쉽게 말해, 기기가 달라지더라도, 웹페이지가 일관된 서비스를 제공할 수 있도록 해 주는 작업이다. 2. 크로스 브라우징이란 개념이 생기게 된 이유는 무엇인가? 이유를 말하려면 웹브라우저에 대해 이야기할 필요가 있다. 웹 브라우저는 사용자들이 웹 콘텐츠를 이용할 수 있도록 편리한 인터페이스를 제공해주는 소프트웨어이다. ..

1. HTML5 시멘틱 태그에 대하여 알아보자 1-0. HTML5란 무엇일까? HTML은 1993년 HTML 1.0이 팀 버너스리(Tim Berners-Lee)에 의해 고안되어 발표된 이후 해를 거듭하며 HTML은 발전에 발전을 거듭하였다. 그리고 1997년 HTML 3.2 및 HTML 4.0을 개발하면서 W3C에서 HTML의 버전을 관리하기 시작하였다.HTML5는 HTML 4.01과 XHTML 1.0, XHTML 1.1을 계승하는 차세대 웹 기술로 HTML 마크업이 1990년대 초 인터넷에 소개된 이래로 계속적으로 진화를 거듭해 왔다.기존에 존재하던 HTML의 한계를 극복하고, 기존 기술들의 설계를 개선하기 위해 W3C에서 HTML5라는 새로운 기술이 정의되었다.마이크로소프트, 모질라, 애플, 구..

내가 회사를 선택하는 기준 && 그리고 내가 가고싶은 회사 사수 존재여부 , 돈, 회사 서비스에 대한 나의 관심(자체 서비스 회사), 지역, 회사 분위기(수평구조), 이 중에서 가장 중요하게 생각하는것은 들어가고자 하는 회사의 서비스에 대한 나의 관심이다. 굳이 많은 직업중에, 비전공자로서 나를 개발의 세계로 이끈것, 개발자가 되기위해 많은 공부량이 필요하다는것을 알면서도 나를 개발의 세계로 이끈 것은, 만들고자 하는것을 컴퓨터 코딩을 통해 만들 수 있다는 것이다. 이게 나를 움직이게 만든 원동력이다. 프론트엔드 개발자로서, 관심있는 서비스, 제품에 대한 판매, 소개, 직접적인 서비스화면을 만들어 소비자와 소통하는것은 나에게 너무 매력적으로 느껴졌다. 사실 처음에는 내가 사용하는 앱 또는 웹의 회사, 스..

[글을 들어가기에 앞서...] 나는 프론트엔드 개발자로 취업을 준비하는 몇개월 공부한 취업준비생이다. 우선 전체적 지식이 상당히 부족하다. 글에 잘못 알고있는 내용도 있을 것이다. '세상은 아는 만큼 보인다' 라는 말에 상당히 공감한다. 이러한 관점에서 공부를 하다보면 생각의 변화가 생길수도? 이 글을 접했다면, 이렇게 생각할 수도 있구나 정도로 가볍게 보자. 혹시,개발자 선배님들이라면 읽어볼만한 블로그도 댓글로 남겨주시면 감사하겠습니다. [서론] 개발자의 종류에는 어떤게 있나? 프론트엔드 개발자, 백엔드개발자, 웹 개발자, 모바일 애플리케이션 개발자 ,게임개발자, 데브옵스 개발자, 데이터 사이언티스트, 임베디드 개발자, 소프트웨어개발자,미들티어개발자 등등 많다. (각 개발자에 대해 궁금하다면 아래 re..

1. 제로베이스 프론트엔드 스쿨에 참여하는 목적 2023년 4월 1일 ~9월 31일 공식적인 온라인 부트캠프인 제로베이스의 일정이다. 시작 제로베이스에 참여하는 나의 진짜 목적 프론트앤드 개발자가 되기로 마음먹고 독학을 시작했지만, 방향성을 잡기 어려웠다. 어떤 분야든지 마찬가지겠지만, 나는 기초를 정말 중요하게 생각한다. 세상 대부분 문제들은 결국 응용을 통해 해결되는데, 응용을 하기 위해 기초지식이 받쳐지지않으면 더빠르게 한계에 맞닥뜨리게 될 것이다. 결국 더 좋은 해결방안은 여러가지 기초적인 생각들이 모이고 쌓여 만들어질 것이라고 생각한다. 프론트엔드 개발자란 프론트엔드 개발자는 웹사이트나 앱의 사용자 인터페이스(UI)를 개발하는 역할을 수행하는 전문가입니다. 이는 HTML, CSS, JavaScr..

https://developer.mozilla.org/ko/docs/Web/HTML/Element/button : 버튼 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전 developer.mozilla.org https://developer.mozilla.org/ko/docs/Web/HTML/Element/input : 입력 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성합니다..