db 마무리 ,Frontend 시작

오늘은 Mysql의 마무리와

Frontend수업의 시작으로 HTML을 시작하였다

 

-DB-

-- concat(): 문자열을 이어 붙일때
-- substr(): 문자열의 특정 범위를 잘라낼때
-- 주민번호:2401093123123
select m.m_no,m.m_name ,p.p_name,
case  when m.p_school= '1' then '고졸'
	  when m.p_school= '2' then '학사'
	  when m.p_school= '3' then '석사'
	  when m.p_school= '4' then '박사'
	  else '없음'
	end as p_school,
    concat(substr(m_jumin,1,6),'-', substr(m_jumin,7,7)) as '주민번호',
	concat(p.p_tel1,'-',p.p_tel2,'-',p.p_tel3) as '대표전화'
    from tbl_member_202005 m , tbl_party_202005 p where m.p_code = p.p_code;
    
select*from tbl_member_202005;
select*from tbl_party_202005;

-- 생년월일
select concat(
				case when substr(v_jumin,7,1) in ('1','2') then '19'
					when substr(v_jumin,7,1) in ('3','4') then '20'
				end,
			substr(v_jumin,1,2),'년' , substr(v_jumin,3,2),'월',substr(v_jumin,5,2), '일생'
		) 
	as '생년월일' from tbl_vote_202005;

-- 만나이 => 현제년도 - 태어난 년도
-- 현재 시간 
select now() from dual;
select 2024-1999 from dual;
select date_format(now(),'%Y')from dual;
-- 만나이 계산 
select concat(
				'만',
                cast(date_format(now(), '%Y') as unsigned) -
                concat(
						case when substr(v_jumin, 7, 1) in ('1', '2') then '19'
							 when substr(v_jumin, 7, 1) in ('3', '4') then '20'
							 end,
                        substr(v_jumin, 1, 2)     
					  ),
				'세'
			 ) as '나이'
			from tbl_vote_202005;
            
-- 성별
select concat(
				case when substr(v_jumin,7,1) in ('1','3') then '남'
					when substr(v_jumin,7,1) in ('2','4') then '여'
				end
)as '성별'  from tbl_vote_202005;

-- 투표시간
select concat(
				substr(v_time,1,2) , ':', substr(v_time,3,4)
)
as '투표시간' from tbl_vote_202005;

-- 유권자 확인

select concat(
				case when  v_confirm = 'Y' then '확인'
					 when  v_confirm = 'N' then '미확인'
                     end
) as '유권자 확인' from tbl_vote_202005 order by v_confirm asc;

-- 전체 쿼리

select 
		-- 이름
		v_name as '이름', 
        -- 생년월일
        concat(
				case when substr(v_jumin, 7, 1) in ('1', '2') then '19'
					 when substr(v_jumin, 7, 1) in ('3', '4') then '20'
				end, 
				substr(v_jumin, 1, 2), '년', substr(v_jumin, 3, 2), '월', substr(v_jumin, 5, 2), '일생'
			 ) 
		as '생년월일',
        -- 나이
        concat(
				'만',
                cast(date_format(now(), '%Y') as unsigned) -
                concat(
						case when substr(v_jumin, 7, 1) in ('1', '2') then '19'
							 when substr(v_jumin, 7, 1) in ('3', '4') then '20'
							 end,
                        substr(v_jumin, 1, 2)     
					  ),
				'세'
			 ) as '나이',
        -- 성별
        case when substr(v_jumin, 7, 1) in ('1', '3') then '남'
			when substr(v_jumin, 7, 1) in ('2', '4') then '여'
			end as '성별',
        -- 후보번호
        m_no as '후보번호',
        -- 투표시간
        concat(substr(v_time, 1, 2), ':', substr(v_time, 3, 2)) as '투표시간', 
        -- 유권자확인
		case when v_confirm='Y' then '확인'
			 when v_confirm='N' then '미확인'
			end as '유권자확인'
	from tbl_vote_202005;
    
    -- 후보자 등수 조회
    -- 후보번호별 투표건수 조회
    
    select * from tbl_vote_202005;
    select count(m_no) from tbl_vote_202005 where v_confirm = 'Y' group by m_no;
    -- 후보번호, 후보이름 같이 조회
    select m.m_no , m.m_name ,count(m.m_no) as v_count from tbl_vote_202005 v , tbl_member_202005 m
		where m.m_no=v.m_no and v_confirm = 'Y' group by m_no , m.m_name order by v_count desc;

