굳건하게

안녕하세요, 여행벌입니다.

오늘은 박스 모델의 콘텐츠 영역, 패딩, 마진의 개념과 스타일을 적용하는 법, display 속성에 대해서 포스팅해보겠습니다. 지금까지 HTML5+CSS3 포스팅 중 가장 중요한 속성들입니다.

박스 모델 - 콘텐츠 영역, 패딩 영역, 테두리 영역, 마진 영역

 박스 모델이란 블록 레벨 요소들의 형태를 말합니다. 즉, 혼자 한 줄을 차지하는 요소들을 박스 모델이라고 합니다. 박스 모델의 세부 영역은 아래 그림과 같이 콘텐츠 영역, 패딩 영역, 테두리 영역, 마진 영역으로 크게 4개의 영역으로 나뉩니다.

● 마진은 테두리 영역 밖인 외부 여백을 뜻하고, 패딩은 내부 영역을 뜻합니다. 마진을 통해 다른 박스 모델들과의 거리를 조절할 수 있고, 패딩을 통해 콘텐츠 영역과 박스 모델의 테두리와의 거리를 조절 할 수 있습니다.

● 콘텐츠 영역은 말 그대로 실제 내용이 담겨 있는 영역을 뜻합니다.

● 실제 박스가 차지하는 너비는 콘텐츠 영역과 패딩 영역, 마진 영역을 모두 더한 것을 뜻합니다. 즉 width와 좌우 패딩 두께, 좌우 마진 두께를 합쳐서 계산합니다. 높이도 마찬가지입니다.

width, height 속성 : 콘텐츠 영역의 크기

 width, height 속성을 통해 콘텐츠 영역의 크기를 지정해 줄 수 있습니다. width 속성은 콘텐츠 영역의 너비를 조절하고, height 속성은 콘텐츠 영역의 높이를 조절합니다.

width : <크기> | 백분율 | auto

height : <크기> | 백분율 | auto

margin 속성 : 요소 주변 여백 설정하기

 margin 속성을 통해서 마진 영역의 크기를 조절할 수 있습니다. 4방향으로 top, bottom, right, left 로 나눠서 영역의 크기를 조절할 수 있습니다.

margin-top : <크기> | <백분율> | auto

margin-right : <크기> | <백분율> | auto

margin-bottom  : <크기> | <백분율> | auto

margin-left : <크기> | <백분율> | auto

margin : <크기> | <백분율> | auto

 속성은 top, bottom, right, left 나눠서 적용할 수도 있고 margin 속성을 이용해 한 번에 적용할 수도 있습니다. margin 속성에 값을 하나만 준다면 네 방향에 모두 적용되고, 값이 2개라면 첫 번째 값은 top, bottom에 두 번째 값은 left, right 에 적용이 됩니다. 값이 4개라면 각각 top, right, bottom, left(시계방향) 순으로 값을 부여합니다.

margin: 30px 50px 40px 70px; 

 위의 코드는 아래 코드와 동일하게 작용합니다.

margin-top : 30px;
margin-right : 50px;
margin-bottom : 40px;
margin-left : 70px;

padding 속성 : 콘텐츠 영역과 테두리 사이 여백 설정하기

 패딩(padding) 이란 콘텐츠 영역과 테두리 사이의 여백을 말합니다. 즉, 테두리 안쪽의 여백입니다. 마진과 마찬가지로 top, bottom, right, left 4개로 나눠서 표현하고 margin과 속성을 부여하는 법이 동일합니다.

padding-top : <크기> | <백분율> | auto

padding-right : <크기> | <백분율> | auto

padding-bottom  : <크기> | <백분율> | auto

padding-left : <크기> | <백분율> | auto

padding : <크기> | <백분율> | auto

border-style 속성 : 테두리 스타일 지정하기

 border-style 속성을 이용하면 테두리 영역의 선 스타일을 지정할 수 있습니다. 기본 값이 none 이기 때문에 테두리 스타일을 지정하지 않으면 테두리 색상이나 두께를 지정하더라도 화면에 표시되지 않습니다.

