프로그래밍/CSS25 25 Bootstrap(부트스트랩) BootStrap(부트스트랩) 부트 스트랩이란? - 프론트엔드 개발을 빠르고 쉽게 할 수있는 프레임 워크 프레임 워크란? 재사용이 가능한 요소의 집합으로, 구조와 틀을 결정, 확장 가능한 기반 코드이다. - HTML과 CSS기반의 템플릿 양식, 버튼, 네비케이션 및 기타 페이지를 구성하는 요소 포함 - 자바스크립트를 선택적으로 확장 할 수 있음 - GitHub의 오픈 소스로 사용가능, 상업적으로 이용 가능 부트 스트랩을 사용하는 이유 - 서로 다른 인터페이스를 사용한 여러 개발자들의 공동작업이 가능하다. - 디자인 불일치, 관리 어려움, 방대한 코드량등의 어려움을 해결해준다. 부트 스트랩 웹사이트 http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프.. 2021. 5. 30. 24 반응형 웹페이지를 만들어보자 - 2 반응형 웹페이지를 만들어보자 - 2 만들어 볼 예시는 아래 동영상의 페이지이다. [구성] [HTML] 카페소개 오시는 길 이달의 추천 카페 소개 영업 시간 : 오전 9시~ 밤 10시 휴무 : 매주 수요일(수요일이 공휴일인 경우 수요일 영업, 다음날 휴무) 오시는 길 서귀포시 안덕면 사계리 000-000 제주 올레 10코스 산방산 근처 이달의 추천 핸드드립 아이스 커피 1인분 기준으로 서버에 각 얼음 5조각(한조각은 20cc)넣고 추출을 시작한다. 평상시 보다 원두의 양은 2배정도(20g)와 추출액은 얼음 포함해서 200cc까지 내린다. 아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다. My times with Coffee [CSS] /*웹폰트*/ @font-face { font-family: 'Cafe.. 2021. 5. 15. 23 반응형 웹페이지를 만들어보자 - 1 반응형 웹페이지를 만들어보자 만들어 볼 예시는 바로 아래 동영상의 페이지이다 [구성] [HTML] 솔로의 식탁 밥/죽 국/찌개 반찬 일품요리 음료/칵테일 솔로의 식탁 [CSS] @font-face { /*웹폰트*/ font-family: 'GmarketSansBold'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff'); font-weight: normal; font-style: normal; } #container{ /*가장 큰 틀*/ width: 100%; /*가로 어떤 기기로 접속하든 꽉차게 설정*/ font-family: 'GmarketSansBold';.. 2021. 5. 15. 22 CSS의 우선순위 계산 CSS의 우선순위 0순위. !important가 적용된 속성 선택자{속성명: 속성값 !important;} 1. 인라인(요소에 직접 style 속성을 적용하는 것) -> 1000점 안녕 2. id 속성 -> 100점 안녕 3. class 속성, 속성 선택자 -> 10점 안녕 4. element -> 1점 안녕 * 동일한 선택자일 경우 나중에 적용한 것이 우선시 된다. 문제를 하나 풀어보자! CSS 우선순위 div 1번 div 2번 div 3번 div 4번 div 5번 div 6번 li 1번 위와 같은 코드가 있을 때 각 각 div의 색깔은 어떤 색일까? 결과는 바로! 생각한 결과랑 동일 했나요? (●'◡'●) 풀이 CSS 우선순위 div 1번 div 2번 div 3번 div 4번 div 5번 div 6번.. 2021. 5. 11. 21 CSS Animation CSS Animation CSS Animation은 요소의 현재 스타일을 다른 스타일로 천천히 변화 시킬 수 있다. CSS2에서는 이러한 효과를 표현하기 위해서는 자바스크립트나 플래시 등의 외부 플러그인을 사용해야만 했다. 하지만, CSS3에서는 @keyframes 규칙을 사용하여 손쉽게 적용할 수 있게되었다. @keyframes 규칙이란? CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 한다. 키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시한다. @keyframes 규칙 안에 이렇게 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천.. 2021. 5. 11. 20 CSS 2D(transform, transition) CSS 2D 1. transform transform은 이차원 좌표에서 요소를 변형시키는 속성으로 이동(translate), 확대(scale), 축소(scale), 회전(rotate), 경사(skew)등을 만들 수 있다. [2D 변형을 위해 제공되는 메소드] 메소드명 설명 translate() 현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동함 주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동 scale() 해당 요소의 크기를 주어진 배율만큼 늘리거나 줄임 주어진 배율이 1보다 크면 크기를 늘리고, 0보다 크고 1보다 작으면 크기를 줄임 rotate() 해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전함 주어진 각도가 양수이면 시계 방향으.. 2021. 5. 10. 19 벤더 프리픽스(vender prefix) 벤더 프리픽스(vender prefix) 세계적으로 가장 많이 사용되는 웹 브라우저에는 익스플로러, 크롬, 파이어폭스, 사파리, 오페라 등이 있다. 벤더 프리픽스란, 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의웹 브라우저에 그 사실을 알리기 위해 사용하는 접두사(prefix)를 의미한다. 아직 css 권고안에 포함되지 않은 기능이나, 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용할 때 사용한다. 주요 웹 브라우저의 벤더 프리픽스(vendor prefix) 예시 #gradient{ /*속성을 지원하지 않는 브라우저를 위한 코드*/ background: red; /*webkit : 크롬과 엣지, 사파리를 위한 코드*/ background: -webkit-linea.. 2021. 5. 10. 18 미디어쿼리와 시맨틱태그 미디어쿼리(media query) 미디어쿼리는 width, height, color .. 속성과 같은 미디어 관련 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있다. 미디어 쿼리를 사용하면 컨텐츠를 별도로 변경하지 않아도 웹 페이지 접속하고 있는 기기에 알맞은 형태로 스타일이 조정된다. [문법] @media 매체유형 and(표현식){ css 스타일 코드 ... } 매체유형 매체유형 설명 all 모든매체에 사용 screen 컴퓨터나 태블릿, 스마트폰등 에 사용 speech 스크린 리더에 사용 print 프린터 기기에 사용 예시 @media screen and (min-width: 1024px) { /*만약 최소 사이즈가 1024보다 크다면 body색 변경*/ body{background-color: .. 2021. 5. 9. 17 플렉서블 레이아웃 플렉서블 레이아웃 대부분의 웹사이트는 수직으로 구성 되어 있다. 수직으로 쌓이기 때문에 수직구성은 쉽게 구성할 수 있으나 수평 구성은 구현하기 쉽지않다. 이럴 때 좀 더 쉽게 수평으로 레이아웃을 구성하기 위해 사용하는 것이 플렉서블 레이아웃 이다. 선택자{display:flex;} 속성 1. flex-wrap 플렉스 라인에 더 이상 여유가 없을 때, 플렉스 요소의 위치를 다음줄로 넘길지 여부를 설정할 때 사용한다. nowrap 기본설정, 플렉스 요소가 다음줄로 넘어가지 않음 요소의 너비를 줄여 한줄에 모두 배치 wrap 플렉스 요소가 여유 공간이 없으면 다음줄로 넘김 wrap-reverse 플렉스 요소가 여유 공간이 없으면 다음줄로 넘어가서 배치됨. 단, 아래쪽이 아닌 위쪽으로 넘김 선택자{flex-wr.. 2021. 5. 9. 이전 1 2 3 다음 반응형
