HTML & CSS 복습

wecode replit을통한 복습중 까먹고 있던부분 다시정리.

meta charset = UTF-8

한국어 중국어,일본어 등등 문자가있으면 추가해줘야하는속성

meta name = viewport content=width=device-width

모바일에서 볼때 가로 크기가 기기 가로크기에 맞춰주는 속성

p 와 span의 차이

p는 줄바꿈을 해주지만 span은 줄바뀜이안됨.

폰트 설정

폰트 이름에 띄어쓰기가 있으면 “”쌍따옴표로 감싸주어야함!!

폰트 뒤에 숫자 400이 기본크기 700이 볼드체 크기임.

font-style italic,obilque 글씨 기울임처리

blockquote

태그중 한개로 들여쓰기가 기본적으로 설정됨.

text-indent: — px; 글자 들여쓰기 픽셀 조절.

블록쿼트에는 앞 띄어쓰기가 기본으로 사라지기 때문에 넣고싶으면   이렇게 한칸씩 넣어주면됨.

선스타일 종류

https://developer.mozilla.org/ko/docs/Web/CSS/border-style

보통 textd-decoration: underline보다는 border-bottom 으로 밑줄을 넣어줌!!

box-sizing: border-box

width에 입력한값이 패딩 및 보더값이 포함된 크기에 고정됨.

ㄴ원래는 width값 + 패딩값 + 보더값이 그 박스의 총 크기임.

alt : 이미지가 뜨지 않았을때 보여줄 텍스트!

table

tr = table row
td = table data
th = table heading

th 를 쓰면 기본 중앙정렬 및 두껍게 설정. 행에도 설정가능.

rowspan = 세로 두개 차지하기

colspan = 가로 두개 차지하기

Input & Button

Input type

text : 텍스트를 입력받음.
password : 비밀번호를 입력받음. 안보이도록 설정됨.
number : 숫자를 입력받음.
placeholder : 회색 음영 처리된 문자 (도움말)

input textarea기본값

border-inset : 테두리를 3d 처럼 표현해줌.

resize : none 텍스트에어리어 칸을 넓혀주는 기본기능을 사라지게해줌.

palceholder 색 바꾸기

input[type=””]::placeholder

이렇게 대괄호에 타입을 넣어서 바꿀수도있음.

CSS position

CSS 포지션에는 5가지가 있다.

static, relative, absolute, fixed, sticky

static

기본값.

relative

top,right,bottom,left를 통해 기본위치에서 이동시킬수있음.(display 속성을 주지않으면 동작하지않음.)

absolute

절대적인 위치에 고정시킴. 항상 그위치에 고정됨.(전체HTML기준)

부모요소가 있을때만 고정됨, 부모요소가 없으면 fixed와 동일한기능.

fixed

한위치에 고정시켜줌 스크롤을 내려도 그자리에 고정됨.

sticky

맨처음 보일때는 안붙어있지만 스크롤을 내리다보면 상단에 고정됨.

float

이미지 주변에 텍스트를 감싸기위해 만들어진 프로퍼티.
요즘은 flex가 나와서 잘은 쓰지않음.

속성은 left, right, none 세개가 있음.

overflow:hidden 박스안에 넘치는내용을 숨겨줌.

line-height

태그안에 문자를 중앙정렬하고싶을때 flex안쓰고 중앙정렬하는법

가로는 text-align:center;

세로는 line-height:height 높이를 똑같이 설정해주면됨.