본문 바로가기

Web/🧩 html + CSS

(12)

정렬 Tip 1. 수평 가운데 정렬 자신요소에 marign : auto; 를 사용하면 수평 가운데 정렬을 합니다. 2. 수직 가운데 정렬 부모 요소에 display: flex; align-items: center; 를 사용하면 수직 가운데 정렬을 합니다.

박스 모델 박스 모델(box model) 모든 HTML 요소는 박스모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 내용(content)으로 구분합니다. 1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. 2. 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. 3. 테두리(border) : 내용와 패딩 주변을 감싸는 테두리입니다. 4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격입니다. 마진은 눈에 보이지 않습니다. 사용 예 * Box Model *

테이블 속성 테이블에 다음 속성을 사용하여 CSS 스타일을 적용할 수 있습니다. 1. border 2. border-collapse 3. border-top, border-bottom, border-right, border-left 4. td의 width, height 5. text-align 6. vertical-align 1. border 속성 border 속성으로 테이블의 테두리(border)를 설정할 수 있습니다. 사과 바나나 딸기 수박 자두 체리 키위 오렌지 참외 2. border-collapse 속성 border-collapse 속성값을 collapse로 설정하면 해당 테이블의 테두리는 한 줄로 표현됩니다. ...생략 3. border-top, border-bottom, border-right, borde..

크기 CSS를 이용하면 HTML 요소의 크기를 마음대로 설정할 수 있습니다. 가장 대표적으로 사용되는것이 아래 두가지 입니다. 1. width 2. height 가로와 세로비율을 조절해 원하는 크기로 설정할 수 있습니다. 크기 단위 : 퍼센트 백분율 단위(%)는 기본 크기를 100%로 놓고, 그에 대한 상대적인 크기를 설정합니다. 비율을 설정하지 않을때는 다음과 같습니다. 백분율은 상대적은 크기임으로 부모 요소가 크기를 갖고 있어야합니다. 가로도 적용해보겠습니다.

background 속성 background 의 대표적인 속성 2개를 소개해보겠습니다. 1. background-color 속성 2. background-image 속성 1. background-color 속성 배경색을 의미하며, 값은 color 속성의 포맷을 사용합니다. background-color 2. background-image 속성 배경을 이미지로 지정하며, url에 경로를 입력해줍니다. background-color

font 속성 font 속성은 다음과 같습니다. font-family 글꼴 font-style 이탤릭체 등의 글꼴의 스타일 지정 font-size 글자 크기 font-weight 글자 두께 line-height 줄 간격 1. font-family font-family 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들입니다. 만약 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 됩니다. 2. font-style font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며, 다음과 같이 3가지의 속성값을 가집니다. 3. font-size font-size 는 글자 크기를 의미합니다. 4. font-weight font-weight 속성은 텍스트를..

컬러 CSS에서 색을 표현하는 방법에는 다음과 같이 세 가지 방법이 있습니다. 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 1. 색상 이름으로 표현 W3C에서 정의한 16개의 HTML4 표준 색상 이름은 다음과 같습니다. 사용방법은 다음과 같습니다. 2. 16진수 색상값으로 표현 16진수 색상값은 RGB 색상값을 각각 16진수로 변환한 것입니다. 따라서 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가집니다. www.hipenpal.com/tool/html-color-charts-rgb-color-table-in-korean.php RGB색상표/16진수 컬러 코드표 - Hi!Penpal! HTML컬러표 www.hipenpal.co..

결합 선택자 자식 선택자(descendant selector) 자식 선택자는 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택합니다. 선택자1 선택자2 { } 선택자1(부모요소) 선택자2(자식요소) 사용 예 자식 선택자 적용 X 자식 선택자 적용 test.html div h2 { color: blue; } test.css 자식 선택자 적용 X 자식 선택자 적용

이전 1 2 다음

티스토리툴바