🌎 Web

[CSS] background img 꽉차게 채우는 법

배경 이미지를 화면에 꽉 차게 채워야 하는 경우가 종종 있다. 원하는 조건은 다음과 같다. 화면에 보이는 전체 페이지를 여백 없이 이미지로 채우기 필요에 따라 이미지 크기 조정 이미지의 중앙 부분 no 스크롤바 여러 방면으로 시도해 본 결과 2가지 방법이 가장 유용했다. 1. 태그 이용하기 html { background: url(img.jpg) no-repeat center fixed; background-size: cover; } 태그는 최소한 브라우저 창의 높이다. backgroun 속성은 background에 관련된 속성 값을 한 번에 적을 수 있다. 순서대로 background-repeat, background-position, background-attchment background-size:..

[CSS] CSS에서 위치를 담당하는 요소들

디스플레이(Display) display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 중요한 속성 중 하나이다. html의 모든 요소는 각각의 기본 display 속성 값을 가지고 있고, CSS를 통해 속성 값을 바꿀 수 있다. li { display: inline; } /* 요소를 inline으로 변경하면 가로메뉴를 만들 수 있다 */ 인라인-블록(inline-block) 요소 자체는 인라인(inline) 요소처럼 동작하지만, 내부에서는 블록(block) 요소처럼 동작한다. 인라인 요소와 다르게 너비와 높이를 설정할 수 있다. 블록 요소처럼 margin을 이용하여 여백을 지정할 수 있다. 주로 메뉴나 내비게이션 바를 만들 때 사용된다. HTML 요소 숨기기 display 속성 값을 none으로..

[CSS] CSS에서 공간을 나누는 요소들(feat. 박스모델)

박스 모델(Box Model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 HTML요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 패딩(padding) : 내용과 테두리 사이의 간격 테두리(border) : 내용과 패딩 주변을 감싸는 테두리 마진(margin) : 테두리와 이웃하는 요소 사이의 간격 실제 HTML 요소의 높이와 너비 구하기 CSS에서 height와 width 속성이 가리키는 부분은 내용(content) 부분이다. 다시말해 패딩(padding), 테두리(border), ..

[CSS] CSS의 기본 속성(property)

색상(Colors) CSS에서 색을 표현하는 방법은 3가지다. 색상 이름 HEX code(16진수 색상값) RGBA(RGB 색상값, alpha는 투명도) Hello World Hello World Hello World 배경(Backgrounds) HTML 요소는 모두 Box Model을 기반으로 각자의 배경을 가진다. background 속성을 이용하면 이러한 각 요소에 다양한 효과를 줄 수 있다. 속성 설명 background 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. background-color HTML 요소의 배경색을 설정함. background-image HTML 요소의 배경 이미지를 설정함. background-repeat 설정된 배경 이미지의 반복 유무를 설정..

[CSS] CSS의 다양한 선택자(selector)

1. 단일 선택자(simple selector) 선택자(selector)가 지정하는 요소(element) 혹은 개체(node)가 단일임을 지칭한다. 단일 선택자라 할지라도 적용 받는 태그의 수는 여러개일 수 있다. 태그 선택자(element selector) HTML 요소의 이름을 직접 사용하여 선택한다. p { color: red; text-align: center; } /* 페이지의 모든 요소는 빨간색 텍스트 색상으로 가운데 정렬된다. */ id 선택자(id selector) 특정 id 속성을 가진 HTML요소를 선택한다. (중복된 id 속성은 선택자 사용에 혼란을 줄 수 있으므로 지양한다.) #para1 { text-align: center; color: red; } /* id="para1"인 모든..

[CSS] CSS란?

CSS란? CSS (Cascading Style Sheets) CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어이다. 오로지 디자인을 위한 언어이기 때문에 HTML을 이용하여 스타일 작업을 하는 것보다 훨씬 효율적이고, 유지보수에 용이하다. CSS 문법 /* 예시 */ p { color: red; text-align: center; } 예시) 모든 요소는 빨간색 텍스트 색상으로 가운데 정렬된다. CSS 선택자 스타일 작업은 문서의 상단부터 하단 순서로 적용되기 때문에 선택자의 활용을 어떻게 하느냐에 따라 코드의 효율성이 달라진다. 스타일을 적용할 HTML 요소를 가리키는 선택자(selector)는 다음과 같다. 단일 선택자(태그 선택자, class 선택자..

[HTML] form, input 태그의 모든 것

form 요소 태그 사용자로부터 입력받고, 입력받은 데이터를 서버로 보낼 수 있다. action 속성은 입력받은 데이터를 처리할 url, 파일위치, 특정 주소값등을 명시한다. method 속성은 데이터 전송 방식을 명시한다. GET방식과 POST 방식이 있다. method 속성이 생략되거나 빈 값이면 GET 방식으로 설정된다. 요소 요소 설명 다양한 타입의 input 요소를 활용하여 사용자로부터 입력을 받을 수 있다. 여러 form 요소에 대한 타이틀 역할로 label을 정의한다. 드롭다운 목록 여러 줄 입력 클릭 가능한 버튼 input 요소 유형(type) 유형(type) 설명 한 줄 텍스트 입력 비밀번호

[Java] 논리 연산자

조건문 파트에서 다뤘던 논리 연산자에 대해 자세히 알아보자. 논리 연산자 public class LogicalOperatorApp { public static void main(String[] args) { // 논리 연산자 // AND 연산자 System.out.println(true && true); // true System.out.println(true && false); // false System.out.println(false && true); // false System.out.println(false && false); // false // OR 연산자 System.out.println(true || true); // true System.out.println(true || false);..