군만두의 IT 개발 일지

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약HTML과 CSS를 활용하여 Flexbox를 이용한 레이아웃 구성 방법과 각 속성의 적용에 대해 정리함.더보기 🚀 HTML 구성과 Flexbox 활용 1) HTML 구성웹 페이지의 콘텐츠 흐름은 기본적으로 좌에서 우, 그리고 위에서 아래로 진행됨. 효율적 관리를 위해 Flexbox 레이아웃을 활용하여 수직 및 수평 분할을 적용할 수 있음.2) Flexbox 레이아웃의 기본Flexbox를 사용함으로써, 개발자는 컨테이너 내의 항목들을 유연하게 정렬하고, 각 요소가 차지하는 공간을 쉽게 조절할 수 있음. display: flex 속성은 요소들을 가로로 정렬하며, Flexbox 속성을 통해 세밀한 레이아웃 조정이 가능함.3) 부모 요소..

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약웹 개발 프로젝트의 초기 단계에서 와이어프레임과 목업을 활용에 대해 정리함.더보기 🚀 HTML/CSS 활용 1) 와이어프레임(Wireframe) 웹 페이지의 기본 구조를 설계하는 과정으로, 핵심 요소와 기능을 배치하여 전체적인 페이지 레이아웃을 계획함. 프로젝트의 목적과 요구 사항을 명확히 하고, 초기 단계에서 디자인과 기능에 대한 이해도를 높임.2) 목업(Mock-up) 와이어프레임을 기반으로 한 단계 더 발전된 디자인 단계로, 실제 제품과 유사한 방식으로 HTML 문서에 구현됨. 목업을 통해 실제 콘텐츠와 디자인 요소를 사용하여, 최종 제품의 모습을 시각적으로 예측할 수 있음. ⭐HTML/CSS 활용1. 와이어프레임(Wiref..

목차 🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약웹 페이지의 스타일과 레이아웃을 결정하는 데 필수적인 CSS의 기초적인 내용을 정리함.더보기 🚀 CSS 기초 1) CSS(Cascading Style Sheets) 웹 페이지의 스타일과 레이아웃을 결정하는 스타일시트 언어. CSS는 색상, 글꼴, 크기, 간격 등 웹 페이지의 시각적 요소를 제어할 수 있음.2) 박스 모델 웹 페이지를 구성하는 모든 요소는 박스 모델로 표현됨. 요소의 콘텐츠, 패딩(padding), 테두리(border), 마진(margin)으로 구성됨. 3) 선택자 CSS에서는 다양한 선택자를 사용하여 특정 요소에 스타일을 적용할 수 있음. id 선택자, class 선택자, 태그 선택자, 속성 선택자 등이 포함됨..

목차🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일⭐요약학교에서 진행하는 프로그램에 참가하여 Jsvascript(프론트엔드) 부트캠프를 진행함. 웹 페이지의 구조를 형성하는 HTML 마크업 언어와 시멘틱 태그의 중요성에 대해 정리했음.더보기 🚀 HTML 기초 1) HTML (HyperText Markup Language) 웹 페이지의 구조를 정의하는 마크업 언어. JavaScript와 같은 프로그래밍 언어와는 다르게, HTML은 웹 페이지의 뼈대를 이루는 태그(tag)들로 구성. 2) Tag HTML을 이루는 기본적인 구성 요소로, 부등호()로 묶인 명령어. 이 태그들은 웹 브라우저에게 텍스트와 이미지 같은 콘텐츠를 어떻게 표시해야 하는지를 알려줌.3) 시멘틱 요소 HTML5에서는 ..

✅문제: 25083번 📌개념정리 (1) ' " \ 등 출력 정의: 출력할 문자열 앞에 \를 붙임. 예) \', \", \\ 등 (2) r(raw string) 정의: \b(백스페이스) , \" (큰따옴표 출력) , \n(줄바꿈) 등과 같은 escape문에 raw string을 사용하면 escape문이 동작되지 않고 문자 그대로 출력됨. 출력할 문자열 앞에 r을 붙임. 예) r"C:\programs\Test\Bin'" 📌문제풀이 print(r''' ,r'"7 r`-_ ,' ,/ \. ". L_r' `~\/ | |''') print(r''' ''')에서 공백 부분에 문자열을 복붙해서 넣음. 📌 후기 다른 문제(10171번, 10172번)의 숏코딩에서 본 것을 활용함. 이전에는 \를 사용하는 방법으로 출력했는..

✅문제: 1000번 1000번: A+B 두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오. www.acmicpc.net 📌개념정리 (1) 문자열.split() 정의: 문자열을 일정한 규칙으로 잘라서 리스트로 만들어 주는 함수 📌문제풀이 a = int(input()) b = int(input()) print(a+b) 처음 작성한 코드. 파이썬 문법을 오랜만에 작성해서 기초적인 부분을 틀렸음. 런타임 에러가 발생함. 문자열로 구분해서 입력받아야 했고, 입력받은 문자를 int형으로 바꾸어줘야 됨. a,b = input().split() print(int(a)+int(b)) 위 코드로 실행하니 맞았습니다! 📌후기 오랜만에 백준 문제를 풀어서 쉬운 문제도 어색하게 느껴짐... 공부는 계속..

✅문제: 15483번 15483번: 최소 편집 첫째 줄과 둘째 줄에 두 문자열이 주어진다. 문자열은 알파벳 소문자로만 이루어져 있으며, 최대 1000글자로 이루어져 있다. www.acmicpc.net 📌개념정리 (1) Dynamic Programming (동적 프로그래밍) 정의: 하나의 큰 문제를 여러 개의 작은 문제로 나누어서 그 결과를 저장하여 다시 큰 문제를 해결할 때 사용하는 것 (2) Levenshtein Distance (편집 거리 알고리즘) 정의: 두 문자열의 유사도를 판단하는 알고리즘 기준: 삽입, 삭제, 교체 (3) 이중 포인터와 동적 다차원 배열 이중 포인터: int에 대한 포인터를 가리키는 포인터는 두 개의 별표(**)를 사용하여 선언함 동적으로 2차원 배열을 할당할 때 이중 포인터가..

목차⭐요약최근 보안에 흥미가 생겼음. 하지만 어떻게 공부해야 할지 모르겠고, 막막해서 모의체험을 해보기로 결정함. (with. 구글링)WEB HACKING [100] - EatCookieDescriptioneat cookiehttp://apcce2020.cstec.kr:5001 2022 사이버공격방어대회 CCE 모의체험첫 번째 문제는 쿠키 문제임. 쿠키란?▷ 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 사용자의 웹 브라우저를 통해 인터넷 사용자의 컴퓨터나 다른 기기에 설치되는 작은 기록 정보 파일▷ 쿠키, 웹 쿠키, 브라우저 쿠키라고도 한다. 이 기록 파일에 담긴 정보는 인터넷 사용자가 같은 웹사이트를 방문할 때마다 읽히고 수시로 새로운 정보로 바뀐다.▷ ..