'분류 전체보기' 카테고리의 글 목록 (29 Page)

IT

[HTML+CSS] 배경 스타일 : background 속성 정리 2020.04.09
[HTML+CSS] display, padding, margin, border 속성 정리 - travelbeeee 2020.04.09
ERROR:ORA-12560: TNS:protocol adapter error 해결방법 2020.04.09 2
[BOJ] 10868 : 최솟값 - travelbeeee 2020.04.09

[HTML+CSS] 배경 스타일 : background 속성 정리

2020. 4. 9. 17:41

안녕하세요, 여행벌입니다.

오늘은 배경 색, 배경 이미지 등 배경 스타일을 위한 속성들에 대해서 포스팅해보겠습니다.

background-color 속성 : 배경 색 지정하기

background-color 속성을 이용하면 배경 색을 지정할 수 있습니다. 웹 문서 전체의 배경 색을 지정하려면 body 태그에 background-color 속성을 조절하면 됩니다. 16진수 표기법, rgb 표기법 등으로 색상을 표현하면 됩니다.

background-color : <색상>

스타일 상속에 의해 <body> 태그 선택자에서 속성을 적용하면 문서 전체에 상속되므로 하위 요소에서 스타일을 수정하지 않는 한, 문서 전체에 똑같이 적용됩니다. 하지만 background-color 속성은 상속되지 않습니다. 따라서, 내가 원하는 요소에 직접 background-color 속성을 이용해 배경 색 값을 지정해야 합니다.

background-clip 속성 : 배경 적용 범위 조절하기

박스 모델 관점에서 배경 적용 범위를 조절할 수도 있습니다. 즉, 박스 모델의 가장 외곽인 테두리(border)까지 적용할지, 테두리를 빼고 패딩(padding) 범위까지 적용할지, 아니면 내용(content) 부분에만 적용할지 background-clip 속성을 이용해서 조절할 수 있습니다.

background-clip : border-box | padding-box | content-box

background-image 속성 : 웹 요소에 배경 이미지 넣기

background-image 속성을 이용하면 배경에 이미지를 넣을 수 있습니다. 'url(파일경로)' 형식으로 지정해야하고, 'http://'로 시작하는 절대 경로를 사용할 수도 있습니다.

background-image : url(파일 경로)

배경 이미지는 여러 개를 사용할 수 있는데, 첫 번째 이미지부터 순서대로 표시합니다. 또, 이미지가 채우려는 요소 크기보다 작을 경우, 해당 요소를 가득 채울 정도로 가로와 세로로 반복됩니다.

background-repeat 속성 : 배경 이미지 반복 방법 지정하기

이미지가 채우려는 요소 크기보다 작을 경우, 해당 요소를 이미지가 반복되며 가득 채웁니다. 이때, 어떤 방법으로 가득 채울지 background-repeat 속성을 이용해 지정할 수 있습니다.

background-repeat : repeat | repeat-x | repeat-y | no-repeat

background-size 속성 : 배경 이미지 크기 조절하기

background-size 속성을 사용하면 배경 이미지를 여러 크기로 조절할 수 있습니다. 물론 무리하게 배경 이미지를 키우면 화질이 깨집니다.

background-size : auto | contain | cover | <크기 값> | <백분율>

background-position 속성 : 배경 이미지 위치 조절하기

배경 이미지는 제목이나 본문에서 한쪽에 이미지를 표시할 때도 이용할 수 있습니다. 이때, background-position 속성을 이용하면 원하는 위치로 배경 이미지를 조절할 수 있습니다.

background-position : <수평 위치> <수직 위치>;

수평 위치 : left | center | right | <백분율> | <길이 값>

수직 위치 : top | center | bottom | <백분율> | <길이 값>

background-position 속성에서는 수평 위치 값과 수직 위치 값을 함께 표시하는데 값을 하나만 지정할 경우, 그 값은 수평 위치 값으로 간주하고 수직 위치 값은 50%나 center로 적용됩니다.

background-origitn 속성 : 배경 이미지 배치할 기준 조절하기

