전체 글 31

random 함수

목차 random 함수는 사용자가 설정해주는 범위 내에 숫자를 무작위로 추첨하는 방식이다. Math.random() 이렇게 출력을 하면 0~1사이에 있는 난수가 출력되는것을 확인할 수 있다. 구간을 정하는 방법은 아래와 같다 Math.random()*(최대값-최솟값+1) + 최솟값; 결과 ex) 0.473776010573797 0.1106199983741902 0.975919931546297 0.816550861359386 java 에서 random 함수 public static void main(String[] args) { //난수를 발생시키고 소숫점을 버리기위해 정수형으로 형변환 해준다. int ran = (int)(Math.random()*(10-0+1)+0); System.out.println(..

CSS 포지셔닝

목차 주요 속성 1) CSS 포지셔닝이란? ① CSS를 이용해 웹 문서 요소를 적절히 배치하는 것 2) 박스 너비 기준 정하기 box-sizing 속성 ① 웹 문서에 여러 요소를 배치하려면 각 요소의 너비 값을 기준으로 해야되는데 width 속성은 박스 모델 전체의 너비가 아니고 콘텐츠 부분의 너비임. 따라서 패딩이나 테두리 크기는 따로 계산해야됨 ② box-sizing 속성을 사용하면 width 속성을 콘텐츠 영역의 너비 값으로 할지 요소의 너비 값으로 할지 지정 가능 ③ 기본형 box-sizing : content-box | border-box ④ 속성 값 content-box : width 속성 값을 콘텐츠 영역 너비 값으로 사용. 기본값 border-box : width 속성 값을 박스 모델 전체..

HTML&CSS/CSS 2021.09.07

09. 반복문

목차 1) for문 for문은 주어진 횟수만큼 실행문을 반복 1. for문이 처음 실행될 때 초기식(①)이 제일 먼저 실행됩니다. 2. 조건식(②)을 평가해서 true이면 for문 블록 내부의 실행문 (③)을 실행하고, false이면 for문 블록을 실행하지 않고 종료합니다. 3. 블록 내부의 실행문 (③)들이 모두 실행되면 증감식(④)을 실행하고 다시 조건식 (②)을 평가합니다. 4. 조건식 (②)의 평가 결과가 true이면 실행문(③) -> 증감식(④) -> 조건식(②)으로 다시 진행하고 false이면 for문이 종료됩니다. for(int i=0; i 조건식(①)으로 다시 진행 5. 만약 조건식이 false라면 while문을 종료 while(i 조건식 (②)과 같이 반복 실행 4. 조건식의 결과가 f..

08. 조건문

목차 1. if 문 (조건문) 조건식은 Boolean()형태로 true 또는 false를 반환하는 식으로 작성해야한다. if문은 조건식을 만족(true)할 경우에만 코드를 실행한다. 조건에 따라 특정 코드를 실행 시킬 수 있다. 조건식이 true(①)이면 실행문 A -> 실행문 B 실행 조건식이 false(②)이면 실행문 B 실행 2. if-else문 조건식을 만족할(true) 경우와 만족하지 않을(false) 경우에 따라 실행되는 코드가 달라짐 조건식이 true(①)이면 실행문 A -> 실행문 C 실행 조건식이 false(②)이면 실행문 B -> 실행문 C 실행 3. if-else if-else문 두 가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어짐 조건식 1이 tru..

여백 속성

목차 1) margin 속성 요소 주변 여백 설정하기 ① 현재 요소 주변의 여백. 한 요소와 다른 요소 사이의 간격 조절 ② 기본형 margin-top : | | auto margin-right : | | auto margin-bottom : | | auto margin-left : | | auto margin : | | auto ③ 속성값 : 너비나 높이 값을 px나 cm와 같은 단위와 함께 수치로 지정 : 박스 모델을 포함하고 있는 부모 요소의 너비나 높이 값을 기준으로 %로 지정 auto : Display 속성에서 지정한 값에 맞게 적절한 값을 자동 지정 ④ margin 속성 값 개수에 따른 차이 - 1개 : 네 방향 모두 동일한 값 적용 - 2개 : 첫번째 값은 위아래, 두번째 값은 좌우 - 3개..

HTML&CSS/CSS 2021.09.03

테두리 속성

목차 1) 테두리 스타일 지정하기 border-style 속성 ① 기본 값이 none이기 때문에 화면에 테두리가 표시되지 않음 ② 테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정 ③ 기본형 border-style : none | hidden | dashed | dotted | double | groove | insert | outset | ridge | solid ④ border-style에 지정 가능한 속성 값들 속성 값 설명 속성 값 설명 none 테두리가 나타나지 않음. 기본 값(아예 선이 없음) groove 테두리를 창에 조각한 것처럼 표시. hidden 테두리가 나타나지 않음. (선이 있으나 숨김) insert border-collapse:separate일 경우 전체 박스 테두리가 창에..

