전체 글

[문제 발생] 개발자도구를 통해 html을 보다가 수정하지 못하는 것들을 볼 수 있었다. 그렇다면 "사용자 에이전트 스타일시트'로 정말로 수정 할 방법이 없는가?"에 대해 고민해보자 사용자 에이전트 스타일시트(User agent stylesheet) 웹 브라우저가 기본적으로 제공하는 스타일 시트 웹 페이지가 특정 스타일이 적용되기 전에 적용되는 스타일 이는 브라우저가 페이지를 렌더링할 때 기본적인 스타일을 적용하여 일관된 시각적인 경험을 제공한다. 대부분의 웹 브라우저는 기본적인 HTML 요소에 대한 스타일을 정의하는 사용자 에이전트 스타일시트를 내장하고 있다. ex. 링크의 색상, 볼드체, 강조 등 [일부/예시] 사용자 에이전트 스타일시트는 브라우저가 웹 페이지를 표시하는 데 필요한 기본적인 스타일을 ..

포트폴리오를 정리하면서 직무와 아르바이트 경험이 상당히 관련되어 있고, 특히 오랜 기간동안 꾸준하게 아르바이트를 해왔다는 사실을 강조하고 싶었다. 아르바이트 경험은 실제로 여러 가지 역할과 상황에서 특정 기술과 능력을 키워나가는 과정이었다. 이러한 경험을 통해 얻은 것은 단순히 일을 하고 돈을 벌었다는 것 이상이라고 생각한다. 나의 아르바이트는 나에게 꾸준함과 책임감을 심어주었다. 이는 내가 어떤 상황에서도 책임을 지고 노력해야 한다는 것을 배우게 해주었다. 고객들과의 소통은 물론, 동료들과의 협력과 조화를 이뤄내는 데에도 큰 역할을 했다. 또한, 이러한 아르바이트 경험은 나에게 문제 해결 능력을 키우는 데에도 도움이 되었다. 예기치 않은 상황에서도 냉정하게 대처하고 해결책을 찾아야 했다. 고객의 불만이..

[실습]1. 다음 이미지의 구조를 CSS를 활용하여 요소를 배치하시오.디테일은 처리하지 않고 요소들의 구조만 잡습니다. 2. 다음 천재교육 모집요강을 참고하여 일부분을 HTML파일로 만들어보시오.디테일은 처리하지 않고 요소들의 구조만 잡습니다.https://m.jobkorea.co.kr/Recruit/GI_Read/44173854 (주)천재교육 채용 - [천재교육그룹 공개채용] 각 부문별 인재 모집 | 잡코리아경력 : 신입·경력, 학력 : 초대졸↑, 급여 : 회사내규에 따름 -면접 후 결정, 마감일 : 2024.03.25m.jobkorea.co.kr [최종 완성]1. 다음 이미지의 구조를 CSS를 활용하여 요소를 배치하시오.box.html content content 이미지 2. 다음 천재교육 모집요강을..

CSS 속성 CSS 참고서 - CSS: Cascading Style Sheets | MDNCSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다.developer.mozilla.org 폰트font-size : 글꼴의 크기를 결정font-weight : 글꼴의 두께를 결정font-family : 글꼴의 종류를 결정 Browse Fonts - Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com line-height : 줄의 높이를 ..

CSS CSS(Cascading Style Sheets)는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어이다. HTML 문서의 요소들이 브라우저 화면상에 어떻게 배치되고 디자인될지를 결정한다. 왼쪽은 순수 HTML 문서로, 문서의 구조만 짜여져 있다. 오른쪽은 CSS가 추가된 HTML 문서로, 요소들이 구조에 맞추어 배치되고, 디자인 되어있다. Cascading HTML 요소들은 중첩이 되어있는데, 상위 요소에 대해 적용한 스타일이 하위 요소에도 적용되는 것을 Cascading이라 한다. 스타일에 따라 Cascading이 되는 스타일이 있고, 되지 않는 스타일이 있다. CSS 문법 CSS를 적용하기 위해서는 스타일을 적용할 요소를 선택한다. 선택한 요소에 대해 어떤 스타일을 지정할지 key ..

