HTML, CSS
시작과 동시에 종료되는 태그: img 태그, br 태그(줄 바꿈)
위 태그들은 끝 태그를 붙여주지 않아도 된다
span 태그와 p태그의 공통점과 차이점
span 태그와 p태그는 둘다 텍스트 태그라는 공통점이 있으나
span 태그는 줄이 바뀌지 않고 p태그는 줄이 바뀐다
div 태그는 태그 자체의 의미는 없고 섹션을 구분하기 위해 사용된다
div의 가로크기는 화면의 가로 전체 크기이고, 세로 크기는 div 태그 안 내용의 크기이다
이를 block 요소라고 하며 p, header, h1 등등이 block 요소이다.
색상 표현은 hex 색상코드, rgb값, hsl 등으로 표현할 수 있다
hex는 #eb4639,
rgb는 rgb(235, 70, 57),
hsl은 hsl(4, 82%, 57%) 등으로 표현된다
margin, padding의 방향
시계 방향순으로 top, right, bottom, left 순으로 값을 표현
ex) padding: 50px 50px 50px 50px
padding과 테두리 값을 설정하면 정해진 너비를 넘어서 크기 값이 변하게 되는데 이때 box-sizing: border-box 값을 주면 패딩과 테두리가 너비를 넘지 않는다.
이미지를 추가하는 방법 중에서 가장 많이 쓰이는 방법은
img 태그를 사용하는 것과 배경이미지를 넣는 것 2가지가 있다
img의 alt속성은 이미지가 뜨지 않았을 때 이미지 대신 보여줄 텍스트를 말한다
이미지의 크기는 가로, 세로 중 하나만 조절하여도 나머지는 비율에 맞게 조정된다
부모 요소에 크기를 지정하고 자식 요소에 width: 100%를 지정하면 부모 요소의 크기만큼 이미지가 그려지게 된다
Block 요소 Inline 요소
Block 요소
header, footer, p, li, table, div, h1 등
Block 요소는 가로로 화면을 꽉 채우고 있기 때문에 다른 요소가 들어오려는 것을 block 한다
Block 요소들은 가로 전체를 차지하기 때문에 항상 한줄씩 차지하고 있다
inline 요소
span, a, img 등
display, float을 이용하여 inline과 block을 넘나들 수 있다
display: none -> display: block
메뉴바 표현 등으로 자주 쓰이는 기법
