CSS
-
2022.05.06 Unit7 - 간단한 웹앱 만들기 - 계산기 완성CSS 2022. 5. 7. 00:21
오늘은 목업작업만 되어있던 계산기를 데려와서 계산기 기능을 구현시켜 주었다. HTML, CSS적인 부분만 내가 완성했지 JS는 크게 보면 이해가 되긴하지만 자세히 들여다보면 아직 안배운 내용들이 많아서 이해하기가 어려웠다. 주말 동안에 복습을 해보고 최대한 알아낸 것이 있다면 수정해서 다시 업로드 할 계획이다. 사실 100% 내 힘으로 만든 것이 아니기에 회의감도 들고 이번주는 좀 많이 힘들었다. 아무리 봐도봐도 내용을 이해하기 힘들었고 따라가기에 벅찬 느낌이 유독 심했다. 개발자로 커리어 전환을 위해 거쳐야 하는 과정이니 힘들어도 지치지 않고 계속 반복적으로 복습해야겠다. 이번 주말에는 그동안 계속 어려워하고 헷갈렸던 코플릿 반복문 4~5문제 정도를 계속 복습하고 계산기 기능을 구현한 JS에 대한 복습..
-
2022.05.04 Unit6 - [HTML/CSS] 활용 계산기 효과 추가CSS 2022. 5. 4. 23:39
어제는 계산기 구도를 짜고 버튼을 CSS로 꾸며보았다. 오늘은 버튼이 실제로 눌리는 것처럼 표현하고 마우스커서 효과도 추가했다. 오늘은 하루종일 목업을 마저 만들고 남는시간에 CSS를 통해서 더 꾸며주는 작업을 진행했다. 오후 라이브세션 때 각자가 만든 계산기들을 동기들과 화면공유를 통해 소개하곤 했는데 정말 능력자들이 많다는걸 느꼈다. 아직 수업진도가 나가지 않은 부분들을 활용하여 나이트모드도 추가하고 계산기 창 축소, 닫기, 확대를 구현하질않나 심지어 음성인식 기능까지.. ㅋㅋㅋㅋㅋㅋ 나는 CSS에서 flex 요소만 활용해서 만들라해서 진짜 정직하게 하라는 것만 한거같다. 나도 JS 구글링해서 뭐라도 집어넣을걸 ㅋㅋ 다들 자기가 만든건 진짜 별 거 없다하는데 하나하나 까보면 대단한 기능들이 수두룩이다..
-
2022.05.03 Unit6 - [HTML/CSS] 활용 - 계산기 목업 만들기CSS 2022. 5. 4. 01:05
Chapter 1. 레이아웃 와이어프레임 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계가 와이어프레임이다. 와이어로 설계된 모양이며 단순한 선, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것 와이어프레임은 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이다. 목업 (Mock-up) 웹 또는 앱을 제품이라고 가정할 때, 목업은 실제 제품이 작동하는 모습과 동일하게 HTML을 작성하는 것 오늘은 계산기 목업 만들기 수업을 진행했고 구글에 계산기 이미지를 살펴본 후 가장 무난한 디자인을 골랐다. 나름대로 인터넷에 있는 화이트보드로 구조를 짜보았다. 목업 진행 전 학습했던 부분을 조금 적어볼까 한다. display: flex 부모 박스 요소에 적용해서 자식 박스의 방향과 크기를..
-
2022.05.02 Unit5 - [CSS] 기초CSS 2022. 5. 3. 01:01
Chapter 1. CSS와 프론트엔드 개발 CSS ( Cascading Style Sheets) CSS는 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 더 나은 사용자 경험(user experience)을 제공하기 위해 CSS로 UI 및 레이아웃을 적절히 구성해야 함 CSS는 좋은 사용자 경험을 제공하기 위한 도구 CSS는 웹 사이트 이용자가 HTML 문서에 작성된 컨텐츠를 잘 이해하게끔 돕는 역할을 함 사용자 인터페이스 (UI : user interface) 직관적이고 쉬운 UI 제작은 FE 개발자의 기본 소양 CSS를 이용하여 글자에 밑줄을 그어 하이퍼링크로 제작하는 것, 사각형 도형 아래 그림자 효과를 주어 버튼처럼 보이게 만드는 것, 컨텐츠가 잘 보이게 레이아웃을 적절히 디자인 하는 ..