웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS9

• 9. 동작반응 1. 동작반응 1-1. 의사 클래스 CSS 선택자에 추가할 수 있는 키워드로 선택한 요소가 어떤 상태에 머무르거나 어떤 조건을 만족할 때 스타일을 적용하기 위해 사용된다. 웹 요소의 특정 상태나 동작에 따라 스타일을 변경하는데 유용하게 활용된다. 1-1-1. 기본의사 클래스 - :hover : 요소에 마우스 포인터를 올렸을 때의 상태를 나타낸다. - :active : 요소가 활성화된(클릭한) 상태를 나타낸다. - :focus : 요소에 초점이 맞춰진 상태를 나타낸다. 1-1-2. 링크 관련 의사 클래스 링크 요소인 태그와 관련된 의사 클래스는 주로 아래와 같이 사용된다. - :link : 방문하지 않은 링크를 나타낸다. - :visited : 이미 방문한 링크를 나타낸다. - :hover : 링크에 마우.. 웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS 2024. 1. 31.

• 8.CSS_활용 1. 문서의 흐름 HTML과 CSS를 사용하여 웹 페이지를 구성하고 디자인하는 데 주요한 요소이다. HTML 문서의 구조와 요소들의 순서는 웹 페이지의 표시 순서와 관련이 있으며, CSS를 통해 스타일과 레이아웃을 조정하여 웹페이지를 랜더링 할 수 있다. 텍스트, 이미지, 입력 필드 등의 요소들은 흐름 안에서 웹 페이지에 표시되며, 부동(floating)과 클리어(clear) 속성을 사용하여 요소의 위치와 배치를 조절할 수 있다. 1) HTML 문서에는 텍스트, 이미지, 입력 필드 등의 요소가 포함된다. 2) 웹 브라우저는 HTML 문서를 읽고, 요소들을 화면에 표시(렌더링)한다. 3) 요소들은 HTML 문서에서 나타난 순서대로 화면에 나타나며, 텍스트를 왼쪽에서 오른쪽, 위에서 아래로 흐르는 방식으로 .. 웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS 2024. 1. 26.

• 

  7. Text 1. Text 텍스트 스타일링은 웹 페이지에서 텍스트의 가독성을 향상하고 시각적인 효과를 주는 데 중요한 역할을 한다. 1-1. 글꼴 1-1-1. 글꼴 선택(font-family) font-family 속성은 웹페이지에서 텍스트에 사용할 글꼴을 정의할 때 사용하는 속성이다. 여러 글꼴을 우선순위대로 지정할 수 있으며, 브라우저는 사용자의 시스템에 해당 글꼴이 없을 때 다음 글꼴로 대처한다. p { font-family: Arial, Helvetica, sans-serif; } 1-1-2. 웹 폰트 사용 사용자의 컴퓨터 시스템에 글꼴이 설치되지 않았더라도 웹 서버로부터 글꼴을 제공받아 사용할 수 있는 웹 전용 글꼴이다. 웹 폰트를 사용함으로써 시스템 글꼴의 문제를 회피할 수 있다. 웹 폰트 적용 방법 1).. 웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS 2024. 1. 22.

• 

  6. CSS_Box Model 1. Box Model 1-1. 박스 모델 CSS에서 요소의 크기와 레이 아웃을 관리하기 위한 중요한 개념이다. 브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간이며, 웹 요소들은 이 공간에서 개별적으로 너비와 높이를 가진다. 이러한 웹 요소들은 이 공간에서 개별적으로 너비와 높이를 가진다. 이러한 웹 요소들은 박스 모델을 기반으로 표현되며, 박스 모델은 이러한 박스를 네 가지 주요 세부 영역으로 분할하여 디자인을 관리하는 모델이다 1) 콘텐츠 영역(Content Area) - 콘텐츠 영역은 요소 내에 포함된 실제 콘텐츠를 표시하는 영역이다. - 너비와 높이를 조절하여 콘텐츠의 크기를 결정할 수 있다. - 관련 속성 : width와 height 2) 안쪽 여백(Padding) - 안쪽 여백은 콘텐츠.. 웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS 2024. 1. 21.