background-origin 속성을 이용하면 배경 이미지를 배치하는 기준을 정할 수 있습니다. 테두리(border)를 기준으로 이미지를 배치할지, 패딩(padding)을 기준으로 이미지를 배치할지, 내용(content)을 기준으로 이미지를 배치할지 정합니다.

background-origin : border-box | padding-box | content-box

background-attachment 속성 : 배경 이미지 고정하기

background-attachment 속성을 적용하면 스크롤을 내렸을 때 배경 이미지도 같이 이동할지, 아니면 배경 이미지는 고정하고 화면만 내려갈지 정할 수 있습니다.

background-attachment : scroll | fixed

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] 텍스트 단 나누기(다단) - travelbeeee (0)	2020.04.12
[HTML+CSS] CSS 포지셔닝 float, position, z-index - travelbeeee (0)	2020.04.12
[HTML+CSS] display, padding, margin, border 속성 정리 - travelbeeee (0)	2020.04.09
[HTML+CSS] 목록 스타일 : list 속성 정리 - travelbeeee (0)	2020.04.08
[HTML+CSS] 문단 스타일 : 텍스트 정렬, 들여 쓰기, 줄 간격 - travelbeeee (1)	2020.04.08

[HTML+CSS] display, padding, margin, border 속성 정리 - travelbeeee

2020. 4. 9. 17:13

안녕하세요, 여행벌입니다.

오늘은 박스 모델의 콘텐츠 영역, 패딩, 마진의 개념과 스타일을 적용하는 법, display 속성에 대해서 포스팅해보겠습니다. 지금까지 HTML5+CSS3 포스팅 중 가장 중요한 속성들입니다.

박스 모델 - 콘텐츠 영역, 패딩 영역, 테두리 영역, 마진 영역

박스 모델이란 블록 레벨 요소들의 형태를 말합니다. 즉, 혼자 한 줄을 차지하는 요소들을 박스 모델이라고 합니다. 박스 모델의 세부 영역은 아래 그림과 같이 콘텐츠 영역, 패딩 영역, 테두리 영역, 마진 영역으로 크게 4개의 영역으로 나뉩니다.

● 마진은 테두리 영역 밖인 외부 여백을 뜻하고, 패딩은 내부 영역을 뜻합니다. 마진을 통해 다른 박스 모델들과의 거리를 조절할 수 있고, 패딩을 통해 콘텐츠 영역과 박스 모델의 테두리와의 거리를 조절 할 수 있습니다.

● 콘텐츠 영역은 말 그대로 실제 내용이 담겨 있는 영역을 뜻합니다.

● 실제 박스가 차지하는 너비는 콘텐츠 영역과 패딩 영역, 마진 영역을 모두 더한 것을 뜻합니다. 즉 width와 좌우 패딩 두께, 좌우 마진 두께를 합쳐서 계산합니다. 높이도 마찬가지입니다.

width, height 속성 : 콘텐츠 영역의 크기

width, height 속성을 통해 콘텐츠 영역의 크기를 지정해 줄 수 있습니다. width 속성은 콘텐츠 영역의 너비를 조절하고, height 속성은 콘텐츠 영역의 높이를 조절합니다.

width : <크기> | 백분율 | auto

height : <크기> | 백분율 | auto

margin 속성 : 요소 주변 여백 설정하기

margin 속성을 통해서 마진 영역의 크기를 조절할 수 있습니다. 4방향으로 top, bottom, right, left 로 나눠서 영역의 크기를 조절할 수 있습니다.

margin-top : <크기> | <백분율> | auto

margin-right : <크기> | <백분율> | auto

margin-bottom : <크기> | <백분율> | auto

margin-left : <크기> | <백분율> | auto

margin : <크기> | <백분율> | auto

속성은 top, bottom, right, left 나눠서 적용할 수도 있고 margin 속성을 이용해 한 번에 적용할 수도 있습니다. margin 속성에 값을 하나만 준다면 네 방향에 모두 적용되고, 값이 2개라면 첫 번째 값은 top, bottom에 두 번째 값은 left, right 에 적용이 됩니다. 값이 4개라면 각각 top, right, bottom, left(시계방향) 순으로 값을 부여합니다.

margin: 30px 50px 40px 70px;

위의 코드는 아래 코드와 동일하게 작용합니다.

