WEB
-
css position & 실습WEB 2022. 1. 4. 23:43
일단 첫 시간에 시험을 보고~ 1. 마우스를 올리면 해당 박스가 위로 올라오면서 색이 변한다. .container{ width: 600px; margin: 100px auto 0; } .container .box{ position: relative; width: 100px; height: 100px; background: tomato; border: 4px dashed red; font-size: 30px; margin-right: -30px; text-align: center; line-height: 100px; float: left; } .container .box:hover{ background: yellowgreen; border-color: yellow; z-index: 10; position:..
-
css positionWEB 2022. 1. 4. 01:38
position 배우는 날!~ 키워드: absolute, relative, fixed, stack-order, sticky 1.absolute .container{ width: 400px; height: 300px; border: 4px dashed lightgray; margin: 100px 0; } .box{ width: 150px; height: 100px; background: red; border: 4px dashed orange; position: absolute; left: 160px; bottom: 150px; } 그림과 같이 나온다. 2. relative .box{ width: 100px; height: 100px; background: red; border: 4px dashed oran..
-
css 배경, 박스WEB 2021. 12. 31. 16:21
1. body{ height: 3000px; } .box{ width: 90%; height: 200px; margin: 200px auto 0; overflow: auto; background-image: url('./images/sky.jpg'); background-size: 300px 200px; background-repeat: no-repeat; background-attachment: local; } ~Lorem 생략~ 스크롤도 나오고~ 구름도 나온다. 2. .picture{ width: 200px; height: 150px; background: red; float: left; margin-right: 15px; } Lorem 생략 3. .box{ width: 150px; height: 1..
-
11/22 html 중간 과제물 제출WEB 2021. 11. 23. 00:46
일주일 동안 대신 강의해 주신 선생님께서 떠나시는 날이었다. 프로젝트를 하나 남기면 좋겠다고 하셔서 그동안 배운 것을 최대한 활용해 보려고 노력했다. 한소희 배우가 나오는 드라마를 너무 잘 본 터라 한소희 배우의 팬페이지를 만들고 싶었다. 정말.. 고등학교 때 내가 좋아하던 아이돌 가수 팬페이지에 들어가면 그 날 홈마가 찍은 사진이 대문짝만하게 찍혀 있는데 앓다 죽을.. 느낌이었는데 내가 좋아하는 느낌의 한소희 배우의 사진을 대문짝하게 메인에 놓으니까 속이 시원했다. 중간 과제물이다 보니, 밑에는 lorem을 넣었다. 앞에 밑줄 부분을 누르면 한소희 위키백과 탭이 열리게 설정해 놓았다. 메뉴 탭에는 한소희 배우가 출연한 드라마 제목들을 써놨다. 클릭하면 한소희 배우가 맡았던 배역들의 사진을 볼 수 있다...
-
11/16-17 html 기초 수업WEB 2021. 11. 18. 02:05
어제 배운 것을 복습하고, html의 새로운 진도를 나간 시간. 내가 생각하기에는(?) java보다 코드를 직관적으로 이해할 수 있는 것 같다. 포커스 옮기기(?) 오늘은 웹표준 둘째날 body, html { scroll-behavior: smooth; } body{ height: 10000px; } div{ width:70px; height: 70px; position: fixed; right:15%; bottom:15%; } a{ color:black; text-decoration: none; } 교환정책 환불정책 회원탈퇴 분쟁해결 교환정책Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias reprehenderit, quis dol..
-
11/15 html 첫 날WEB 2021. 11. 15. 12:33
원래 가르쳐주시던 선생님께서 저번주 금요일에 결혼을 하셔서 신혼여행을 가셨다. 그래서 html&css&js 선생님이 6일 동안 우리반을 담당해 주신다고 했다. java에 푹 빠진 지 20일이 넘은 현재.. html을 배운다니? 새로운 느낌이 들어서 기대됐었다. 1.완전 기초! h1태그입력 오늘은 화창한 날이다. h2태그입력 h3태그입력 h4태그입력 h5태그입력 h6태그입력 위와 같이 입력하면 브라우저에서 열면 이렇게 나온다. 사이에 글을 쓰면 가장 큰 크기의 글씨가 나온다. 페이스북 아이콘은 폰트어썸에서 가지고 온다. 1. 폰트어썸에 접속해서 아이콘을 누르고, 2. 검색창에서 facebook을 입력하면 페이스북 아이콘이 나온다. 3. 동그라미 친 부분의 i class를 눌러 복사한다. 비쥬얼 스튜디오에 ..