728x90

일단 해보는 코딩 125

[HTML/CSS] 반응형 웹 폰트/기술

반응형 웹 폰트란? 일반적인 웹 페이지에서는 fontsize 속성을 이용해서 픽셀 단위로 글자 크기를 설정한다. 이 px 단위는 모니터 해상도를 기준으로 하기 때문에 스마트 폰 등 다양한 기기를 고려해야 하는 반응형 웹에서 글자 크기를 설정하기에 적합하지 않다. 실제로 px 단위로 각종 기기에 모두 적합한 글자 크기를 지정하기는 불가능하다고 볼 수 있다. 이런 문제를 해결하기 위해서 반응형 웹에서는 px 단위 대신 상위 요소에서의 설정이 하위요소에게 영향을 끼치는 상속의 개념이 있는 em또는 상속의 개념이 없는 rem 단위를 많이 사용한다. => em 단위는 영문자 M의 너비를 1em으로 계산해서 이에 대한 상대적 크기로 글자 크기를 계산한다. em 활용 rem이란? em 단위의 상속이 작업 시 편리함을..

[HTML/CSS] 반응형 웹/디자인 , 뷰 포트(View Port), 그리드

반응형 웹(Responsive Web) 작성해둔 웹 페이지의 구성과 디자인이 데스크탑, 태블릿, 스마트폰 등 다양한 접속 기기에 반응하여 달라지게 하는 기술을 반응형 웹이라고 한다. 여기서 반응형 웹의 기본이 되는 뷰 포트의 개념, 그리드 뷰, 반응형 웹의 폰트 등을 알아보는데 그리드 뷰에서 가장 많이 사용되는 12열_그리드_시스템의 동작 원리와 이를 활용하여 실제로 웹 페이지를 만들어 본다. 반응형 웹 디자인(Responsive Web Design) 반응형 웹 디자인은 하나의 웹 페이지로 데스크 톱, 태블릿, 스마트 폰 등 다양한 기기에서 콘텐츠가 제대로 보이게 하는 기술이다. 일반적으로 문서의 너비가 고정된 고정 레이아웃에 맞게 개발된 웹 페이지는 스마트 폰에서 보면 이미지나 글자가 너무 작아지게 되..

[HTML] HTML5 레이아웃 요소

HTML5 레이아웃 요소 div 요소를 이용해서 웹 페이지를 레이아웃하면 태그가 필연적으로 많이 사용되게 된다. 페이지 내에 산재되어 있는 태그들은 웹 페이지의 구조를 복잡하게 만들고 웹 페이지의 가독성을 떨어뜨린다. 이렇게 되면 웹 페이지의 유지 보수가 어렵고 작업자 이외에는 문서를 이해하기 어려워서 공동작업도 어렵게 될 것이다. 이런 단점을 보완하기 위해서 HTML5 웹 페이지의 레이아웃을 상대 위치 지정(position : relative) 요소 A 요소 B 요소 C 절대 위치 지정(position : absolute) 요소 A 요소 B 요소 C 절대 위치 지정(position : absolute, 부모 요소가 있는 경우) 요소 A 요소 B 요소 C 위치 고정(position : fixed) 요소A

[CSS] 레이아웃 배치 설정 (float, clear 설정)

웹 페이지 레이아웃 웹 페이지를 제작할 때 먼저 구획을 나누어 몇 개의 큰 박스를 화면에 배치한 다음 각 박스 안에서 세부적인 내용에 관한 요소들의 배치가 이뤄진다. 이와 같이 웹 페이지의 전체적인 윤곽을 잡는 작업을 웹 페이지 레이아웃(Layout)이라고 한다. div 요소를 이용한 레이아웃 상단 헤더 사이드 바 메인 섹션 하단 푸터 박스의 중앙 배치 안녕하세요 안녕하세요 float 요소 이용 CSS의 float 속성을 이용하면 웹 페이지 요소를 임의로 창의 좌측 또는 우측에 배치할 수 있다. 요소 A 요소 B 요소 C 요소 D clear 속성 CSS의 float 속성은 요소를 임의로(float) 창의 좌측이나 우측에 배치하는데 하나의 요소에 float 속성이 적용되면 그 다음에 오는 요소들도 계속해서..

