Front-End Developer

html 안에 <script> 파일을 어디에 넣어야 할까?

가르쳐주는 사람마다, 책마다 다 달랐다. 그래서 직접 찾아봤다. https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup

변수(Variables)란? - 변수 선언 및 할당

어플리케이션을 실행하면, 총 세 가지의 큰 일이 일어난다. 사용자에게 받는 입력(input) - 필요한 데이터를 처리(process) - 출력(output) 사용자가 어떤걸 클릭(input)했을 때, 그 다음에 일어나는 일은 우리가 작성한 코드대로, 주어진 로직대로 처리되고(process) 처리된 데이터를 출력(output)하게 되는것이다. (이때 출력은 모니터에 보여지는것일수도 있고, 또는 데이터를 file syste, 쿠키와 같은 storage에 저장하는 것일수도 있다. 혹은! 네트워크통신을 통해 다른 백엔드나 서버로 데이터를 보내는것도 출력이다.) 변수가 무엇인고? 물론 세가지 모두 중요하지만, 프로그래머에게는 처리가 가장 중요하다는건 어렵지 않게 상상이 가능하다. 이 처리를 위해서는, 데이터를 임..

빔캠프 종찬님 특강 - .wrapper는 어디에 쓰는고?

이렇게 생긴 웹의 레이아웃을 짠다고 하면, 우리는 크게 위의 사진영역 하나, 그리고 아래의 메인 컨테이너 영역 하나 이렇게 나누게 된다는 것은 어렵지 않게 예상해 볼 수 있다. 아래와 같이, 위 헤더영역 아래 컨텐츠영역으로 나눈 다음, 차례차례 윗영역을 작업하고, 아래 영역을 작업하는 것이다. 그런데 종찬님은 여기서 하나의 큰 레이아웃을 더 보셨다. 바로 윗영역이나 아래영역이나 공통적으로 존재하는, 중간 컨텐츠 영역이다. 종찬님은 이 컨텐츠들을 한번에 묶어 클래스명 .wrapper로 하나의 요소 안에 넣어주시곤 하는데, 이를 하는 이유는 직관적이고 명시적으로 우리가 작업할 공간이 정해진다. 공통된 위치를 정해줌으로써, 우리는 윗영역과 아랫영역의 레이아웃을 한번에 짤 수 있고 나중에 유지보수도 편해진다. ..

Pure CSS로 포토샵의 역사 페이지 구현하기

URL: https://koreanhamster.github.io/photoshop_web-page/ 소스코드: https://github.com/Koreanhamster/photoshop_web-page 기술 스택 HTML CSS 신경쓴 점 네거티브 마진을 적극적으로 사용하여 자유롭게 박스포지셔닝을 할 수 있도록 했다. 아래 코드와 같이 nth-child속성을 사용하여 두 박스가 항상 중간 여백을 유지할 수 있도록 했다. .main { display: flex; flex-direction: column; align-items: center; padding: 7rem 0; } .card:nth-child(odd) { margin-left: -60%; } .card:nth-child(even) { marg..

오직 Tailwind만을 사용해서 이력서 만들어보기 challenge

URL: https://koreanhamster.github.io/resume_only-tailwind/ 소스코드: https://github.com/Koreanhamster/resume_only-tailwind 미리보기 기술스택 HTML + Tailwind (CSS없이 오직 Tailwind만 사용) 배운점 & 아쉬운점 Tailwind의 문법에 어느정도 익숙해졌다. 생각보다 간단하고 할 수 있는게 다양하다. 확실히 유지보수는 힘들다. 같은 속성을 가지고있는 모든 요소들의 클래스를 변경해줘야한다. 미디어쿼리를 적용할 수 없어 아쉬웠다. CSS와 적절히 섞어 사용하면 정말 빠르고 편하게 웹을 만들 수 있겠다!

Vending machine(콜라 자판기 만들기)

URL:https://koreanhamster.github.io/vending-machine/ 소스코드:https://github.com/Koreanhamster/vending-machine 기술스택 HTML CSS 구현기능 flex와 grid를 적극적으로 사용하여 유지보수에 용이할 수 있도록 구현 반응형 디자인으로 화면 너비가 줄어들 때 섹션들이 세로축으로 정렬될 수 있도록 구현 IR기법을 사용하여 웹접근성을 높임 배운점 꼭 필요하지 않은 경우 각 컨텐츠들에 고정 height나 width값은 주지 않았다. 유지보수에 능한 웹 구현 경험치를 쌓았다. IR기법을 사용해보며 너무 길지 않으면서 동시에 명료하고 구체적으로 필요한 정보를 스크린리더 사용자에게 전달하는 연습을 했다. 마크업을 끝내고 CSS 스타일..