오늘은 미디어쿼리 해보기
미디어쿼리는 화면 해상도에 따라 반응형 웹을 만드는 것
잘 설명되어 있는 블로그
[CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ })
** 동영상으로 배우고 싶은 분은 아래 주소를 클릭하세요! https://youtu.be/uBrsPwzIZR0 1. 미디어 쿼리(Media Query) - 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는
ossam5.tistory.com
min-width 와 max-width 의 차이점 기억하기
뷰포트에 대한 설명해주는 블로그
HTML : Viewport Meta Tag 이해하기 : 예제, 방법
새로운 웹 디자인 작업을 할 때 고려해야 할 사항 중 하나는 반응 형 디자인입니다. 만들려는 웹 사이트가 반응형 디자인이 필요할 수 있습니다. 모든 외부 사이트는 반응형 디자인을 고려해야
jjeongil.tistory.com
브라우저의 창 크기에 대한 설명
[Javascript] 브라우저 창 크기 구하기
1. 요청사항 현재 보고 있는 페이지의 크기에 따라 페이징의 형태가 변하도록 구현해 달라는 요청을 받았다 다시 말하면 현재 창의 크기가 1025px를 넘으면(데스크톱) 페이징 개수를 10개로, 그 이
minsu092274.tistory.com
목표 - 최대한 선생님이 주는 블로그 기록하고 읽기
화면 크기에 반응하는 jsp 만들어보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 뷰포트 메타 태그 -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
<title>미디어쿼리</title>
<style type="text/css">
/* 모든 기기의 CSS 공통 */
body {
background-color: fuchsia;
}
/* 최저 너버가 540px 이상, 1023px 이하일 때 */
@media screen
and (min-width: 540px)
and (max-width: 1023px){
body {
background-color: green;
}
h1 {
white-space: nowrap;
}
}
/* 최저 너버가 1024px 이상일 때 */
@media screen and (min-width: 1024px) {
body {
background-color: #91b3c9;
}
}
/* 최대 너비가 539px 까지 */
@media screen and (max-width: 539px) {
body {
background-color: maroon;
}
}
</style>
<script type="text/javascript">
console.log(window.innerWidth);
console.log(window.innerHeight);
window.onresize = function(event) {
document.getElementById('size').textContent = window.innerWidth + "px * " + window.innerHeight + "px";
}
</script>
</head>
<body>
<h1>미디어 쿼리 연습, 화면 크기에 따른 반응형 웹 만들기</h1>
<hr>
<h1 id="size">너비</h1>
</body>
</html>
script 안의 내용은 창 크기가 변경되면 반응하는 함수
리눅스 배우기
먼저 윈도우에서 리눅스 환경 설치
CMD 창에서 wsl --install 명령어를 통해 wsl 환경 자동 설치
wsl --install
ubuntu 로 설치됨, 설치 후 재부팅
우분투 실행되면
계정 설정 후
sudo apt update
sudo apt upgrade
하여 설치된 우분투를 최신으로 업데이트 해줌
이 명령어를 통해 mariadb 가 포함된 프로그램들을 검색할 수 있음
sudo apt-cache search mariadb
우리가 필요한건 mariadb 서버
sudo apt install mariadb-server
설치 후
sudo apt update
업데이트 진행해주고 아래 명령어로 mariadb 에 접속
sudo mariadb -u root -p
데이터베이스 생성해보기
create database [데이터베이스 이름];
생성됐는지 확인하기
show databases;
create user '[계정이름]'@'%' IDENTIFIED BY '[비밀번호]';
% 를 붙이는 이유는 윈도우 환경에서 진행하기 때문에 붙여줌
리눅스에서 mariadb 끄고 켜보기
sudo systemctl stop mariadb
sudo systemctl restart mariadb
리눅스에서 ifconfig 를 사용하여 ip 확인 후
해당 ip를 통해 HeidiSQL 로 접속할 수 있음 포트번호는 기본 3306 포트
자바, 톰캣 설치까지 진행
톰캣은 manager ID 까지 만들어 봄
들어가서 톰캣에서 제시하는 명령어 대로 작성, id랑 pw는 내가 원하는 대로 생성
이클립스 파일을 war 로 export 해서 tomcat 에 집어넣기
e북 리더기 갖고싶다..
이노스페이스원
프리미엄 이북리더기의 모든 것
innospaceone.com
'HTML' 카테고리의 다른 글
| 240131 HTML 홈페이지 만들기 (0) | 2024.01.31 |
|---|---|
| 240130 HTML 홈페이지 만들기 (0) | 2024.01.30 |
| 240129 HTML 홈페이지 만들기 (0) | 2024.01.29 |
| 240126 HTML 홈페이지 만들기 (1) | 2024.01.26 |
| 240125 HTML 홈페이지 만들기 (0) | 2024.01.25 |
