본문 바로가기

Programming/HTML+CSS

 (76)
[CSS] 3. 박스 모델(4) - 테두리 스타일 1 ○ 박스 모델의 방향(위치) 박스 모델을 기반으로 HTML 문서의 요소를 배치할 경우, 각각의 박스 모델의 여러 가지 속성 중 테두리와 관련된 스타일을 사용하게 됩니다. 단순히 '사각형을 그린다' 이외에도 다양하게 적용될 수 있는 부분이죠. 우선 박스 모델에는 4개의 방향을 지칭하게 됩니다. 이는 마진, 패딩, 테두리 모두에 해당하게 되는 부분이므로 잘 기억해 두시는 것이 좋습니다. 용어 자체는 어렵지 않습니다. top(위) → right(오른쪽) → bottom(아래) → left(왼쪽)입니다. 이 속성을 이용해서 스타일을 일괄 지정하거나 개별적으로 지정이 가능한데, 위에서 위, 오른쪽, 아래, 왼쪽 순서를 정의해 두었습니다. 이는 top을 기점으로 시계방향으로 작성된 것인데요, 이 방향이 어떻게 사용..
[CSS] 3. 박스 모델(3) - box shadow ○ box-shadow : 박스 모델에 그림자 효과 적용 CSS에서도 일반 워드 프로세서와 마찬가지로 그림자 효과를 적용할 수 있습니다. 이 그림자 효과는 box-shadow 속성을 이용해서 적용할 수 있고, 이미지 또는 태그 전체 영역에 지정하여 삽입할 수 있습니다. 이 속성은 속성 값이 꽤 많이 갖고 있는데, 지정해야 하는 값들은 아래와 같습니다. 선택자 { box-shadow: inset; } 우선 box-shadow 속성에서 수평 거리(가로), 수직 거리(세로)는 필수 값입니다. 아래 표에서 각 값들의 정의에 대해서도 한번 살펴보도록 하겠습니다. 분류 내용 수평 거리 가로로 그림자가 얼마나 떨어져 있는지를 지정합니다. 양수는 요소의 오른쪽, 음수는 요소의 왼쪽에 그림자를 생성합니다. 수직 거리 세..
[CSS] 3. 박스 모델(2) - 사이즈, 크기 지정 ○ width, height : 콘텐츠 영역의 크기를 지정 우리는 앞의 과정을 통해서, 하나의 요소 안에 콘텐츠 / 패딩 / 박스 / 마진의 영역이 구성된다는 것을 확인했습니다. 그런데 우리가 특정 요소에서 width, height를 통해 어떤 크기를 지정하게 된다면 이것은 어디에 해당하게 되는 것일까요? 바로 '콘텐츠'영역의 크기를 지정하게 됩니다. width, height 속성 값은 아래와 같은 값을 지정할 수 있습니다. 분류 내용 auto 콘텐츠의 분량에 의해 박스 모델의 너비/높이의 값이 자동으로 결정되며, 디폴트 설정입니다. 크기 px이나 em 단위로 지정합니다. 백분율 박스 모델의 부모 요소를 기준으로, 너비/높이의 값을 백분율로 지정합니다. 해당 속성 값을 지정하는 예시를 만들어 보도록 하겠..
[CSS] 3. 박스 모델(1) - 블록 레벨, 인라인 레벨 CSS에서 이야기하는 박스 모델은, 우리가 보게 되는 HTML의 내용 전반을 박스 형태로 정의하는 방식을 뜻합니다. 문서의 형태를 다양하게 설계되지만, 대부분의 요소들이 '박스'로 나누어 레이아웃을 구성하는 개념이라고 생각해 주시면 될 것 같습니다. 우선, 박스 모델의 구성을 이야기하기 위해서는 요소와 관련해 다음 두 가지 레벨의 요소를 알고 가야 합니다. · 블록 레벨(block-level) 요소 블록 레벨 요소란 무엇일까요? 어려운 개념인 것 같지만, 사실 의외로 간단한 개념입니다. '태그를 사용해 요소를 삽입하면, 혼자서 한 줄을 모두 차지하는' 것을 의미하게 됩니다. 즉, 해당 요소의 width가 100%로 브라우저 한 줄을 모두 차지한다는 것이죠. , , 등이 대표적인 예입니다. · 인라인 레벨..
[CSS] 2. 텍스트 스타일(6) - 표 스타일 우리는 앞서 HTML 챕터에서 표를 만들고 행을 생성하는 기본적인 과정을 배웠습니다. 이제 이렇게 생성된 표에 적용할 수 있는 스타일에 대해서도 한번 살펴보도록 하겠습니다. 2. 내용 입력하기(3) - 표 생성하기 1 이제 html 문서 내에서 표를 만드는 방법을 살펴볼 차례입니다. 일반적으로 워드프로세서나 게시판의 텍스트 에디터에서는 표 생성 도구가 제공되기 때문에 아주 간편하게 드래그나 행/열 칸 수 nozeroslope.tistory.com 2. 내용 입력하기(3) - 표 생성하기 2 지난 시간에는 기본적인 표(table)의 생성과 영역의 구분에 대해서 학습했습니다. 표의 외형과 스타일을 지정하는 부분에 대해서는 추구 CSS 학습을 통해 진행할 예정이니 조금만 기다려 주세요. 2 nozeroslop..
[CSS] 2. 텍스트 스타일(5) - 목록 스타일 우리는 앞선 과정에서 , , 를 사용한 목록 리스트에 대해서 살펴본 적이 있습니다. 사실 이것은 단순히 워드 프로그램에서의 순서를 나타내는 기능 정도로만 생각했겠지만, 사실 상용 웹사이트에서의 대부분 메뉴 바 디자인이나 목록 들은 이 목록에 디자인을 접목하여 구현하는 기능입니다. 생각보다 활용도가 높다는 이야기죠. 이번 아티클에서는 이 목록의 스타일과 관련한 스타일 속성과 응용 패턴을 살펴보도록 하겠습니다. ○ list-style-type : 태그 불릿 모양 / 번호 스타일을 지정 태그를 사용하여 목록을 만들게 될 경우, 원이나 네모 모양 혹은 숫자 / 알파벳을 통해 각 목록의 리스팅을 만들 수 있는데 이 불릿 모양을 지정할 수 있습니다. 즉, 해당 속성을 통해 하위 리스트의 불릿 모양을 지정하게 됩니다..
[CSS] 2. 텍스트 스타일(4) - 텍스트 정렬 2 ○ text-decoration : 텍스트의 줄 표시 / 없애기 text-decoration 속성을 이용해서 흔히 사용하는 텍스트의 밑줄 또는 취소선을 작성할 수 있게 됩니다. 그리고 의외로 많은 분들이 궁금해하는! 텍스트에 하이퍼링크 적용 시 나타나는 밑줄을 없애는 것도 이 속성을 이용해서 실행할 수 있습니다. text-decoration 속성 값에는 다음과 같은 종류가 있습니다. · none : 텍스트에 줄 표시하지 않음 · underline : 밑줄 표시 · overline : 윗줄 표시 · line-through : 취소선 표시 none 속성입니다. under line 속성입니다. over line 속성입니다. line through 속성입니다. ○ text-shadow : 텍스트에 그림자 효과 ..
[CSS] 2. 텍스트 스타일(4) - 텍스트 정렬 1 ○ text-align : 텍스트 정렬 조정 이 속성은 흔히 문서 작업에서 많이 사용하는 정렬을 의미합니다. 가운데 정렬, 왼쪽 정렬 같은 문장의 위치 정렬을 지정하게 되지요. 선택자 { text-align: start | end | left | right | center | justify | match-parent; } - left / right / center : 좌측 / 우측 / 중앙 정렬을 의미합니다. - start / end : 현재 텍스트 줄의 시작 / 끝 위치에 맞춰 문단을 정렬합니다. - justify : 양쪽 끝에 맞추어 정렬합니다. 오른쪽에 여백이 생기지 않습니다. - match-parent : 부모 요소를 따라서 문단을 정렬합니다. ○ line-height : 줄 간격 조정 line-..

티스토리툴바