테크노트/css7 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 디스플레이 타입 (display types) css에서 개념적으로나 사용상으로 중요한 부분 중 하나가 css 디스플레이 타입에 대한 내용입니다. 이것을 사용하기전에 해당 개념에 대해서 이해하는 것이 필수적입니다. (1) 요소의 종류 * 연습 소스 *block태그(영역설정,한줄엔터)* 제목태그 1 제목태그 2 *inline태그(영역불가,한줄연결)* 링크태그 1 링크태그 2 *inline-block태그(영역설정,한줄연결)* 1 2 (2) display 속성 사용법 위의 3가지 요소를 가지고 아래와 같이 디스플레이를 선언해서 사용합니다. * 연습 소스 *block태그(영역설정,한줄엔터)->inline태그* 제목태그 1 제목태그 2 *inline태그(영역불가,한줄연결)->block태그* 링크태그 1 링크태그 2 *inline-block태그(영역설정,한줄연.. 2022. 4. 29. 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가 무엇인지에 대해 간략하게 알아보는 시간을 갖겠습니다. CSS란 Cascading Style Sheets 의 줄임말로 documents가 사용자에게 어떻게 보여질까를 기술하는 언어이고 보통 HTML 문서를 시각적으로 꾸미는 용도로 사용한다. 선택자(selector)는 html 문서상에서 각 태그들을 식별할 수 있게 붙여놓은 이름을 선택자로 활용할 수 있습니다. 위의 CCS 타입이 눈에 안 들어오거나 가독성이 떨어진다고 생각할 수도 있으나 선택자의 이름을 임으로 정하고 중괄호를 이용해 블록을 만들어주고 그 안에 마치 키(key)값과 밸류(value)값을 선언하듯이 프로퍼티(property) 와 프로퍼티 밸류(property value)를 선언하면 됩니다. 자세한 것은 CSS 별도 클래스.. 2022. 1. 7. CSS의 확장, 부트스트랩(bootstrap) [부트스트랩 = HTML, CSS, JS 프레임워크] 이번 시간은 실무에서 주로 사용하는 CSS인 부트스트랩에 대해서 잠깐 보고 가겠습니다. 웹페이지를 만들기 위한 CSS도 자주 사용하는 요소들이 있을 것이고 미리 좀 더 가지런하게(?) 만들어 놓은 그런것이 바로 부트스트랩이라고 합니다. 이것은 웹 프론트개발에서의 구조를 미리 만들어준 프레임워크입니다. 부트스트랩은 각종 버튼 ,테이블, 입력창 등 여러가지의 CSS 스타일과 레아이웃 정렬을 class만으로 제어할 수 있으며 웹개발을 진행할 시에 개발의 완성물을 통일시키기 위해 초기에 공통 CSS 프레임워크를 정하고 개발을 시작하는 경우가 있습니다. http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프.. 2021. 11. 5. CSS 기초는 알아두자 CSS (Cascading Style Sheets)는 웹페이지를 다양하게 꾸미는 데 필요한 코드입니다. HTML과 같은 마크업 언어가 아닌 스타일을 적용할 수 있는 스타일시트 언어인 것이죠 각각의 요소가 어떻게 구성하는지 잠깐 살펴보자면 전체구조는 rule set 이라고 부릅니다. 각 요소들은 - 선택자 (selelctor) 맨 앞에 있는 요소 이름입니다. 위의 예제에서는 p 인것이죠 다른 요소를 꾸미기 위해서는 다른 선택자를 사용하면 됩니다. p 대신에 p, li, h1 이렇게 말입니다 - 선언 (declaration) color: red; 와 같은 규칙을 코딩하는 것이며 다양한 요소의 속성과 속성값 등을 기술합니다. - 속성 (property) rule 내에서 영향을 줄 속성을 선택합니다. 이 예에서.. 2021. 11. 3. 이전 1 다음
