본문 바로가기

Programming/HTML+CSS

 (76)
[CSS] 4. 레이아웃 설계(2) - float 3 : 3단 레이아웃 앞서 우리는 float 속성을 응용해 2단(칼럼) 레이아웃을 만들어 보았습니다. 하나씩 요소에 float를 적용하면서 float의 속성이 적용되는 방식에 대해서 어느 정도 이해도가 생겼을 것입니다. [CSS] 4. 레이아웃 설계(2) - float 2 : 2단 레이아웃 이제 float 속성과 clear 속성을 이용해서 실제 레이아웃을 구성해 보도록 하겠습니다. 칼럼 기준으로 2단 레이아웃을 가지며, 헤더와 푸터를 모두 구축하고 있는 페이지를 구성한다고 가정해 보겠 nozeroslope.tistory.com 이번에는 해당 방식을 응용하여 3단(칼럼) 레이아웃을 만들어 보도록 하겠습니다. 만들고자 하는 레이아웃의 사이즈는 아래 그림과 같습니다. 이번에도 역시 기본적인 HTML 코드와 CSS 스타일을 준비해 ..
[CSS] 4. 레이아웃 설계(2) - float 2 : 2단 레이아웃 이제 float 속성과 clear 속성을 이용해서 실제 레이아웃을 구성해 보도록 하겠습니다. 칼럼 기준으로 2단 레이아웃을 가지며, 헤더와 푸터를 모두 구축하고 있는 페이지를 구성한다고 가정해 보겠습니다. 구성과 사이즈는 아래의 그림과 같이 구성하려고 합니다. 우선 기본적인 코드는 다음과 같이 준비합니다. 타이틀(header) 사이드바(aside) 본문(section) 푸터(footer) * { margin:0; padding:0; box-sizing: border-box; } 위와 같이 간단한 텍스트와 div로 영역만을 구분했습니다. 스타일 상에서도 box-sizing 속성을 border-box로 지정한 것과 이외에는 마진과 패딩을 0으로 설정해 둔 것뿐입니다. 현재 상태에서 화면은 다음과 같이 출력됩..
[CSS] 4. 레이아웃 설계(2) - float 1 ○ float : 블록 레벨 요소의 배치 방향 우리가 많이 사용하는 태그 요소 중에서 를 떠올려 보겠습니다. 요소를 이용해 텍스트를 작성했는데, 이 문단 자체의 좌측 또는 우측에 이미지를 붙여서 표시해야 하는 경우가 있을 것입니다. 그런데, 우리가 배웠다시피 태그는 블록 레벨의 요소이기 때문에, 원칙적으로 바로 다음 줄에 이미지가 표시될 것입니다. float 속성은 이런 경우에 사용하게 됩니다. float 속성을 활용하면 텍스트나 이미지의 주변에 요소들이 둘러싸는 형태로 배치가 가능해집니다. float 속성은 단어의 뜻 그대로, 어떠한 HTML요소를 '왼쪽 구석' 또는 '오른쪽 구석'에 (강제로) 띄워놓는다는 의미로 사용됩니다. 워드 프로세서에서 간혹 텍스트와 이미지 배치를 결정하는 것을 본 적이 있으실..
[CSS] 4. 레이아웃 설계(1) - display ○ display 속성으로 요소 배치하기 우선 우리가 배었던 요소들의 블록 레벨의 요소와 인라인 레벨의 요소에 대해서 이해하고, 여기에 대해 display 속성 값을 이용해 여러 형태로 배치하는 방법에 대해서 살펴보겠습니다. 앞서 살펴본 내용이지만, 블록 레벨의 요소는 기본적으로 줄 바꿈이 일어난다는 기본적인 특징이 있습니다. 그리고 이 요소는 마진과 패딩을 설정할 수 있는 특성을 가지고 있죠. 인라인 레벨의 요소는 줄 바꿈이 일어나지 않는 요소이고 마진과 패딩 설정은 적용되지 않습니다. 이를 기억하고 아래 display 속성의 속성 값들의 사용에 대해서 확인해 보겠습니다. 종류 설명 block 인라인 레벨 요소를 블럭 요소로 변경합니다. inline 블럭 레벨의 요소를 인라인 레벨의 요소로 변경합니다...
[CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 2 ○ padding 속성의 이해 패딩은 '콘텐츠 영역'과 '테두리(border)' 사이의 여백 공간을 의미하게 됩니다. 마진(margin)과 마찬가지로, 패딩 역시 4개 방향에 적용하게 됩니다. 선택자 { padding: 20px 30px 40px 50px; } 선택자 { padding-top: 20px; padding-bottom: 50px; } 아래 예제를 통해서, 지금까지 배워온 표와 태그 요소들을 사용해서 표를 한번 완성해 보도록 하겠습니다. 일단 아래 코드를 보지 않고, 하단의 이미지 화면을 CSS 없이 구현해 보는 것을 목표로 하겠습니다. Nat King Cole 냇킹콜 탄생 100주년 기념 앨범 영화 화양연화를 본 사람들에게 익숙한 노래들입니다. 총 17곡의 주옥 같은 라틴의 정수가 콜의 연기..
[CSS] 3. 박스 모델(5) - 여백 속성(margin, padding) 1 ○ margin 속성의 이해 margin은 각 요소 사이의 간격을 조절할 수 있는, 요소 주변의 여백의 크기를 의미합니다. margin은 border 관련 속성들과 마찬가지로 margin 값을 일괄로 적용하거나, margin-위치를 통해서 개별적으로 지정할 수 있습니다. 선택자 { margin: 크기 | 백분율 | auto; } border 속성 값을 지정할 때와 마찬가지로, margin의 속성 값은 한 개부터 네 개까지 작성하는 개수에 따라서 적용 규칙이 달라진다. border와 동일하므로 이전의 내용도 함께 참고하시기 바랍니다. #margin1 { margin: 50px; } #margin2 { margin: 30px 50px; } #margin3 { margin: 30px 20px 50px; } #..
[CSS] 3. 박스 모델(4) - 테두리 스타일 3 ○ border 속성의 일괄 지정 지금까지 여러 가지 border와 관련된 속성들을 살펴보았는데, 해당 속성들을 여러 가지로 사용하거나 위치에 따라 분리해 사용하다 보면, 특정 요소에 작성해야 하는 개별 속성 값들이 많아지는 경우가 있습니다. 이런 경우에 기본적으로 'border' 속성 값을 부여하게 되면 네 개의 테두리에 모두 적용됩니다. 만일 어떤 요소의 bottom 테두리에만 색상과 선 모양, 컬러를 적용하고 싶다고 해서 개별 요소를 선언하고 값을 지정하면 최소 3개 이상의 속성 값을 부여해야 합니다. 하지만 border-top | right | bottom | left 속성을 선언하고 속성 값을 부여하게 되면 일괄적으로 속성을 부여할 수 있게 됩니다. ○ border-radius : 둥근 테두리 ..
[CSS] 3. 박스 모델(4) - 테두리 스타일 2 ○ border-width : 테두리의 두께 지정 테두리의 스타일(border-style)과 마찬가지 방식으로, 박스의 테두리의 두께도 지정이 가능합니다. 아래의 예시처럼 px과 같은 크기 값을 직접 입력하거나, 예약어를 통해서 두께를 지정할 수 있습니다. 선택자 { border-width: [크기] | thin | medium | thick } 참고로 border-style때와 마찬가지로, border-top | right | bottom | left-width와 같은 방식으로 위치에 따라 개별적인 속성 값 지정도 가능합니다. 하지만 아래에서 설명하는 방식으로 각 테두리의 두께 개별 지정도 간단하게 가능하니 확인해 보겠습니다. 우선 border-width에서 속성 값으로 최소 한 개, 최대 네 개(to..

티스토리툴바