border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid

 다양한 스타일들을 지원해주고, 보통 solid 를 가장 많이 사용하는 것 같습니다.

border-width 속성 : 테두리 두께 지정하기

 border-width 속성을 이용하면 테두리의 두께를 지정할 수 있습니다. 테두리 스타일을 적용하였더라도, 테두리 두께가 없다면 화면에 테두리가 나타나지 않습니다.

border-top-width : <크기> | thin | medium | thick

border-right-width : <크기> | thin | medium | thick

border-bottom-width : <크기> | thin | medium | thick

border-left-width : <크기> | thin | medium | thick

border-width : <크기> | thin | medium | thick

 margin, padding 과 마찬가지로 border-width 속성도 top, bottom, right, left 로 구분해서 속성을 적용할 수 있고, border-width 를 통해 한 번에 적용할 수도 있습니다.

border-color 속성 : 테두리 색상 지정하기

 border-color 속성을 적용하면 테두리에 색상을 지정할 수 있습니다. 마찬가지로, top, bottom, right, left로 구분해서 속성을 적용할 수 있고, 한 번에 적용할 수도 있습니다.

border-top-color : <색상>

border-right-color : <색상>

border-bottom-color : <색상>

border-left-color : <색상>

border-color : <색상>

border 속성 : 테두리 스타일 묶어 지정하기

 방금 위에서 다룬 border-width, border-color, border-style 은 결국 테두리를 만들기 위해 기본적으로 사용해야 되는 속성들입니다. 따라서, border 속성을 통해 두께, 색상, 스타일을 한 번에 적용할 수 있게 지원해주고 있습니다.

border-top : <두께> | <색상> | <스타일>

border-right : <두께> | <색상> | <스타일>

border-bottom : <두께> | <색상> | <스타일>

border-left : <두께> | <색상> | <스타일>

border : <두께> | <색상> | <스타일>

 테두리를 모든 방향에 파란색으로 1px 두께로 실선으로 설정하고 싶으면 아래와 같이 속성을 적용하면 됩니다.

border : 1px blue solid;

 또, 다음과 같이 두께와 스타일만 지정하면 기본적으로 검은색 색상이 적용됩니다.

border : 1px solid;

border-radius 속성 : 박스 모서리 둥글게 만들기

 border-radius 속성을 이용하면 박스 모서리를 둥글게 만들 수 있습니다. 둥글게 만들고 싶은 박스 모서리의 두 방향과 반지름을 뜻하는 radius를 사용해 속성을 표기합니다.

border-top-left-radius : <크기> | <백분율>

border-top-right-radius : <크기> | <백분율>

border-bottom-right-radius : <크기> | <백분율>

border-bottom-left-radius : <크기> | <백분율>

border-radius:<크기>|백분율

 border-radius 속성을 이용하면 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 순으로 모서리에 속성을 적용할 수 있습니다.

display 속성 : 화면 배치 방법 결정하기

 display 속성은 해당 요소가 화면에 어떻게 보일지 지정할 때 사용합니다. display 속성을 사용하면 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나, 인라인 레벨 요소를 블록 레벨 요소로 바꿀 수 있습니다. 블록 레벨 요소인 div만을 이용해서 웹 문서의 레이아웃을 구현할 수 있는 이유입니다.

display : none | block | inline | inline-block | inherit | table | inlien-table | table- row |
            table-row-group | table-header-group | table-footer-group | table-column |
            table-column-group | table-cell | table-caption | list-item 

● display : block; 속성은 이름 그대로 요소를 블록 레벨 요소로 바꿔줍니다.

● display : inline; 속성도 이름 그대로 요소를 인라인 레벨 요소로 바꿔줍니다.

● display : inline-block; 속성은 굉장히 자주 사용되는 속성으로 인라인 레벨로 배치를 하면서, 내용에는 블록 레벨 속성을 지정해 너비나 높이, 마진 같은 박스 모델 값을 적용할 수 있게 해 줍니다.

● dispaly : none; 속성은 해당 요소를 화면에 아예 표시하지 않습니다. 화면에서 감추는 게 아니라 공간조차 차지하지 않게 없애버립니다. PC용 화면에서는 표시하지만 모바일 화면에서는 표시하고 싶지 않은 부분을 처리할 때 자주 이용합니다.

