본문 바로가기
728x90
반응형

웹UI46

HTML - div와 span 공통점 : 의미 없이 요소를 묶는 태그 -> container : 웹이 단순한 문서에서 벗어나 형태를 갖게 되었기 때문에 자주 사용된다. 차이점 : div 태그는 block-level로 한 줄 전체 영역을 차지한다. : span 태그는 inline-level로 한 줄에 여러 영역이 들어갈 수 있다. : div의 margin은 4방향 모두 적용이 되며, span의 margin은 양옆으로만 적용이 된다. block block inline inline inline 2021. 3. 4.
css 폰트 (font-family), 줄간격(line-height) font-family -> family-name과 generic-family로 구성 -> 버티컬 바 '|' 로 여러 폰트를 지정할 수 있다 -> generic-family는 family-name으로 지정한 폰트가 없을 시 대체 폰트를 사용 line-height -> 포느 사이즈를 포함한 간격 -> 브라우저마다 행간에서 폰트사이즈를 제외한 남는 간격이 홀수일 경우 처리 방법이 다르다 2021. 1. 12.
CSS box model - 패딩(padding), 마진(margin) padding과 margin은 축약형 사용 가능 값은 top부터 시계방향으로 right bottom left 순으로 padding:10px 10p; 으로 작성시 상하와 좌우 값은 같은 것으로 판단하여 padding:10px 10px 10px 10px; 과 같아짐 margin:auto; -> 가로축 중앙 정렬에 사용되며 width 값이 필요하다 margin collapse -> 아래의 top과 위의bottom margin 값이 겹치게 되면 더 큰 값이 적용된다 음수, auto -> margin은 음수 사용가능 padding은 불가 margin padding모두 %사용 시 가로축 기준으로 크기를 잡는다 -> top bottom의 경우에도 가로축을 기준으로 잡기 때문에 주의해야함 margin이 -일 경우 화면.. 2021. 1. 11.
CSS 색상 color:black; color:#000000; 16진수, 0~9 + a~f #ff0000 -> red #00ff00 -> green ##0000ff -> blue color:#000; 16 진수가 둘씩 반복될 경우 축약 가능 #ff0000 -> # f00 -> red color:rgb(0,0,0); 각 자리에 0~255 color:rgba(0,0,0,0.5); 마지막 a는 알파 값으로 투명도를 뜻함 -> 0~1 까지의 값으로 0.5면 반투명 1은 투명 2021. 1. 11.
728x90
반응형