분류 전체보기 170

[Django] 시작하기 / 가상환경 / project / App 생성하기

프레임워크(Framework) : 서비스 개발에 필요한 기능들을 미리 구현해서 모아 놓은 것 Framge(뼈대, 틀) + Work(일) 제공받은 도구들과 뼈대, 규약을 가지고 무언가를 만드는 일 특정 프로그램을 개발하기 위한 여러 도구들과 규약을 제공하는 것 소프트웨어 프레임워크(Software Framework) : 복잡한 문제를 해결하거나 서술하는데 사용되는 기본 개념 구조 웹 서비스 개발에 있어서 모든 것들을 하나부터 열까지 직접 개발할 필요 X 내가 만들고자 하는 logic에 집중해 개발할 수 있다. 소프트웨어의 생산성과 품질을 높힐 수 있음 Django : 서버를 구현하는 웹 프레임워크 ( python으로 작성 ) 1. Project collection of apps 앱의 집합 여러 앱 포함 가..

django 2023.03.14

[CSS] float 속성

Float 속성 지정한 요소가 Normal flow를 벗어나도록 만드는 속성 box를 왼쪽이나 오른쪽으로 이동시켜 inline 요소들이 주변을 가리게함 float : none - 기본 값 float : left - 요소를 왼쪽으로 띄운다 float - right - 요소를 오른쪽으로 띄운다 float 전후 비교 1. float 하지 않았을 때 코드 box1 box2 2. float 추가 했을 때 코드 box1 box2 -> float : left를 추가한 것 만으로 box를 왼쪽에 띄울 수 있다 !

HTML & CSS 2023.03.10

[CSS] 결합자 ( + / ~ )

+ : 형제 요소 결합자 / 인접 형제 선택자 p + p : p 다음 p일 때 속성을 적용 시켜라 ~ : 후손 선택자 / 일반 형제 선택자 특정 태그 뒤에 나오는 모든 요소들을 선택 p ~ p : p 다음에 나오는 모든 p태그를 선택 0 1 2 3 4 5 기사 6 7 8 9 p + p{ color: red; } p 다음 p 가 오면 red로 바꿔라 1 2 에서 2가 빨간색이 된걸 확인 p ~ span{ color: green; } p 다음에 나오는 모든 span을 green으로 바꿔라 span인 3과 9가 모두 초록색이 된걸 확인

HTML & CSS 2023.03.08

CSS 원칙 ( box / inline / position )

CSS 원칙1 모든 요소는 네모(box)이고, 위에서 아래로 왼쪽에서 오른쪽으로 쌓인다. Box model 모든 HTMl 요소는 box 형태 하나의 box는 content, padding, border, margin 4가지 영역으로 이루어짐 Box-sizing 기본적으로 모든 요소의 box-sizing은 content-box이다. padding을 제외한 순수 contents 영역만을 box로 지정한다. 우리가 일반적으로 box 영역을 볼 때 -> border 까지의 너비라고 생각함 box = border 사이즈로 맞추고 싶다면, box-sizing을 border-box로 설정해야한다. CSS 원칙2 display에 따라 크기와 배치가 달라진다. display 1. block : div / ui / ol ..

HTML & CSS 2023.03.08

싸피 시작하고 처음으로 쉰 주말

싸피 시작한게 엊그제 같았는데, 벌써 파이썬이 끝나고 알고리즘 까지 끝나버렸다. 문득 되돌아봤는데 .. 1월부터 싸피를 시작했더니 올해 데이트를 한적이 한번도 없는 것이다.. ( 매우 충격 ) 그래서 !!! 올해 첫 . . 주말 데이트를 했다~~ 물론 나의 사심을 채우기 위한 코엑스 여행이였지만 ㅎ 지인이 슬램덩크 돌비관 연석을 잡아줘서 남친이랑 놀러갔다왔다. ~ 남친이랑 투디남친인 서태웅 보러가기 ~ 포토티켓도 야무지게 뽑아줘야함 돌비관 특전도 야무지게 챙기기 요즘 슬램덩크 팬들한테 유행하는 그 주먹샷. 나도 했다 ㅋ 원래 코엑스가면 맨날 인도카레 먹었는데 이번엔 미국식 어쩌구 먹었다 샤이바나 가격도 괜찮고 맛있었음 ! 삶에 여유가 생기면. . 이렇게 일상글도 계속 남겨보고 싶다! 오늘 첨으로 웹내용했..

공부일지 2023.03.07

[CSS] 선택자 ( nth-child / nth-of-type )