[CSS] CSS 활용 (IMG,TABLE), Display, list 꾸미기

배경 이미지 일반적으로 웹 페이지에 이미지를 삽입할 대에는 태그를 사용해서 직접 삽입하는데, CSS를 이용하면 HTML 요소의 배경에 이미지를 삽입할 수 있다. 배경 이미지는 태그를 이용해서 이미지를 삽입했을 때와 달리 배경 이미지 위에 버튼이나 다른 HTML 요소를 넣을 수도 있다. 속성 값 의미 no-repeat 배경 이미지 반복되지 않음 repeat-x 배경 이미지가 수평 방향으로 반복됨 repeat-y 배경 이미지가 수직 방향으로 반복됨 배경 이미지 삽입 웹 페이지에 배경 이미지를 삽입하는 데에는 background-image 속성을 이용한다. 배경 이미지가 바탕화면보다 작을 때에는 배경 이미지가 수평과 수직 방향으로 반복된다. 배경 이미지 삽입 웹 페이지에 배경 이미지를 삽입하는 데에는 back..

[CSS] 선택자(Selector)종류와 사용법

CSS 선택자(Selector) CSS꾸미는 영역을 선택하는 역할을 한다. 선택자 중에서 일반적으로 널리 사용되는 것은 전체 선택자, 태그 선택자, 그룹 선택자, 아이디 선택자, 클래스 선택자, 하위 선택자이다. 선택자 CSS 선택자는 CSS로 꾸미고자 하는 HTML 영역을 선택하는데 사용된다. 앞에서의 CSS 실급에서는 HTML 태그 이름을 선택자로 사용했었는데 이를 태그 선택자()라고 부른다. 선택자 {} 식으로 사용된다. 선택자는 CSS 구조에서 제일 앞에 위치하며 CSS로 꾸밀 HTML 영역을 선택한다. 이렇게 선택된 영역은 선택자에 의해서 지정된 CSS 명령들이 적용된다. 기호 의미 설명 * 전체 선택자 HTML 요소 전체 선택 p 태그 선택자 문단 태그의 영역 선택 p, h3 그룹 선택자 문단..

[HTML]Div태그

div태그란 ? 태그는 division(구분)으로써 HTML 요소를 담는 박스와 같은 것으로 생각하면 된다. 또한 는 HTML 요소들을 화면에 배치, 즉 레이아웃하는 데 많이 사용된다. 박스 모델이란? 웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며 여백을 조정하여 요소를 화면에 배치할 수 있게 한다. 박스 모델이란? 웹 페이지에 있는 모든 HTML 요소는 사각형 형태를 가지는 박스로 생각할 수 있다. CSS에서는 이러한 박스를 기반으로 하여 요소에 경계선을 그릴 수 있으며 여백을 조정하여 요소를 화면에 배치할 수 있게 한다.

[CSS] 박스 모델 꾸미기

박스 모델이란? 웹 페이지의 모든 HTML 요소는 박스 형태를 갖는다. 박스 모델은 HTML 요소들을 꾸미고 화면에 비치하는 기본 기능을 제공한다. 박스 모델의 구성 속성 값 설명 Margin : _px (픽셀) 경계선과 다른 외부 요소와의 간격 Border : solid, dashed,dotted,groove 경계선 실선 - radius : _px, box-shadow(_px _px _px) 모서리 종류 Padding : _px (픽셀) 경계선과 HTML 내부 요소의 간격 h5 { margin : 50px; border : solid 10px green; padding : 20px; } h4 { margin : 50px; border : dashed 30px green; padding : 80px; }..

728x90