margin-top : 30px;
margin-right : 50px;
margin-bottom : 40px;
margin-left : 70px;

padding 속성 : 콘텐츠 영역과 테두리 사이 여백 설정하기

패딩(padding) 이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다. 즉, 테두리 안쪽의 여백입니다. 마진과 마찬가지로 top, bottom, right, left 4개로 나눠서 표현하고 margin과 속성을 부여하는 법이 동일합니다.

padding-top : <크기> | <백분율> | auto

padding-right : <크기> | <백분율> | auto

padding-bottom : <크기> | <백분율> | auto

padding-left : <크기> | <백분율> | auto

padding : <크기> | <백분율> | auto

border-style 속성 : 테두리 스타일 지정하기

border-style 속성을 이용하면 테두리 영역의 선 스타일을 지정할 수 있습니다. 기본 값이 none 이기 때문에 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다.

border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid

다양한 스타일들을 지원해주고, 보통 solid 를 가장 많이 사용하는 것 같습니다.

border-width 속성 : 테두리 두께 지정하기

border-width 속성을 이용하면 테두리의 두께를 지정할 수 있습니다. 테두리 스타일을 적용하였더라도, 테두리 두께가 없다면 화면에 테두리가 나타나지 않습니다.

border-top-width : <크기> | thin | medium | thick

border-right-width : <크기> | thin | medium | thick

border-bottom-width : <크기> | thin | medium | thick

border-left-width : <크기> | thin | medium | thick

border-width : <크기> | thin | medium | thick

margin, padding 과 마찬가지로 border-width 속성도 top, bottom, right, left 로 구분해서 속성을 적용할 수 있고, border-width 를 통해 한 번에 적용할 수도 있습니다.

border-color 속성 : 테두리 색상 지정하기

border-color 속성을 적용하면 테두리에 색상을 지정할 수 있습니다. 마찬가지로, top, bottom, right, left로 구분해서 속성을 적용할 수 있고, 한 번에 적용할 수도 있습니다.

border-top-color : <색상>

border-right-color : <색상>

border-bottom-color : <색상>

border-left-color : <색상>

border-color : <색상>

border 속성 : 테두리 스타일 묶어 지정하기

방금 위에서 다룬 border-width, border-color, border-style 은 결국 테두리를 만들기 위해 기본적으로 사용해야 되는 속성들입니다. 따라서, border 속성을 통해 두께, 색상, 스타일을 한 번에 적용할 수 있게 지원해주고 있습니다.

border-top : <두께> | <색상> | <스타일>

border-right : <두께> | <색상> | <스타일>

border-bottom : <두께> | <색상> | <스타일>

border-left : <두께> | <색상> | <스타일>

border : <두께> | <색상> | <스타일>

테두리를 모든 방향에 파란색으로 1px 두께로 실선으로 설정하고 싶으면 아래와 같이 속성을 적용하면 됩니다.

border : 1px blue solid;

또, 다음과 같이 두께와 스타일만 지정하면 기본적으로 검은색 색상이 적용됩니다.

border : 1px solid;

border-radius 속성 : 박스 모서리 둥글게 만들기

border-radius 속성을 이용하면 박스 모서리를 둥글게 만들 수 있습니다. 둥글게 만들고 싶은 박스 모서리의 두 방향과 반지름을 뜻하는 radius를 사용해 속성을 표기합니다.

border-top-left-radius : <크기> | <백분율>

border-top-right-radius : <크기> | <백분율>

border-bottom-right-radius : <크기> | <백분율>

border-bottom-left-radius : <크기> | <백분율>

border-radius:<크기>|백분율

border-radius 속성을 이용하면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순으로 모서리에 속성을 적용할 수 있습니다.

display 속성 : 화면 배치 방법 결정하기

display 속성은 해당 요소가 화면에 어떻게 보일지 지정할 때 사용합니다. display 속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나, 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있습니다. 블록 레벨 요소인 div만을 이용해서 웹 문서의 레이아웃을 구현할 수 있는 이유입니다.

display : none | block | inline | inline-block | inherit | table | inlien-table | table- row |
table-row-group | table-header-group | table-footer-group | table-column |
table-column-group | table-cell | table-caption | list-item

