본문 바로가기

Front/CSS7

CSS - header 메뉴 정렬 (float / clear) float 왼쪽 또는 오른쪽 정렬할 때 사용하는 속성 float:left; float:right; clear float 속성 해제 clear:left; -> float:left; 해제 clear:right; -> float:right; 해제 clear:both: -> float:left;와 float:right; 모두 해제 float 속성 문제 float을 적용해서 정렬된 요소 다음에 오는 요소가 float이 적용된 요소 뒤로 붙는 현상 정상 float:right; 를 적용하고 해제했을 때 / float:left;를 적용하고 해제했을 때 float:right; 를 적용했을 때 문제 float:left; 를 적용했을 때 문제 문제 해결 방법(1) : float이 적용된 요소 다음에 오는 요소에 clear .. 2021. 12. 9.
Bootstrap - 주요 기능 Bootstrap 주요 기능 Containers Jumbotron Grid button Table Image Containers 레이아웃 최상위 요소로 다른 요소 포함 .container : 반응형 고정 폭 컨테이너 .container-fulid : 뷰포트 전체 폭까지 늘어나는 최대 폭 컨테이너 Containers 예제 viewport 포함 : css/bootstrap.min.css : jQuery 파일 소스 지정 : js/bootstrap.min.js 소스 지정 주의!! jquery파일의 소스 지정이 먼저 와야 함 container.html Bootstrap Container Bootstrap Container Jumbotron 일종의 대형 전광판 특정 콘텐츠나 관심있는 정보를 눈에 띄게 보여주기 위한.. 2021. 12. 7.
Bootstrap Bootstrap HTML, CSS, JS 라이브러리 jQuery 기반의 HTML5 Web Framework 프론트엔드에서 작동되는 프레임워크 트위터에서 사용하던 각종 레이아웃, 버튼, 입력 요소 등 UI 요소들을 누구나 사용할 수 있도록 만들어진 오픈소스 프레임워크 (라이브러리) HTML/CSS 기반의 템플릿 양식, 버튼, 내비게이션 등 다양한 UI 요소 포함 자바스크립트 선택적 확장 가능 특징 쉽고 편리한 사용 가능 HTML/CSS 기본 지식만 있으면 누구나 사용 가능 반응형 웹 디자인 PC 또는 스마트폰이나 태블릿 등의 모바일용 디자인 지원 모든 최신 브라우저와 호환 기능 CSS 기능 : 디자인이나 스타일 적용 컴포넌트 기능 : 내비게이션 바, 탭, 버튼 등의 기능을 간단하게 수정해서 사용 가능 자.. 2021. 12. 6.
CSS - 반응형 웹 반응형 웹 PC, TV, 내비게이션, 스마트 기기 등 다양한 기기의 화면이나 환경에 맞게 자유자재로 변하도록 만들어진 웹 장점 유지보수가 간편함 모바일 버전과 데스크탑 버전 두 개의 웹사이트 만들게 될 경우 웹 사이트 수정 / 갱신할 때 모바일, 데스크탑 버전의 수정/갱신 동시 지원 모바일, 태블릿, 데스크탑 모두 하나의 html, css에서 유지보수 가능(한 파일에서 관리가 가능하다는 의미. 쉽다는건 아님) 마케팅에 유리함 환경이나 기기에 따라 최적화된 구조로 웹사이트를 변경해서 보여줄 수 있기 때문에 확실한 내용 전달 가능 비용면에서 효과적임 두 가지 버전의 웹사이트를 만들지 않아도 되기 때문에 기업 비용 측면에서 상당히 효과적임 검색 엔진 최적화 특정 키워드 검색 시, 검색 결과에서 상위권에 나타나.. 2021. 12. 6.
CSS 연습문제 CSS 연습문제 메뉴 항목에 마우스 올렸을 때 글자색 빨간색, 밑줄 표시 테이블 사용 cssEX.html 패션잡화 주방용품 생활건강 DIY가구 캐주얼화 스니커즈 미니크로스 여성 가방 페이퍼플레인 겨울 신발 35,000원 20,000원 25,800원 공지사항 [배송] : 무료배송 변경 안내 2021.08.25 [전시] : DIY 가구 전시 안내 2021.09.01 [판매] : 11월 특가 상품 안내 2021.11.01 커뮤니티 [레시피] : 살 안찌는 야식 만들기 [가구] : 헌집 새집 베스트 가구 [후기] : 배송이 잘못 됐어요 ㅠㅠ cssEx.css #wrap { margin:0 auto; /* 내가 가운데 정렬 */ width:800px; /* 가운데 정렬하기 위해서는 width 값 있어야 함 */ .. 2021. 12. 6.
CSS - 속성 CSS 속성 텍스트 속성 배경 색상 / 이미지 관련 속성 테두리 속성 여백 속성 display 속성 : inline / block / inline-block float 속성 목록 관련 속성 위치 관련 속성 겹침 (레이어) overflow visibility / opacity 그림자 텍스트 속성 font-family : "굴림", "맑은 고딕"; /* 1순위 2순위, ... */ font-size : 40px; color : blue; /* 글자색 */ font-style : italic; font-weight : bold; /* 굵게 */ text-decoration : underline; letter-spacing : 3px; /* 글자 사이 간격 */ word-spacing : 5px; /” 단어 사.. 2021. 12. 5.
CSS - 정의, 선택자 CSS (스타일 시트) Cascading Style Sheets: 계단형 스타일 시트 단계적으로 스타일 적용 여러 스타일이 겹치면 맨 마지막 스타일 적용 HTML의 레이아웃 배치 등의 한계를 보완하기 위해 개발된 독립 언어 일정 기능들을 미리 지정하여 여러 부분에서 동일하게 적용 CSS에서 가능한 작업 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 지정 정렬 방식, 그림자, 동적인 기능 등 다양한 효과 CSS의 장점 자유롭게 웹 문서 편집 가능 원하는 형태로 HTML 문서 내의 글꼴, 크기, 색상, 배경, 테두리, 레이아웃 배치, 여백 등 자유롭게 편집 통일감 있는 문서 작성 한 번만 정의하여 문서에 일관되게 적용 가능 편리한 문서 관리 외부 스타일 시트 파일을 사용해.. 2021. 12. 5.