잰니의 성장블로그✈

transform/ transition 속성 .container { height: 100px; border: 4px solid black; } .container .item{ width: 100px; height: 100px; background-color: rgb(247, 218, 165); transition: 1s; /* 1초 동안 변형되면서 애니메이션처럼 자연스럽게 변환 */ } .container .item:hover{ /* 커서를 가져다 놓으면 */ transform: rotate(45deg); /* 45도로 변환 */ background-color: orange; border-radius: 50%; }

디스플레이 속성(Display) 디스플레이 속성을 사용하면 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있다. 주로 웹 문서의 네비게이션을 만들면서 메뉴 항목을 가로로 배치할 때 많이 사용하고, 이미지를 표 형태로 배치 할 수 있다. block 인라인 레벨 요소를 블록 레벨 요소로 만든다. inline 블록 레벨 요소를 인라인 레벨 요소로 만든다. inline-block 인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다. none 해당 요소를 화면에 표시하지 않는다. flex 속성 .container { height: 200px; border: 4px solid black; display: flex; /*수평정렬*/ } justify-conte..

플렉서블 박스(Flexable Box) 플렉서블 박스는 간단히 플렉스 박스(FlexBox)라고도 하는데 박스를 쉽게 가변적으로 만들어 주고 동시에 반응형 웹을 위한 몇 가지 기능도 제공해주는 최신 기술이다. 플렉스 박스는 컨테이너(Container)와 아이템(Item)이라는 두 개의 개념이 필수적으로 존재해야 한다. 아이템이 컨테이너 안에 들어 있게 된다. Flex Box 장점 콘텐츠를 수평 방향으로 쉽게 중앙 정렬할 수 있다. 뷰 포트의 너비에 따라 요소의 배치 순서를 달리 할 수 있다. 박스 내 요소의 여백과 배치를 자동으로 조절 할 수 있다. Flex Direction의 속성 값 row 기본 값, 플렉스 박스의 아이템을 수평 방향으로 배치(좌->우) row-reverse 속성 값 row와 동일하나 ..

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

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

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

로그인 폼 아이디 로그인 비밀번호

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

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

박스 모델이란? 웹 페이지의 모든 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; }..