● display : block; 속성은 이름 그대로 요소를 블록 레벨 요소로 바꿔줍니다.

● display : inline; 속성도 이름 그대로 요소를 인라인 레벨 요소로 바꿔줍니다.

● display : inline-block; 속성은 굉장히 자주 사용되는 속성으로 인라인 레벨로 배치를 하면서, 내용에는 블록 레벨 속성을 지정해 너비나 높이, 마진 같은 박스 모델 값을 적용할 수 있게 해 줍니다.

● dispaly : none; 속성은 해당 요소를 화면에 아예 표시하지 않습니다. 화면에서 감추는 게 아니라 공간조차 차지하지 않게 없애버립니다. PC용 화면에서는 표시하지만 모바일 화면에서는 표시하고 싶지 않은 부분을 처리할 때 자주 이용합니다.

● display : list-item; 속성은 <li> 태그 같은 List 계열을 뜻합니다. <li> 태그 같은 경우는 기본적으로 블록 레벨의 요소들처럼 작동하지만, 추가적으로 list-item 속성으로 list-style 계열의 CSS 속성을 이용할 수 있습니다.

● display : inherit; 속성은 부모 요소의 display 속성을 그대로 따르게 됩니다.

● Table 관련 display 속성

- <table> 태그와 그 부속 태그에서 사용되는 값들로, table 계열의 CSS 속성을 적용할 수 있습니다.

오늘 배운 속성들은 정말 자주 사용되고 개인적인 생각으로는 CSS 속성 중 가장 중요하다고 생각합니다!

이상으로 포스팅을 마치도록 하겠습니다 :)

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] CSS 포지셔닝 float, position, z-index - travelbeeee (0)	2020.04.12
[HTML+CSS] 배경 스타일 : background 속성 정리 (0)	2020.04.09
[HTML+CSS] 목록 스타일 : list 속성 정리 - travelbeeee (0)	2020.04.08
[HTML+CSS] 문단 스타일 : 텍스트 정렬, 들여 쓰기, 줄 간격 - travelbeeee (1)	2020.04.08
[HTML+CSS] 텍스트 스타일 : 글자 색, 간격, 공백 속성 정리 - travelbeeee (0)	2020.04.07

ERROR:ORA-12560: TNS:protocol adapter error 해결방법

2020. 4. 9. 13:44

Oracle DB에 접속하기 위해 sqlplus에 로그인하려는데 user-name, password를 맞게 입력해도 ERROR : ORA-12560 : TNS:protocol adapter error 가 발생했다. user-name, password 를 잊어버린 게 아닌가 싶은 생각에 관리자로 접속해서 user-name, password 를 바꾸는 명령어도 입력해보았지만 계속 에러가 발생했다.

구글링을 하다보니,,,, 전혀 다른 문제 때문에 error가 발생했던 거다,,,,,

오라클 관련 프로그램들을 실행시키지 않고, sqlplus 를 실행하려 해서 발생한 에러였다,,,

인생,,,, 저번에 컴퓨터 부팅 시 오라클 관련 프로그램들이 자동으로 실행되게 설정해놓으면 부팅이 오래 걸린다는 얘기를 듣고 수동으로 바꿔놓았던 과거의 나가 떠올랐다,,,^^

아래의 3개 프로그램이 실행 상태여야 sqlplus 를 이용할 수 있다!

● OracleServiceXE

● OracleXEClrAgent

● OracleXETNSListener

그럼 어떻게 저 프로그램들을 실행시키는가!

1) 내PC -> 컴퓨터 관리를 누른다.

2) 컴퓨터관리 -> 서비스 및 응용 프로그램 -> 서비스를 누른다.

위의 사진과 같이 나오면 빨간색으로 표시한 3개의 프로그램을 실행시켜줘야 한다!!

그럼 아래와 같이 sqlplus가 잘 작동하는 것을 확인할 수 있다...!!

'Dev > Error' 카테고리의 다른 글

