본문 바로가기

Programming

 (477)
[CSS] 3. 박스 모델(4) - 테두리 스타일 1 ○ 박스 모델의 방향(위치) 박스 모델을 기반으로 HTML 문서의 요소를 배치할 경우, 각각의 박스 모델의 여러 가지 속성 중 테두리와 관련된 스타일을 사용하게 됩니다. 단순히 '사각형을 그린다' 이외에도 다양하게 적용될 수 있는 부분이죠. 우선 박스 모델에는 4개의 방향을 지칭하게 됩니다. 이는 마진, 패딩, 테두리 모두에 해당하게 되는 부분이므로 잘 기억해 두시는 것이 좋습니다. 용어 자체는 어렵지 않습니다. top(위) → right(오른쪽) → bottom(아래) → left(왼쪽)입니다. 이 속성을 이용해서 스타일을 일괄 지정하거나 개별적으로 지정이 가능한데, 위에서 위, 오른쪽, 아래, 왼쪽 순서를 정의해 두었습니다. 이는 top을 기점으로 시계방향으로 작성된 것인데요, 이 방향이 어떻게 사용..
중첩 클래스&인터페이스(3) - 중첩 클래스의 접근 제한자 3 : 로컬 클래스 ○ 로컬 클래스에서의 사용 제한 로컬 클래스에서의 여러 멤버들의 사용 제한 규칙에 대해서 살펴보겠습니다. 우선 로컬 클래스에서의 규칙과 관련해서는 인스턴스 멤버 클래스에 비해서 복잡한 내용이 많으니, 잊지 말고 로컬 클래스의 개념에 대해서 다시 한번 짚고 넘어가 보도록 하겠습니다. 중첩 클래스&인터페이스(2) - 중첩 클래스의 종류 2 : 정적 멤버 / 로컬 클래스 앞서서 우리는 살펴본 중첩 클래스의 분류 중, 멤버 클래스의 한 종류인 인스턴스 멤버 클래스를 살펴보았습니다. 중첩 클래스&인터페이스(2) - 중첩 클래스의 종류 1 : 인스턴스 멤버 클래스 중 nozeroslope.tistory.com 로컬 클래스의 특성을 요약하면, 아래의 내용과 같습니다. 일단 기본적으로 특정 메서드의 하위로 선언되기 때..
[CSS] 3. 박스 모델(3) - box shadow ○ box-shadow : 박스 모델에 그림자 효과 적용 CSS에서도 일반 워드 프로세서와 마찬가지로 그림자 효과를 적용할 수 있습니다. 이 그림자 효과는 box-shadow 속성을 이용해서 적용할 수 있고, 이미지 또는 태그 전체 영역에 지정하여 삽입할 수 있습니다. 이 속성은 속성 값이 꽤 많이 갖고 있는데, 지정해야 하는 값들은 아래와 같습니다. 선택자 { box-shadow: inset; } 우선 box-shadow 속성에서 수평 거리(가로), 수직 거리(세로)는 필수 값입니다. 아래 표에서 각 값들의 정의에 대해서도 한번 살펴보도록 하겠습니다. 분류 내용 수평 거리 가로로 그림자가 얼마나 떨어져 있는지를 지정합니다. 양수는 요소의 오른쪽, 음수는 요소의 왼쪽에 그림자를 생성합니다. 수직 거리 세..
중첩 클래스&인터페이스(3) - 중첩 클래스의 접근 제한자 2 앞서서 우리는 바깥 클래스에서 중첩 클래스에 접근하는 경우에 대해서 주로 살펴보았습니다. 그렇다면 이번에는 "중첩 멤버 클래스 내부에서" 바깥 클래스의 필드에 접근하는 경우에 발생하는 접근 제한에 대해서도 한번 살펴보도록 하겠습니다. 멤버 클래스로 선언된 중첩 클래스의 경우, 인스턴스 멤버 클래스로 선언되었는지 정적 멤버 클래스로 선언되었는지 여부에 따라서 내부 클래스에서 바깥 클래스로 접근하는 경우에 대한 접근 가능 범위가 달라집니다. 잠깐 생각해 보면, 쉽게 차이를 알 수 있습니다. 바로 정적 멤버 클래스의 경우 접근할 수 있는 바깥 클래스의 멤버가 달라지게 되지요. 원리는 단순합니다. 정적 멤버 클래스는 바깥 클래스의 인스턴스 생성이 없더라도 사용이 가능하기 때문에 - 바깥 클래스의 인스턴스 필드 ..
[CSS] 3. 박스 모델(2) - 사이즈, 크기 지정 ○ width, height : 콘텐츠 영역의 크기를 지정 우리는 앞의 과정을 통해서, 하나의 요소 안에 콘텐츠 / 패딩 / 박스 / 마진의 영역이 구성된다는 것을 확인했습니다. 그런데 우리가 특정 요소에서 width, height를 통해 어떤 크기를 지정하게 된다면 이것은 어디에 해당하게 되는 것일까요? 바로 '콘텐츠'영역의 크기를 지정하게 됩니다. width, height 속성 값은 아래와 같은 값을 지정할 수 있습니다. 분류 내용 auto 콘텐츠의 분량에 의해 박스 모델의 너비/높이의 값이 자동으로 결정되며, 디폴트 설정입니다. 크기 px이나 em 단위로 지정합니다. 백분율 박스 모델의 부모 요소를 기준으로, 너비/높이의 값을 백분율로 지정합니다. 해당 속성 값을 지정하는 예시를 만들어 보도록 하겠..
중첩 클래스&인터페이스(3) - 중첩 클래스의 접근 제한자 1 중첩 클래스의 종류를 다시 한번 상기해 보도록 하겠습니다. 잘 기억이 나지 않는다면, 이전에 설명했던 내용을 다시 한번 살펴보도록 하세요. [멤버 클래스]와 [로컬 클래스]로 대분류가 있고, 멤버 클래스는 [인스턴스 멤버 클래스]와 [정적 멤버 클래스]로 구분된다고 했습니다. 참고로 멤버 클래스는 '메서드 내부에 선언되는' 로컬 클래스와 구분되죠? 중첩 클래스&인터페이스(2) - 중첩 클래스의 종류 1 : 인스턴스 멤버 클래스 중첩 클래스는 '클래스 내부에' 선언되는 클래스입니다. 이때, 이 중첩 클래스는 내부에 선언되는 위치에 따라서 종류가 분류됩니다. 종류는 크게 다음 두 가지가 있습니다. · 멤버 클래스 · 로 nozeroslope.tistory.com 일단 멤버 클래스(인스턴스/정적 멤버 클래스)..
[CSS] 3. 박스 모델(1) - 블록 레벨, 인라인 레벨 CSS에서 이야기하는 박스 모델은, 우리가 보게 되는 HTML의 내용 전반을 박스 형태로 정의하는 방식을 뜻합니다. 문서의 형태를 다양하게 설계되지만, 대부분의 요소들이 '박스'로 나누어 레이아웃을 구성하는 개념이라고 생각해 주시면 될 것 같습니다. 우선, 박스 모델의 구성을 이야기하기 위해서는 요소와 관련해 다음 두 가지 레벨의 요소를 알고 가야 합니다. · 블록 레벨(block-level) 요소 블록 레벨 요소란 무엇일까요? 어려운 개념인 것 같지만, 사실 의외로 간단한 개념입니다. '태그를 사용해 요소를 삽입하면, 혼자서 한 줄을 모두 차지하는' 것을 의미하게 됩니다. 즉, 해당 요소의 width가 100%로 브라우저 한 줄을 모두 차지한다는 것이죠. , , 등이 대표적인 예입니다. · 인라인 레벨..
중첩 클래스&인터페이스(2) - 중첩 클래스의 종류 2 : 정적 멤버 / 로컬 클래스 앞서서 우리는 살펴본 중첩 클래스의 분류 중, 멤버 클래스의 한 종류인 인스턴스 멤버 클래스를 살펴보았습니다. 중첩 클래스&인터페이스(2) - 중첩 클래스의 종류 1 : 인스턴스 멤버 클래스 중첩 클래스는 '클래스 내부에' 선언되는 클래스입니다. 이때, 이 중첩 클래스는 내부에 선언되는 위치에 따라서 종류가 분류됩니다. 종류는 크게 다음 두 가지가 있습니다. · 멤버 클래스 · 로 nozeroslope.tistory.com 이번에는 남은 멤버 클래스인 정적(static) 멤버 클래스와 로컬 클래스를 살펴보겠습니다. ○ 정적 멤버 클래스 인스턴스 멤버 클래스에서 제약사항은 static 키워드를 쓰는 필드나 메서드를 사용할 수 없다는 점이었습니다. 그렇다면 이번 정적 멤버 클래스에서는 static을 사용할 ..

티스토리툴바