본문 바로가기
반응형

CSS35

[웹 디자인] 14일차: 그리드 레이아웃(Grid Layout) 그리드 레이아웃(Grid Layout)이란?CSS 그리드 레이아웃은 2차원 레이아웃 시스템으로, 행과 열을 사용하여 웹 페이지의 요소들을 배치합니다. 그리드 레이아웃은 복잡한 레이아웃을 더 쉽게 구현할 수 있게 해주며, 유연하고 강력한 레이아웃 제어 기능을 제공합니다.그리드 컨테이너 설정display: grid: 요소를 그리드 컨테이너로 설정합니다.display: inline-grid: 인라인 그리드 컨테이너로 설정합니다.예제:.container { display: grid;} 아이템 1 아이템 2 아이템 3그리드 컨테이너 속성grid-template-columns와 grid-template-rows그리드의 열과 행의 크기를 설정합니다.예제:.container { display: grid; g.. 2024. 8. 14.
[웹 디자인] 13일차: 플렉스박스(Flexbox) 플렉스박스(Flexbox)란?플렉스박스(Flexbox)는 1차원 레이아웃 모델로, 복잡한 레이아웃을 쉽게 만들 수 있도록 도와줍니다. Flexbox를 사용하면 컨테이너 내부의 아이템들을 수평 또는 수직 방향으로 배치하고 정렬할 수 있습니다. 플렉스 컨테이너와 플렉스 아이템이라는 두 가지 주요 개념으로 구성됩니다.플렉스 컨테이너 설정display: flex: 요소를 플렉스 컨테이너로 설정합니다.display: inline-flex: 인라인 플렉스 컨테이너로 설정합니다.예제:.container { display: flex;} 아이템 1 아이템 2 아이템 3플렉스 컨테이너 속성flex-direction플렉스 아이템의 주축 방향을 설정합니다.row: 가로 방향 (기본값)row-reverse: 가로 방향 .. 2024. 8. 13.
[웹 디자인] 12일차: CSS 레이아웃 기초 CSS 레이아웃이란?CSS 레이아웃은 웹 페이지의 요소들을 배치하고 정렬하는 방법을 정의합니다. 효과적인 레이아웃은 웹 페이지의 가독성과 사용자 경험을 향상시킵니다. CSS에는 다양한 레이아웃 기법이 있으며, 이를 통해 복잡한 웹 페이지 레이아웃을 구현할 수 있습니다.CSS 레이아웃 기법Display 속성display: 요소의 표시 방식을 지정합니다.block: 블록 레벨 요소로, 항상 새로운 줄에서 시작하며 전체 너비를 차지합니다.inline: 인라인 레벨 요소로, 새로운 줄에서 시작하지 않으며 콘텐츠의 너비만큼 차지합니다.inline-block: 인라인 레벨 요소처럼 동작하지만, 블록 레벨 요소처럼 크기를 지정할 수 있습니다.none: 요소를 화면에 표시하지 않습니다.예제:.block-element .. 2024. 8. 12.
[웹 디자인] 11일차: CSS 박스 모델 박스 모델이란?CSS 박스 모델은 HTML 요소의 레이아웃을 설명하는 기본 개념입니다. 모든 HTML 요소는 박스 모델을 따르며, 이 박스 모델은 콘텐츠 영역, 패딩, 테두리, 마진으로 구성됩니다.박스 모델 구성 요소콘텐츠(Content)실제 콘텐츠가 들어가는 영역입니다.width와 height 속성으로 크기를 지정할 수 있습니다.패딩(Padding)콘텐츠와 테두리 사이의 여백입니다.padding 속성으로 크기를 지정할 수 있습니다.각 면별로 padding-top, padding-right, padding-bottom, padding-left 속성을 지정할 수 있습니다.테두리(Border)패딩과 마진 사이의 테두리 영역입니다.border 속성으로 크기와 스타일을 지정할 수 있습니다.각 면별로 border.. 2024. 8. 11.
[웹 디자인] 10일차: CSS 색상 및 배경 색상CSS에서 색상은 웹 디자인의 중요한 요소 중 하나입니다. 색상을 사용하여 텍스트, 배경, 테두리 등을 스타일링할 수 있습니다.색상 표현 방법CSS에서 색상을 표현하는 여러 가지 방법이 있습니다:색상 이름: 미리 정의된 색상 이름을 사용합니다.color: red;16진수 표기법: #RRGGBB 형식을 사용합니다.color: #ff0000;RGB 표기법: rgb(red, green, blue) 형식을 사용합니다.color: rgb(255, 0, 0);RGBA 표기법: rgb(red, green, blue, alpha) 형식을 사용하며, alpha 값은 투명도를 나타냅니다.color: rgba(255, 0, 0, 0.5);HSL 표기법: hsl(hue, saturation, lightness) 형식을 사.. 2024. 8. 10.
[웹 디자인] 9일차: CSS 텍스트 스타일링 텍스트 스타일링이란?CSS 텍스트 스타일링은 웹 페이지의 텍스트 모양과 레이아웃을 제어하는 데 사용됩니다. 텍스트 스타일링은 글꼴, 크기, 색상, 정렬 등을 포함하여 텍스트를 더 읽기 쉽게 만들고, 시각적으로 일관된 디자인을 제공합니다.글꼴글꼴 스타일링은 텍스트의 모양과 느낌을 정의하는 중요한 요소입니다.글꼴 패밀리font-family: 글꼴 패밀리를 설정합니다. 쉼표로 구분하여 여러 글꼴을 지정할 수 있으며, 지정한 순서대로 사용 가능한 글꼴이 선택됩니다.예제:body { font-family: 'Arial', 'Helvetica', sans-serif;}글꼴 크기font-size: 텍스트의 크기를 설정합니다. 절대 크기(px, pt 등)나 상대 크기(em, rem, %)로 지정할 수 있습니다.예제:.. 2024. 8. 9.
[웹 디자인] 8일차: CSS 소개 및 기본 문법 CSS란 무엇인가?CSS(Cascading Style Sheets)는 HTML 요소의 스타일을 지정하는 언어입니다. CSS를 사용하면 웹 페이지의 레이아웃, 색상, 글꼴 등을 제어할 수 있습니다. CSS는 HTML과 분리된 스타일 시트를 통해 웹 페이지의 디자인을 더 쉽게 관리할 수 있도록 도와줍니다.CSS의 역사1996년: CSS 레벨 1 (CSS1) 표준이 발표됨1998년: CSS 레벨 2 (CSS2) 표준이 발표됨2011년: CSS 레벨 3 (CSS3) 표준이 발표됨현재: CSS4는 별도의 표준으로 존재하지 않으며, CSS3의 모듈이 계속 발전하고 있습니다.CSS 문법CSS 문법은 선택자와 선언 블록으로 구성됩니다.선택자(Selector): 스타일을 적용할 HTML 요소를 선택합니다.선언 블록(De.. 2024. 8. 8.
[웹 디자인] 1일차: HTML 소개 및 기본 구조 HTML이란 무엇인가?HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다. 웹 페이지의 구조를 정의하고 콘텐츠를 표시하는 데 사용됩니다. HTML은 태그를 사용하여 문서의 각 부분을 나타냅니다.HTML의 역사1991년: 팀 버너스 리(Tim Berners-Lee)가 처음으로 HTML을 제안하고 개발1995년: HTML 2.0 표준이 발표됨1997년: HTML 3.2 및 HTML 4.0 표준이 발표됨2014년: HTML5 표준이 발표되어 현재까지 사용됨기본 문서 구조HTML 문서는 기본적으로 다음과 같은 구조를 가집니다: Hello, World! This is a simple HTML document.: 문서 타입 선언으로, HTML5 문서임을 나타냅니다.: HTM.. 2024. 8. 1.
[웹디자인] 목차 HTML과 CSS를 사용하여 웹 디자인을 학습하는 30일 과정을 제안합니다. 이 과정은 기초부터 심화 주제, 반응형 디자인 및 실전 프로젝트까지 포함하여 단계별로 학습할 수 있도록 구성했습니다. 웹 디자인 학습1. HTML 소개 및 기본 구조: HTML의 역사, 기본 문서 구조, 요소 및 속성2. 텍스트 관련 요소: 제목, 단락, 강조, 인용문3. 리스트와 테이블: 순서 있는 리스트, 순서 없는 리스트, 테이블 구조 및 속성4. 링크와 이미지: 하이퍼링크, 이미지 삽입 및 속성5. 폼과 입력 요소: 폼 태그, 입력 요소, 버튼, 폼 속성6. HTML5 시맨틱 요소: header, footer, nav, section, article, aside 등7. 멀티미디어 요소: 오디오, 비디오, 캔버스 요소8. .. 2024. 6. 21.
[포트폴리오 페이지] 5단계: 스타일링 및 레이아웃 개선 5단계: 스타일링 및 레이아웃 개선5.1 전체적인 레이아웃과 스타일링 개선styles.css 파일에서 전체적인 스타일링을 개선합니다.styles.css (수정된 부분)body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; /* 배경색을 설정합니다. */}header { background-color: #333; color: #fff; padding: 1em 0; text-align: center; position: sticky; /* 스크롤 시에도 상단에 고정됩니다. */ top: 0; z-index: 1000; /* 다른 요소보다 위에 표시됩.. 2024. 6. 16.
반응형