css 배경 이미지, background-image 

 

 

배경이미지 속성

 

배경이미지를 불러오는 방식 2가지이다.

background-image:url(img/cat.png);

▷ 부모속성보다 이미지가 작을 경우 반복되는 성격을 가진다.

 

background-image:url(img/cat.png),url(img/dog.png); 

▷ 배경이미지를 반복해 불러올 때 쉼표로 표현한다. 그러나 앞쪽에 불러온 이미지가 위쪽으로 표현된다.

 

 

 

다음으로 배경이미지를 사용할 때 사용하는 여러 가지 속성들이다.

 

background-repeat:no-repeat;

▷ 반복하지 않겠다는 의미이다.

 

background-repeat:repeat-x;
background-repeat:repeat-y;

▷ 각각 x방향, y방향으로 반복을 설정한다.

 

 

background-size:100%;
background-size:auto;
background-size:cover;

위에서 부터 차례대로,

▷ 고정비로 100%를 나타낸다.

▷ 원래 이미지 크기를 유지한다.

▷ 비율을 유지하며 요소가 꽉 차도록 한다.

 

 

background-attachment:scroll;
background-attachment:fixed;

▷ 배경이미지가 스크롤에  영향을 받는다.

▷ 배경이미지가 화면에 고정된다.

 

 

background-position: x위치, y위치;

▷x위치(left, right, center), y 위치(top, center, bottom)를 또는 % 값을 이용해 배경의 위치를 설정해준다.

 

반응형
저작자표시 비영리 변경금지

'HTML & CSS' 카테고리의 다른 글

[CSS] Position 속성  (0) 2020.06.18
[HTML5 / CSS3] overflow속성  (0) 2020.04.25
[HTML5 / CSS3] 블럭 구조 vs 인라인 구조 vs 인라인블럭 구조  (0) 2020.04.25

css/ overflow속성 

 

 overflow

 

안쪽의 내용을 어떻게 잡을지, 어떻게 보여줄지에 대한 속성이다. 자식 요소가 부모 요소의 범위를 초과할 때어떻게 처리할 것인지를 지정해주는 속성이다. 아래에는 overflow 사용 시 이용되는 값들이다.

 

  • visible : 박스를 넘어가도 보여준다.(default 값)

  • hidden : 박스를 넘어간 부분은 보이지 않는다.

  • scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나온다.

  • auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나온다.

  • initial : 기본값으로 설정한다.

  • inherit : 부모 요소의 속성 값을 상속 받는다.

 

 overflow:hidden

 

hidden으로 값을 설정하면 내용이 박스를 넘어갔을 때, 넘어간 부분이 보이지 않게 된다. 

height 값이 없는 상태일 때 높이값을 대신하고, 내용물에 따라 높이가 유동적으로 달라진다.(즉, 내용이 유동적일 때 높이 대신으로 사용)
반대로 height가 있는 상태일 때 적용하면, 높이만큼 흘러넘치는 내용물이 잘려서 보이게 된다.

 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 50px;
  border: 1px dotted black;
  overflow: hidden;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, 
dicta? Nam exercitationem numquam ab eos fugiat sit voluptates</div>

</body>
</html>

 

결과

 

 

 overflow:scroll

 

내용물이 박스보다 클 때, 넘치는 것을 잘리지 않고 볼 수 있도록 스크롤이 생긴다.

  • overflow-x:scroll; --> x축 스크롤만 생김

  • overflow-y:scroll; --> y축 스크롤만 생김

  • overflow-y:hidden; --> y축 스크롤을 숨김

  • overflow-x:hidden; --> x축 스크롤을 숨김

<!DOCTYPE html>
<html>
<head>
<style>
div {
  background-color: #eee;
  width: 200px;
  height: 100px;
  border: 1px dotted black;
  overflow: scroll;
}
</style>
</head>
<body>

<h2>CSS Overflow</h2>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam, dicta? Nam exercitationem numquam ab eos fugiat sit voluptates, mollitia esse, praesentium id delectus repudiandae nulla quisquam nisi ut, eius ratione!</div>

</body>
</html>
 

결과

 

 

반응형
저작자표시 비영리 변경금지

'HTML & CSS' 카테고리의 다른 글

[CSS] Position 속성  (0) 2020.06.18
[CSS] 배경 이미지  (0) 2020.04.26
[HTML5 / CSS3] 블럭 구조 vs 인라인 구조 vs 인라인블럭 구조  (0) 2020.04.25

 HTML / CSS 기초 공부 

 

블록 구조(block)

 

블록 요소는 일단 기본적으로 줄 바꿈이 일어나는 형태로 영역의 너비가 상위 영역의 전체 너비만큼 만들어지는 형태다. 블록 요소에는 일부를 제외한 블록 요소를 포함하고, 인라인 요소까지 포함 가능하다. 기본 설정이 블럭인 자주 사용하는 태그들은 다음과 같다.