[람다 함수] 파이썬에서 코드를 간결하게 작성할 수 있으며, 주로 함수를 인라인으로 사용할 때 유용하다. 단일 표현식(expression)으로 이루어져 있으며, 이 표현식의 결과가 해당 함수의 반환값이 된다. 이러한 람다 함수는 주로 간단한 기능을 수행하는 함수를 간결하게 정의할 때 사용된다. 일반적으로 함수를 정의하고 이름을 부여하는 것보다 더 간결하게 코드를 작성할 수 있다. [람다 함수의 구조] 람다 함수의 기본 구조 출처 : 4) 람다함수(익명함수) - 제대로 파이썬 (wikidocs.net) lambda arguments: expression lambda는 람다 함수를 정의하는 키워드이며, arguments는 함수의 매개변수를 나타낸다. expression은 해당 매개변수를 이용하여 계산된 값을..

Form 사용자로부터 입력을 수집하기 위한 양식을 정의할 때 사용된다. input 태그들의 조합을 통해 데이터를 입력받는다. 주요 속성으로는 action : 데이터를 전송할 서버의 URL을 지정한다. method : 데이터를 전송할 방식을 지정한다. ex) GET, POST GET방식의 경우 데이터가 URL을 통해 전달된다. 기본값. POST 방식의 경우 데이터가 HTTP Request 본문에 포함된다. input 데이터를 입력받는 요소이며, Form 태그로로 감싸져 한번에 데이터를 전달한다. 주요 속성으로는 name : 데이터는 key-value 형태로 전송되는데, key 역할을 한다. value : value 역할을 한다. type : 입력 유형을 지정한다. text : 일반 텍스트 입력 submit..

[실습] 1. 다음 이미지의 구조를 html tag로 표현해보시오. 2. 임의의 사이트의 구조를 html tag로 표현해보시오. 3. 개발자 도구를 활용하여 구조가 비슷한지 확인해보시오. [최종 완성] index.html APPAREL SHOP HOME PRODUCTS 나희의 블로그입니당 ,,, 저희집 막내는 별이고 토끼에요 11살이에요 Contact Us Username Email Send More Email Address nahee2253@naver.com Phone Number 010-0000-0000 Location 성남시 수정구 Working Hours 9am ~ 6pm • • • • 이미지

프론트엔드 프론트엔드(Frontend)는 사용자가 웹 브라우저를 통해 상호작용하는 웹 애플리케이션의 클라이언트 사이드 부분을 의미한다. 주로 사용자 경험(UX)과 사용자 인터페이스(UI)를 개발하는 데 초점을 맞추며, 웹사이트의 디자인, 레이아웃, 그리고 동작 방식을 구현한다. HTML, CSS, JavaScript로 구현한다. HTML : 화면의 내용 및 구조를 나타낸다. CSS : 화면의 구도 및 스타일을 지정한다. JavaScript : 화면에 동적인 요소를 추가하여 사용자와 상호작용할 수 있도록 한다. HTML 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language, HTML)는 웹 페이지 표시를 위해 개발된 마크업 언어이다. 하이퍼텍스트(hypertext) 문서 내부에 또 다..

미니 프로젝트 : LMS REST API 서버 구축 목표 LMS(Learning Management System)을 위한 data model을 설계해보자. LMS을 위한 REST API를 만들어 보자. 요구 사항 다음 팀장의 이야기를 참고하여 LMS에 대해 자유롭게 설계한다. ERD를 만든다. 간단한 API 문서를 작성한다. Postman or notion 활용(또는 Swagger) 팀장 ALEX : 우리는 학생들의 성적을 관리하기 위한 LMS를 만들거야 과목은 시범적으로 국어, 영어, 수학만 사용할 것이지만 추후에 다른 과목들도 추가할거야 우리 서비스에는 강사들이 있어. 강사들은 담당 교과목이 존재하고, 교과목마다 여러 개의 강의를 진행할거야 학생들은 그 강의들을 수강하고, 시험을 본 후 LMS상에서 ..