각각의 데이터에 이름이 지정된 값일때 다른 이름으로 변경해주었고

각각 예제를 한번에 이어붙이는 쿼리문

 

Frontend

• 사용자가 웹 서비스를 활용할 때 만나는 화면
• 화면 ,UI (User Interface), GUI (Graphical User Interface)
• react,vue
• 웹 개발자,웹 디자이너, 웹 퍼블리셔

1. 구성 요소
   1. HTML
      1. 화면의 구조를 정의
      2. 화면에 나오는 텍스트,이미지 등을 보여줌
      3. 여러 태그,속성 값 등으로 세부적인 특성등 을 정의
   2. CSS
      1. 화면의 레이아웃,디자인 등을 꾸밀 수 있음
   3. Javascript
      1. 화면을 동적으로 변화 시킬 수 있는 기능 담당
      2. 여러 api 연동 등을 통해 다양한 기능을 추가하는 코드 작성
      3. 프로그래밍 언어의 한 종류
2. 파일b. html 파일 안에 모든 내용을 작성
3. c. .css,.js 파일을 따로 분리하여 사용 가능
4. a. 확장자:*.html
5. html 의 테그
   1. <> 로 표현함
   2. html,head,body,div,p,table 등의 고유 태그들이 있으며 , 필요 시 직접 태그를 만들 수 도 있음
   3. 시작 태그 , 종료 태그로 태그 범위를 지정함.(자바에서 중괄호 역할과 비슷)

<bodt> body 시작테태그
	div,p 태그는 모두 body 태그 소속
	<div> div 태그 시작
		div 의 영역

</div> div 종료태그
	<p> p 시작태그
		p의 영역
	</p> p 종료태그
</body> body 종료태그

 

1. 인 라인(inline) 요소(태그),블록(block)요소(태그)
   1. 인 라인 요소
      1. span,input,strong,b 태그 등이 있음
      2. 인 라인 요소로 작성한 내용은 딱 내용만큼 영역을 차지함
      3. 인 라인 요소 다음에 작성하는 요소가 인 라인 요소라면 바로 옆에 이어서 보이며,블록 요소라면 새로운 줄에 보임
   2. 블록 요소
      1. div,p,h1~h6 태그 등이 있음
      2. 블록 요소로 작성한 내용은 한 줄 전체를 모두 차지함
      3. 블록 요소 다음에 작성하는 요소는 무조건 새로운 줄에 보임

<기초>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>hello html!!</h2>
    <h5>안녕</h5>
    <h3>추가내용</h3>
</body>
</html>

위의 내용을 실행 시켰을 경우 아래와 같이 출력된다

<태그>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>

    <b>ㅋㅋㅋ</b>
    <strong>ㅎㅎㅎ</strong>
    <i> i 태그로 작성한 내용</i>
    <small> small 태그</small>
    <del>?????</del>
    <sub>안녕하세요</sub>
    <sup>반갑습니다</sup>
    <p>p 태그 입니다</p>
    <p>저도 p 태그 입니다</p>
</body>
</html>

각각의 태그로 작성을 해주고 실행을 시켜보면

del 태그는 문서에서 삭제된 태그이고 sub는 아래첨자를 나타내는 태그이다 그리고 sup는 위첨자 태그여서 사용하여 보이일때 위와같이 나오게 된다

 

