본문 바로가기

전체 글395

이미지 슬라이더 만들기 이미지 슬라이더 만들기 슬라이더를 만드는 방법은 매우 많다. 라디오버튼, 비순서목록, 레이블을 활용하는 방법 기존템플릿 활용하는 방법 bxSlider, boostsrtap 등 CSS 파일 @charset "UTF-8"; /* 전체 페이지에 적용할 스타일- 여백제거 */ * { margin: 0; padding: 0; } /* 리스트 항목의 스타일 변경 */ .image_slider>ul { list-style: none; } /* 슬라이더가 들어갈 공간(div)에 대한 설정*/ .image_slider { position: relative; overflow: hidden; width: 600px; height: 400px; border: 1px solid; } /* 슬라이더 화면의 너비와 높이 설정 슬라.. 2023. 2. 27.
2월 27일 (2) 실습 + 반응형 웹 만들기 실습(실습기록) 이미지 슬라이더 만들기 테이블 스타일링 드룹다운 메뉴 만들기 배경이미지만 투명하게 처리하기 반응형 웹이란? 하나의 사이트 페이지로 데스크톱(컴퓨터), 스마트폰, 스마트패드 등 접속하는 장치(디스플레이 종류)에 따라 요소의 크기 및 배치, 표시 등을 자동으로 변환하도록 웹 html head 태그의 meta 태그에 viewport를 설정하여 반응형 웹 페이지를 제작 meta 태그란? 해당페이지의 정보(메타데이터)를 제공하기 위해 사용하는 태그 사용자에게 보여지는 태그는 아니다. 브라우저에게 작업을 지시하는 태그, 데이터의 데이터 속성종류) 1. name : 메타데이터의 종류를 지정하는 속성 2. content - name에 따라 분류된 메타데이터의 내용을 작성하는 속성 name 주요속성값 d.. 2023. 2. 27.
2월 27일 (1) CSS - transform, transition transform(모양변환) 요소의 모양을 변화시키는 속성 속성값 (2D) 위치와 기울기 변환할 때만 '-' 단위 사용 가능하다. 1. 위치변환 - translate translate(x, y) - 원래 위치에서 x, y 만큼 이동 보통 position으로 이동하고, translate는 동적인 변화를 줄 때 사용한다. translateX(x) - x 축으로만 이동 translateY(y) - y 축으로만 이동 위치 변환 위치 변환 각도 변환 2. 각도변환 - rotate 단위 deg 기본방향 : 시계방향, '-' 반시계방향 각도 변환 :hover 넣은 예제 (마우스를 가져다 대면 이동하는 모습이 나온다) 위치 변환 각도 변환 각도 원으로 만들기 예제 위치 변환 각도 변환 각도 3. 크기변환 - scale.. 2023. 2. 27.
1028. 정수 1개 입력받아 그대로 출력하기2 정수 1개를 입력받아 그대로 출력해보자. (단, 입력되는 정수의 범위는 0 ~ 4,294,967,295 이다.) 참고 -2147483648 ~ +2147483647 범위의 정수를 저장하고 처리하기 위해서는 int 형으로 변수를 선언하면 된다.(int 로 선언하고 %d로 받고 출력) 하지만 이 범위를 넘어가는 정수를 저장하기 위해서는 보다 큰 범위를 저장할 수 있는 다른 데이터형을 사용해야 정상적으로 저장시킬 수 있다. unsigned int 데이터형을 사용하면 0 ~ 4294967295 범위의 정수를 저장할 수 있다. 예시 unsigned int n; scanf("%u", &n); printf("%u", n); 입력 정수 1개가 입력된다. (단, 입력되는 정수의 범위는 0 ~ 4294967295 이다.).. 2023. 2. 27.
1027. 년월일 입력 받아 형식 바꿔 출력하기 년월일을 출력하는 방법은 나라마다, 형식마다 조금씩 다르다. 년월일(yyyy.mm.dd)를 입력받아, 일월년(dd-mm-yyyy)로 출력해보자. (단, 한 자리 일/월은 0을 붙여 두자리로, 년도도 0을 붙여 네자리로 출력한다.) 참고 출력하는 자리수를 지정하기 위해 %4d와 같은 형식을 사용할 수 있는데, 빈칸을 0으로 출력하기 위해서는 %04d와 같은 형식을 사용하면 된다. 예시 printf("%02d-%02d-%04d", d, m, y); 입력 년월일이 '.'(닷)으로 구분되어 입력된다. 출력 년월일을 일월년으로 바꾸어 '-'(대쉬, 마이너스)로 구분해 출력한다. 입력 예시 예시 복사 2014.07.15 출력 예시 15-07-2014 import java.util.Scanner; public cla.. 2023. 2. 26.
1026. 시분초 입력받아 분만 출력하기 입력되는 시:분:초 에서 분만 출력해보자. 참고 int h, m, s; scanf("%d:%d:%d", &h, &m, &s); 를 실행하면 콜론을 사이에 둔 형식으로 입력되어, h, m, s에 각각 정수값만 저장된다. 입력 시 분 초가 시:분:초 형식으로 입력된다. 출력 분만 출력한다. 입력 예시 예시 복사 17:23:57 출력 예시 23 import java.util.Scanner; public class Main { public static void main(String[] args) { String s; Scanner sc = new Scanner(System.in); s=sc.next(); String [] sr = s.split(":"); System.out.println(Integer.valu.. 2023. 2. 25.
1025. 정수 1개 입력받아 나누어 출력하기 다섯 자리의 정수 1개를 입력받아 각 자리별로 나누어 출력한다. 참고 scanf("%1d%1d%1d%1d%1d", &a, &b, &c, &d, &e); 를 사용하면 1개의 숫자로 각각 구분되어 저장된다. 예시 읽어들인 값을 적당히 바꿔 출력하기 위해서 printf("[%d]", a*10000); 과 같은 방법도 가능하다. 입력 다섯 자리로 이루어진 1개의 정수를 입력받는다. (단, 10,000 2023. 2. 24.
2월 24일 CSS - flexbox Flexbox display : flex - 부모요소에 설정 Container(부모요소)에서는 item(자식요소)의 배치와 관련된 속성을 처리하고, item에서는 자식요소의 크기 등의 속성을 처리한다. 속성 1. Container 1) flex-direction 내부요소의 배치 방향 row 기본값, 왼쪽에서부터 가로로 배치 row-reverse 오른쪽에서부터 가로로 배치 column 위에서부터 세로로 배치 column-reverse 아래에서부터 세로로 배치 maxmids? 기준값이상 증가가 되지 않는 일정한 수준이 되면 더 이상 줄어들지 않고 삐져나온다. item 높이 160px, container 높이 190px 2) flex-wrap 내부 요소의 줄바꿈 설정 nowarp 감싸지 않음, 줄바꿈 안됨, .. 2023. 2. 24.
CSS 구문(형식), 주석, 스타일 시트 CSS 구문(형식) CSS의 구문(형식)은 선택자와 선언 블록으로 구성된다. 선택자 { 속성:속성값} 선택자는 스타일을 지정할 HTML 요소를 가리키며, 선언 블록에는 선택자에 어떤 속성을 부여할 것인지 속성 이름과, 속성값은 무엇을 줄 것인지 선언한다. 선택자 { 속성1:속성값1; 속성2:속성값2; } 여러 CSS 선언은 세미콜론으로 구분되며, 선언 블록은 중괄호로 묶는다. 예) 선택자 { 속성1:속성값1; 속성2:속성값2; } p { color:red; text-align:center; } 선택자는 p 속성은 color, text-align 속성값은 red, center p는 CSS의 선택자(스타일을 지정하려는 HTML 요소를 가리킴: ). color는 속성이고 red속성 값 text-align는 속.. 2023. 2. 24.
2월 23일 (2) CSS selector 2, z-index, display, flex 3. 구조 가상 선택자 HTML 요소의 계층 구조를 기반으로 선택 1) :nth-child(n) - 테이블에서 많이 사용된다. border의 색은 아무것도 지정하지 않으면 검정색이지만 글자색에 따라서 표현된다. n, odd, even 반복활용 가능, 수치를 정해주면 그 수치에 지정된 것만 활용할 수 있다. n 수식이나 특정한 키워드를 사용 even(짝수), odd(홀수), 2n, 3n 등 2) :first-child - 동일 계층의 첫 번째 요소 선택 3) :last-child - 동일 계층의 마지막 요소 선택 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프.. 2023. 2. 23.
2월 23일 (1) CSS clear, selector1 복습 + 추가 설명 @import 전처리 사용자가 작성한 코드를 처리하기 전에 미리 처리되어 준비된 부분 cross origin 두 개의 서버, 보안이 취약하기 때문에 기본적으로는 허용하지 않는다. 요즘은 float 보다는 flex를 많이 쓴다. float 이어서~ clear 속성 : float 속성이 설정된 요소의 float 속성을 제거 방향에 맞추어서 제거해야 한다. 속성값 left - float : left;를 제거 right - float : right;를 제거 both : 둘다 제거 box1 box2 box3 box4 box5 팁) clear로 float 효과를 제거하는 것보다, div로 영역을 분할하여 부분별로 float 속성을 넣는 것이 조절하기 쉽다. Selecor 2 (가상 선택자와 조합.. 2023. 2. 23.
1024. 단어 1개 입력받아 나누어 출력하기 단어를 1개 입력받는다. 입력받은 단어(영어)의 각 문자를 한줄에 한 문자씩 분리해 출력한다. 참고 C언어에서는 문장을 저장하기 위해 특별한 방법을 사용하지 않고, 배열이라는 연속된 공간에 문자들을 연속으로 한 개씩 저장하는 방법을 사용한다. 단, 문자열(문자가 연속적으로 연결된 줄이라는 의미. 즉 문장)의 마지막임을 나타내기 위해 문자열의 마지막에 널(NULL) 문자라는 특별한 의미를 가지는 문자를 삽입해 문장임을 나타낸다. 널(NULL)은 영어 단어 자체의 의미로는, 아무런 가치가 없는 또는 아무것도 없는, 사용되지 않은 등의 의미를 가지는데, 문자로는 '\0', 아스키문자의 정수값은 0을 의미하며 NULL 로도 사용할 수 있다. 단어나 문장을 scanf("%s", ...); 로 입력받게 되면, 그 .. 2023. 2. 23.

티스토리툴바