본문 바로가기

html & css/개념55

박스모델 박스모델 - 각각의 태그들이 웹페이지에 표현될때 그 태그의 부피감을 결정한다. DOCTYPE html> p, a { /* border-width: 10px; border-style: solid; border-color: red; */ border: 10px solid red; padding: 20px; margin: 40px; width: 200px; } border (경계선) - border: 의 형태로 두께, 스타일, 색상을 한번에 지정할 수 있다. padding - 요소와 요소 사이의 간격 margin - 콘텐츠와 경계 사이의 간격 * inline 요소에서 너비(width)와 높이(height)는 적용되지 않는다. 2023. 11. 21.
인라인 VS 블럭레벨 각각의 태그들은 태그의 성격에 따라서 화면 전체를 쓰는 태그와 자기 자신의 크기만큼만 사용하는 태그가 존재한다. inline - 자신과 자신을 둘러싸고있는 다른 텍스트나, 정보들과 하나의 같은 줄에 위치하는 형태의 태그를 inline element라고 한다. (ex. a태그) block element tag - 혼자 화면 한줄을 다쓰는 태그를 block element tag라고 한다. (ex. h1태그) 존재하는 이유? - block element tag가 합리적인 것이 있고, inline element가 합리적인 것들이 존재하기 때문에 요소 변경하기 inline element을 block element tag으로, block element tag을 inline element로 변경할 수 있다. - di.. 2023. 11. 21.
서체 다루기 1. 크기 (font-size) 폰트 크기의 단위 - px, em, re, px - 절대적, 크기가 고정되어있음 em, rem - 상대적, 브라우저 설정에 따라 폰트의 크기가 달라진다. 오늘날에는 rem을 사용하는 추세(폰트 크기를 조정할 수 있는 사용자의 권리) rem - html을 기준으로 폰트 크기가 정해짐. (html 기본 폰트 크기가 16px이고, 2rem일 경우, 32px로 보여진다.) DOCTYPE html> #px { font-size: 16px; } #rem { font-size: 1rem; } PX REM 2. 색상 (color) 단위 - color name, hex, rgb color name - orange, red, tomato 등 직접 색을 지정하여 적용 rgb - red, gr.. 2023. 11. 20.
캐스케이딩이란? (적용 우선순위) 및 실습 CSS - Cascading Style Sheet의 약자 - 웹브라우저와 사용자, 저자 모두가 조화를 이루어져햐 하는 철학을 구현하기 위한 방법으로 CSS를 탄생시킴 - 하지만 조화를 위해서는 대가가 필요, 대가가 바로 우선순위이다. - 동시에 같은 디자인을 적용하면 저자 > 사용자 > 웹브라우저 우선순위가 적용한다. 실습 - 더 구체적인 것이 우선순위를 가진다. - 다만 id 선택자보단 태그 안의 style 속성이 우선순위를 가진다. - 더 포괄적인 것이 우선순위가 낮다. 제일 낮은 우선 순위인 li 선택자를 최상위 우선순위로 올리려면 !important를 사용해 우선순위를 높힐 수 있다. 다만 가급적 사용하지 않는 것이 좋다. DOCTYPE html> li { color: red; } #idsel {.. 2023. 11. 20.

티스토리툴바