본문 바로가기

html15

CSS (레이아웃 종류, flex 종류) ✔ CSS 다단레이아웃 다단 레이아웃 - 텍스트를 column 속성으로 다단을 생성 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 - column-count : 단의 갯수를 설정 - column-rule : 단과 간사이의 구분선, 구분의 모양, 두께, 색상을 설정 - column-gap : 단과 단사이의 여백을 설정 - column-span : 단과 안의 포함된 요소를 다단편집에서 해제 ✔ CSS 다단레이아웃 코드 DOCTYPE html> 다단 레이아웃 div, h2, p{margin: 0; padding: 0;} body {margin: 10px;} h2 {padding: 0 0 20px; text-align: center;} div.col{ text-align: justify; pad.. 2022. 10. 31.
CSS (box-model, padding, margin, border, display, form) ✔ CSS 박스 모델 박스 모델(Box Model) - 모든 HTML 요소는 박스모양으로 구성 - 박스모델은 HTML 요소를 내용, 패딩, 테두리, 마진으로 구분함 ✔ CSS content 내용(content) - 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 ✔ CSS 패딩 패딩(padding) 내용과 테두리 사이의 간격 - padding-top, padding-right, padding-bottom, padding-left - padding: 위 오른쪽 아래 왼쪽 안녕하세요 div#padding { padding: 20px 50px 30px 10px} 위 20px, 오른쪽 50px, 아래 30px, 왼쪽 10px div#padding { padding: 20px 50px 30px } 위 20p.. 2022. 10. 31.
CSS 위치지정(상대, 절대, 고정, float, clear, z-index) ✔ CSS 위치 CSS Position 요소의 위치를 결정하는 방식을 설정 1. 정적(stataic)위치 지정방식 - 기본값 - HTML 요소의 위치를 결정하는 기본적인 방식 - 단순히 웹 페이지의 흐름을 따라 요소들이 위치를 결정하는 방식 ✔ CSS 상대위치 2. 상대(relative)위치 지정방식 - HTML 요소의 기본위치(정적 위치 지정방식)를 기준으로 위치를 재설정 하는 방식 - top, left, right, bottom 속성 값을 사용할 수 있음 ✔ CSS 상대위치 코드 DOCTYPE html> 상대위치지정방식 .relative1 { width: 200px; background-color: deeppink; padding: 20px; } .relative2 { position: relativ.. 2022. 10. 31.
CSS 배경 종류 ✔ CSS 배경 CSS 배경 background-color HTML 요소의 배경색을 설정 ✔ CSS 배경 코드 DOCTYPE html> CSS 배경 1 body {background-color: deepskyblue;} div {background-color: white;width: 60%;padding: 20px;border: 3px dotted red;} CSS 배경 1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Esse eligendi molestiae harum deserunt vel. Sequi illo illum maxime labore. Sapiente cupiditate explicabo perferendis arc.. 2022. 10. 31.