본문 바로가기

프로그래밍245

[CSS 핵심강좌] 3. 박스모델 CSS Box Model은 HTML 요소에 대해 생성되는 사각형 상자를 설명하는 웹 디자인에서 근본적인 개념입니다. 각 상자는 콘텐츠, 패딩, 테두리 및 마진으로 구성됩니다. 콘텐츠(Content): 실제 요소 콘텐츠(텍스트, 이미지 등)가 들어가는 영역입니다. 패딩(Padding): 콘텐츠를 감싸며 콘텐츠와 경계 사이의 공간을 제공합니다. 패딩은 투명하며 padding 속성을 사용하여 지정할 수 있습니다. 테두리(Border): 패딩을 감싸며 border-width, border-style 및 border-color 속성을 사용하여 스타일을 지정할 수 있습니다. 마진(Margin): 테두리를 감싸며 상자와 다른 요소 간의 공간을 제공합니다. margin 속성을 사용하여 지정할 수 있습니다. CSS Bo.. 2023. 3. 4.
[CSS 핵심강좌] 2. 선택자 CSS 선택자는 웹 페이지에서 요소를 선택하고 스타일을 적용하는 데 사용되는 메커니즘입니다. 여러 유형의 선택자가 있습니다 1. 요소 선택자 특정 유형의 모든 요소를 선택합니다. 예를 들어, 선택자 "p"는 페이지의 모든 "p" 요소를 선택합니다. p { color: red; } 위의 CSS 코드는 페이지의 모든 "p" 요소의 텍스트 색상을 빨간색으로 지정합니다. 2. 클래스 선택자 특정 클래스 속성을 가진 요소를 선택합니다. 클래스 선택자는 마침표 (.)와 클래스 이름으로 표시됩니다. 예를 들어, 선택자 ".highlight"는 클래스 "highlight"를 가진 모든 요소를 선택합니다. .highlight { background-color: yellow; } 위의 CSS 코드는 페이지의 클래스 속성 .. 2023. 3. 4.
[CSS 핵심강좌] 1. 소개 CSS (Cascading Style Sheets)은 HTML로 작성된 문서의 외관과 형식을 설명하는 스타일 시트 언어입니다. HTML, XHTML 및 XML로 작성된 웹 페이지와 사용자 인터페이스의 프리젠테이션을 제어하는 데 사용됩니다. CSS를 사용하면 색상, 글꼴, 크기, 레이아웃 등 HTML 요소에 스타일을 적용할 수 있습니다. 이를 통해 웹 페이지의 내용과 프리젠테이션을 분리하여 웹 사이트를 유지 관리하고 업데이트하기 쉬워집니다. HTML 문서에 CSS 스타일을 적용하는 세 가지 방법이 있습니다: 1. 인라인 스타일 스타일은 "style" 속성을 사용하여 HTML 요소에 직접 적용됩니다. This text will be displayed in red. 위의 HTML 코드는 "p" 요소에 직접 적.. 2023. 3. 4.
[CSS 핵심강좌] 0. 개요 및 목차 CSS (Cascading Style Sheet)의 핵심 코스 목록입니다: CSS 소개 CSS 선택자 CSS 박스 모델 CSS 레이아웃 CSS Flexbox CSS Grid CSS 전환과 애니메이션 CSS 미디어 쿼리 CSS 전처리기 (Sass, Less) CSS 반응형 디자인 접근성 및 사용성을 위한 CSS 기술 CSS 툴링과 워크플로우 (CSS 프레임워크 및 BEM, OOCSS, SMACSS와 같은 CSS 방법론을 포함) 2023. 3. 4.
[HTML 핵심강좌] 10. HTML 미디어 요소 HTML 미디어 요소는 오디오, 비디오, 그림 및 애니메이션과 같은 미디어 콘텐츠를 삽입할 수 있는 태그입니다. 이러한 요소를 사용하면 웹 페이지에서 미디어 콘텐츠를 표시하고 컨트롤 할 수 있습니다. 1. audio 요소 audio 요소는 오디오 콘텐츠를 삽입하는 데 사용됩니다. src 속성을 사용하여 오디오 파일의 URL을 지정하고, controls 속성을 사용하여 오디오 컨트롤을 표시합니다. Your browser does not support the audio element. 2. video 요소 video 요소는 비디오 콘텐츠를 삽입하는 데 사용됩니다. src 속성을 사용하여 비디오 파일의 URL을 지정하고, controls 속성을 사용하여 비디오 컨트롤을 표시합니다. Your browser do.. 2023. 3. 3.
[HTML 핵심강좌] 9. HTML 폼 요소 HTML 폼 요소를 사용하면 웹 사이트 방문자로부터 정보를 수집하고 서버로 전송할 수 있습니다. 폼 요소는 input, select, textarea 등 다양한 요소를 포함하며, 사용자가 입력한 데이터를 클라이언트 측에서 먼저 검증하거나 서버로 전송하여 추가적인 처리를 수행할 수 있습니다. 1. input 요소 폼에서 가장 많이 사용되는 요소 중 하나입니다. 사용자로부터 텍스트, 비밀번호, 날짜, 시간, 이메일 등 다양한 종류의 입력을 받을 수 있습니다. 예시: 사용자 이름: 비밀번호: 이메일: 위 코드는 웹 브라우저에서 다음과 같이 표시됩니다. HTML 삽입 미리보기할 수 없는 소스 2. select 요소 사용자가 목록에서 항목을 선택할 수 있도록 합니다. 선택한 값은 폼을 제출할 때 서버로 전송됩니다.. 2023. 3. 3.
반응형

티스토리툴바