분류 전체보기
-
(69)CSS_transition1HTML, CSS 2023. 4. 4. 15:40
transition 1번째 예제 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> transition div{ width: 100px; height: 100px; float: left; margin: 30px; } #bg-tr{ background-color: gold; transition: ba..
-
(68)CSS_transfromHTML, CSS 2023. 4. 4. 15:39
transfrom 예제 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> transfrom p{ width: 600px; padding: 20px; border: 3px solid rgba(0, 0, 0, 0.5); } #translate{ transform: translate(30px, 50px..
-
(67)CSS_동적인 카페 소개 페이지 만들기HTML, CSS 2023. 4. 4. 15:37
동적인 카페 소개 페이지 만들기 아래 링크를 통해 각 태그의 설명을 볼 수 있다. https://jm-rograming.tistory.com/105 (66)CSS_기본문법 trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 jm-rograming.tistory.com DOCTYPE html> 카페 소개 카페소개 오시는 길 이달의 추천 카페 소개 영업 시간: 오전 9시 ~ 밤 10시 휴무: 매주 수요일 (수요일이 공휴일인 경우 수요일 영업, 다음날 휴무) 오시는길 서귀포시 안덕면 사계리 000-000 제주..
-
(66)CSS_기본문법HTML, CSS 2023. 4. 4. 15:34
trangsfrom 2차원 좌표에서 요소를 변형시키는 속성 tramslate : 이동 rotate : 회원 scale : 확대, 축소 skew : 경사, 비틀기 ✔ 벤터 프리픽스(vender prefix) 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실 을 알리기 위해 사용하는 접두사 W3C CSS 권고한에 포함되지 않는 기능이나, 포함되어 있지만 아직 완벽하게 재정된 상태가 아닌 기능을 사용할 때 붙임 -webkit- : 크롬, 엣지를 위한 접두사 -0- : 오페라를 위한 접두사 -ms- : 익스플로러를 위한 접두사 -moz- : 파이어폭스를 위한 접두사 해당 속성이 적용되지 않았을 경우 표현해야 할 코드를 가장 먼저 작성해야 하며, 표준 문법 코드는 가..
-
(65)CSS_미디어 쿼리 실전예제HTML, CSS 2023. 4. 3. 17:27
미디어 쿼리 실전 예제 아래 링크를 통해 각 태그들의 설명을 볼 수 있다. https://jm-rograming.tistory.com/95 (56)CSS_레이아웃 기본 문법 다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양, jm-rograming.tistory.com DOCTYPE html> 솔로의 식탁 솔로의식탁 밥/죽 샐러드 반찬 토스트 음료/칵테일 솔로의식탁 외부 css 코드 #container{ width: 100%; } #header{ width: 100%; } header > h1 { text-align: center; fon..
-
(64)CSS_미디어 쿼리2HTML, CSS 2023. 4. 3. 17:24
미디어 쿼리 2번째 예제 아래 링크를 통해 각 태그들의 설명을 볼 수 있다. https://jm-rograming.tistory.com/95 (56)CSS_레이아웃 기본 문법 다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양, jm-rograming.tistory.com DOCTYPE html> Document 인스타그램 유튜브 페이스북 트위터 Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, facere. Voluptates deserunt, fuga perspi..
-
(63)CSS_미디어 쿼리1HTML, CSS 2023. 4. 3. 17:22
미디어 쿼리 1번째 예제 아래 링크를 통해 각 태그들의 설명을 볼 수 있다. https://jm-rograming.tistory.com/95 (56)CSS_레이아웃 기본 문법 다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양, jm-rograming.tistory.com DOCTYPE html> 미디어 쿼리1 body{ background-color: beige; } @media screen and (min-width: 1024px) { body{background-color: deepskyblue;} } 미디어쿼리1 오른쪽이 1024px..
-
(62)CSS_플렉스 레이아웃3HTML, CSS 2023. 4. 3. 17:20
플렉스 레이아웃 3번째 예제 아래 링크를 통해 각 태그들의 설명을 볼 수 있다. https://jm-rograming.tistory.com/95 (56)CSS_레이아웃 기본 문법 다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양, jm-rograming.tistory.com DOCTYPE html> 플렉스 레이아웃3 .wrapper{ width: 500px; height: 200px; margin: 0 auto; border: 3px solid red; } .wrapper div{ width: 150px; border: 2px solid ..