HTML&CSS/CSS 2021.09.03

박스 모델

목차 1) 블록 레벨 요소와 인라인 레벨 요소 ① 블록 레벨 요소 - 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소로 요소의 너비가 100%라는 의미 - 해당 요소 좌우에는 다른 요소들이 올 수 없음 - 너비나 마진, 패딩 등을 이용해 크기나 위치 지정 ② 인라인 레벨 요소 - 줄을 차지하지 않는 요소 - 화면에 표시되는 콘텐츠만큼 영역을 차지하고 나머지 공간에 다른 요소 올 수 있음 - 한 줄에 여러 개의 인라인 레벨 요소 표시 가능 ③ 블록 레벨 요소와 인라인 레벨 요소를 만드는 태그의 종류 종류 해당 태그 블록 레벨 태그 , ~, , , , , , , , , 인라인 레벨 태그 , , , , , , , , , 2) 박스 모델(box model) ① 블록 레벨 요소들은 모두 박스 형태 ② 박스 형태의..

HTML&CSS/CSS 2021.09.02

배경 - 그라데이션 효과

목차 1) 그라데이션과 브라우저 접두사 ① 그라데이션은 크기가 없는 배경 이미지이므로 background-image나 background 속성에서 사용 ② 그라데이션 속성은 표준화 됨 ③ 하지만 구형 모던 브라우저에서는 브라우저 접두사를 붙여야 동작함 2) 선형 그라데이션 ① 수직 방향이나 수평 방향 또는 대각선 방향으로 색상이 일정하게 변하는 것 ② 선형 그라데이션 지정 시 방향과 색상 필요 ③ 기본형 liner-gradient ( to , color-stop, [color-stop,...]); ※ 위 구문이 표준 구문이지만 ‘위치’와 ‘각도’를 표시하는 방법이 중간에 몇 번 바뀌다 보니 브라우저별, 버전별 사용법이 조금씩 다름 ④ 방향 : 끝 지점을 기준으로 ‘to’키워드와 함께 사용 to top 아..

HTML&CSS/CSS 2021.09.02

색상과 배경 스타일

목차 웹에서 색상 표현하기 1) 16진수 표기법 ① #ffffff 처럼 #과 함께 6자리의 16진수로 표시. ② 앞에서부터 두자리씩 묶어 빨강, 초록, 파랑의 양. ③ 하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시. ④ 000000(검은색) ~ ffffff(흰색) ⑤ 두 자리씩 중복될 경우 줄여 사용할 수 있음. ex) #ffff00  #ff0, #cccccc  #ccc 2) rgb와 rgba 표기법 ① color:rgb(255,0,0)처럼 세 자리의 숫자로 표시. ② 앞의 숫자부터 빨강, 초록, 파랑의 양. ③ 하나도 섞이지 않았을 때는 0, 가득 섞였을 때는 255 ④ 투명도를 조절할 때는 color:rgba(255,0,0,.3) 처럼 마지막에 알파값 추가 ⑤ 알파값은 불투명도를..

HTML&CSS/CSS 2021.09.02

텍스트 관련 스타일

목차 글꼴 1) 글꼴 지정하기 font-family 속성 ① 기본형 font-family : [,, ] ② body{ font - family : "맑은 고딕", 돋움, 굴림} 웹 문서 전체에 "맑은 고딕"이라는 글꼴을 적용하는데 만약 "맑은 고딕" 글꼴이 없다면 "돋움" 글꼴로 적용하고 그 글꼴도 없다면 "굴림: 글꼴로 적용하라는 뜻 ③ 웹 문서에서 사용할 글꼴 지정 ④ 를 비롯해 나 처럼 텍스트를 사용하는 태그에서 사용 ⑤ 웹 문서에서 글꼴을 지정할 시 한 가지 글꼴만 지정하기도 하지만 지정한 글꼴이 없을 경우에 대비해 두 번째, 세 번째 글꼴까지 지정함. 둘 이상의 글꼴 이름을 지정할 때는 쉼표(,)로 글꼴 구분 ⑥ font-family 속성은 상속되기 때문에 스타일에서 정의하면 문서 전체에 적용되..

HTML&CSS/CSS 2021.09.01