인공지능 개발자 수다

1. 개요와 은 HTML에서 의미 없는(non-semantic) **컨테이너 태그(container tags)**로,레이아웃을 나누거나 특정 부분을 그룹화할 때 사용한다. 이들은 시맨틱 정보는 없지만, CSS 또는 JavaScript와 결합하여디자인, 인터랙션, 구조 설계에 있어 핵심적인 역할을 한다. 2. 내용2.1. 태그설명는 블록 레벨 요소(block-level element)페이지의 큰 구역을 나누거나 감쌀 때 사용 특징줄바꿈이 자동으로 발생가로로 전체 너비를 차지보통 레이아웃을 구성할 때 많이 사용시맨틱한 의미는 없기 때문에 CSS로 스타일을 부여해야 함 속성 설명id : 고유 식별자로, JavaScript / CSS 에서 참조class : 스타일 또는 그룹 지정을 위한 이름, 여러개 가능st..

1. 개요웹페이지에서 사용자로부터 정보를 입력받아 처리하기 위해서는 입력 폼(form)이 필요하다.회원가입, 로그인, 검색, 결제, 문의 등 거의 모든 웹 서비스의 핵심 기능이 이 폼을 기반으로 작동한다. 2. 내용2.1. 태그설명 : input 태그에 설명을 붙여주는 태그속성 설명for : input 태그의 "id" 파라미터가 들어간다예시아이디 2.2. 태그설명 : 데이터를 입력하는 부분이다.속성 설명type : text, password, checkbox, radio, email, number, file, submit 등이 있음name : 서버로 전송하 ㄹ때 이 값을 키로 사용value : 기본 값placeholder : 입력창에서 알려주는 문구required : 필수 입력 필드로 지정disabl..

1. 개요웹페이지에서 다른 문서로 이동하거나 이미지를 보여주는 기능은 사용자의 경험을 크게 향상시킨다.이러한 기능은 HTML의 태그(하이퍼링크)와 태그(이미지 삽입)를 통해 구현할 수 있다.이번 글에서는 이 두 태그의 기본 사용법과 함께, 실전에서 유용한 다양한 활용법까지 다룬다. 2. 내용2.1. 링크 태그 기본 구조링크 텍스트href: 이동할 주소를 지정하는 필수 속성이다.target="_blank": 링크를 새 탭에서 열도록 한다.title: 링크에 마우스를 올렸을 때 나타나는 힌트(툴팁)를 지정한다.download: 파일을 다운로드하도록 만든다. 예시 코드 공식 홈페이지 이력서 다운로드 내부 링크 (문서 내 이동)문의하기문의 섹션으로 이동 2.2. 이미지 태그 기본 구조src: 이미지 경로..

1. 개요이번 시간에는주석과텍스트 관련 태그에 대해 공부해 보자2. 주석아래와 같은 형태로 주석을 사용하면코드 실행에는 적용되지 않는 메모를 할 수 있음 3. 텍스트 태그3.1. 제목 태그(Heading tags)HTML에는 제목을 표현하는 6가지 태그가 있음 ~ 형태로 작성, 숫자가 작을수록 크고 중요한 제목가장 큰 제목입니다두 번째 제목세 번째 제목네 번째 제목다섯 번째 제목가장 작은 제목 3.2. 문단 태그 ()일반적인 본문 텍스트나 설명을 쓸 때 사용이것은 하나의 문단입니다.문단은 자동으로 줄바꿈이 됩니다. 3.3. 줄바꿈 태그 ()한 줄만 바꾸고 싶을 때 사용 줄바꿈이 필요할 때는 이렇게 태그를 사용합니다. 3.4. 수평선 태그 ()내용을 구분할 때 사용하는 수평선(horizontal r..

1. HTML5 란HTML은 HyperText Markup Language의 약자현재는 버전 5를 사용웹 페이지의 구조(뼈대)를 만드는 마크업 언어텍스트, 이미지, 버튼, 링크, 폼 등 웹에 보이는 모든 요소를 태그(tag)를 사용해 정의 2. 실행 환경필자는 webstorm 에서 개발을 진행할 예정이다.JavaScript & TypeScript를 위한 IDE로비영리로는 무료로 사용 가능하며, 다양한 편의 기능을 클릭 한번으로 사용할 수 있다. WebStorm: The JavaScript and TypeScript IDE, by JetBrainsMake development more productive and enjoyable with WebStorm, the IDE for JavaScript and r..

1. 개요먼저 FastAPI에서 HTML을 사용한다는 것은,HTML에서 보여주는 내용을 동적으로 보여준다는 것이다.즉, FastAPI에서 Return한 변수를HTML에서 보여주겠다는 것이다.2. 설치먼저 jinja2를 설치해 주자# pip 설치 방법pip install jinja2# poetry 설치 방법poetry add jinja2  3. 기본적인 HTML 다루는 방법만약 프론트엔드 서버와 FastAPI가 통신한다면, 클라이언(유저)가 프론트엔드에 Request를 날리면 프론트엔드 서버에서 Json 등의 데이터를 FastAPI에 요청하는 형식으로 진행되겠지만, HTML만 이용할 때에는 클라이언트가 FastAPI에게 request를 요청하면 HTML을 반환하는 형식으로 코드를 작성하게 된다.'FastA..