CSS4 CSS 반응형 웹(Mobile Responsiveness)의 기초 반응형 웹이 무엇일까요? 하나의 웹 템플릿으로 모든 디바이스에서 해당 컨텐츠들을 잃어버리지 않고 편안한 폰트사이즈와 레이아웃으로 보고자 하는 것이 목적 일 것입니다. 그런데 반응형 웹 말고 적응형 웹도 있다는 사실을 아시나요? 사실 모바일 시대가 도래하면서 반응형 웹을 구현하는 것이 쉽지가 않았습니다. 왜냐하면 재구축을 해야 하기 때문이죠 그래서 기존에 데스크탑 용 템플릿을 그대로 두고 추가되는 디바이스에 필요한 css 템플릿을 추가하는 형태로 운영하였습니다. 그 2가지의 특징을 알아보겠습니다. 이 중에서 반응형 웹이 현재로서는 대세이고 범용 기술입니다. 그리고 우리가 이것도 이해해야 합니다. 웹개발 그중에서 CSS 개발할때 모바일 퍼스트(mobile first)로 개발할지 데스크탑 퍼스트(desktop.. 2022. 5. 25. CSS 포지션(position) CSS 에서 포지션에 대한 이해와 사용은 중요합니다. CSS에서 포지션(position)이란? HTML에서 요소(엘리먼트)를 화면상에 어떻게 배치할 지를 지정하는 속성입니다. 즉 포지션 속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치하고 어떤 방식으로 사용할지를 결정할 수 있습니다. 포지션 속성을 지정하는 값은 5가지가 있습니다. static, relative, absolute, fixed, sticky 1) static position - static 포지션은 기본 포지션입니다. - 즉, 명시적으로 기술하지 않으면, static 이라고 보면 됩니다. - 포지션은 내부적으로 top, bottom, left, right 속성들이 있지만 static 포지션인 경우는 위치상으로 아무런 변화가 없습니다. .. 2022. 5. 10. CSS에서 사용하는 크기조정(Pixels, rem, em) 픽셀은 절대 단위이며 rem과 em은 상대 단위입니다. (1) 픽셀 (pixel) 정의 정의 : 절대(absolute)단위는 어떤 상황에서든 항상 고정된 길이를 나타내는 단위입니다. 대표적으로 많이 사용되는 단위가 픽셀(px)입니다 즉, 실생활에서 1cm가 항상 1cm 인 것처럼, 1px도 항상 1px입니다 1px(=0.02645833cm) (2) rem 정의 rem은 root em의 약자입니다. 즉 최상단(root)의 기준으로 크기를 맞추겠다는 의미인데 최상위 태그인 html에 정의된 사이즈를 기준으로 배수하겠다는 것입니다. (3) em 정의 em은 부모 요소를 기준으로 자식 요소의 크기를 정하는 것 em은 이와 같이 상위의 부모요소의 폰트사이즈를 기준으로 하기 때문에 아래와 같이 해당 요소를 계속 중.. 2022. 4. 6. CSS 기초는 알아두자 CSS (Cascading Style Sheets)는 웹페이지를 다양하게 꾸미는 데 필요한 코드입니다. HTML과 같은 마크업 언어가 아닌 스타일을 적용할 수 있는 스타일시트 언어인 것이죠 각각의 요소가 어떻게 구성하는지 잠깐 살펴보자면 전체구조는 rule set 이라고 부릅니다. 각 요소들은 - 선택자 (selelctor) 맨 앞에 있는 요소 이름입니다. 위의 예제에서는 p 인것이죠 다른 요소를 꾸미기 위해서는 다른 선택자를 사용하면 됩니다. p 대신에 p, li, h1 이렇게 말입니다 - 선언 (declaration) color: red; 와 같은 규칙을 코딩하는 것이며 다양한 요소의 속성과 속성값 등을 기술합니다. - 속성 (property) rule 내에서 영향을 줄 속성을 선택합니다. 이 예에서.. 2021. 11. 3. 이전 1 다음
