레이아웃 구성 요소를 공간에 효과적으로 배열하는 일 (웹 요소를 올바른 장소에 배치하는 기술) -일반적 문서 흐름, display속성, 플렉스박스, 그리드 레이아웃, float속성, position속성 플렉스박스 행, 열을 주축으로 하여 웹 요소를 배치,정렬하는 1차원 레이아웃 방식 플렉스 컨테이너: 플렉스박스 방식으로 레이아웃을 결정할 요소 플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소 display:flex; *주축의 기본값은 가로방향임* class명 뒤에 띄어쓰기 하고 flex해도 됨 플렉스박스 레이아웃 *{ box-sizing: border-box; } body{ margin: 0; } ul{ display: flex; padding: 0; list-style-type..
분류 전체보기
openAI의 ChatGPT를 평소 자주 사용하는 메신저에서도 만날 수 있다면 ..? 의 안내를 따라 AWS를 활용해 텔레그램 챗봇을 만들어 보았다.아마존 웹 서비스(AWS)란?아마존에서 제공하는 클라우딩 컴퓨팅 플랫폼으로, 아마존에서 컴퓨터를 유료로 대여해 주고 직접 컴퓨터를 동작까지 시켜주는 서비스이다. 간단한 챗봇 결과물을 만들기 위해 AWS람다와 AWS API게이트웨이를 사용해 보았다.AWS 람다: 메시지 정보를 받으면 API를 통해 챗GPT에 작업을 요청한다.AWS API게이트웨이: 텔레그램 서버와 AWS 람다 함수를 연결해 주는 연결고리 역할 실습에 앞서 openAI 서버와 연결할 수 있는 openAI의 API키와텔레그램의 botfather로부터 얻어낸 나만의 봇토큰이 필요하다.*봇 토큰과 A..
변형 요소의 크기나 위치를 바꾸는 것(요소의 x축과 y축을 기준으로 함) transform 속성: 좌표 평면 상에서 각 축의 값을 변경 transition: 스타일 속성을 완전히 다른 스타일로 변형 가능. 다양한 애니메이션 효과. 실행 시간, 방벙 등 변환 가능함 transition 속성: property duration delay timing-function transition에 의한 변화 실행될 때는 실행 시간을 지정해 원하는 시간 동안 변화가 이어나게 할 수 있음 .parent{ display: inline-block; margin: 0 20px; } .child{ width:150px; height: 150px; background-color: teal; } .parent:nth-child(1) ..
블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다 인라인 요소: 자기에게 필요한 만큼만 사용 display속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의함 p{ display: block; width:100px; height:100px; /*display가 inline일 때에는 width와 height가 적용 안됨*/ /*display: inline*/ /*옆으로 늘어질 때에는 inline-block*/ } display:none이면 화면에 아무것도 표시되지 않지만 태그 달아주면 그 부분만 화면에 나타나게 됨 문서의 흐름 웹 요소들이 화면에 표시되는 순서는 기본적으로 html 문서 내에서 태그가 쓰여진 순서 따름 CSS의 float 속성: 문서의 흐름에서 제외시킨..
CSS: 캐스캐이딩 스타일시트 cascading: 폭포같은, 계속되는, 연속적인 style: 멋을 내다 Sheet: (종이나 문서)한 장 -> 연속적으로 스타일을 정의하는 문서 css코드는 다수의 '스타일 선언문'으로 구성된다 선택자{ 속성명: 속성값; } css 주석: /*주석의 내용*/ html 주석: *css3: 최신 웹 표준 버전* css는 독립적으로 존재하면 하나의 텍스트 문서에 불과할 뿐 html문서에 css 적용하는 방식 인라인 스타일: 태그에 직접 기술하기-되도록 사용 자제 안에 직접 작성 스타일 태그: 스타일시트를 위한 태그를 추가하여 기술하기 문서 간의 연결: 스타일시트 문서를 따로 작성하여 html 문서와 연결하기 .css인 스타일시트 생성 후 *인라인 스타일이 우선적으로 적용되고 스..
링크 현재 문서에서 다른 문서로 이동할 수 있는 수단 a태그 다른 페이지, 전화번호, 이메일 주소 등 다양한 유형의 콘텐츠로 연결되는 링크 역할을 함 타겟 특성을 추가하면 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정 가능 네이버로 가볼게요 네이버로 가볼게요 내가 만든 프로필로 이동 목록 연관 있는 항목들을 나열한 것 html 목록은 '순서 없는 목록'과 '순서 있는 목록'으로 구분 순서 없는 목록 : 순서 있는 목록 : 목록에 들어가는 항목 하나하나 표기(감싸는 태그에 따라 기호가 달라짐) 강아지 고양이 거북이 배고파 졸려 행복해 반려동물들의 특징 강아지 귀엽다 표 만들기 하나의 표 나타내는 태그 하나의 행 행 안에서 제목에 해당하는 셀 행 안에서 콘텐츠에 해당하는 셀 태그의 안쪽에..
HTML과 CSS 이용해 웹 페이지를 만들고, 완성된 웹 페이지는 다른 페이지와 묶여 하나의 웹 사이트를 만들어 냄 HTML: 하이퍼텍스트 마크업 랭귀지 => 하이퍼텍스트와 콘텐츠를 표시해주는 언어 HTML 코드를 웹 브라우저가 해석(렌더링)하는 과정 거친 후 화면에 표시되게 됨 가장 최신 버전의 HTML -> HTML5(현재의 웹 개발 표준) HTML 문서는 1.편집기(코드) 2.웹 브라우저(웹사이트) 두 가지 방식으로 모두 OPEN 가능 시작 준비 1. 웹브라우저 크롬 사용 2. VScode 사용 VScode에 코드 작성 후 .html file chrome에 drag and drop 하면 웹 브라우저 열린다 + 더욱 편리한 사용을 위해....live server VScode 내에서 설치하기 -> 버튼..
김준성,브라이스 유,안상준 지음(위키북스) 위키북스의 '챗 GPT API 활용법 서포터즈'의 활동비 지원을 통해 구매한 도서입니다 소프트웨어 전공생이지만 제대로된 결과물을 구현해 본 적이 없어 프로젝트에 갈증을 느끼던 찰나.. 이 책을 읽게 된 것은 정말 행운이라고 생각한다. 책에서 알려주는 대로 따라가면 원하는 결과물을 내놓을 수 있어 활용하기 좋은 책이기 때문이다. ChatGPT를 통해 누구나 쉽게 인공지능과 대화를 할 수 있는 세상이 도래하며 간단한 코딩 절차를 통해 나만의 대화형 인공지능 서비스를 구현할 수 있게 되었다. 그러나 전문가가 아닌 이상 선뜻 도전해보기에는 막막하기만 한데, 이때 도움을 받기에 적절한 책이다. 1장에서는 ChatGPT를 활용할 수 있는 소소한 팁들을, 2~5장에서는 Ch..
