본문 바로가기

css27

나의 첫 웹사이트 만들기_(1) 현재 JS를 제대로 배우지 않은 상태에서 HTML과 CSS만으로 웹페이지를 구성해보기로 했다. 어떤 주제로 만들어볼지 고민을 했는데 마땅히 할 것이 없어서 나에 대한 소개페이지를 만들기로 했다. 코드 🔽 https://github.com/Bluishhot-Star/WEB/tree/master/Firstpage 계획 위의 청사진처럼 만들어볼 계획이다! 1일차 헤더 부분과 소개 섹션, 스킬 섹션을 만들어보았다! flexbox를 연습해보기에 아주 좋았다! 헤더의 position을 fixed로 설정하면 float되어 있어서 그 다음에 나오는 요소는 그 아래에 배치가 된다. 그 해결법으로 margin을 header의 높이만큼 적용을 시켜주었다. 마우스를 올렸을 때 다음과 같은 효과들을 넣어주었다. 1. 블로그 환.. 2022. 2. 4.

티스토리 스킨 커스텀! (w. HTML & CSS) html과 css를 어느 정도 배워서 드디어 이 블로그를 내 입맛대로 바꿔볼 수 있게 되었다! 그동안 염원해왔던 것들을 만들어보았고 점점 추가하거나 제거할 예정이다. 직접 바꿔보니 너무 재밌고 계속 더 공부하고 싶어졌다! 티스토리도 계속 좋은 방향으로 바꿔보면서 얻어낸 경험으로 나의 웹사이트도 제작해볼 예정이다. 1. 모바일 환경 카테고리 초상화 변경 초상화의 크기를 바꾸어 주었다. 바꾼 코드 @media screen and (max-width: 767px) #aside .sidebar-1 .profileBox ul li { width: 100%; height: 17em; } 미디어 조건을 통해서 모바일 환경의 해상도의 경우에 해당 선택자에 속성을 부여해주었다. 2. 글꼴 변경 바꾼 코드 @import .. 2022. 1. 31.

CSS_flex(2) 들어가기에 앞서 flexbox를 다루기 위해서 축의 개념을 알아보면, 주축, 교차축이 있다. 주축 = 가로정렬->가로축, 세로정렬->세로축 교차축 = 주축의 수직 위의 축은 flex-direction으로 지정할 수 있는데 가로 : row, row-reverse 세로 : column, column-reverse 위와 같은 값을 넣어주면 된다. 이 축의 개념은 요소를 정렬할 때 필수적인 개념이다! flexbox에는 부모요소인 flex container 자식요소인 flex items 로 구성이 되어있다. 또한 이에따라 적용할 수 있는 속성도 다르다! 참고자료 ↓ (https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concep.. 2022. 1. 30.

CSS_flexbox(1) 수평정렬 flexbox 부모요소 내의 자식요소들에 대한 공간 배분, 정렬을 할 수 있는 모델이다! css에서 레이아웃을 구성할 때 float을 이용하였지만 최근에는 flex를 점점 많이 사용하는 추세이다. 사실 호환성문제로 사용 수가 적었는데 많이 해결이 되었다고 한다. 수평정렬 다른 방법들과의 비교 먼저 기존에 다뤘던 것들을 살펴보자! 1. float item1 item2 item3 .container{ width: 400px; border: 1px solid #000; /* overflow: hidden; */ /*이 속성을 이용해도 된다.*/ } .item { width: 100px; height: 100px; border: 1px solid #000; background: gold; border-radiu.. 2022. 1. 30.

HTML & CSS 활용 프로젝트_ 카드셔플 & 디스펜싱 코드 .container{ width: 500px; height: 500px; border: 1px solid #000; position: relative; } .box{ width: 100px; height: 130px; border: 1px solid #000; border-radius: 5px; position: absolute; top: 35%; left: 40%; } .btn{ width: 50px; height: 50px; border: 1px solid #000; } .box1{ background: crimson; z-index: 1; } .box2{ background: darkorange; z-index: 0; } .box3{ background:gold; z-index: 0; } .b.. 2022. 1. 28.

HTML & CSS 활용 프로젝트_ 고양이 댄스 애니메이션 만들기 코드 *,*::after,*::after{ box-sizing: border-box; } .container { width: 200px; height: 150px; border: 2px solid #000; animation: background 2s linear 0s infinite normal ; position: relative; } .ground { width: 196px; height: 45px; bottom: 0px; position: absolute; background: rgba(37, 37, 37, 0.884); } .wall { width: 190px; height: 130px; left: 5px; background-size: contain; background-repeat: no-r.. 2022. 1. 16.

HTML & CSS 활용 프로젝트_ 버튼 조작 게임 만들기 지금까지 배운 내용만을 활용하여 버튼 조작을 할 수 있는 간단한 게임을 만들었다! 코드 github(https://github.com/Bluishhot-Star/WEB/tree/master/HTML%26CSS/Btn_game) KASSID GAME VICTORY! *, *::after, *::before { box-sizing: border-box; } .title { width: 325px; text-align: center; font-weight: bold; font-size: 25px; } .game { width: 325px; height: 380px; padding: 10px; position: relative; border: 2px solid #000; background-color: gray.. 2022. 1. 14.

CSS _transition(2) (timing-function) 저번에 이어서 transition 두 번째 timing-function을 알아보았다. timing-function 전환효과의 시간당 속도를 조정한다. 값의 종류 1. ease : 기본값 / 점점 속도가 증가하다가 느려짐 2. linear : 똑같은 속도로 끝까지 3. ease-in : 천천히 시작하여 끝날때까지 빨라짐 4. ease-out : 빠르게 시작해서 느려지며 끝 5. ease-in-out : 천천히 시작해서 빨라졌다가 다시 느려짐 6. steps(단계 수, jump-term) 7. step-start : steps(1, start)와 동일 8. step-end : steps(1, end)와 동일 9. cubic-bezier(p1, p2, p3, p4) : 베지어 곡선 1~5까지 모두 베지어 곡선.. 2022. 1. 14.

CSS _transition(1) (property, timing, delay) 저번에 css가상클래스 hover를 알아볼 때 잠시 다뤘던 transition에 대해서 좀 더 공부해보았다. transition = 변경 이다. 따라서 요소의 상태 변화를 다룰 수 있는데 transition은 단축 속성이고 property, duration, delay, timing-function 이렇게 4가지가 있다. 각각을 간단히 알아보면 1. property : 변화를 적용시킬 CSS 속성 지정 2. duration : 변화시간 지정 3. delay : 지연 시간 지정 (시간 지난 후 시작) 4. timing-function : 변화되는 과정 중 속도 지정 property & duration div:hover { transition-property: width; transition-duration.. 2022. 1. 14.

이전 1 2 3 다음

티스토리툴바