본문 바로가기

분류 전체보기292

폰트, 텍스트 스타일링 및 목록과 표 스타일 1. 폰트 관련 속성1.1 font-family용도: 텍스트의 글꼴을 지정하는 속성.여러 폰트를 나열하여 브라우저가 해당 폰트가 없을 경우 순차적으로 대체 폰트를 사용할 수 있게 합니다.예시:body { font-family: 'Roboto', 'Arial', sans-serif;}위 예시에서 Roboto 폰트가 없으면, Arial이 적용되고, 그마저 없으면 기본 sans-serif 폰트가 적용됩니다.1.2 font-size용도: 텍스트의 크기를 지정하는 속성.단위는 px, %, em, rem 등이 있습니다.예시:p { font-size: 16px;}1.3 font-style용도: 텍스트의 스타일을 지정합니다. 주로 기울임꼴(italic)을 설정할 때 사용됩니다.예시:em { font-style: .. 2024. 10. 2.
CSS의 기본 스타일링 규칙 CSS 스타일 적용 방법인라인 스타일 (Inline Style)개별 HTML 요소에 직접 스타일을 지정하는 방식입니다.가장 높은 우선순위를 가집니다.HTML 태그에 style 속성을 사용해 정의합니다.인라인 스타일내부 스타일 시트 (Internal Style Sheet)HTML 문서 내의 외부 스타일 시트 (External Style Sheet)스타일 규칙을 별도의 CSS 파일로 작성하고, 이를 HTML 문서에서 태그를 사용해 연결하는 방식입니다.재사용성이 높고 여러 페이지에서 같은 스타일을 적용할 수 있습니다.CSS 선택자 종류전체 선택자 (*)모든 HTML 요소에 스타일을 적용합니다.* { margin: 0; padding: 0;}타입 선택자 (Type Selector)특정 HTML 태그(요소).. 2024. 10. 2.
2024.10.02(수) { HTTP패킷, 톰캣 사용하는 이유, 클라이언트 종류와 역할, 💡 HTTP 패킷의 구조HTTP 요청과 응답 모두 **헤더(Header)**와 **페이로드(Payload)**로 구성됩니다.헤더(Header): 요청/응답의 메타 데이터를 포함합니다. (예: 요청의 메서드, 응답의 상태 코드, 콘텐츠 타입 등)페이로드(Payload): 전송하고자 하는 실제 데이터를 포함합니다.요약HTTP Request Payload: 클라이언트가 서버로 보내는 데이터 (POST, PUT, PATCH 요청에 주로 포함됨).HTTP Response Payload: 서버가 클라이언트로 보내는 데이터 (응답 데이터).💡 Tomcat을 사용하는 이유안정적인 TCP 통신 지원:Tomcat은 **웹 애플리케이션 서버(WAS)**로서, 클라이언트(브라우저 등)와 서버 간의 안정적인 TCP 통신을 .. 2024. 10. 2.
HTML 폼 태그 1. 태그HTML에서 태그는 사용자 입력을 서버로 전송하는 양식을 정의합니다.주요 속성:method: 데이터를 전송할 HTTP 메서드.GET: URL에 데이터를 포함하여 전송.POST: 데이터를 본문에 포함하여 전송.action: 데이터를 전송할 서버의 URL을 지정합니다.name: 폼의 이름을 지정하며, 서버에서 폼 데이터를 구분할 때 사용됩니다.target: 폼 데이터를 전송한 후 응답을 표시할 위치를 지정합니다._self: 같은 탭에서 응답을 표시 (기본값)._blank: 새 탭에서 응답을 표시.autocomplete: 자동 완성 기능을 활성화하거나 비활성화.on: 자동 완성 기능 활성화.off: 자동 완성 기능 비활성화.2. 태그와 태그: 여러 입력 요소를 그룹화할 때 사용합니다.: 그룹의.. 2024. 10. 2.
시맨틱 태그 (+ 테이블 생성, 합치기) 시맨틱 태그(Semantic Tags)는 HTML5에서 도입된 태그들로, 요소의 의미를 명확하게 설명해주는 태그들입니다. 즉, 단순히 레이아웃을 구성하는 역할을 넘어, 태그 자체가 그 내용의 의미를 나타내는 기능을 합니다.시맨틱 태그를 사용하는 이유코드 가독성: 시맨틱 태그는 코드의 의미를 명확히 표현해주므로, 개발자나 유지보수자가 코드를 읽을 때 쉽게 이해할 수 있습니다. 예를 들어, div 태그 대신 header, footer 등을 사용하면, 해당 부분이 어떤 역할을 하는지 명확히 알 수 있습니다.SEO(Search Engine Optimization): 검색 엔진은 시맨틱 태그를 통해 웹 페이지의 구조를 더 잘 이해할 수 있습니다. **검색 엔진 최적화(SEO)**에 유리하게 작용하며, 웹 페이지가.. 2024. 10. 2.
쿠키, 세션, JSON 웹 토큰(JWT) 1. 쿠키(Cookie)쿠키는 클라이언트(브라우저)에 저장되는 작은 데이터 조각으로, 서버가 클라이언트의 상태 정보를 기억하기 위해 사용합니다. 주로 서버가 클라이언트에게 응답할 때, 클라이언트에게 쿠키를 설정해 두면 이후 클라이언트가 서버에 요청을 보낼 때 쿠키를 자동으로 포함하게 됩니다.용도: 로그인 상태 유지, 세션 ID 저장, 사용자 선호 설정 등을 저장.특징: 클라이언트 측에 저장되며, 요청 시마다 서버로 자동 전송됨.단점: 클라이언트 측에 저장되므로 보안에 취약할 수 있음.2. 세션(Session)세션은 서버 측에서 유지되는 사용자 상태 정보입니다. 사용자가 서버에 로그인하면 서버가 세션을 생성하고, 클라이언트는 세션 ID를 쿠키에 저장하여 요청 시마다 이 세션 ID를 서버로 전송합니다. 서버.. 2024. 9. 30.

티스토리툴바