본문 바로가기

분류 전체보기127

position CSS position속겅은 문서 상에 요소를 배치하는 방법을 지정한다. top, bottom, left, right속성이 요소를배치할 최종 위치를 결정한다. static position값을 지정하지 않았을때 기본값이다. top, bottom, left, right, z-index영향을 받지않는다. relative 자기 자신을 기준으로 top,bottom,left,right의 값에 따라 위치를 조정한다. 위치가 바꼈을때 다른 요소에는 영향을 주지 않는다. 따라서, 레이아웃에서 요소가 차지하는 공간은 static일때와 같다. absolute 가장 가까운 부모 요소 position: relative값을 기준으로 위치를 조정한다. 부모 요소가 position: relative를 가진 부모가 없다면, body를.. 2023. 2. 14.
Box Model 박스 모델(box model) 모든 html요소는 박스 모양으로 구성되며, 이것을 박스 모델이라 한다. 박스 모델은 html요소를 padding, border, margin, content로 구분한다. content : 텍스트나 이미지 박스의 실질적 내용이 있다. padding : content와 border의 간격. 즉, content의 내부여백. border : content를 감싸는 영역. margin : border와 이웃하는 요소의 가이 간격. 즉 content의 외부여백. 📦 Box-sizing Box Model에서 너비와 높이는 요소 컨텐츠 박스 크기에 적용된다. 박스에 안쪽 여백에 따라 사이즈가 변경되는데 이를 해결하기 위해 box-sizing이란 속성을 사용한다. content-box 요.. 2023. 2. 14.
CSS 반응형 단위 웹 접근성이 좋은 사이트는 고정 단위 px대신 반응형 단위 em, rem, vw, vh 등을 사용한다. px을 사용하게 되면 고정값으로 값이 할당 되기때문에 사이즈를 변경해도 반응일 없다. em 폰트 사이즈에 현제 지정된 포인트 사이즈를 나타낸다. 브라우저는 기본적으로 html 폰트 사이즈 16px를 지정한다. 따라서 html의 폰트 사이즈를 설정하지 않았다면 16px == 1em이다. 이처럼 em은 상대적이다. 부모 요소의 사이즈에 따라 변경되어야 할 때 사용한다. rem rem은 부모의 사이즈에 따라 사이즈가 계산되는 것이 아니라 루트에 지정된 폰트 사이즈에 따라서 크기가 결정된다. 주로 폰트 사이즈를 지정할때 em보다는 rem을 사용한다. vw,vh 뷰포트 너비값과 높이값은 넓이, 높이의 100분의.. 2023. 2. 13.
웹 표준 (Web Standards)과 시멘틱 태그 (Semantic Tags) 🌐 웹 표준 웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 동일하게 구현함과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 웹 표준의 장점 수정 및 운영관리 용이 접근성 향상 File Size축소, 서버 저장 공간 절약 효율적인 마크업 호환성 가능 ✅ 웹 접근성 정보 통신 접근성(Web 접근성)은 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항이다. 🧱 시맨틱 웹이란? '의미론적인, 의미의'란 뜻을 가지고있다. 즉, 의미 있는 웹이라고 설명할 .. 2023. 2. 6.

티스토리툴바