<link>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 속성(attribute) 
        a태그의 href 속성
        속성값:구글 홈페이지주소
    -->
    <a href="https://www.google.com">구글 홈페이지</a> 
    <a href="https://www.google.com" target="_blank">구글 홈페이지</a>
    <!-- 이미지 출력 -->
    <!-- src속성: 출력할 이미지의 경로, alt: 이미지가 보이지 않을경우 보여줄 메세지 -->
    <!-- ../: 현재 위치에서 상위 폴더로 올라감
         ./ : 현재 위치에서 다른 폴더를 찾음 -->
    <img src="../images/다운로드.png" alt="이미지가 안나오면 제가 나와요">
    <img src="../images/다운로드.png" width="50" height="30" alt="">

    <!-- 이미지를 클릭하면 특정 주소로 이동하기 -->
    <a href="https//www.google.com" target="_blank"> 
        <img src="../images/다운로드.png" width="50" height="30" alt="">
    </a>
</body>
</html>

위 코드는 링크를 넣어 글을 넣게 되면 해당 링크로 이동하게 되고 width 는 넓이 height는 높이를 지정해주는 명령어이다

위의 코드를 실행시켜보자

링크와 이미지를 설정해주어 위와 같이 출력이 된다

 

<폰트>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <link rel="stylesheet" href="https//front.googleapis.com">
    <link rel="stylesheet" href="https//front.gstatic.com" crossorigin>
    <link href=<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap" rel="stylesheet">
    <style>
        /* 모든 요소에 적용 */
        *{
            font-family: 'Bagel Fat One', system-ui;
        }
    </style>
<body>
    <h2>안녕하세요</h2>
    <p>반갑습니다</p>
    <h3>눈이 펑펑</h3>
    <div>ㅎㅎㅎㅎㅎ</div>
</body>
</body>
</html>

폰트를 변경해주기 위해선 해당 폰트의 주소를 가져와서 입력을 해주면 된다

 

1. 선택자(selectot)
   1. css,javascript에서 특정 태그 또는 특정 속성 등을 가진 요소를 선택하여 활용할 때 사용하는 문법
   2. *은 모든 요소를 선택한다는 의미
   3. 태그 선택자
      1. 특정 태그만 해당 스타일을 적용할 때
      2. 태그 이름만 작성

// div 태그에 적용
div {
	적용할 효과
}
// p 태그에 적용
p{
	적용할 효과
}

<기본문법>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*h1 태그 내용을 빨간색 글자로*/
        h1{
            color: red;
        }
        /*h2태그는 파란색 글자*/
        h2{
            color: blue;
        }
        /*h3태그는 노란색 글자*/
        h3{
            color: yellow;
            background-color: black;
        }
        /* */
        span{
            color: green;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>h1로 작성한 내용</h1>
    <h2>h3로 작성한 내용</h2>
    <h3>h4로 작성한 내용</h3>
    <span>span 태그로 작성한 내용</span>
</body>
</html>

1. id 선택자
   1. 특정 id 속성을 가지고 있는 태그에 스타일을 적용할때
   2. #id 이름으로 작성

// id1이 적용된 요소에 적용할 스타일
#id1{
	적용할 효과
}

// body에 id=id1 이라고 적용된 div 태그
<div id = "id1">

</div>

1. class 선택자
   1. 특정 class 속성을 가지고 있는 태그에 스타일을 적용할때
   2. .class 이름으로 작성

   // class1이 적용된 요소에 적용할 스타일
   #class1{
   	적용할 효과
   }
   
   // body에 class=class1 이라고 적용된 div 태그
   <div class = "class1">
   
   </div>
   

<기본 문법>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #id1{
        color: white;
        background-color: dodgerblue;
    }
    #id2{
        color: white;
        background-color: orange;
    }
    .class1{
        color: red;
    }
    .class2{
        background-color: yellow;
    }
</style>
<body>
    <!-- id=id1이 적용된 div 태그 -->
    <div id="id1">
        id1 적용한 div태그
    </div>
    <div id="id2">
        id2 적용한 div태그
    </div>
    <div class="class1">
        안녕하세요
    </div>
    <div class="class2">
        반갑습니다
    </div>
    <!-- 두 개 이상의 클래스를 동시에 적용할 때는 띄어쓰기로 구분 -->
    <p class="class1 class2">
        1시간만 잘 기다려 보아요
    </p>
</body>
</html>