🔥 부트캠프-웹 개발 🔥/CSS3

css / SCSS / Sass css와 차이점 SCSS 사용 방법 SCSS 문법 예제 1) css / SCSS / Sass 기존에 html의 style을 변경하고자 할 때 css를 사용했다. 기본적인 컴퓨터 언어에 대한 이해도가 생긴 지금 react.js를 배우기 앞서 react에서 많이 활용할 수 있는 SCSS / Sass를 배웠다. 간단하게 배운 내용을 복기해 보면 css보다 좀 더 사용성이 좋고 편리하며, 부가적인 기능(함수, 연산자 등)을 쓸 수 있다는 점이 새로웠다. 2) css와 차이점 https://sass-lang.com/guide Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you..

Mdia Query 기초 예제 1 예제 2 css 처리 방법 1) Mdia Query 기초 웹 페이지를 보는 단말기의 해상도에 따라 출력되는 화면의 UI배치, 구성들이 달라지게 된다. 이를 적용시키려면 css style에 media query를 추가해 주면 된다. 위와 같이 @media를 사용해 너비가 1500px이상, 768~1499px, 0~767px 일 때 style을 적용할 수 있다. 2) 예제 1 이처럼 단순하게 color만 바꾸는 것이 아닌 display를 변경해 가로, 세로로 나열할 수도 있다. 3) 예제 2 위에서부터 PC, 태블릿, 모바일 환경에서 각각 다르게 출력되는 것을 구현해 보았다. 4) css 처리 방법 4-1) css 하나에 태블릿, 모바일 작성 media query를 두 개로..

input 1) input 꾸미기 검색 html로 button을 추가하고 xi 폰트 아이콘을 불러온다. 그리고 css로 기존의 input의 border과 background를 보이지 않게 하고 form을 감싸고 있는 div에 원하는 색을 추가한다. 전체 제목 제목/본문 검색 위와 같은 방식으로 xi 아이콘을 불러오고 기존 input의 css를 제거한다. * .search-wrap .search-form input:focus { outline: none; } outline : none를 추가하면 input을 클릭했을 때 생기는 테두리를 제거할 수 있다.

select 꾸미기 checkbox 박스 꾸미기 radio 박스 꾸미기 1) select 꾸미기 네이버 다음 구글 아마존 .box2 { background-repeat: no-repeat; background-position: 210px 50%; background-image: url(images/select-bg.gif); } .box1, .box3 { width: 250px; height: 50px; margin: 30px; position: relative; } .box1 button { position: absolute; width: 30px; height: 30px; background-repeat: 50%; right: 20px; top: 50%; transform: translateY(-50..

tabel 1-1) table #1 예제 3-2 21일 차에서 하던 table을 마저 해보았다. tr, th, td는 공통적인 부분이 많아 html에서 추가만 해주면 바로 적용이 돼서 비교적 쉽게 완성하였다. table의 내용 중 td의 폰트 파란 부분은 em으로 묶어 css에서 따로 처리를 했다. 8개 일반학기 수업료100% .bbs .tb3 em{ color: blue; } 1-2) table#2 예제4 다음으론 kakao bank 페이지를 따라 해 보았다. header도 구현을 하기 위해 마크업을 하고 html과 css를 적용시켰고 접근성을 위한 본문바로가기도 맨 위에 추가하였다. 본문바로가기 은행소개 상품안내 고객센터 이벤트 서류제출하기 비교적 table내용들의 폰트, 크기, 정렬 등이 일원화되어..

table 1-1) table #1 접근성 웹에서 위와 같은 표를 작성할 때 table을 사용한다. 표의 타이틀 표의 세부 내용 작성 표의 타이틀 표의 세부 설명 table안에는 시각장애인들을 위한 접근성을 위해 caption을 넣어줘야 한다. '본문 바로가기'처럼 화면에는 표시되지 않는 내용이므로 hide class를 적용시켰다. * reset.css의 .hide에 caption을 추가해도 된다. 1-2) table #2 colspan, rowspan 1 2 5 6 9 10 11 12 1 2 3 4 5 7 8 9 10 11 12 13 14 15 16 18 19 20 colspan, rowspan은 표의 셀 병합을 할 때 사용한다. colspan은 값만큼 가로로 병합이 되고, rowspan은 세로로 병합..

border animation 1-1) border #1 border를 이용해 위와 같은 모양을 만들 수 있다. 단 두 면이상 맞닿아 있어야 하며 한 가지 색으로만 나타내고 싶다면 투명색인 transparent를 넣으면 된다. 1-2) border #2 이러한 점을 이용해 박스에 효과를 줄 수 있다. 공통적으로 들어가는 부분은. box::after에 묶어 놓았다. 1-3) border #3 before가 after보다 먼저 생성되어 after 밑에 깔리는 특성을 이용해 테두리 효과를 줄 수 있다. before를 크게 만들거나, absoulte 절대위치를 조절해서 테두리처럼 보이게 하면 된다. 2-1) animation #1 어제 잠깐 배운 animation을 활용해 div박스를 설정한 경로를 무한히 돌게..

transform animation 1) transform #1 .box { width: 400px; margin: 100px auto; } .box img { width: 400px; height: 250px; transition: all 1s ease-in-out; } transition : all 1s ease-in-out를 공통으로 맨 위에 잡아 두었다. .box img { width: 400px; height: 250px; transition: all 1s ease-in-out; } .box1:hover img { transform: scale(1.5); } scale을 이용해 img 크기를 1.5배로 키웠다. 루피 --------------------------------------------..

실존 사이트 롯데민속박물관의 첫 페이지를 따라 연습해 보았다. 본문바로가기 롯데월드 어드벤처 아이스링크 Login 이용안내 전시 교육프로그램 소통·소식 시대별 문화를 즐길 수 있는 전시 현재 진행 중인 전시를 알아보세요. 상설전시 특별전시 민속박물관의 즐겁고 다양한 프로그램 다양한 프로그램을 확인해보세요. 전통문화/역사교육 전통공예체험 문화행사 민속박물관 소식을 한눈에! 오늘의 민속박물관 소식을 만나보세요. 민속박물관 소식 [봄시즌] 백투더 스쿨 '개화학당' 2023.03.16 [롯데월드X제로월드] 두번째 방탈출 바람,우리는 그저 바람2022.11.09 [롯데월드X플레이더월드] 모바일 방탈출 화연 : 조선 최고2022.02.22 [할인] LG U+ 멥버십 우대 안내2022.03.16 더보기 이용문의 오시..