• 5. CSS (Cascading Style Sheets) 1. CSS? CSS(casecading Style Sheets)는 웹 문서의 스타일을 정의하는 언어로, HTML 문서의 내용을 꾸며주는 역할을 한다. CSS는 웹 페이지의 디자인, 레이아웃 및 시각적 표현을 제어한다. 1-1 CSS의 기본 구조 - 선택자(Selector) : 스타일을 적용할 HTML 요소`를 선택한다. 선택자는 HTML 요소의 이름, 클래스, ID 등으로 지정할 수 있다. - 스타일 속성(Style Property) : 스타일을 정의할 특성을 나타낸다. ex) 글자색, 배경색, 폰트크기 - 스타일 속성 값(Style Property Value) : 스타일 속성 값을 지정한다. ex) 글자색을 지정할 때는 'red' 또는 '#FF000000' 선택자 { 스타일 속성: 스타일 속성 값; .. 웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS 2024. 1. 21.

• 4. HTML 멀티미디어 1. HTML Video (비디오 파일 형식) 1-1. MP4 (.mp4) Moving Picture Experts Group에 의해 개발되었으며, 고품질의 영상 및 음성을 적은 용량으로 저장할 수 있는 파일 형식이다. 인터넷 스트리밍에 자주 사용된다. 1-2. WebM (.webm) 구글의 지원으로 개발된 개방형 공개 멀티미디어 파일 형식이다. 비디오 코덱으로 VP8을 사용하고, 오디오 코덱으로는 Vorbis를 사용한다. 웹에서 널리 지원된다. 1-3. OGV (.ogv) xip 재단에 의해 개발되었으며, 특허권으로 보호되지 않는 개방형 공개 멀티미디어 파일 형식이다. MP3의 대안으로 사용되며, 고품질 비디오를 지원한다. htmlCopy code Your browser does not support .. 웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS 2024. 1. 21.

• 3. HTML Input 1. HTML FORM HTML 태그를 사용하면 웹 페이지에서 사용자로부터 데이터를 입력받을 수 있으며, 이 데이터를 서버로 전송할 수 있다. 1-1. 태그의 주요 속성 - action : 입력된 데이터를 처리할 서버 페이지의 URL을 지정한다. 이 URL은 데이터를 전송할 곳을 가리킨다. - method : 입력된 데이터를 서버에 전달하는 방식을 지정한다. * GET : 입력된 데이터를 URL에 포함하여 서버에 전송한다. 주로 데이터 양이 적거나 데이터가 검색 쿼리와 관련된 경우 사용된다. * POST : 입력된 데이터를 별도로 첨부하여 서버에 전송한다. 주로 데이터 양이 많거나 보안이 필요한 경우에 사용한다. 이름: 이메일: 사용자로부터 이름과 이메일 주소를 입력받고, "제출" 버튼을 클릭하면 정보를.. 웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS 2024. 1. 20.

• 

  2. HTML Block 과 Inline 1. HTML Block과 Inline 블록(block) 형태와 인라인(inline) 형태의 태그들은 웹 페이지의 레이아웃과 콘텐츠의 표시 방식을 결정하는 핵심적인 역할을 한다. 1-1. 블록(Block) 형태 - 새 줄에서 시작 : 블록 요소는 항상 새로운 줄에서 시작한다. - 너비 : 기본적으로 부모 요소의 전체 너비를 차지한다. - 사용 예 : , , , , , , , , , header 부분이다. nav 부분이다. aside 부분이다. section1 부분이다 article1 부분이다 section2 부분이다 article2 부분이다 footer 부분이다. 웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS 2024. 1. 17.

• 

  1. HTML Basic 1. HTML의 기본구조 1-1. HTML? HTML(Hyper Text Markup Language)는 웹 페이지를 만들기 위한 표준 마크업 언어이다. 웹 브라우저가 문서를 표시하는데 사용되며, HTML 문서는 요소(element)와 속성(attribute)으로 이루어져 있다. 1-2. HTML 문서의 기본 형태 : HTML 문서의 버전을 지정하는 선언 : HTML 문서의 시작을 나타낸다. : 문서의 메타 데이터와 링크, 스타일, 스크립트 등을 정의한다. : 문서의 제목을 정의한다. : 실제 내용을 담고 있는 부분이다. 2. HTML의 기본태그 2-1. Tag HTML 문서의 기본 구성 요소를 나타내며, 시작 태그()와 종료 태그()로 이루어져 있다. 2-2. Heading(제목) 제목은 웹페이지의 중.. 웹 서비스 개발(FB,BE,SERVER,DB)/HTML & CSS 2024. 1. 17.