본문 바로가기

전체 글27

[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고 | CSS - flex 오늘은 CSS의 display 속성에서 배치를 결정하는 Flex에 대해서 소개해보려 한다. 화면 레이아웃을 구성할 때 많이 사용한다. 그럼 Flex란 무엇이고 왜 필요할까? 예를 들어 웹사이트에 여러 콘텐츠를 배치한다고 하자. 인프런 사이트를 예시로 가져와보면 다음과 같다. '왕초보도 할 수 있어요'를 header라 하는데, 개발자 도구 내에서 flex 속성을 바꿔보면 가운데로 오게 할 수 있다. 이렇듯 각각의 요소들의 배치를 보기 좋게 만드는데 적극적으로 사용될 수 있다. 극단적으로 비유해 보자면 문서 작업 시의 가운데 정렬, 왼쪽 정렬 등과 같은 느낌이다. 1. Flex 속성 적용을 위한 개념 먼저 flex 속성을 사용하기 위해서는 몇 가지 개념을 알아야 한다. 1) flex-container fle.. 2023. 7. 25.
[새싹x코딩온] 웹 개발자 부트캠프 과정 1주차 회고 | html & semantic 1. HTML이란 우선 html은 hypertext markup language의 줄임말이다. 여기서 hypertext란 링크를 연결하기 위함을 뜻하고, markup은 문서나 데이터의 구조를 명기하는 것이라고 한다.(명기하다: 분명하게 밝히어 적다. 출처: 네이버 사전) 즉, 웹페이지를 연결하고 구조화하는 언어라고 볼 수 있다. 2. HTML의 기본 구조 ! + tab: html 기본 구조 자동 완성 위와 같은 단축키를 입력하면 html의 기본 구조가 나온다. 은 문서 형식을 최신 버전인 HTML5로 지정하는 것이라고 한다. 그 이후 과 안에 head와 body 구조를 갖게 된다. 이때 head와 body는 같은 수준의 들여 쓰기를 가진다. 이와 같은 들여 쓰기는 대표적인 컴퓨팅 언어의 구조로 어떤 것 .. 2023. 7. 20.
[새싹x코딩온] 웹 개발자 부트캠프 과정 1주차 회고 | 깃(Git)과 깃허브 정말 많은 부트캠프를 알아보다 드디어 정착했다. 3개월 동안 진로 변환을 위해서 개발자가 뭔지, 부트캠프가 뭔지 헤매다가 정착하여 소속감을 느끼니 살짝 안정감을 되찾았다. IT 개발자의 많은 블로그들을 헤매었을 때, 깃에 대한 언급이 많았다. 대체 깃이 뭐길래 잔디를 심지? 성실성의 척도? 포트폴리오? 먼저 개발자는 협력을 필수로 하는 직군이다. 다양하고 긴 코드들을 통해 프로그램을 구현하는데 있어서 여러 인력이 동원된다. 이런 환경에서 '누가 무엇을 언제 변경했다'에 대한 체크가 필요하다. 이러한 각각의 변경 사항을 version이라 말하자면, 이런 version 관리가 필수적인 것이다. 팀플을 할 때 파일명이 최종 > 찐최종 > 찐최종 final과 같은 것을 생각해 보면 잘 이해할 수 있을 것이다. .. 2023. 7. 18.