● display : list-item; 속성은 <li> 태그 같은 List 계열을 뜻합니다. <li> 태그 같은 경우는 기본적으로 블록 레벨의 요소들처럼 작동하지만, 추가적으로 list-item 속성으로 list-style 계열의 CSS 속성을 이용할 수 있습니다.

● display : inherit; 속성은 부모 요소의 display 속성을 그대로 따르게 됩니다.

● Table 관련 display 속성

- <table> 태그와 그 부속 태그에서 사용되는 값들로, table 계열의 CSS 속성을 적용할 수 있습니다.

오늘 배운 속성들은 정말 자주 사용되고 개인적인 생각으로는 CSS 속성 중 가장 중요하다고 생각합니다!

이상으로 포스팅을 마치도록 하겠습니다 :)

안녕하세요, 여행벌입니다.

오늘은 목록에 적용할 수 있는 여러 스타일에 대해서 포스팅해보겠습니다.

list-style-type 속성 : 목록의 불릿과 번호 스타일 지정하기

 list-style-type 속성을 이용하면 순서 없는 목록 ul 의 경우, 목록 앞에 다양한 불릿을 넣을 수 있고, 순서 있는 목록 ol 의 경우 번호 스타일을 지정할 수 있습니다.

list-style-type : none | <순서 없는 목록의 불릿> | <순서 목록의 번호>

list-style-image 속성 : 불릿 대신 이미지 넣기

 순서 없는 목록 앞에 붙는 불릿 대신 이미지를 넣으려면 list-style-image 속성을 이용하면 됩니다.

list-style-image : url("이미지경로")

list-style-position 속성 : 목록에 들여 쓰는 효과 내기

list-style-position 속성을 이용하면 실제 내용이 시작되는 위치에 불릿이나 번호를 표시하기 때문에 결과 화면에는 불릿이나 번호가 좀 더 안쪽으로 들여 써진 듯한 효과를 줄 수 있습니다.

list-style-position : inside | outside

예시 1) 순서 없는 목록 불릿 바꾸기

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            margin-left : 300px;
            background-color : pink;
            font-size : 3em;
            font : white;
        }
        .disc{
            list-style-type: disc;
        }
        .circle{
            list-style-type: circle;
        }
        .square{
            list-style-type: square;
        }
        .none{
            list-style-type: none;
        }
    </style>
</head>

<body>
    <ul class="disc">
        <li>disc속성적용</li>
        <li>disc속성적용</li>
    </ul>
    <ul class="circle">
        <li>circle속성적용</li>
        <li>circle속성적용</li>
    </ul>
    <ul class="square">
        <li>square속성적용</li>
        <li>square속성적용</li>
    </ul>
    <ul class="none">
        <li>none속성적용</li>
        <li>none속성적용</li>
    </ul>
</body>

</html>

4가지 속성을 모두 적용해보았습니다.

예시 2) list-style-position 속성 적용

이번에는 list-style-position 속성을 이용해 안쪽으로 들여 쓰기와 기본 값인 밖으로 들여 쓰기를 적용해보겠습니다.

<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color : pink;
            font-size : 3em;
            font : white;
        }
        .inside{
            list-style-position : inside;
        }
        .outside{
            list-style-position : outside;
        }
    </style>
</head>

<body>
    <ul class="inside">
        <li>inside 속성 적용</li>
        <li>inside 속성 적용</li>
    </ul>
    <ul class="outside">
        <li>outside 속성 적용</li>
        <li>outside 속성 적용</li>
    </ul>
</body>

</html>

목록과 관련된 속성은 많지 않지만, 자주 사용되니 익혀두시면 좋을 것 같습니다.

안녕하세요, 여행벌입니다.

오늘은 텍스트 정렬, 들여 쓰기, 줄 간격 등 문단 스타일에 대해서 포스팅해보겠습니다.