[Tomcat] 톰캣에러 Could not publish server configuration for Tomcat v9.0 Server at localhost.Multiple Contexts have a path of "/controller". 해결방법 (0)	2020.09.02
[Tomcat] 톰캣에러 "The server cannot be started because one or more of the ports are invalid." 해결방법 (1)	2020.07.30
[MySQL] Access denied for user 'root'@'localhost' to database 'information_schema' 에러 해결방법 (0)	2020.07.30
IO오류 : The Network Adaptor could not establish the connection ( Oracle SQL Developer ) (0)	2020.04.14
caching_sha2_password 에러 해결 방법 (0)	2020.03.31

[BOJ] 10868 : 최솟값 - travelbeeee

2020. 4. 9. 11:14

문제 : https://www.acmicpc.net/problem/10868

세그트리

자료구조 세그트리를 이용하는 전형적인 문제로, 구간의 최솟값을 가질 수 있게 세그트리를 만들어주면 됩니다.

#include<iostream>
#include<algorithm>

using namespace std;

int N[100000] = {};
int tree[400000] = {};

int init(int index, int start, int end) {
	int mid = (start + end) / 2;

	if (start == end)
		return tree[index] = N[start];
	else
		return tree[index] = min(init(2 * index + 1, start, mid), init(2 * index + 2, mid + 1, end));
}

// 제일 작은 값을 찾자.
int get_min(int index, int start, int end, int left, int right) {
	int mid = (start + end) / 2;

	if (end < left || right < start){
		return 1987654321;
	}
	if (left <= start && end <= right){
		return tree[index];
	}

	return min(get_min(2 * index + 1, start, mid, left, right), get_min(2 * index + 2, mid + 1, end, left, right));
}


int main(void) {
	ios::sync_with_stdio(false);
	cin.tie(0); cout.tie(0);

	int n, m, a, b;
	long long ans = 0;
	
	cin >> n >> m;

	for (int i = 0; i < n; i++)
		cin >> N[i];

	init(0, 0, n - 1);

	for (int i = 0; i < m; i++) {
		cin >> a >> b;
		cout << get_min(0, 0, n - 1, a - 1, b - 1) << '\n';
	}

}

'Problem Solving > BOJ' 카테고리의 다른 글

[BOJ] 16953 : A -> B - travelbeeee (0)	2020.04.10
[BOJ] 2529 : 부등호 - travelbeeee (0)	2020.04.10
[BOJ] 6549 : Largest Rectangle in a Histogram - travelbeeee (0)	2020.04.09
[BOJ] 17178 : 줄서기 - travelbeeee (0)	2020.04.07
[BOJ] 2623 : 음악프로그램 - travelbeeee (0)	2020.04.07

PREV 1 ···26 27 28 29 30 31 32 ···127 NEXT

굳건하게

IT

[HTML+CSS] 배경 스타일 : background 속성 정리

background-color 속성 : 배경 색 지정하기

background-clip 속성 : 배경 적용 범위 조절하기

background-image 속성 : 웹 요소에 배경 이미지 넣기

background-repeat 속성 : 배경 이미지 반복 방법 지정하기

background-size 속성 : 배경 이미지 크기 조절하기

background-position 속성 : 배경 이미지 위치 조절하기

background-origitn 속성 : 배경 이미지 배치할 기준 조절하기

background-attachment 속성 : 배경 이미지 고정하기

'Dev > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] display, padding, margin, border 속성 정리 - travelbeeee

박스 모델 - 콘텐츠 영역, 패딩 영역, 테두리 영역, 마진 영역

width, height 속성 : 콘텐츠 영역의 크기

margin 속성 : 요소 주변 여백 설정하기

padding 속성 : 콘텐츠 영역과 테두리 사이 여백 설정하기

border-style 속성 : 테두리 스타일 지정하기

border-width 속성 : 테두리 두께 지정하기

border-color 속성 : 테두리 색상 지정하기

border 속성 : 테두리 스타일 묶어 지정하기

border-radius 속성 : 박스 모서리 둥글게 만들기

display 속성 : 화면 배치 방법 결정하기

'Dev > HTML5 + CSS3' 카테고리의 다른 글

ERROR:ORA-12560: TNS:protocol adapter error 해결방법

'Dev > Error' 카테고리의 다른 글

[BOJ] 10868 : 최솟값 - travelbeeee

세그트리

'Problem Solving > BOJ' 카테고리의 다른 글

+ Recent posts

티스토리툴바