2023. 10. 8. 23:46ㆍHtml, Css
<스타일>------------------------------------------------------------
▼인라인 스타일
▷태그에 스타일을 넣는 것
ㄴex)
<body>
<h2 style="color: #f00">제목입니다</h2>
</body>
▼내부스타일
▷<head>안에 <style> 선언하고 스타일을 넣는 것
ㄴex)
<head>
<style>
h2{color: red;}
</style>
</head>
▼외부 스타일
▷스타일을 저장(~~~.css)을 하고 html 문서에 css를 연결시킴
ㄴex)
<link href="css가 있는 경로" rel="stylesheet">
▽외부스타일을 하게 되면 공통된 스타일은 한번만 만든 후 링크설정으로 여러번 사용가능
▷ css가 있는 경로를 찾으려면 html문서를 기준으로 ~~~.css가 있는 곳을 찾으면 됨
▼스타일 정의
▽가로 가운데 정렬
▷글자, 이미지 가운데 정렬 : text-align:center;
▷img{text-align:center} 가운데 정렬이 안됨
▷이미지를 감싼 부모(블록요소)한테 가운데정렬을 해야함
▷박스를 가운데 정렬 : margin:0px auto;
(단 조건은 width값이 있어야함)
▷부모 flex 시 자식에게 justify-content:center;
▽세로 가운데 정렬
▷한줄일때는 : height/ line-height값 이용함
height:50px; line-height:50px;
▷여러줄이거나 높이값이 없을 때는 padding:50px 0px;
(단 조건은 height값을 지정하면 세로 가운데정렬이 안됨)
▷부모 flex 시 자식에게 align-items:center;
▽배경색
▷background:orange;
(단 조건은 내용이 있어야함. 내용을 안 넣고 싶다면 height값을 줘야함)
▽블록요소
▷h1~ h6, p, div....
ㄴ한줄을 다 차지함
ㄴ줄바뀜
ㄴwidth, height을 지정할 수 있음. 적용이됨
ㄴmargin, padding적용됨
▽인라인 요소
▷a, span, strong, em, img....
ㄴ한줄에 여러개를 배치할 수 있음
ㄴ줄바꿈이 없음
ㄴwidth, height를 지정해도 적용이 안됨
ㄴmargin은 왼쪽, 오른쪽
ㄴpadding은 위,아래, 왼쪽, 오른쪽 모두 적용됨
----------------------------------------------------------------------
▼마우스 반응 (hover)
▷div:hover = div에 마우스를 갖다 대면
▼링크 없이 손가락모양 만들기
▷태그{cursor:pointer;}
▼여러 태그에 효과 한번에 넣기
▷여러 태그(class, id)에 공통적인 효과를 한번에 넣을 때 태그 사이에 ',' 를 붙이면 태그를 여러개 쓸 수 있음
ㄴex)
p,h2,h4{color:red;}
'Html, Css' 카테고리의 다른 글
| 주석 / 폰트 (0) | 2023.10.08 |
|---|---|
| 목록 (0) | 2023.10.08 |
| 여백 (0) | 2023.10.08 |
| 이미지 삽입 / 하이퍼 링크 (0) | 2023.10.08 |
| 내부 스타일 (style) (1) | 2023.10.08 |