본문 바로가기

CSS14

CSS( 미디어쿼리, em, rem) ✔ 미디어쿼리 미디어 쿼리(media query) - 특정 속성이 적용되는 범위가 변경되었을 때 컨텐츠를 별도록 변경하지 않아도 알맞는 형태로 스타일을 조절 @media 매체유형 and(속성에 대한 조건){ css코드 ... } ✔ 미디어쿼리 코드1 DOCTYPE html> 미디어쿼리1 body { background-color: beige; } @media screen and (min-width : 1024px) { body { background-color: aqua; } } 미디어쿼리 ✔ 미디어쿼리 결과 ✔ 미디어쿼리 코드2 DOCTYPE html> 미디아쿼리2 인스타그램 유튜브 페이스북 트위터 Lorem ipsum dolor sit amet consectetur adipisicing elit. M.. 2022. 10. 31.
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.

티스토리툴바