마탁이의 개발 블로그

1. CSS Dimension (치수) - CSS는 다음과 같은 치수 특성이 있다. > width, height, max-width, min-width, max-height, min-height 2. 너비 및 높이 설정 - width와 height에는 패딩, 테두리 또는 여백이 포함되지 않는다. - width 및 height 속성은 다음 값을 사용할 수 있다. 구분 상세 길이 px, em, rem, pt, cm 등의 너비를 지정한다. % 포함하는 요소 너비의 백분율(%)로 너비를 지정한다. auto 브라우저가 요소에 적합한 너비를 계산한다. initial 너비와 높이를 기본값인 auto로 사용한다. inherit 부모요소에서 상속되도록 지정한다.

1. Box Model ? - 웹 페이지에 표시할 수 있는 모든 요소는 하나 이상의 직사각형 상자로 구성된다. - CSS Box model은 일반적으로 이러한 직사각형 상자가 웹 페이지에 배치되는 방식을 설명한다. - 이러한 상자는 서로 다른 속성을 가질 수 있고 서로 다른 방식으로 상호작용할 수 있다. - 모든 상자에는 콘텐츠 영역과 패딩, 테두리, 여백 영역이 있다. - 패딩은 요소의 콘텐츠와 테두리(또는 테두리가 없는 경우 상자 가장자리) 사이의 투명한 공간 - 여백은 테두리 주변의 공간. - 또한, 요소에 배경색이 있는 경우 패딩 영역을 통해 표시된다. - 여백 영역은 항상 투명하게 유지되며 요소의 배경색에 영향을 받지 않지만 부모 요소의 배경색를 통해 보이게 한다. 2. 요소의 너비와 높이 - ..

1. CSS 테이블 - CSS는 테이블 요소의 레이아웃과 표시를 제어할 수 있는 여러 속성을 제공한다. 2. 테이블에 테두리 추가 - border 속성을 통해 테이블의 테두리를 정의할 수 있다. table, th, td { border: 1px solid black; } - 기본적으로 브라우저는 테이블 주위와 모든 셀 주위에 테두리를 그리고 그 사이에 약간의 공간을 주어 이중 테두리를 만든다. - 이중 테두리 문제를 해결하기 위해서는 셀 테두리를 축소하고 꺠긋한 단일 선 테두리를 만들면 된다. 3. 테이블 테두리 축소 - 표 셀에 테두리를 설정하는 두 가지 모델이 있다. -> 분리 및 축소 - border-collapse 를 사용하여 HTML 테이블의 테두리 모델을 설정할 수 있다. table { bor..

1. HTML의 목록 유형 - HTML은 아래와 같은 세 가지의 목록 유형이 있다. 1) 정렬되지 않은 목록 > 모든 목록 항목이 글머리 기호로 표시된다. 2) 정렬된 목록 > 각 목록 항목이 번호로 표시되는 목록. 3) 정의 목록 > 각 항목에 대한 설명이 포함된 목록 2. 목록의 마커 유형 변경 - 기본적으로 정렬된 목록의 항목은 1,2,3,4... 로 번호가 매겨지지만 정렬되지 않은 목록은 글머리 기호(•)로 표시된다. - list-style-type 속성을 이용하여 기본 목록 마커 유형을 로마 숫자, 라틴 문자, 원 등 다양한 유형으로 변경할 수 있다. Unordered List List Item 1 List Item 2 List Item 3 Ordered List List Item 1 List ..

1. CSS 링크 - color, font, background, border와 같은 모든 CSS 속성을 지정할 수 있다. - 링크는 아래와 같은 4가지 상태가 있다. a: link 일반적인 또는 방문하지 않은 링크의 스타일을 정의 a: visited 사용자가 이미 방문한 링크의 스타일 a: hover 사용자가 링크 위에 마우스 포인터를 올려 놓았을 때 링크의 스타일 a: active 클릭할 때 링크의 스타일 - 마지막으로 정의된 스타일 규칙이 이전에 정의된 스타일 규칙보다 우선되기 때문에 서로 다른 링크상태에 대해 스타일을 설정하는 순서가 중요하다. - 일반적으로 다음의 순서를 따라야 한다. link -> visited -> hover -> active -> focus 2. 표준 링크 스타일 수정 - ..

