[개발] Practice/HTML CSS18 [HTML/CSS] 종이처럼 뒤집히는 프로필사진 만들기 💡 실습 포인트! 예전에 이력서를 포트폴리오로 만들어볼까라고 생각했을 때, 마우스오버를 하면 이미지가 뒤집히면서 글이 나오는...이런 기능을 원한 적이 있었는데 마침! 딱 배우게 되었다. 이미지가 뒤집혀도 앞면의 이미지가 뒷면에 비쳐보이고, 회전시켰을 때 글씨도 같이 회전되는 등 생각지도 못한 부분에서 난항을 겪었다. 제대로 사용하려면 생각보다 연습을 좀 많이 해야할 것 같다. 💜 HTML // 전체적인 틀 // 틀 내부(앞, 뒷면을 가짐) Front-end Developer Bak Seoyun 💜 CSS .flip-outer { width: 300px; height: 300px; } .flip-inner { width: 100%; height: 100%; position: relative; /* fro.. 2022. 3. 2. [HTML/CSS] Admin Page 만들기 💡 실습 포인트! 이전에 공부한 애니메이션 효과, Font Awesome, Bootstrap 까지 활용하여 Admin Page 레이아웃을 만들어보았다. 아직 애니메이션 효과에 대한 이해가 부족한지 사이드바에 애니메이션 효과를 넣을 때 상당히 헤맸다.. Tasks 리스트 목록에서도 원하는 레이아웃이 나오지 않아 30분 정도 이것저것 해보면서 고민을 했다. 더불어 오늘은 Chart.js 라이브러리를 사용하는 방법을 조금이나마 공부해보았다. 다음번에 차트를 넣어야 하는 프로젝트가 있으면 한 번 적용해봐도 재미있을 것 같다. 💜 PC 화면 💜 모바일 화면 💜 공부가 좀 더 필요한 Sidebar Home History .sidebar { width: 150px; height: 100vh; background: #.. 2022. 3. 2. [HTML/CSS] position: sticky 활용하기 💡 실습 포인트! position: sticky 속성을 활용하여 우측의 이미지는 위치가 고정되고 좌측의 텍스트만 스크롤하면 움직이도록 만들어보았다. 반응형으로 만들면 세로로 1열이 되어 크게 의미가 없을 것 같아서 순수하게 PC 화면용으로 만들고 반응형은 따로 고려하지 않았다. 💜 HTML image div 태그는 우측에, text div 태그는 좌측에 배치할 예정이며 편하게 보기 위해 image div 태그를 상단에 적었다. (순서를 바꾸어적어도 float 를 이용해서 위치 지정이 가능했다.) float 속성을 이용했으니 중간중간에 div 태그를 만들어 clear : both 속성을 넣어주는 것도 까먹지 말기! Lorem ipsum dolor sit amet consectetur, adipisicing.. 2022. 3. 2. [HTML/CSS] grid-column, grid-row 으로 레이아웃 만들기 💡 실습 포인트! 이전 실습 때 display : grid 를 활용해서 구역을 나누어보았다면 이번에는 실제로 이미지를 넣어서 반응형으로 레이아웃을 구현해보았다. PC 화면에서는 첫번째 이미지가 제일 크게 2*2 사이즈를 차지하고 나머지는 1*1 사이즈로, 총 6장의 이미지가 각 자리에 배치된다. 모바일 화면에서는 모든 이미지가 동일하게 1*1 사이즈로 세로 정렬되어 배치된다. 💜 PC 화면 기본적으로 html 파일은 다음과 같이 작성한다. .grid-container { display: grid; max-width: 1200px; margin: auto; grid-template-columns: 1fr 1fr 1fr; } .grid-container img { width: 100%; height: 100.. 2022. 3. 2. [HTML/CSS] Grid 반응형 레이아웃 만들기 💡 실습 포인트! 오늘은 display : grid 를 이용하여 영역을 나누는 방법을 배워보았는데, 처음 보는 속성이라 굉장히 신선했다. 일단 위와 같은 영역으로 나누는 방법을 두 가지 배워보고, 반응형으로는 어떤 식으로 만드는지 공부했다. 💜 PC 화면 🤍 1번째 방법 .grid-container { display: grid; grid-template-columns: 100px 100px 100px 100px; /* fr 은 전체 너비에 대한 비율을 의미 */ grid-template-rows: 100px 100px 100px; /* grid-gap: 10px; */ /* grid-gap 은 각 grid 사이의 간격을 의미 */ } .grid-container div { border: 1px solid.. 2022. 3. 2. [HTML/CSS] transform & animation 으로 매끄러운 애니메이션 만들기 💡 실습 포인트! 💜 흔들흔들 버튼 흔들흔들 .ani-button { padding: 15px 20px; font-size: 20px; background: skyblue; color: white; border: none; border-radius: 5px; display: block; margin: 30px auto; cursor: pointer; } .ani-button:hover { animation-name: shake; animation-duration: 1s; } @keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } 75% { transf.. 2022. 3. 1. [HTML/CSS] HTML Video, Audio 다루기 💡 실습 포인트! 💜 VIDEO : 기본 형태 💜 VIDEO : 재생버튼 넣기 controls 속성을 넣으면 재생버튼 생성 💜 VIDEO : 더 나은 형태 video 태그에 src 를 넣는 것보다 source 태그에 src 를 넣는 게 호환성에 있어서 더 좋음 source 태그를 사용할 때에는 type 도 넣어주는 걸 추천! 첫 번째 source 태그의 영상이 안 나올 것을 대비하여 두 번째 source 태그를 추가하여 다른 확장자의 영상이 재생되도록 할 수 있음 💜 VIDEO : 자동재생 설정 autoplay 속성을 넣으면 자동재생 설정 가능 chrome 브라우저는 추가로 muted 속성도 넣어주어야 제대로 자동재생 동작 💜 VIDEO : preload 설정 미리 다운로드 받을지의 여부는 preload.. 2022. 3. 1. [HTML/CSS] SCSS 로 row, col 만들기 💡 실습 포인트! Bootstrap 에는 row, col 이라는 굉장히 Grid 형태로 만들기 편한 class 가 있는데 오늘은 그것을 직접 만들어보았다. 그리고 투명하면 제대로 레이아웃이 만들어졌는지 확인이 어려워 border 과 text 를 넣어주었다. SCSS 의 @mixin 과 @include 를 활용하여 코드를 간결하게 바꿀 수 있었다. @mixin 과 @extend 는 상당히 유사한데 @mixin 의 장점이라면 내부에 묶어둔 속성들에 파라미터를 활용할 수 있다는 것이다. 💜 HTML col-6 col-6 col-4 col-4 col-4 💜 SCSS @mixin 문법을 사용하고 width 라는 이름으로 해당부분을 파라미터로 활용할 수 있게 하였다. 파라미터로 활용하기 위해서는 붙인 이름 앞에 $.. 2022. 3. 1. [HTML/CSS] SCSS 로 Alert 박스 만들기 💡 실습 포인트! % 를 이용한 임시클래스 생성 및 @extend 를 활용하여 이미 있는 클래스를 상속, 확장해보았다. 참고로 % 는 . 대신 사용 가능한 임시클래스로 CSS 파일에서 클래스로 컴파일하고 싶지 않을 때 사용하며, 그래서 실제로 컴파일되었을 때 @extend 받은 클래스명들로 모아서 표기됨 💜 Alert 박스 레이아웃 💜 HTML Alert Number 1! Alert Number 2! Alert Number 3! 💜 SCSS %alert-box { padding: 15px; width: 90%; margin: auto; margin-top: 15px; font-weight: bold; border-radius: 5px; } .alert-box-green { @extend %alert-bo.. 2022. 3. 1. [HTML/CSS] SCSS 로 리스트 만들기 💡 실습 포인트! CSS 의 작업이 고도화될수록 불필요한 셀렉터의 과용과 연산 기능의 한계 등으로 인해 CSS 관리는 부담이 될 수밖에 없다. 하지만 웹에서는 표준 CSS 만 동작할 수 있기 때문에 다른 선택권이 없다. 그래서 등장한 것이 CSS 전처리기인 Sass, Less 등인데, 사용방법은 일단 전처리기로 작성만 하고, 그렇게 작성된 내용을 웹에서 동작 가능한 표준의 CSS 로 컴파일하는 과정을 거쳐 실제로 웹에서 동작시키는 것이다. 오늘 배운 것은 SCSS 로 Sass 의 3 버전에서 새롭게 등장한 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 것이며, Sass 의 모든 기능을 지원하는 CSS의 상위집합이라고 할 수 있다. Sass 와 SCSS 의 차이로는 중괄호 및 세미콜론의 유무라.. 2022. 3. 1. [HTML/CSS] SNS Profile 만들기 💡 실습 포인트! 이 화면 레이아웃 구성해보는 것만 5번은 연습한 것 같다. (익숙해질 때까지 처음부터 다시 만들어보기..) Bootstrap 에 익숙하지 않은 상태에서 처음 시작했을 때에는 상단 프로필 구성만 한참 걸려서 디테일에 연연하지 않고 틀만 잡아보고, 두번째로 연습할 때에는 큰 박스들 디테일만 잡고, 세번째 도전할 때는 세부 박스 디자인을 잡고, 네번째 연습할 때는 프로필 상하단을 구별하는 profile 라인도 만들어보고.. 마지막에는 시간 줄이기 이런식으로..? PC 화면 잘 만들었다 싶어서 모바일 화면 보면 좌우 정렬 안 맞고, 모바일 화면 좌우 정렬 조정하면 PC 화면이 뭔가 이상하고..의 반복이었다. 💜 PC 화면 💜 모바일 화면 2022. 3. 1. [HTML/CSS] Bootstrap 으로 카드 레이아웃 만들기_Grid_2 💡 실습 포인트! Bootstrap 으로 재미있는 카드 레이아웃을 만들어보았다. PC 화면에서는 이미지 기준으로 좌측, 우측 번갈아가면서 내용이 나와야 하고, 모바일 화면에서는 여백 없이 모두 이미지가 왼쪽, 내용이 오른쪽에 나와야했다. 그냥 CSS 로 이러한 반응형 레이아웃을 구성하려면 media query를 사용했을텐데, Bootstrap 의 row, col, order 등의 class 를 활용하니 꽤나 편하게 만들어졌다. 💜 PC 화면 💜 모바일 화면 2022. 3. 1. 이전 1 2 다음
