본문 바로가기

Programming/HTML+CSS

 (76)
[CSS] 6. 고급 선택자(2) - 속성 선택자 1 우리는 지금까지 HTML 태그 작성 시, 여러 가지 '속성'을 함께 사용해 왔습니다. CSS의 선택자를 작성할 때, 연결 선택자 이외의 방식으로 이 속성 값을 지정해 특정 요소를 세부적으로 선택할 수 있습니다. ○ [속성] - 특정 속성이 있는 요소를 선택한다 특정 요소에서 태그를 사용할 때, 해당 태그에 세부적인 속성을 부여하는 경우가 있습니다. 이때 어떤 요소 중에서 특정한 속성을 가진 요소를 지정하고 싶을 때 [속성]을 사용합니다. 예를 들어서 링크를 부여할 때 태그에 href 속성을 사용하는 것처럼 말이죠. 만일 태그 중, href 속성을 사용하는 요소에만 특정 CSS 속성을 적용하고 싶다면, 다음과 같이 '[ ]'를 사용합니다. a[href] { // ..... } 아래의 예시를 통해서, 여러 ..
[CSS] 6. 고급 선택자(1) - 연결 선택자 2 연결 선택자(selector) 중에서 이번에는 형제 관계로 존재하는 요소들의 선택자에 대해서도 살펴보겠습니다. 일단, 여기서 얘기하는 형제 관계란 무엇일까요? 간단하게, 부모 요소가 같은 요소들을 일컬어 형제 관계라고 칭합니다. 다만, 이제 설명할 형제 관계의 요소에 해당하는 두 가지 셀렉터를 한국어로 번역했을 때 꽤 혼란스러울 수 있기 때문에, 여기서는 원문 단어를 중심으로 설명하겠습니다. 사실 관념적으로 일반적인 선택 형식은 아니기 때문에, 이런 선택 분류자체가 어색할 수 있어서 이해가 안 갈 뿐이지, 내용 자체가 어려운 것은 아닙니다. ○ adjacent selector(인접 형제 선택자) - 기본적으로 [요소1 + 요소2] 형태로 사용합니다. 실제 적용되는 요소는 '요소2' 뿐입니다. - 여기서 ..
[CSS] 6. 고급 선택자(1) - 연결 선택자 1 우선 '연결 선택자'라는 단어의 정의를 오해하지 않도록 설명하겠습니다. 여기서 '연결'되는 것은, 선택자가 두 개 이상 사용되어 조합하게 된다는 것을 의미합니다. 그래서 연결 선택자는 곧 조합, 또는 콤비네이션 선택자로도 불립니다. 이러한 연결 선택자에는 다양한 유형이 있습니다. 필요성에 따라 하위 / 자식 / 형제 선택자를 사용하게 됩니다. 각각의 종류와 특성에 대해서 하나씩 살펴보겠습니다. ○ 하위 선택자(descendant selector) 하위 선택자를 사용하게 되면, 를 작성하게 됩니다. 이때 이 선택자의 정의는, '상위요소에 포함된 모든 하위요소에 적용한다.'입니다. 특히 자식 요소 뿐만아니라 손자 요소까지 모두 일괄적으로 적용됩니다. section p { // .... } 위와 같이 sect..
[CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과3 ○ 그라데이션을 사용한 패턴 생성 그라데이션을 사용하면 여러 가지 무늬를 가진 패턴을 생성하는 것도 가능합니다. 실제로 사용성이 높지 않은 기술이니 대략 이런 형태로도 사용이 가능하다, 정도 알고 넘어가시면 충분합니다. 우선 앞서 배웠던 선형 / 원형 그라데이션은 반복 사용이 가능한 속성입니다. 이때 사용하는 속성이 repeating-linear-gradient 그리고 repeating-radial-gradient입니다. 이를 그라데이션 형태가 아니라, 완벽한 솔리드 컬러 타입의 패턴으로 변경한다면 다음과 같이 적용할 수 있습니다. 참고로 상위의 노란색과 붉은색 패턴의 경우, 노란색과 붉은색 패턴이 전체 40px이고 yellow / yellow 20px / red 20px / red 40px의 순서대로 ..
[CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과2 ○ 원형 그라데이션 앞서 살펴본 선형 그라데이션은 직선 형태의 방향으로 색상이 변경되었습니다. 원형 그라데이션은 (타)원의 중심으로부터 동심원을 그리며 바깥 방향으로 색상이 변형되는 형태입니다. 일단 아래와 같은 형태로 기본형을 살펴보고, 속성 별로 하나씩 살펴보겠습니다. 선택자 { background: radial-gradient( at , , [,...]); } - 모양 기본적으로 원형 그라데이션에서 지원하는 모양은 두 가지 입니다. 바로 원형(circle)과 타원형(ellipse)이죠. 참고로 모양을 지정하지 않으면 디폴트 값은 타원형으로 지정됩니다. 아래의 예제를 참고해 주시기 바랍니다. 위의 예제를 실행하면 아래와 같이 두 개의 원형 그라데이션을 확인할 수 있습니다. grad1의 경우, 별도로 ..
[CSS] 5. 배경 이미지와 그라데이션(3) - 그라데이션 효과1 그라데이션 자체를 실제로 CSS 요소를 사용해서 많이 사용하지는 않을 것입니다. 이번 아티클부터 다루는 다양한 그라데이션 효과 표현은 CSS의 구성 요소의 다양한 기능을 익혀보고 사용해 보는데 의의를 두고 가볍게 학습하시기 바랍니다. ○ 선형 그라데이션(linear-gradient) 우선 가장 기본적인 그라데이션 형태인, 선형 그라데이션을 살펴보겠습니다. 일단 기본적인 속성 형태는 아래와 같습니다. 실제 사용 방식은 하나씩 짚어보겠습니다. 선택자 { background: linear-gradint(to | , , [, ...]); } 위에서 background 속성 값에 선형 그라데이션을 적용한 케이스로 예시를 들었습니다. 실제로 사용하면서 속성 값을 적용하는 방식을 알아보겠습니다. - 선형 그라데이션 ..
[CSS] 5. 배경 이미지와 그라데이션(2) - background image 5 이제 앞에서 배운 내용을 바탕으로, 배경 이미지와 텍스트를 삽입하는 실제 사례를 만들어 보겠습니다. 우선 다소 큰 사이즈의 배경이미지를 하나 준비해 주겠습니다. 여기서 사용하는 이미지는 1920x1207 사이즈입니다. Let's Get It On! 이렇게 작성한 코드를 실행하면, 아래 그림과 같이 꽉 찬 배경 이미지로 구성된 화면을 볼 수 있습니다. 자, 그런데 이 배경 이미지가 1920x1207 사이즈의 이미지라고 했습니다. 현재 포지션은 left top으로 고정한 상태이죠. 이때, 브라우저의 사이즈가 1920x1207 이상의 크기로 확장되면 이미지는 어떻게 될까요? 본래의 사이즈에서 가로 크기만 늘어난다면 아래와 같이 변합니다. 반대로 본래 사이즈에서 세로 길이만 늘린다면, 다음과 같이 변하게 되지요.
[CSS] 5. 배경 이미지와 그라데이션(2) - background image 4 ○ background 속성 일괄 적용하기 지금까지 background 관련된 속성을 여러 가지 배웠습니다. 예를 들어서, 아래와 같이 네 개의 background 관련 속성이 적용되었다고 가정해 보겠습니다. body { background-image: url('images/bg.png'); background-repeat: no-repeat; bacground-position: center bottom; background-attachment: fixed; } 위의 속성과 속성 값 부여를 아래와 같이 간단하게 나타낼 수도 있습니다. 속성 값은 중복되어 사용되지 않기 때문에, 입력 순서는 상관없이 사용할 수 있습니다. body { background: url('images/bg.png') no-repea..

티스토리툴바