1. CSS 텍스트 - 색상, 정렬, 간격, 장식, 변형 등과 같은 다양한 텍스트 스타일을 매우 쉽고 효과적으로 정의할 수 있다. 2. color - 텍스트 색상은 CSS color 속성에 의해 정의된다. - color 속성은 CSS 텍스트의 일부인 것처럼 보이지만, 실제로는 CSS의 독립형 속성이다. body { color: #434343; } 3. text-align - 텍스트의 수평 정렬을 설정하는데 사용된다. - 왼쪽, 오른쪽, 가운데 또는 양쪽 맞춤의 4가지 방법으로 정렬할 수 있다. - justify의 속성 값의 경우 신문처럼 마지막 줄을 제외한 왼쪽과 오른쪽의 여백을 정렬할 수 있다. This is a heading Lorem ipsum dolor sit amet, consectetur ad..

1. CSS 글꼴 - 아래와 같은 글꼴 속성을 제공한다. 2. font-family - 텍스트를 렌더링하는 데 사용할 글꼴을 지정한다. - 이 속성은 여러 개의 쉼표(,)로 구분 된 글꼴 이름을 대체할 수 있는 글꼴로 보유할 수 있다. - 만약 사용자 시스템에서 첫 번째 글꼴을 사용할 수 없는 경우 브라우저가 자동으로 두 번째 글꼴을 적용하려고 시도한다. - 웹 디자인에서 사용되는 가장 기본 글꼴은 serif 및 sans-serif 이다.- seif 글꼴과 sans-serif 글꼴의 차이는 아래 이미지와 같다. body { font-family: Arial, Helvetica, sans-serif; } 3. font-size - 글꼴 크기를 설정하는 데 사용한다. - 키워드, %, px, ems 등 다양..

1. CSS 배경 - CSS는 배경 색상 지정, 배경에 이미지 배치 및 위치 관리 등 요소의 배경 스타일 지정을 위한 여러 속성을 제공한다. - 배경의 속성은 아래와 같은 종류가 있다. 2. background-color - 배경색을 지정하는데 사용한다. h1 부분 입니다. p 부분 입니다. 3. background-image - 이미지를 HTML 요소의 배경으로 설정한다. - 기본적으로 브라우저는 배경 이미지를 가로 및 세로로 반복하거나 바둑판식으로 배열하여 요소의 전체 영역을 채운다. 이를 background-repeat 속성으로 제어할 수 있다. background-color demo p 부분 입니다 4. background-repeat - 배경에 적용된 이미지를 바둑판식처럼 배열되는 방식을 제어할..

1. 색상 속성 설정 - color 속성은 요소의 텍스트 색상 (일반적으로 전경색)을 정의한다. - 아래의 예에서는 body에 color 속성을 지정하면, 전체 페이지의 기본 텍스트 색상을 지정한다. body { color: #ff5722; } - 색상은 다음의 형식들로 지정할 수 있다. 1) 키워드 - "Red", "Blue", "transparent" (투명), .... - 가장 쉽게 색상을 지정할 수 있는 방법- 대/소문자를 구분하지 않는다. - 최신 웹 브라우저는 CSS표준에 정의된 것보다 많은 색상 키워드를 지원하지만, 더 안전한 쪽을 유지하기 위해서 16진수 값을 사용하는 것이 좋다. 2) 16진수 - "#ff0000", "#00ff00", ... - 웹에서 가장 일반적으로 색상을 정의하는 방..

www.tutorialrepublic.com/css-tutorial/ CSS3 Tutorial - An Ultimate Guide for Beginners CSS Tutorial CSS is the key presentational technology that is used in website design. CSS stands for Cascading Style Sheets. CSS is a standard style sheet language used for describing the presentation (i.e. the layout and formatting) of the web pages. Prio www.tutorialrepublic.com 1. CSS를 HTML에 포함시키는 방법 인라인 스타..