본문 바로가기

Programming/HTML+CSS

 (76)
[CSS] 5. 배경 이미지와 그라데이션(2) - background image 3 ○ background-origin : 배경 이미지 적용 범위 배경 이미지를 박스 모델 안에 적용하게 될 때, 해당 박스 모델에 패딩이 있거나 테두리까지 적용할지 결정할 수 있습니다. background-clip 속성에서 적용했던 속성 값과 비슷한 기능을 떠올리시면 됩니다. background-origin 속성 값은 다음 세 개의 종류로 구분됩니다. · content-box : 기본값이며, 패딩과 테두리를 제외한 콘텐츠 부분에만 배경 이미지를 표시합니다. · padding-box : 패딩까지 배경 이미지를 표시합니다. · border-box : 테두리까지 배경 이미지를 표시합니다. ○ background-attachment 속성 기본적으로 어떤 HTML 문서에서 스크롤을 조절하면, 해당 문서에 적용된 배..
[CSS] 5. 배경 이미지와 그라데이션(2) - background image 2 ○ background-position : 배경 이미지 위치 조정 배경 이미지로 적용된 이미지들 역시 background-position 속성 값을 부여함으로써, 수평 or 수직으로 위치를 이동할 수 있습니다. 우선, 기본적인 속성 값의 적용 형태는 아래와 같습니다. 선택자 { background-position: } 속성 값으로 두 개의 값을 부여하면 각각 수평, 수직 값으로 인식됩니다. 만일 한 개의 값만을 입력한다면 브라우저에서 해당 속성 값을 수평 값으로 인식하고 수직 위치는 50%나 center로 인식하게 됩니다. background-position의 속성 값으로는 키워드 / 백분율 / 크기 값을 각각 입력이 가능합니다. 각각의 속성 값의 종류에 대해서도 살펴보겠습니다. 우선 키워드는 말 그대로..
[CSS] 5. 배경 이미지와 그라데이션(2) - background image 1 ○ background-image : 배경 이미지 삽입 우선 HTML 문서에 배경을 넣는 가장 기본적인 스타일 속성 작성 방식을 살펴보겠습니다. 우선 background-image 속성에 url 키워드를 사용하게 됩니다. 기본형은 다음과 같습니다. 선택자 { background-image: url('이미지 경로'); } 위에서 사용하는 이미지 경로는, 상대 경로 혹은 절대 경로를 사용할 수 있습니다. 이미지의 경우 jpg, gif, png 형식을 사용하게 됩니다. 여기까지는 사용에 큰 문제가 없을 텐데, 화면을 채우는 방식을 주의깊게 살펴보아야 합니다. ○ background-repeat : 배경 이미지 반복 배치 예를 들어 다음과 같이 특정 이미지를 배경으로 지정했다고 가정해 보겠습니다. 그러면 해당 ..
[CSS] 5. 배경 이미지와 그라데이션(1) - background color & clip ○ background-color 속성 : 배경색 지정 HTML 문서의 배경색을 정하고 싶다면, background-color 속성에 16진수, 색상 이름, RGB 값 등을 입력해 색상을 지정할 수 있습니다. 당연히 투명도(알파)를 적용하기 위해서는 RGBA 등의 속성 값을 사용하면 됩니다. 크게 어려울 것은 없는 부분입니다. 선택자 { background-color: #008000; background-color: rgb(0,120,1); background-color: green; } 다만, 부모-자식 요소 간의 스타일 상속과 관련해 예외사항이 하나 있습니다. 바로 background-color 속성은 상속 대상이 아니라는 점입니다. 예를 들어서 폰트, 글자 크기 등의 속성을 태그에 적용하면 모든 웹..
[CSS] 4. 레이아웃 설계(3) - position과 위치 속성 4 : fixed, sticky 이제 길고 긴 position 속성 값을 알아보는 여정에도 끝이 보이고 있습니다. 고정형 타입인 fixed와 sticky에 대해서 알아보고 position 속성에 대한 내용을 마무리해보도록 하겠습니다. ▷ fixed 우리가 웹 페이지를 볼 때, 우측 하단에 '상담 채팅 연결하기', '이벤트 신청하기' 같은 작은 버튼이 고정된 위치에 출력되는 것을 보신적이 있을 것입니다. 이러한 버튼은 마우스로 페이지를 아무리 스크롤해도 핀으로 꽂아놓은 것처럼 고정되어 있다는 것이 특징입니다. 이 경우가 바로 position의 속성 값을 fixed로 사용했을 때 나타나는 특징입니다. fixed로 position을 설정하게 되면, 이 역시 기본적인 HTML의 요소 배치 컨텍스트에서 벗어나게 되고, 위치 요소(left, ri..
[CSS] 4. 레이아웃 설계(3) - position과 위치 속성 3 : absolute 앞서서 position 속성의 relative까지 살펴보았습니다. 이제 absolute에 대해서도 살펴보아야 하겠습니다. ▷ absolute absolute는 정말이지 단어의 절대적인 뜻 풀이에 현혹(?)되어서는 안 되는 속성 값입니다. relative와 반대되는 '절대 위치'도 아니고 오히려 relative와 연계성이 강한 속성입니다. 다시 한번 말씀드리지만 position 속성의 relative와 absolute 속성 값은 단어의 의미로 연상하지 말고, 그냥 특성을 이해해야 합니다. 우선 position이 absolute로 선언된다면, 일단 기존의 HTML 문서 배치 컨텍스트에서 벗어나게 됩니다. 예를 들어 앞선 예제에서 세 개를 배치했는데, 두 번째 에 적용하게 된다면 첫 번째와 세 번째 요소는 이..
[CSS] 4. 레이아웃 설계(3) - position과 위치 속성 2 : relative 앞의 아티클에서 position 속성과 더불어 요소의 위치 속성(left, right, top, bottom)에 대해서 살펴보았습니다. 이번 아티클에서는 position 속성 값 중 static을 제외한 나머지 요소들에 대해서도 살펴보겠습니다. [CSS] 4. 레이아웃 설계(3) - position과 위치 속성 1 우선 이번 아티클에서는 다음 두 가지 요소에 대해서 다루게 됩니다. 그런데 이렇게 먼저 정리를 하며 설명하는 이유는 새롭게 배우게 되는 두 가지 요소가 연계되어 사용되기 때문입니다. 우선 nozeroslope.tistory.com ▷ relative relative라는 단어의 뜻 때문에, 해당 position 값을 relative로 지정하게 되면 흔히 얘기하는 '상대위치' - 즉 절대 위치가 ..
[CSS] 4. 레이아웃 설계(3) - position과 위치 속성 1 : static 우선 이번 아티클에서는 다음 두 가지 요소에 대해서 다루게 됩니다. 그런데 이렇게 먼저 정리를 하며 설명하는 이유는 새롭게 배우게 되는 두 가지 요소가 연계되어 사용되기 때문입니다. 우선 이 챕터에서는 position 속성에 대해서 배우게 되고, 요소의 위치 속성(left, right, top, bottom)에 대해서 배웁니다. 그럼 position과 위치 속성이 각각 어떻게 영향을 미치게 될지에 대해서도 고민해 보도록 합시다. ○ 요소의 위치 속성 : left, right, top, bottom 위 네 가지 속성은 특정 요소의 스타일 속성에서 사용하게 되면, 해당 요소가 "기준 위치로부터" 얼마나 떨어져 있는지를 지정하게 됩니다. 간단하죠? 각각의 방향에 px 값을 부여하면 해당 요소가 왼쪽으로부터(l..

티스토리툴바