웹 개발자 도전기

1. 반응형 웹 디자인반응형 웹 디자인은 다양한 기기와 화면 크기에 맞춰 웹사이트의 레이아웃과 콘텐츠를 자동으로 조정하는 접근방식입니다. 이를 통해 사용자는 PC,태블릿,스마트폰 등 어떤 기기에서도 최적화된 경험을 할 수 있습니다. 주요 특징 :유연한 그리드 레이아웃유동적인 이미지와 미디어CSS 미디어 쿼리를 통한 스타일 조정 2. 뷰포트 (Viewport)뷰포트는 웹 페이지가 표시되는 기기의 화면 영역을 의미합니다. 반응형 웹 디자인에서 뷰포트 설정은 매우 중요합니다. 뷰포트 단위 :vw (viewport width) : 뷰포트 너비의 1% vh (viewport height) : 뷰포트 높이의 1%   3. 미디어 쿼리 (Media Queries)미디어 쿼리는 CSS에서 특정 조건에 따라 스타일을 적..

CSS 레이아웃은 HTML 요소들의 배치를 의미합니다. 웹 페이지에서 요소를 어떻게 배치할 것인지 결정하는 방법으로 주요한 레이아웃 기법으로는 float , position , flexbox , grid 가 있습니다.  Float 속성을 이용한 레이아웃float 속성을 사용하여 요소를 좌측이나 우측에 배치할 수 있습니다.left 로 설정하면 요소가 왼쪽에서 순서대로 배치되고 right 로 설정하면 오른쪽에서 순서대로 배치됩니다. Position 속성을 이용한 레이아웃position 속성을 사용하면 요소를 기본적인 흐름에서 벗어나 원하는 위치에 배치할 수 있습니다.static : 기본값. 원래 위치에 배치됨relative : 원래 위치에서 이동. 원래 자리 차지.absolute : 가장 가까운 포지셔닝 조..

박스 모델은 HTML 요소가 사각형 박스 형태로 구성되어 있는 개념으로 요소를 배치하는 데 기본이 됩니다. 구성 요소 :내용 (Content) : 요소 내부의 텍스트나 이미지패딩 (Padding) : 내용과 테두리 사이의 내부 여백테두리 (Border) : 패딩과 마진 사이의 경계선마진 (Margin) : 요소의 외부 여백 블록 요소와 인라인 요소블록 요소 :한 줄을 독립적으로 차지하며 수직으로 쌓입니다.너비와 높이를 지정할 수 있습니다.예 : ` , , ` 인라인 요소 :내용에 맞춰 공간을 차지하며 수평으로 배치됩니다.너비와 높이를 지정할 수 없으며 수평 여백만 적용됩니다.예 : ` , , ` 박스 모델 구성 요소크기 설정 : width , height 속성으로 콘텐츠 영역의 크기를 지정합니다.속성..

일반적으로 부트스트랩은 자동완성이 안된다. vs code 에서 설치후 쓰면 자동완성 가능. 1. 부트스트랩 소개부트스트랩은 웹사이트를 쉽게 개발할 수 있게 도와주는 CSS 오픈 소스 프레임워크 입니다.Front-end 개발자들이 반응형 웹 디자인을 쉽게 개발할 수 있도록 미리 정의된 CSS 속성들과 JavaScript 라이브러리를 제공합니다.하나의 CSS 선택자만으로 스마트폰 , 태블릿 , 노트북 , 데스크탑 까지 다양한 기기에서 동작하는 반응형 웹 페이지를 쉽게 만들 수 있습니다.사용자가 웹사이트를 쉽게 제작 , 유지 , 보수할 수 있도록 도와줍니다.부트스트랩의 역사2011년 : 트위터 개발자 Mark Otto가 트위터 앱의 UI 개발을 정형화하기 위해 아이디어 제안2013년 : Version 3 출시..

1. CSS의 특징 캐스케이딩(Cascading)'캐스케이딩'은 CSS의 핵심 개념으로 스타일 규칙이 계단식으로 적용되고 상속된다는 의미입니다.스타일 충돌 방지를 위한 우선순위 적용부모 요소의 스타일이 자식 요소에 상속됨  CSS 스타일 우선순위CSS에서는 여러 스타일이 충돌할때 어떤 스타일을 적용할지 결정하는 우선순위가 있습니다.!important인라인 스타일아이디 스타일클래스 스타일태그 스타일같은 우선순위일 경우 나중에 작성된 스타일이 적용됩니다. 스타일 상속대부분의 스타일은 부모 요소에서 자식 요소로 상속됩니다. 단, 배경색,배경 이미지,border 등은 상속되지 않습니다.  2. CSS 단위CSS에서는 크기를 지정할 때 다양한 단위를 사용할 수 있습니다. 절대 단위px (픽셀)pt (포인트)cm ..