text-align 속성 : 텍스트 정렬하기

 text-align 속성은 문단의 텍스트 정렬 방법을 지정합니다. 우리가 흔히 한글에서 많이 쓰는 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬 등을 text-align 속성을 이용해서 지정할 수 있습니다.

text-align : start | end | left | right | center | justify | match-parent

direction 속성 : 글자 쓰기 방향 지정하기

 direction 속성은 텍스트를 어느 방향부터 쓰기 시작해 화면에 표시할지 정합니다. 한글과 영어를 비롯해 대부분의 언어는 왼쪽에서 오른쪽으로 쓰기 때문에 default 는 left-to-right 속성입니다.

direction : ltr | rtl

text-justify 속성 : 정렬 시 공백 조절하기

 text-align 속성이 justify 일 경우, 양쪽 끝에 맞추기 때문에 글자와 단어 사이 간격이 벌어질 수 있습니다. 이때 간격을 조절하는 속성이 text-justify 속성입니다.

text-justify : auto | none | inter-word | distribute

text-indent 속성 : 텍스트 들여 쓰기

 text-indent 속성은 문단의 첫 글자를 얼마나 들여 쓸지를 지정합니다.

text-indent : <크기> | <백분율>

line-height 속성 : 줄 간격 조절하기

문단의 첫 줄을 넘어 두 줄 이상이 되면 '줄 간격' 이 생깁니다. line-height 속성을 이용하면 줄 간격을 조절할 수 있습니다.

line-height : normal | <숫자> | <크기> | <백분율> | inherit

 숫자는 배수를 의미하며, 글자 크기가 12px 일 때, 숫자로 2를 주면 줄 간격은 24px가 됩니다. 

 normal은 브라우저가 기본적으로 제공하는 줄 간격으로 보통 글자 크기의 1.2배 입니다.

 inherit은 부모 속성을 그대로 가져온다는 뜻입니다.

text-overflow 속성 : 넘치는 텍스트 표기하기

 white-space : nowrap 으로 지정해 줄 바꿈을 하지 않을 때, 텍스트가 기준선을 벗어나 넘칠 수도 있습니다. 이렇게 넘치는 텍스트를 어떻게 처리할지 text-overflow 속성을 이용해 정할 수 있습니다.

text-overflow : clip | ellipsis

예시 1) direction 속성

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-size : 3em;
        }
        .ltr{
            direction : ltr;
        }
        .rtl{
            direction : rtl;
        }
    </style>
</head>
<body>
    <p class="ltr">left-to-right 속성으로 글씨쓰기.</p>
    <p class="rtl">right-to-left 속성으로 글씨쓰기.</p>
</body>
</html>

left-to-right 속성과 right-to-left 속성으로 비슷한 문구를 써보겠습니다.

문구 자체가 바뀌지는 않았지만, 글이 써지는 순서가 바뀐 것을 확인할 수 있습니다.

예시 2) text-align 속성

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color : pink;
            color : white;
            font-size : 3em;
        }
        .left{
            text-align : left;
        }
        .right{
            text-align : right;
        }
        .center{
            text-align : center;
        }
        .justify{
            text-align : justify;
        }
    </style>
</head>
<body>
    <p class="left">left 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
    <p class="right">right 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
    <p class="center">center 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
    <p class="justify">justify 정렬 방식을 사용했습니다.ㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏㅏ</p>
</body>
</html>

자주 쓰이는 text-align 속성 4가지를 예시를 통해 익혀보겠습니다.

예시 3) line-height 속성

<!DOCTYPE html>
<html lang="kr">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: pink;
            color: white;
            font-size: 3em;
        }
        .ex1{
            line-height : 3;
        }
        .ex2{
            line-height : 35px;
        }
        .ex3{
            line-height : 100%;
        }
    </style>
</head>

