코드스테이츠 백엔드 4

[Publishing]HTML, CSS / 4일차 기록

pair programming - twittler 목업 구현 실습 시간에 부모 요소에 flex-box 사용과 direction 방향까지 설정했지만 원하는 대로 자식 요소가 정렬되지 않았습니다. 페어분과 할당된 시간을 모두 써서 열심히 했지만 끝내 위의 문제는 해결하지 못하고 width, height, margin, padding 등을 사용하여 정렬했습니다. 실습이 끝난 후, 전 날에 배운 내용을 블로깅하다가 왜 작동이 되지 않았는지 깨달았습니다. align-item은 축의 방향과 수직정렬, justify-content은 축의 방향과 수평정렬입니다. 따라서 flex-direction 방향이 colum인 경우, 요소들의 좌우정렬을 설정하고 싶을 때 align-item를 사용해야 하고 flex-directio..

[Publishing]HTML, CSS / 3일차 기록

페이지 레이아웃 화면을 나누는 방법 수직분할: 콘텐츠가 가로로 배치됨 수평분할: 콘텐츠가 세로로 배치됨 css로 화면을 구분할 때는 수직분할, 수평분할 순서대로 적용 Flexbox로 레이아웃 잡기 박스를 유연하게 조절 HTML은 트리구조라서 자식 요소를 변경하고 싶을 때는 부모 요소에서 설정 부모 요소에 적용하는 속성: display: flex, flex-direction(가로정렬이 기본), flex-wrap(줄 바꿈 설정), justify-content(축 수평 방향 정렬), align-items(축 수직 방향 정렬) 자식 요소에 적용하는 속성: flex 속성의 값- flex: flex-basis 속성에 0값을 주면 absolute flex item이 돼 상위 flex container를 기준으로 크기..

[Publishing]HTML, CSS / 2일차 기록

프론트엔드 개발자와 백엔드 개발자가 협업을 하기 위해서는 서로 상대방의 기본 지식을 알아야 함 https://www.w3schools.com/ 1. HTML 정의: HyperText Markup Language,웹 문서 구조를 표현하는 언어 기본 구조/문법: 태그들의 집합, html, head, body, h1,div(줄바꿈 O), span(줄바꿈 X) 시맨틱 태그 의미있는 태그 이점: 애플리케이션, 기업 및 커뮤니티에서 데이터를 공유하고 재사용 가능 ex) , , , , , 2. CSS 정의: 웹 페이지 스타일 및 레이아웃을 정의하는 스타일시트 언어 이점: 사용자에게 편의성 제공 기본적인 문법과 구조 태그이름 { 속성; } 셀렉터(id, class, attribute, 후손

[Development]기초/ 1일차 기록

컴퓨터와 프로그래밍의 이해 컴퓨터의 구성 요소 입/출력 장치, 소프트웨어(시스템, 응용), 하드웨어(CUP(제어, 연산, 레지스터), 기억장치) , 시스템버스(데이터, 주소, 제어) 기억장치 계층구조 컴퓨터 내부 동작 부팅(ROM BIOS)=> 프로그램 클릭=>프로그램을 RAM에 로드 => 프로세싱 =>데이터 저장 프로그래밍 관련 개념(프로그램, 프로그래밍, 프로그래밍 언어, 컴파일, 빌드, 통합개발환경 프로그램: 명령문의 집합 프로그래밍: 프로그램 만드는 과정 프로그래밍 언어: 사람이 이해하기 쉬운 고차원 언어 기계어 어셈블러어 프로그래밍 언어 컴파일: 빌드에 속함, 프로그래밍 언어로 짠 코드를 기계어로 번역 빌드: 소스 코드를 실행할 수 있는 .exe 또는 .msi 확장자를 가진 실행 파일로 만듬 통..