div, p, h1~h6, ul, li, ol, table, form, section, footer...

div{
	display:block;
}

 

인라인 구조(inline)

 

인라인 요소는 글자와 같이 옆으로 나열되는 형태로 줄 바꿈이 일어나지 않는 요소들이다. 인라인은 안의 글자와 같은 내용 길이에 맞게 크기를 차지하는 성질이 있다. 아래에  대표적인 몇가지 inline 태그들이 있다.

span, a, em, i, strong, b, del, ins, sub, sup, textarea...

 

같은 인라인요소를 포함하지만, 블록 요소는 포함 불가능하다. 그리고 인라인요소는 box관련 속성이 적용이 안된다. ex) width, height, margin(top, bottom)(margin은 좌, 우만 적용이 된다) 등 적용 안된다. 참고로 padding 값은 적용이 된다.

 

li{
	display:inline;
}

 

 

인라인-블록 구조(inline-block)

 

옆으로 나열되는 성격을 가진 inline 속성과 폭을 가지는 스타일이 모두 적용되는 block속성 두 가지 모두의 성질을 가진 구조이다. 대표적으로 <img> 태그가 있다. 이미지 태그는 width, height, margin(상하좌우) 속성 적용이 가능하다!. 

img{
	display:inline-block;
}

보통 이미지를 사용할 땐 block(박스화)으로 처리해주고 사용하는 게 좋다.

img{
	display:block; /*박스화!*/
}
 

 

반응형
저작자표시 비영리 변경금지

'HTML & CSS' 카테고리의 다른 글

[CSS] Position 속성  (0) 2020.06.18
[CSS] 배경 이미지  (0) 2020.04.26
[HTML5 / CSS3] overflow속성  (0) 2020.04.25

 Javascript 기초 문법 - 변수 , 연산자, 타입 

 

1. 변수

 

변수는 var, let, const로 선언할 수 있다.
어떤 것을 사용하는가에 의해서 scope, 즉 변수의 유효 범위가 달라진다. 변수에 무조건 하나의 값만 넣을 수 있다. 

 

var a = 1;
var b = '안녕';
var a = "aaa";
var a = 'aaa';
var a = true;
var a = [];
var a = {};
var a = undefined;

 

 

 

2. 연산자

 

기본적으로 모든 언어에서 사용되는 연산자랑 동일하게 사용된다. 연산자 우선순위를 표현하기 위해서는 ()를 사용하면 된다. 수학연산자는 +,-,*,/,%(나머지) 등이 있다. 그리고 논리 연산자, 관계 연산자, 삼항 연산자도 있다. 

 

// OR 연산자
const name = "kim";
const result = name || "exam";
console.log(result);
// "kim" 출력

 

var name = "";
var result = name || "exam";
console.log(result);
// "exam" 출력

 

삼항 연산자

간단한 비교나 조건이 있을 때 값 할당에 사용한다. ?앞의 조건식의 결과가 참이면 콜론(:) 앞의 값을 선택하고, 거짓이면 콜론 뒤의 값을 선택한다.

const data = 11;
const result = (data > 10) ? "True" : "fail";
console.log(result);
// "True" 출력

 

비교 연산자

좌항과 우항의 값을 비교할 때 사용하며, 비교에서는 == 보다는 ===는 사용하는 것이 좋다. ==을 자바스크립트에서 사용할 경우 여러 가지 오류가 발생하는 경우가 많기 때문에 주의가 필요하다.

==는 타입은 달라도 값이 같으면 참으로 간주하고, ===는 값과 타입 모두 같아야만 참으로 간주하는 것이 큰 차이다.

0 == "0"; // 참
0 === "0" // 거짓
"0" === "0" // 참
"0" == 0 // 참

 

 

3. 타입

 

자바스크립트에서 타입은 여러 가지가 존재한다. undefined, null, boolean, number, string, object, function, array, Date, RegExp 와 같이 많은 타입이 존재한다. 타입은 선언할 때가 아니고, 실행타임에 결정된다. 함수 안에서의 파라미터나 변수는 실행될 때 그 타입이 결정된다.

타입을 확인하는 방법은 여러 가지가 있다. 문자, 숫자와 같은 자바스크립트 기본 타입은 'typeof' 키워드를 사용해서 체크할 수 있다. 배열은 타입을 체크하는 isArray함수가 표준으로 생겼다.

 

반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

[JavaScript] Numbers API를 이용한 프로젝트 - AJAX, Fetch  (0) 2020.08.10
[JavaScript] AJAX 란 무엇인가?  (0) 2020.07.17
[JavaScript] Event - addEventListener, 이벤트 객체  (0) 2020.05.14
[JavaScript] JSON - JSON.parse(), JSON.stringify()  (0) 2020.05.13
[JavaScript] 함수  (0) 2020.05.13

+ Recent posts

티스토리툴바