본문 바로가기

전체 글34

[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고 | Grid System 오늘은 수업 시간에 다룬 부트스트랩(Bootstrap)의 grid system에 대해 소개해 보려 합니다. 먼저 부트스트랩에 대해서 소개하자면, html, css, js 등을 이용해 간단하게 웹페이지를 구성할 수 있는 여러 요소들을 미리 디자인해놓은 사이트입니다. 위의 왼쪽 이미지와 같이 코드를 붙여 넣어 여러 종류의 버튼을 구현할 수도 있고, card list를 생성할 수도 있습니다. 물론 html 내의 head 태그 내에 Bootstrap의 이 소스를 활용할 수 있도록 연결해주는 CDN 코드를 붙여 넣어야 합니다. 해당 CDN link는 아래에서 확인할 수 있습니다. https://getbootstrap.com/docs/5.3/getting-started/introduction/ Get started.. 2023. 8. 7.
[새싹x코딩온] 웹 개발자 부트캠프 과정 3주차 회고 | DOM js & jquery 1. DOM(Document Object Model) - 문서 객체 모델 이 DOM은 HTML 문서에 접근하기 위한 일종의 인터페이스로 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. 그림으로 설명해보자면 다음과 같이 html의 document를 이루는 요소들을 접근하는 방법이라고 할 수 있다. 2. DOM 명령어 사용 const div1 = document.getElementById('div1'); const div1 = document.querySelector('#div1'); const div1 = $('#div1'); 위와 같이 div1에 div1이라는 id를 가진 요소를 지정해 줄 수 있다. 줄1은 get ElementById를, 줄 2는 querySelector를 이.. 2023. 8. 4.
[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고 | 자료형에 따른 pass 1) Primitive 자료형: Pass by Value 우선, Primitive 자료형에는 Boolean(true, false), Number(숫자 및 NaN), String(문자), Null(빈 값), Undefined(타입도 값도 없는 상태)가 있다. 이런 원시 타입(Primitive Type)에는 값(value)이 복사되어 전달된다. 코드로 보면 다음과 같다. let num = 1; let num2 = num; console.log(num, num2); //1 1 console.log(num === num2); //true num = 5; console.log(num, num2); //5 1 console.log(num === n.. 2023. 7. 29.
[새싹x코딩온] 웹 개발자 부트캠프 과정 2주차 회고 | CSS - flex 오늘은 CSS의 display 속성에서 배치를 결정하는 Flex에 대해서 소개해보려 한다. 화면 레이아웃을 구성할 때 많이 사용한다. 그럼 Flex란 무엇이고 왜 필요할까? 예를 들어 웹사이트에 여러 콘텐츠를 배치한다고 하자. 인프런 사이트를 예시로 가져와보면 다음과 같다. '왕초보도 할 수 있어요'를 header라 하는데, 개발자 도구 내에서 flex 속성을 바꿔보면 가운데로 오게 할 수 있다. 이렇듯 각각의 요소들의 배치를 보기 좋게 만드는데 적극적으로 사용될 수 있다. 극단적으로 비유해 보자면 문서 작업 시의 가운데 정렬, 왼쪽 정렬 등과 같은 느낌이다. 1. Flex 속성 적용을 위한 개념 먼저 flex 속성을 사용하기 위해서는 몇 가지 개념을 알아야 한다. 1) flex-container fle.. 2023. 7. 25.

티스토리툴바