2023년부터 로그 기록 2023년부터 로그 기록

목차 1. Pure CSS Drawing 2. Basic Shape 3. GUI Icons 4. Speech Bubbles 1. Pure CSS Drawing CSS(Cascading Style Sheets)는 웹 페이지의 뼈대인 HTML 에 캐스케이딩(폭포수) 방식으로 스타일을 적용시킨다. 웹 페이지 상의 시각적인 디자인 요소들이 대부분 CSS 를 통해서 구현된 것이라 보면 된다. CSS 본문의 내용 전달을 더 효과적으로 만들어주고, 심미적으로 컨텐츠의 완성도를 높일 수 있다. CSS 속성을 적극적으로 활용하면 이미지를 파일을 붙여 넣지 않고도 도형이나 아이콘 등 다양한 디자인 요소를 구현할 수 있다. HTML/CSS 한계를 보완하기 위해 JavaScript 를 사용할 수도 있지만, 순수한 CSS 그리..

목차 1. form 관련 동적 가상 선택자 2. HTML 구조 잡기 3. 로그인 페이지 만들기 4. 검색 엔진 최적화 1. form 관련 동적 가상 선택자 태그는 사용자에게 입력 받은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타낸다. 하지만 별도로 사용자 입력 정보를 제출할 필요가 없다면 form 태그를 사용하지 않아도 된다. 1-1. 동적 가상 선택자 ( : 으로 시작) - : enabled, : disabled 활성활/비활성화 - :read-only, :read-write 편집 가능/불가능 - :checked 유형이 check-box/radio 로 선택된 상태 - :required 필수 입력값 1-2. 가상 요소 ( :: 으로 시작) - ::placeholder 입력에 대한 추가 ..

목차 1. Grid Garden 2. 게임 클리어 및 답안 오늘의 프론트엔드 스쿨(FES) HTML/CSS 주제 Grid 를 배웠다. 강사님께서 주신 복습용 게임을 통해서 Grid 를 복습하고 익숙해지고자 한다. 1. Grid Garden CSS Grid 사용법을 익힐 수 있는 재미있는 사이트다. 나도 4개월의 멋쟁이사자처럼 부트가 끝나고 이런 무료 사이트를 만들 수 있는 실력을 갖추고 싶다. 본격적으로 Gird 속성들을 복습해본다. Gird Garden 은 28 단계까지 있다. 2. 게임 클리어 및 답안 Grid 가 익숙하지 않아서 헤매기도 했고, 강의에서 핵심적으로 배웠던 속성은 사용되지 않아서 어려웠다. 다시 한번 풀어보면서 답안을 공유한다. (마우스로 드래그 하면 보임) 순번 (1 ~ 14) 답안..

목차 1. 실습 내용 2. 주요 태그 및 속성 3. 코드 1. 실습 내용 CSS 특강 내용을 바탕으로 아래 사항들을 고려하여 의도한 디자인으로 프론트엔드를 개발한다. (1) 개발순서의 첫번째 : 큰 덩어리 레이아웃(Layout) 부터 짜는 것이다. (배경으로 구역을 파악하라) (2) CSS 기본 속성 초기화 (3) 컨테이닝 블록 : 직계 부모 요소가 제공하는 컨텐츠 영역 (4) 속성의 초기값(Initail Value) 피그마 링크를 참조하여 HTML/CSS 코드를 작성하라 2. 주요 태그 및 속성 2-1. , margin: 50px auto; 2-2. , background-image: url(); background-size: cover; background-repeat: no-repeat; 2-3. ..