인공지능 개발자 수다

1. 개요CSS Flexbox(Flexible Box)는 1차원 방향(가로 또는 세로)으로 요소를 배치하고 정렬할 수 있게 해주는 레이아웃 시스템이다.Next.js로 웹 UI를 구성할 때도 가장 많이 사용되는 방식이며, 기존의 float이나 inline-block 방식보다 훨씬 직관적이다.이 글에서는 Flexbox의 핵심 속성과 쓰임새를 예제와 함께 정리한다. flexbox는 다음과 같은 경우에 주로 사용한다.버튼 옆에 아이콘네비게이션 바카드 목록 (가로/세로 정렬)텍스트 + 이미지 한 줄 배치 block은 다음과 같은 경우 사용한다.단락 구분, 제목/본문 2. 내용2.1. display: flex의 기본 구조Flexbox는 부모 요소에 display: flex를 선언하면 작동한다.부모는 컨테이너, 자식..

1. 개요CSS에서 모든 HTML 요소는 하나의 사각형 박스(Box)로 표현된다.이 박스는 요소의 실제 크기와 위치, 여백을 결정하며, 웹페이지의 전체 레이아웃을 구성하는 가장 기본적인 단위이다.이 글에서는 CSS 박스 모델의 구성 요소와 display 속성의 차이를 통해 레이아웃의 핵심 개념을 이해한다. 주로 div, section, article 에서 가장 많이 사용된다. 2. 내용2.1. 박스 모델(Box Model)의 구성 요소CSS 박스 모델은 다음과 같이 4개의 영역으로 구성된다.width / height : 내용(content)의 크기padding : 내용과 테두리 사이의 내부 여백border : 요소를 감싸는 테두리margin : 요소 바깥의 외부 여백 (다른 요소와의 거리)+-------..

1. 개요이 글에서는 CSS가 무엇인지, 어떤 방식으로 스타일을 적용할 수 있는지, 그리고 실제로 HTML 요소에 스타일을 적용할 수 있는 다양한 선택자들을 정리한다. 간단한 실습을 통해 CSS의 핵심 원리를 직접 확인할 수 있도록 구성했다. 이번 포스팅에서는 CSS의 기본 구조와 선택자 에 대해 공부해 보자. 2. 내용2.1. CCS란 무엇인가CSS (Cascading Style Sheets)는 HTML 요소의 시각적 표현을 담당하는 스타일 언어이다.HTML이 웹페이지의 구조를 담당한다면, CSS는 그 구조에 디자인을 입히는 역할을 한다. 대표적인 기능글꼴 크기, 색상 지정박스 크기 및 여백 조정화면 위치 조절애니메이션 등 시각 효과 부여 2.2. 스타일 적용 방법Inline 방식요소 안에 style ..

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

1. 개요단순히 페이지를 표시하는 것을 넘어서, 각 요소가 어떤 역할을 하는지 ‘의미’를 담아 표현하는 것시맨틱 태그는 페이지를 구성하는 각 영역에 명확한 의미를 부여하여, 코드의 구조를 더욱 이해하기 쉽게 만들고,검색엔진이나 보조 기술(스크린리더 등)이 콘텐츠를 잘 이해할 수 있도록 돕는다. 시멘틱 태그의 장점가독성 향상: 대신 나의 블로그 홈 글 목록 소개 첫 번째 게시글 이것은 첫 번째 글의 본문입니다. 최근 댓글 좋은 글이네요! 많은 도움이 되었습니다. 추천 글 HTML 기초 ..

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. 개요보를 나열하거나 정리된 표 형태로 보여줘야 할 상황에 사용 2. 내용2.1. 리스트 태그설명는 반드시 또는 안에서만 사용해야 한다.은 용어집, 설명서 등에서 유용하다. 태그 종류종류태그설명순서 없는 목록점(dot)으로 나열순서 있는 목록숫자 또는 문자로 순서가 매겨짐정의형 목록용어와 설명 쌍으로 구성됨 예시 코드 HTML CSS JavaScript 로그인 상품 검색 결제 HTML 웹 페이지의 구조를 담당하는 마크업 언어 CSS 웹 페이지의 디자인을 담당하는 스타일 시트 언어 실행 결과 2.2. 테이블 태그태그 설명 : 테이블 정의 : 하나의 행 : 헤더 정의 : 데이터 기본 구조 이름 나이 직업 홍길동 30 개발자 김영..

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..