CSS의 핵심 개념 중 하나는 선택자입니다. 선택자를 통해 스타일을 적용할 HTML 요소를 정확하게 지정할 수 있습니다. 1. 기본 선택자전체 선택자 (*)전체 선택자는 웹 페이지의 모든 요소에 스타일을 적용합니다. 태그 선택자태그 선택자는 특정 HTML 태그를 사용한 모든 요소에 동일한 스타일을 적용합니다. 아이디 선택자 (#)아이디 선택자는 특정 id 속성을 가진 요소하나에 스타일을 적용합니다. 클래스 선택자 (.)클래스 선택자는 특정 class 속성을 가진 모든 요소에 스타일을 적용합니다. 2. 그룹 선택자여러 선택자에 동일한 스타일을 적용하고 싶을 때 사용합니다. 3. 조합 선택자자식 선택자 (>)부모 요소의 직접적인 자식 요소에만 스타일을 적용합니다. 자손(하위) 선택자 (공백)특정 요소의 모든..

CSS란 ?웹 페이지의 스타일을 정의하는 W3C 표준 스타일 언어 입니다. 웹 페이지의 구조를 담당하는 HTML과는 달리 색상, 폰트 , 레이아웃 등 디자인 요소를 제어합니다. HTML은 건물 구조를 만드는 역할을 하고 CSS는 그 건물의 인테리어를 담당하는 것 입니다. CSS의 필요성초창기 HTML에서는 스타일을 태그에 직접 정의하는 인라인 스타일 방식이 사용되었습니다. 그러나 이 방식은 HTML 구조와 스타일이 혼합되어 유지보수 및 확장성이 떨어지는 문제를 야기했습니다. 이러한 문제를 해결하기 위해 W3C는 CSS를 도입하여 웹 페이지의 구조와 디자인을 분리했습니다. 이제 CSS를 수정하는 것만으로도 웹사이트의 전체적인 디자인을 바꿀 수 있게 되었습니다. CSS의 장점유지보수 용이성 : CSS를 사용..

1. 폼 태그 ( )폼은 사용자와 상호작용하여 정보를 입력받고 서버로 전송하기 위한 양식입니다. 주요 속성 :action : 폼 데이터를 전송할 서버의 URLmethod : 전송 방식 (get 또는 post)name : 폼의 이름target : 응답을 표시할 위치autocomplete : 자동 완성 기능 (on 또는 off)  2. 레이블 태그 ( )폼 요소에 이름을 붙이는 데 사용합니다. 접근성 향상에 도움이 됩니다. 사용 방법 : 레이블명 레이블명  3. 입력 태그( )다양한 유형의 사용자 입력을 받는 데 사용됩니다. 주요 type 속성값 : text : 한 줄 텍스트 입력password : 비밀번호 입력checkbox : 다중 선택radio : 단일 선택number : 숫자 입력range : ..

HTML 기본 구조HTML 문서는 이러한 기본 구조를 가집니다 : 문서가 HTML5로 작성되었음을 브라우저에 알립니다. : HTML 문서의 루트 요소입니다. : 문서의 메타데이터를 포함합니다(제목 , 스크립트 , 스타일 등). : 브라우저 탭에 표시될 페이지 제목을 정의합니다. : 웹 페이지에 표시될 실제 내용을 포함합니다. 1. 블록 요소와 인라인 요소HTML 요소는 블록 레벨 요소와 인라인 요소로 나뉩니다블록 요소 : 새로운 줄에서 시작하며 가능한 전체 너비를 차지합니다.예 : , , ~ , , , 인라인 요소 : 줄 바꿈 없이 내용의 흐름을 유지합니다.예 : , , , ,  2. 텍스트 관련 태그 a) 제목 태그 : ~ 태그는 웹 페이지의 제목을 나타냅니다. 이 가장 중요한 제목..

HTML은 웹에서 다양한 정보를 웹 브라우저에서 이해하기 쉽게 문서화하기 위해 사용하는 마크업 언어입니다.HTML은 웹 문서의 구조와 내용을 구성하는 데 사용되며 여기에서 Hypertext는 문서와 문서를 서로 연결해 주는 링크를 의미하고 Mark-up Language는 정보를 구조적으로 표현할 수 있는 언어를 뜻합니다. HTML의 역사1991 : Tim Berners-Lee 가 HTML 1.0을 최초 발표.1993 : 최초의 그래픽 웹 브라우저 Mosaic 출시.1995 : W3C에서 HTML 2.0 표준 발표.1999 : HTML 4.0.1 발표.2001 : XHTML 1.0 발표.2014 : HTML5 발표, 현재 HTML의 표준으로 자리잡음. HTML의 주요 구성 요소태그(Tag) : HTML은 ..