Front/CSS(8)
-
Function (함수)
1. 명명함수 - 이름이 있는 함수 - 함수 선언 : function 함수명 (매개변수 선언) { ~ } - 함수 호출 : 함수명(매개변수) ; 2. 익명함수 - 이름이 없는 함수 - 이벤트의 콜백 함수로 주로 사용한다 - 함수 선언 : function (매개변수 선언) { ~ } //명명함수 function add(n1, n2){ var r = n1+n2; return r; } var res = add(3,2); //5 console.log(res); //익명함수 var f1 = function (n1,n2){ var r = n1-n2; console.log(r); return r; } f1(5,1); //4 //함수의 매개변수로 다른 함수의 리턴값 넣기 function mul(n1){ consol..
2023.06.20 -
배경 속성 (background)
1. background-color 속성 배경색 지정, 색상 단위 입력 (디폴트: 하얀색) 2. background-image 속성 배경 이미지 지정, url 단위 입력 1) background-repeat : 배경 이미지의 반복형태 지정 - repeat-x : x축으로 반복 - repeat-y : y축으로 반복 - repeat : x, y축으로 반복 - 디폴트 repeat, 싫으면 no-repeat 2) background-position: 배경이미지의 위치 지정 - x축위치 y축위치 - 키워드: top, bottom, right, left, center 3) background-size : 배경 이미지의 크기 지정 - width height - cover: 이미지의 비율을 유지한 상태에서, 부모요소의..
2023.06.20 -
글자 속성 (font, text)
1. Font 1) font-size : 글자의 크기 지정 속성 2) font-family : 글꼴 지정 속성 - 글꼴 이름이 2단어 이상이면 ""으로 묶어줘야한다 - 되도록 모든 컴퓨터에 있는 폰트를 사용하는 것이 좋다 - 사용자의 컴퓨터 환경에 따라 글꼴이 없을 수 있으므로 여러 글꼴을 지정해 대비해 놓을 수 있음 font-family: "Times New Roman", Times, serif; -> "Times ~"이 없으면 Times, Times도 없으면 serif 사용 3) font-style : 글자 기울기 조절 (italic, ..) 4) font-weight : 글자 굵기 조절 (bold, ..) 2. Text 1) text-align: 글자 정렬 (center, right, left)..
2023.06.20 -
float 속성 / 요소 정렬 / position 속성
1. float 속성 웹 요소를 문서 위에 떠 있게 (배치되게) 만든다 - left : 해당 요소를 왼쪽으로 배치 - right : 요소를 오른쪽으로 배치 - none : 기본값. 왼쪽도 오른쪽도 X - float 종료 -> {clear: both} 2. 요소 정렬 1) 수평 정렬 (가로로 가운데 정렬) - Block tag의 경우: {margin : 0px auto;} - Inline Tag의 경우: {padding: 좌우 패딩값을 통일;} - Text의 경우: text-align 2) 수직 정렬 (세로로 가운데 정렬) - Inline Tag의 경우: {padding: 상하 패딩값을 통일;} - line-height : 수치를 텍스트 태그의 높이와 일치시킴 3. position 속성 웹 ..
2023.06.20 -
display 속성
1. display 속성 요소가 화면에 보이는 방식을 지정하는 속성 (요소의 속성을 변경시킴) - inline: 태그를 인라인 형식으로 지정 (contents의 크기만큼 자리 차지), margin 적용 불가 - block: 태그를 블록 형식으로 지정 (contents가 있는 한 줄 전체 차지), 크기 지정, margin 적용 가능 - inline-block: inline 속성과 block 속성을 모두 가짐 - none: 화면에 출력 X, 공간 X (없는 태그 처럼 취급) 2. visibility 속성 요소가 화면에 보이게 할지 말지를 지정하는 속성 - visible: 화면에 보임 - hidden: 화면에서 안보이게 함 - collapse: 테이블 태그에서 사용하는 속성으로 테이블의 행과 열을 숨김 ..
2023.06.20 -
박스 속성 (Box Model)
1. width와 height 컨텐츠의 가로, 세로 크기 지정 2. border : 테두리 속성 - Top, Left, Bottom, Right - 선의 두께(border-width), 형태(border-style), 색상(border-color) 지정 가능. 위의 속성을 순서대로 한번에 지정하는 것도 가능하다. 예) border: 1px solid black; - border-radius : 테두리에 둥근 사각형이나 원을 표현하는 속성 - table의 border 속성들 > border-spacing : 테두리 간의 간격 > border-collapse : 선 분할 여부 (seperate, collapse) 3. margin 요소와 요소 사이의 간격 (박스와 박스 사이의 간격) - 마진 적용..
2023.06.16