Web
![[LOS] 2. cobolt](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FckjoPm%2FbtrbtyrRBwU%2F32zPRLiK71QdAojMkAk0vk%2Fimg.png)
LOS Gremlin
https://los.rubiya.kr/gate.php https://los.rubiya.kr/gate.php los.rubiya.kr 사이트를 이전한 듯 하다! Gremlin source code if(preg_match('/prob|_|\.|\(\)/i', $_GET[pw])) exit("No Hack ~_~"); '_' , '.' , '\' 을 사용할 수 없도록 조건이 걸려있다. $query = "select id from prob_gremlin where id='{$_GET[id]}' and pw='{$_GET[pw]}'"; echo "query : {$query} "; $result = @mysqli_fetch_array(mysqli_query($db,$query)); if($result['id..
![[CSS] 목록과 표 장식하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbjG9p4%2FbtqGd9QInj0%2FW7jJR6eoo2ehCUKTzX6C9K%2Fimg.png)
[CSS] 목록과 표 장식하기
목록의 스타일 설정 목록의 글머리 기호 설정 ▶ list-style-type 속성 - 순서 없는 목록(unordered list) : disc (●), circle(○), square(■) - 순서 있는 목록(ordered list) : decimal(10진수; 1, 2, 3, ...) lower-roman( i, ii, ...) upper-roman( Ⅰ, Ⅱ, ...) lower-alpha(a, b, c, ...) upper-alpha(A, B, C,...) 목록의 글머리 기호에 이미지 사용 ▶list-style-image:url("이미지 파일주소") 글머리 기호 위치 지정 ▶list-style-position [inside / outside(기본값)] *목록 스타일 설정 예시 과목별 추천도서 목록 ..
![[CSS] 문자와 색상 지정](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbrVR58%2FbtqGdDRGsJm%2F0pGqSCoHHuABpw171NkQI0%2Fimg.png)
[CSS] 문자와 색상 지정
폰트의 지정 HTML의 출력스타일 지정 태그보다 CSS 속성을 이용 폰트 관련 CSS 속성 font-family = 글꼴 종류 ; 쉼표(,)로 여러 글꼴 등록 → 첫 글꼴부터 차례로 적용시키며 해당 글꼴이 없는 경우 다음 글꼴 사용 font-size = 글자의 크기 [pt / px / % / small / big 등] font-wieght = 글꼴의 두께 [100~900 / lighter(100) / normal(400) / bold(700) / bolder(900)] font-style = 글꼴의 스타일 [normal: 기본 / italic: 이탤릭체] font-variant = 소대문자 변경 [small-caps(소문자를 작은 대문자로 변경) / normal] CSS 폰트 속성 font-size:x-..
![[CSS] CSS 속성 설정 / 스타일시트 선언 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FctYrE0%2FbtqF7L3iXDd%2FyR2T7ba3XvplfqK2PlHWVK%2Fimg.png)
[CSS] CSS 속성 설정 / 스타일시트 선언 방법
CSS 속성 선언 문서 일부분에 CSS 속성 설정 - 요소 및 요소 문서의 일부분 혹은 문장의 일부분을 구분해서 그룹핑 태그: 블록 단위 (block-level element) 태그: 인라인 (inline element) → style 속성을 이용해 특정 스타일을 지정할 수 있다. 스타일시트 이해하기 이 예제는 CSS의 개념을 설명합니다. 다음 예제로 이어집니다. div태그와 span태그의 차이점을 확인할 수 있다 - div 태그는 화면 전체에 맞춰 바뀌지만 span 태그는 span 태그 영역에 쌓여있는 부분에 한정하여 박스가 생성된다. - id 속성 및 class 속성 #아이디 이름 .클래스 이름 스타일시트 이해하기 이 예제는
![[CSS] WEB2.1 - WEB2.9](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbdN33p%2FbtqF01e5BMv%2F7mpVJtyMfJG0zbC7yVlx60%2Fimg.png)
[CSS] WEB2.1 - WEB2.9
https://www.youtube.com/watch?v=Ok0bBJPtgJI&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=2&t=0s CSS HTML이 채워주지 못하는 디자인에 대한 새로운 태그 문법그 이전: HTML 태그 사용; 정보외의 디자인 코드가 섞이면서 웹페이지의 정보로써의 가치 떨어짐 중복된 코드를 제거할 수 없음 HTML을 웹페이지의 정보에 전념하게 하기 위함 웹페이지 유지 보수 쉬워짐 가독성 ↑ (웹 페이지 해석 쉬워짐) 안에 a { color:red; }라고 지정해줌으로써 이하 본문에 적용된 모든 a태그에 대해 빨간색으로 표시 CSS 기본 문법 style 속성을 이용해 해당 속성의 값을 css 문법에 따라 해석 - 선택자 (selector) - 효과..
WEB 02.1.1 유튜브 영상 공유
태그로 유튜브 영상 넣기 MY HOBBY 제 취미는 영화보기 입니다. 다양한 장르의 영화를 보는 것을 좋아합니다. MOVIE GENRES COMEDY FILM NOIR MYSTERY MY HOBBY 제 취미는 영화보기입니다. 다양한 장르의 영화를 보는 것을 좋아합니다. MOVIE GENRE COMEDY FILM FILM NOIR MYSTERY COMEDY FILM 유머에 중점을 둔 영화 장르로, 관객들로부터 웃음을 끌어내려고 제작된다. 참고 유튜브 영상의 공유하기 버튼을 클릭하면 퍼가기 버튼을 클릭해 URL을 얻을 수 있다. 이 때 태그로 되어있는데 이를 embed로 바꿔사용해도 가능하다.
WEB 02.2.4 예약하기
레스토랑 예약하기 레스토랑 예약하기 예약자 정보 예약자 : 연락처 : 예약인원 : 1> 2명 3명 4명 5명 이상 예약 시간 선택 메뉴 선택 코스 A 코스 B 코스 C 코스 D 요청사항: * required 속성을 붙여 꼭 입력되어 하는 부분임을 표시한다. >> 마우스를 입력란에 두면 "이 입력란을 작성하세요."라는 메시지가 표시된다. * placeholder로 지정한 부분의 내용이 바탕에 표시된다. 패턴속성으로 지정한 형식에 어긋나게 입력했을 경우 "요청한 형식과 일치시키세요" 라는 메시지가 표시된다.
WEB 02.2.3 설문조사 폼 양식
다양한 폼을 활용해 설문조사 양식 작성하기 설문조사 기본정보 이름: 나이: 성별: 남성 여성 관심분야(1개이상) 디지털 콘텐츠 웹프로그래밍 데이터베이스 기계학습 다음 문항에 대해 5점 척도로 답하세요 본 세미나의 주제는 만족스러운가? 1 5 본 세미나의 초청강사는 만족스러운가? 1 5 본 세미나의 강의시간은 적절한가? 1 5 기타 의견 사항 의견을 입력하세요. * 나이를 입력하는 입력폼에서 input태그의 type을 "number"로 지정해 숫자만 입력받을 수 있도록 한다. 이 때 숫자외의 문자를 입력하면 입력한 내용이 보이긴 하지만 엔터를 누르면 사라진다. chrome의 경우 마우스를 나이 입력창 위에 둘 때 스크롤바가 나타난다. 나이의 값을 입력받기 때문에 min값을 0으로 설정했다. 아무것도 입력되..
WEB 02.2.1 ~ WEB 02.2.2
입력폼 작성 이메일 입력 폼과 비밀번호 입력폼, 확인, 취소 버튼 작성 회원가입 이메일: 비밀번호: 아직 화면에 입력하는 틀만 작성해놓은 상태라 값이 저장되거나 취소를 눌렀을 때 값이 사라지지는 않는다. 비밀번호 입력 시, ●으로 표시된다. 선택항목 추가 수강과목 조사 이름: 학과: 학년: 1> 1학년 2학년 3학년 4학년 학년을 선택하는 항목을 태그를 사용했다. 태그의 속성 중 size>1을 지정해서 스크롤박스 형식으로 나타나도록 했다. 의 하위 태그로 태그들을 작성해 선택 항목들을 지정했다.