CSS 선택자 P:nth-child(K) : K 번째 자식이 P 타입 이라면 선택 P:nth-of-type(K) : P 타입의 K 번째 자식에게 적용 어떻게 선택 될까? 첫번째 단락 두번째 단락 세번째 단락 네번째 단락 #hphk > p:nth-child(2) { color: blue;} #hphk의 2번째 자식이 p라면 선택 -> 파랑색으로 #hphk > p:nth-of-type(2) { color: red;} #hphk의 p타입의 2번째 자식을 선택 -> 빨강색으로 nth-child를 nth-of-type으로 바꾼다면? 어떻게 선택 될까? 첫번째 단락 두번째 단락 세번째 단락 네번째 단락 #hphk > p:nth-child(2) { color: blue; } #hphk > p:nth-of-type(2..

HTML & CSS 2023.03.07

[HTML] form 만들기 ( label / input )

HTML input요소의 name과 id 속성 HTML input 요소의 name 속성은 서버로 전송되는 데이터의 이름(key)를 나타낸다. 이를 통해 서버에서는 클라이언트에서 전송한 데이터를 처리할 때, 해당 데이터의 이름을 key로 사용하여 데이터를 가져오거나 저장할 수 있다. id 속성은 요소를 식별할 수 있는 유일한 이름을 제공한다. 이를 통해 CSS와 JavaScript에서 해당 요소에 대한 스타일 및 동작을 지정할 수 있다. id 속성은 전체 문서에서 유일해야함 !! 중복 XX Label : HTML에서 label 요소는 사용자의 인터페이스 항목의 설명을 나타낸다. input 요소와 함께 사용하기 Input 요소와 label을 함께 사용하여 이를 클릭하면 해당 label 입력 요소가 선택 된다..

HTML & CSS 2023.03.07

CSS 기본 정리 ( 선택자 / 적용 우선 순위 / 상속 )

CSS : 스타일을 지정하기 위한 언어 CSS 구분은 선택자를 통해 스타일을 지정할 HTML 요소를 선택한 후, 중괄호 안에서 속성과 값, 하나의 쌍으로 이루어진 선언을 진행한다. 각 쌍은 선택한 요소의 속성과 속성에 부여할 값을 의미한다. 속성(Property) : 어떤 스타일을 변경할지 결정한다. ( ex 폰트 ) 값(Value) : 어떻게 스타일 기능을 변경할지 결정한다. ( ex 폰트크기 ) CSS 선택자(Selector) 유형 1. 기본 선택자 : * 전체 선택자, 요소 선택자, class 선택자, id 선택자, 속성 선택자 요소 선택자 : HTML 태그를 직접 선택 class 선택자 : 마침표(.)로 시작, 해당 클래스가 적용된 항목을 선택 id 선택자 : # 문자로 시작, 해당 아이디가 적용..

HTML & CSS 2023.03.07

HTML 기본 정리 ( 구조 / 요소 / 속성 / Global Attribute )

HTML ( Hyper Text Markup Language ) - 웹 페이지를 작성하기 위한 언어 1. Hyper Text : HyperLink를 통해 텍스트를 이동 -> 클릭을 통해 자유롭게 이동할 수 있다. 비 선형적으로 이루어짐 2. Markup Language : 태그 등을 이용하여 문서나 데이터의 구조를 명시하는 언어 HTML 기본 구조 1. HTML : 문서의 최상위 요소 2. HEAD : 문서 메타데이터 요소 -> 일반적으로 브라우저에 나타나지 않는 내용이 있다. : 브라우저 상단 타이틀 : 외부 리소스 연결 요소 : CSS를 직접 작성하는 곳 3. BODY : 문서 본문 요소 -> 실제 화면에 보이는 것과 관련된 내용 HTML 요소(element) contents 여는태그 + 내용 + 닫..

HTML & CSS 2023.03.07

[SWEA] 1860 진기의 최고급 붕어빵

https://swexpertacademy.com/main/code/problem/problemDetail.do?contestProbId=AV5LsaaqDzYDFAXc SW Expert Academy SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요! swexpertacademy.com 처음에 푼 풀이 도착시간 // 제조시간*붕어빵 = 총 붕어빵 수 1. 도착 시간이 제조시간 보다 빠르면 NO 2. 총 붕어빵 수 -1 씩 해서 붕어빵 수가 음수면 Impossible / 아니면 Possible 이렇게 2가지 생각하고 풀었는데, Test Case가 1000개중 997개만 맞았다. 왜그럴까 했는데 붕어빵을 95초에 1개씩 만들고, 145 - 200 - 225 이렇게 오면 200초에 2개..

SWEA 2023.03.03