*CSS 태그 정리*
<span>태그는 너비 조절이 불가능해서 좌우 정확하게 맞추고 싶을 때는
<span> 태그 대신해서 <div> 태그를 사용해야 한다.
-- 글자 설정 --
font-weight 글자 굵기 지정
font-family 글자체 지정
font-size 글자크기
color 글자색
font-style 글자모양 지정 ( 글자 기울임? 그런 모양을 설정하는 방식 )
text-align 수평정렬 ex) left center right justify등으로 설정하고 전체 페이지에서 글자를 왼쪽정렬 가운데정렬 오른쪽정렬 처럼 정렬하고자 하는 방향으로 정렬시킬 수 있음
line-height 행간격 지정 // 글자와 글자 사이의 줄간격 지정
letter-spacing 자간
text-indent 들여쓰기
background-color 바탕색 지정
white-space는 div에 엔터없이 글자를 쓰면 옆으로 삐져나가는데 그때 같이 쓰면
아래로 칸에 맞게 작성되도록 도와준다
<head>태그 아래에서 <style> 태그를 만들어주고
*{
font-size : 30px
}
이런식으로 줘서 한번에 모든 태그의 글꼴의 사이즈를 키울 수 있다
<strike>태그는 글자의 삭선을 그어주는 태그이다
<sup>태그는 윗첨 <sub>태그는 아래첨으로 작성된다
주의 : 스타일태그에서 <span>태그를 주고 컬러를 red 로 주면
나중에 모든 span 태그의 글자색이 빨간색으로 덮힐 수 있으니 조심해야함
하위태그를 의미하는 기호는 span>span 이다
스판안에 있는 스판 태그에게 적용하겠다는 의미이다
말 그대로 스판 바로 밑에 하위 스판에만 적용한다는 뜻으로
span span 중간에 한칸 띄우고 스판을 적용해서 작성하면
스판 바로 밑에 있는 스판이라는 의미이다
바로 아래에있는 것만 적용할 때는 span>span이고 span span 이런식으로 띄어서 쓰게되면
바로 밑에 스판이 아니더라도 스판 하위 스판에도 적용되도록 하는 것이다
완전하게 span>span을 해줘야 스판이라는 태그 하위 스판에 적용되고
span span 으로 해주면 하위스판 전체에 적용되는 것이다 ( 햇깔리지 않게 조심하자 )
google font 에서 원하는 글꼴을 + 로 추가한후
href 태그를 복사해서 소스파일에 붙여넣으면
원하는 글꼴로 수정해서 사용할 수 있다
2em은 상위태그의 2배라는 뜻이다
똑같은 크기로 주려면 rem으로 줘야한다
height line-height-text-align 세트로 많이쓴다
박스 바깥 여백을 줄 때는 margin 박스안에서 띄울때는 padding을 주면 된다
Ex) padding-left:50px;
margin-top:100px;
background-image // 배경이미지 지정 // url(파일명)
배경이미지를 줄 수 있는 코드
<hr>태그는 단독으로 사용하고 해당 태그로 가로선을 길게 줘서 구분선을 만들 수 있다
background-repeat : 배경을 반복한다는 의미로 x 와 y값을 줘서 가로 혹은 세로로 반복 시킬 수 있다
background-position : 반복하지 않고 원하는 지정된 위치에 1개를 놓을 수 있는 방식으로
background-position: right bottom; 이런식으로 오른쪽 아래에 놓을 수 있다
<IMG> 태그의 속성
src - 소스
width - 크기설정
hspace 이미지와 옆에 글 사이의 여백을 얼마나 띄우겠느냐의 설정
vspace는 아래글과 이미지 사이의 여백을 얼마나 띄우겠느냐의 설정
'개발' 카테고리의 다른 글
| 2022-08-29 페이징처리 (0) | 2022.08.29 |
|---|---|
| 220721-객체 지향 언어 핵심 정리하기 (0) | 2022.07.21 |
| git을 배워보았다 (0) | 2022.07.02 |
| 변수와 리터럴의 타입 불일치 (0) | 2022.07.01 |
| 채팅기능,방문자기능 그리고 html에서 css로 넘어가기 (0) | 2021.08.31 |