8.10-8.12 CSS 공부

한글 입숨 -> 한글 아무 말 생성기
/*서식*/
br
em
b
s
big/small 기본 폰트보다 조금 크게
sub 아래첨자
sup 윗첨자
mark 형광표시
hr

/*목록 만들기*/
ol > li 순서가 있는 목록
ul > li 순서가 없는 목록

/*링크, 이미지*/
외부 링크나 파일 링크 하기: a (anchor)
<a href="웹사이트">Naver</a>
a -> tag href-> attribute(속성) hyperlink reference
이미지 html 문서에 넣기: img
<img src="">

<a href="웹사이트><img src="..."></a>

<a href="http://www.google.com" target="_blank">Google</a>
새로운 탭으로 가기(target="_blank")

<a href="http://www.google.com" target="_blank" title="구글사이트로 이동">Google</a>
title은 hover 했을때 말풍선 나옴

<img src="" alt="">
<a href=""><img src="" alt=""></a>
사진에 클릭하면 링크로 간다

/*CSS*/
CSS -> HTML 문서 내에 HTML 태그를 선택해서 디자인하고 배치하는 역할을 한다

직접 속성에 넣기
html header에 작성
css 파일 링크 통해서

CSS 기본 문법
body {
  color: navy;
}

Selector {
  Property: value;
}

h1 {color: blue; font-size: 12px;}
Selector {Declaration(Property: value); Declaration(Property: value);}

/*CSS 선택자*/

선택자 종류
태그 선택자/클래스 선택자/아이디 선택자/태그와 함께 쓰는 선택자

그룹 선택자
그룹 선택자/하위 선택자/전체 선택자

하위 선택자
p b {

}

CSS 적용 우선순위
important(최대한 피하자)
inline (직접 tag 안에 style 넣기)
id
class
tag selector style

/*CSS 서식관련 속성(Text 스타일)*/
내용이 요소의 크기를 벗어났을때: 감추기
overflow: hidden;

스크롤할 때 배경 이미지 부착 여부를 지정: 움직이지 않고 고정
background-attachment: fixed;

기본 서식 스타일
font-size -> px/em/%/pt/rem
font-weight(두께) -> 100-900 bold(기본값)/bolder/lighter/normal(bold빼기)
참고 : h1은 기본적으로 font-weight가 bold 설정 되어 있음
line-height(줄 간격을 지정) -> px/em(추천)/pt/%/rem
- 일반적으로 body에 넣음
- font-size를 키우면 line-height(px)가 좁아진 느낌이 생기므로 늘려줘야 함 -> 해결책 : em을 사용, em은 비율이므로 자동으로 바뀜
font-family -> font name
font-style(문자 스타일(기울림체)) -> normal/italic/oblique
color -> #/rgb/rgba -> 마지막 속성 값 opacity
text-decoration(텍스트 줄 표시/제거) -> none/underline/overline/line-through
text-transform(대소문자 변형) -> none/capitalize(첫 글자만)/uppercase/lowercase
text-align(Text 정렬) -> center/left(기본값)/right/justify(양쪽 정렬)
text-shadow(Text 그림자 효과) -> [x-축 거리][y-축 거리][퍼짐 거리 정도][색상]/none

/*목록 스타일*/
목적 : 주로 Navigation에서 사용

ul list-style (list-style-image:url/:before)에서 사용하기도 함
-disc
-circle
-square
-none

ol list-style
-decimal
-decimal-leading-zero
-lower-roman
-upper-roman
-lower-alpha
-upper-alpha

ol이랑 ul에는 기본적으로 padding이 들어가 있다

가상 클래스 before,after -> 원하는 아이콘 넣어주기
li:before {
  content: '#'
}

/*CSS 자손선택자vs자식선택자*/
/*부모요소vs자식요소*/

자손은 바로 밑 뿐만 아니라 전체 밑
자식은 바로 밑에
div.parent(부모)/div.child(자식)
div.parent(부모)/div.child(자식)/div(자손)
div는 child의 자식
자손선택자는 space
div p
자식 선택자는 >
div > p

/*CSS 박스 모델(border,border-radius)*/
border-style: solid/dashed/dotted/double/groove/inset/outset
border-width: px(추천)/%/thin/medium/thick
border-color: color

주로 사용하는 방법
border: 2px solid blue;

border-radius: px/%(추천)

border-radius: px px px px