-
css태그정리_210330(화)HTML&CSS 2021. 7. 21. 23:14
CSS
스타일과 스타일 시트
<style></style>
스타일 형식
1. head에 하는 방법
p{}
선택자: {와} 사이에 정의한 스타일 규칙이 적용될 대상.
같은 태그들 전체에 스타일을 줌.
*{} = 전체선택자
태그{} = 태그선택자
#id이름{} = "#" id 선택자
.class이름{} = "." class선택자
태그,태그: 그룹선택자
id선택자와 class 선택자 구분
(1)공통점
요소의 특정 부분에만
(2)차이점
class: 문서안에서 여러번 반복
id: 문서안에서 한번만 사용
margin: 전체 바깥여백(위아래오른쪽왼쪽 따로 설정가능)
font size
-px 크기고정
em 배율(2배,3배)
padding: 테두백리와 텍스트 사이의 여백
123456789101112131415161718192021222324252627282930313233343536373839<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {text-align: center;}/* 순서없는 목록에 스타일 적용*/ul {list-style-type: none;/* 불릿없앰 */}label.title {font-weight: bold;width: 80px;}fieldset legend {color: indigo;font-size: 18px;}fieldset {margin: 10px;/* 전체여백 */margin: 15px 10px;/* 바깥여백, 15px 위아래여백, 10px 오른쪽왼쪽여백 */margin: 5px 10px 15px 20px;/* 위,오른쪽,아래,왼쪽 여백순 */}</style><link rel="stylesheet" href="css/style.css"></head>cs 캐스캐이딩 스타일 시트(css)
원칙 1: 스타일 우선 순위
인라인 스타일: 해당태그만 적용되는 스타일
id스타일: 지정한 부분만.
순차적으로 스타일이 적용
ex)
body{ color = blue} 문서 전체가 blue
h1{color = blone} h1만 blone으로 다시 변경
원칙 2:스타일 상속
부모요소에 스타일 속성들이 자식요소로 전달됨.
(하지만 배경색은 상속되지 않는다. 전체색을 바꿔서 그 색으로 보인다해도 실제로 자식태그들의 배경색이 바뀐게 아님.)
웹 브라우저들을 같이 호환해서 사용하는 방법
접두사를 붙인다.
-webkit
-moz
-o
-ms
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/prefixfree.min.js"></script><style>/*웹폰트 링크 연결*/@import url('https://fonts.googleapis.com/css2?family=Mukta&display=swap');/* @font-face {font-family: 'Mukta', sans-serif;src=local("'Mukta', sans-serif"),url('Mukta', sans-serif)} */* {font-family: 'Mukta', sans-serif;}.box {position: absolute;/*위치고정*/top: 150px;left: 50px;height: 70px;border: 2px solid green;width: 100px;height: 100px;}.box:hover {/* -webkit-transform: rotate(15deg);-moz-transform: rotate(15deg);-o-transform: rotate(15deg);-ms-transform: rotate(15deg); */transform: rotate(15deg);}.menu_list ul li {display: inline;border: 1px solid blue;margin: 5px;}</style></head><body><div><div class="box">Mouse Over</div><div class="menu_list"><ul><li>애완견종류</li><li>예방접종</li><li>건강돌보기</li></ul></div></div></body></html>cs border 가장자리 속성
border-width
:가장자리 두께
{1px} 1개면 전체
{1px,2px} 2개면 위아래, 오른쪽왼쪽 묶어서
{1px,2px,3px,4px} 4개면 위 오른쪽 아래 왼쪽 순서
border-radius
:가장자리 둥그렇게
top, light, under, left 따로 가능.
box-shadow
:그림자 효과
background 배경이미지 속성
background -size 속성
배경이미지 크기조정
:auto 원본크기
:contain 가로맞춤
:cover 전체맞춤이지만 가운데 맞춤은 안되어있음
:100% 100% 퍼센트, 전체맞춤 + 가운데맞춤
background-position(background 속성에서)
:수평 수직
수평:right left 크기지정(px등)
수직:center, top, bottom
margin padding 안쪽 바깥쪽 여백
margin:바깥여백
padding:안쪽여백
text속성
1. text-decoration 밑줄
:none 밑줄이 없다.
:underline 밑줄을 긋는다.
2. text-transform 소,대문자 변경
3. letter-space 글자와 글자사이의 공백
4. text-align 텍스트 정렬 방법
5. text-jusify 글자들이 양쪽 끝에 맞춰 정렬하여 간격을 조절하는 방법
6. text-indent 문단의 첫글자 들여쓰기(글자를 감출 수도 있다.)
7. text-overflow 긴 글자 텍스트를 간추려 표시
:clip 잘라버림
:ellipsis ...으로 요약
플렉스 박스 레이아웃과 기본 속성들
그리드 레이아웃을 기본으로, 플렉스 박스를 원하는 위치에 배치하는 것.
여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있음.
1. display 속성
:flex 박스레벨 요소로 정의
:inline-flex 한줄로 정의
2. flex-direction 플렉스 항목 배티 방향 지정
:row 가로로
:col 세로로
3. flex-wrap 한줄 또는 여러줄로 배치
flex-flow 배치 방향과 여러 줄 배치를 한꺼번에 저장.
(flex-wrap 대신 사용 가능)
<플렉스 방향> <줄배치>
order 박스의 숫자를 바꿀 수 있다.
4. flex: 1 1 0;
<배로 늘리거나><배로 줄이거나><기본값0, auto등>
5. flex-start: 주축을 시작점으로 배치
'HTML&CSS' 카테고리의 다른 글
HTML에 대한 이해_210406(화) (0) 2021.07.21 css태그정리:transition등_210402(금) (0) 2021.07.21 css태그정리:transform등_210401(목) (0) 2021.07.21 css태그정리:포지셔닝_210331(수) (0) 2021.07.21 HTML강의(visual studio code), 기초태그_210329(월) (0) 2021.07.21