<body>
    <p class="ex1">
        line-height : 3(3배)<br>
        서울시립대학교는 1918년 개교한 이래 지난 한 세기 동안 시대적 요청에 부응하는 인재양성과 학문연구를 통해 국가와 사회발전에 기여해 왔습니다. 대학의 노력과 시민들의 성원에 힘입어 국내 최고수준의</p>
    <p class="ex2">
        line-height : 35px<br>
        서울시립대학교는 1918년 개교한 이래 지난 한 세기 동안 시대적 요청에 부응하는 인재양성과 학문연구를 통해 국가와 사회발전에 기여해 왔습니다. 대학의 노력과 시민들의 성원에 힘입어 국내 최고수준의</p>
    <p class="ex3">
        line-height : 100%(1배)<br>
        서울시립대학교는 1918년 개교한 이래 지난 한 세기 동안 시대적 요청에 부응하는 인재양성과 학문연구를 통해 국가와 사회발전에 기여해 왔습니다. 대학의 노력과 시민들의 성원에 힘입어 국내 최고수준의</p>
</body>

</html>

line-height 속성을 3(부모의 3배), 35px, 100%(부모 기준으로 100%) 3가지 방법으로 부여해보겠습니다. 이때, 부모는 해당 글씨의 크기가 됩니다.

이상으로 문단 스타일을 지정하는 여러가지 속성 정리를 마무리하겠습니다.

안녕하세요, 여행벌입니다.

오늘은 CSS 속성 중 텍스트 관련된 속성들에 대해서 배워보겠습니다.

color 속성 : 글자 색 지정하기

color : <색상>;

 color 속성을 이용하면 글자에 색을 지정해줄 수 있습니다. 색상 값은 16진수나 rgb, rgba,  hsl 또는 색상 이름으로 표기할 수 있습니다.

color : #ff0000; // 16진수 표현법
color : rgb(0, 200, 0); // rgb 표현법
color : rgba(0, 200, 0, 0.5); // rgba 표현법
color : blue; // 색상이름 표현법

rgba 의 마지막 값은 rgb와 다르게 투명도를 줄 수 있습니다.

text-decoration 속성 : 텍스트에 줄 표시하기 / 없애기

text-decoration : none | underline | overline | line-through

text-tranform 속성 : 텍스트 대, 소문자 변환하기

text-tranform : none | capitalize | uppercase | lowercase | full-width

full-width 속성값의 전각 문자란 고정 폭 영문자 너비의 두 배 정보 너비의 문자입니다.

text-shadow 속성 : 텍스트에 그림자 효과 추가하기

text-shadow : none | <가로거리> <세로거리> <번짐정도> <색상>

그림자 값을 여러개 사용하면 그래픽으로 처리한 듯한 텍스트를 만들 수도 있습니다. 아래에서 예시로 다뤄보겠습니다.

white-space 속성 : 공백 처리하기

white-space : normal | nowrap | pre | pre-line | pre-wrap

letter-spaceing / word-spacing 속성 : 텍스트 간격 조절하기

letter-spacing : normal | <크기>

word-spacing : normal | <크기>

letter-spacing 속성은 낱 글자 사이 간격을 조절하고, word-spacing 속성은 단어와 단어 사이 간격을 조절합니다. 주로 letter-spacing 속성을 이용해서 자간을 조절합니다.

예시1) color 속성 사용

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background-color : black;
        }
        p{
            font-size : 50px;
        }
    </style>
</head>
<body>
    <p style="color : #ff0011">Likelion(16진수)</p>
    <p style="color : red">Likelion(색상이름)</p>
    <p style="color : rgb(255, 0, 0)">Likelion(rgb)</p>
    <p style="color : rgba(255, 0, 0, 0.5)">Likelion(rgba)</p>
</body>
</html>

같은 색을 여러 방법으로 적용해보았습니다.

예시2) text-shadow 속성

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>text-transform</title>
  <style>
    body { background:#222;}  /* 문서 배경색 */
    h1 { 
      font-size:80px;  /* 글자 크기 */
      font-family:"Arial Rounded MT";  /* 글꼴 */
      letter-spacing:4px; /* 자간 */
    }
    .shadow {
      color: #000; /* 글자색 */
      text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -19px 18px #f20;  /* 텍스트 그림자 */
    }
  </style>
</head>
<body>
  <h1 class="shadow">LIKELION</h1>
</body> 
</html>

이상으로 텍스트 관련 CSS 속성 정리를 마치겠습니다.