[CSS] CSS 기초

CSS의 기본부터 위치 속성까지의 기초지식들을 정리해 보았습니다.

기본 문법

CSS는 선택자와 선언부로 구성됩니다. 선언부는 중괄호({})로 둘러쌓여 있고, 선언부 내에 '속성명: 속성값' 이 있습니다. 각 속성들은 세미콜론(;)으로 구분됩니다.

다양한 방법으로 선택자를 이용해 HTML 요소를 가리켜 스타일을 적용할 수 있습니다.

/*HTML 요소 선택자*/
h2 { color: teal; text-decoration: underline; }

/*아이디(id) 선택자*/
#heading { color: teal; text-decoration: line-through; }

/*클래스(class) 선택자*/
.headings { color: lime; text-decoration: overline; }

/*여러 선택자들을 쉽표로 구분하여 표시할 수 있습니다*/
h1 { color: navy; }
h1, h2 { text-align: center; }
h1, h2, p { background-color: lightgray; }

/*두 조건을 모두 만족하는 요소를 선택합니다*/
.description h5{
  color: teal;
}

HTML 문서에 CSS 스타일을 적용하는 방법에는 세가지가 있습니다.

만약 이들이 혼용되면 적용 우선순위는 인라인 스타일 -> 내부/외부 스타일 시트 입니다.

/*인라인 스타일: HTML 요소 내부에 style 속성을 사용하여 스타일을 적용합니다*/
<h2 style="color:green; text-decoration:underline">인라인 스타일</h2>

/*내부 스타일 시트: HTML 문서 내의 <head>태그에 <style>태그를 사용하여 CSS 스타일을 적용합니다*/
<head>
    <style>
        body { background-color: lightyellow; }
        h2 { color: red; text-decoration: underline; }
    </style>
</head>

/*외부 스타일 시트: <head>태그에 <link>태그를 사용하여 외부 스타일 시트와 연결해 사용합니다*/
<head>
    <link rel="stylesheet" href="/examples/style.css">
</head>

기본 속성

<색상>

 .silver { color: silver; }        /*색상 이름*/
 .blue { color: rgb(0,0,255); }        /*RGB 색상값*/
 .green { color: #008000; }        /*16진수 색상값*/

<배경>

body { background-color: lightblue; }        /*배경색*/
body { background-image: url("/images/img_background_good.png"); }        /*배경 이미지*/

body { background-image: url("/images/img_man.png");         /*배경 이미지의 수평 반복*/
       background-repeat: repeat-x; }        
body { background-image: url("/images/img_man.png");         /*배경 이미지의 수직 반복*/
       background-repeat: repeat-y; }
body { background-image: url("/images/img_man.png");         /*배경 이미지가 반복되지 않음*/
       background-repeat: no-repeat; }
       
/*bakcground-position으로 배경 이미지의 상대 위치를 설정할 수 있습니다*/
body {
        background-image: url("/images/img_man.png");
        background-repeat: no-repeat;
        background-position: top right;
        background-position: 100px 200px;    /*이렇게 픽셀 단위로 명시할 수도 있습니다 기준은 top left*/
        /*이 속성으로 배경 이미지를 해당 위치에 고정시켜 스크롤을 해도 이미지가 화면의 위치에서 이동하지 않습니다*/
        background-attachment: fixed;
    }
    
/*위에서 적용한 모든 스타일을 background속성 하나로 설정할 수 있습니다*/
body { background: #FFCCCC url("//images/img_man.png") no-repeat left bottom fixed; }

<텍스트>

p { color: maroon; }        /*텍스트의 색상을 설정합니다*/
.incLetterSpacing { letter-spacing: 10px; }        /*글자 사이의 간격을 설정합니다*/
.incWordSpacing { word-spacing: 10px; }        /*단어 사이의 간격을 설정합니다*/
.paraIndent { text-indent: 30px; }        /*단락의 첫 줄에 들여쓰기할지 안 할지를 설정합니다*/

/*text-align: 텍스트의 수평 방향 정렬을 설정합니다*/
h2 { text-align: left; }
h3 { text-align: right; }
h4 { text-align: center; }

/*vertical-align: 텍스트의 수직 방향 정렬을 설정합니다*/
h1 { vertical-align: center; }

/*text-decoration: 텍스트에 여러가지 효과를 줍니다*/
h2 { text-decoration: overline; }        /*텍스트에 윗줄을 만듭니다*/
h3 { text-decoration: line-through; }        /*텍스트를 통과하는 가운데줄을 만듭니다*/
h4 { text-decoration: underline; }         /*텍스트에 밑줄을 만듭니다*/
a { text-decoration: none; }        /*링크에 생기는 밑줄을 제거합니다*/

h2 { text-transform: uppercase; }    /*모든 영문자를 대문자로 만듭니다*/
h3 { text-transform: lowercase; }    /*모든 영문자를 소문자로 만듭니다*/
h4 { text-transform: capitalize; }    /*모든 영문자의 첫 문자만 대문자로 만듭니다*/

.wideLineHeight { line-height: 1.8; }    /*텍스트의 줄간격을 설정합니다*/
h2 { text-shadow: 2px 1px #3399CC; }    /*텍스트에 그림자 효과를 줍니다*/

<글꼴>

글꼴 역시 background랑 마찬가지로 font속성에 모든 스타일을 한 줄로 설정할 수 있습니다.

/*첫번째 글꼴부터 읽어 해당 글꼴이 사용자 컴퓨터에 없으면 다음에 있는 글꼴로 표시합니다*/
.serif { font-family: "Times New Roman", Times, serif; }    /*텍스트의 글꼴을 설정합니다*/

/*텍스트를 얼마나 두껍게 표현할지 설정합니다*/
.bold { font-weight: 600; }
.bolder { font-weight: bolder; }

/*텍스트의 크기를 설정합니다*/
body { font-size: 100%; }    /*기본 크기 100%에 대한 상대적 크기*/
#large { font-size: 2.5em; }    /*기본 크기 1em에 대한 상대적 크기*/
#fixed { font-size: 20px; }    /*픽셀을 이용한 절대적 크기*/

<링크>

링크는 다양한 상태를 가집니다.

a:link { color: olive; }    /*기본 상태로 아직 한 번도 해당 링크를 통해 연결된 페이지를 방문하지 않은 상태입니다*/
a:visited { color: brown; }    /*사용자가 한 번이라도 해당 링크를 통해 연결된 페이지를 방문한 상태입니다*/
a:hover { color: coral; }    /*용자의 마우스 커서가 링크 위에 올라가 있는 상태입니다*/
a:active { color: khaki; }    /*사용자가 마우스로 링크를 클릭하고 있는 상태입니다*/

<리스트>

/*리스트 요소 앞에 위치하는 마커를 다양한 형태로 설정할 수 있습니다*/
.circle { list-style-type: circle; }
.square { list-style-type: square; }
.upperAlpha { list-style-type: upper-alpha; }
.lowerRoman { list-style-type: lower-roman; }

/*특정 이미지를 마커로 사용할 수도 있습니다*/
.imageMarker { list-style-image: url("/images/img_list_marker.png"); }

/*리스트 요소의 위치를 설정할 수 있습니다. 기본값은 outside입니다*/
.inside { list-style-position: inside; }

/*list-style속성 하나에 위의 모든 요소들을 표현할 수 있습니다*/
ul { list-style: square inside url("/images/img_list_marker.png"); }

<테이블>

/*테이블의 테두리를 설정할 수 있습니다*/
table, th, td { border: 2px solid orange; }
/*아래줄만 테두리가 생기게 할 수도 있습니다. top, left, right 모두 가능합니다*/
th, td { border-bottom: 1px solid #CD5C5C; }

/*해당 테이블의 테두리를 한 줄로 표시해 줍니다*/
table { border-collapse: collapse; }

/*테이블 요소간의 여백을 설정해 줍니다. 양옆, 위아래 순 입니다*/
table { border-spacing: 20px 30px; }

/*테이블 요소 내부에서 텍스트의 수평 방향 정렬을 설정합니다*/
td { text-align: center; }
/*테이블 요소 내부에서 텍스트의 수직 방향 정렬을 설정합니다*/
th { vertical-align: top; }

박스 모델

<크기>

/*HTML 요소의 높이와 너비를 설정합니다*/
div { height: 200px; width: 500px; }

/*최대 너비와 최소 너비를 설정할 수 있습니다*/
div.maxWidth { max-width: 500px; }
div.minWidth { min-width: 500px; }

/*높이도 마찬가지 입니다*/
p { max-height: 50px; }
p { min-height: 100px; }

<박스 모델>

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부릅니다 가장 안쪽에는 내용인 콘텐츠(content)가 있고 내용과 테두리 사이 간격인 패딩(padding), 내용과 패딩을 둘러싸는 테두리(border), 그리고 마지막으로 테두리와 이웃하는 요소 사이의 간격인 마진(margin)이 있습니다.

각 부분들의 크기도 조절해 줄 수 있습니다.

/*height와 width가 가리키는 크기는 내용(content)부분만을 대상으로 합니다*/
div {
  heigth: 40px;
  width: 70px;
  padding: 5px;
  border: 2px dotted red;
  margin: 10px;
}

HTML요소의 각 부분이 나타내는 바는 다음과 같습니다.

이러한 계산 방식을 content-box라고 하는데요, 만약 width을 마진을 포함한 전체 요소의 크기를 가리키는 속성으로 만들어주고 싶다면 box-sizing의 속성값을 border-box로 바꾸면 됩니다.

만약 box-sizing의 속성값이 content-box일 때 width의 속성값이 100%라면 상위 영역을 초과해서 너비가 정해지는 문제가 생길 수도 있습니다.

.content-box {
    box-sizing: content-box;     /*기본값*/
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    background-color: white;
}
.border-box {
    box-sizing: border-box;      /*설정값*/
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    background-color: white;
}

<패딩>

/*패딩 상하좌우로 영역 크기를 설정할 수 있습니다*/
div.pad {
  padding-top: 50px;
  padding-right: 10px;
  padding-bottom: 30px;
  padding-left: 100px;
}

/*한 줄에 표시할 수도 있습니다*/
div.four { padding: 20px 50px 30px 50px; }    /*위, 오른쪽, 아래, 왼쪽*/
div.three { padding: 20px 50px; }    /*위, 양옆, 아래*/
div.two { padding: 20px 50px; }    /*위아래, 양옆*/

<테두리>

/*border-style속성: 테두리를 다양한 모양으로 설정합니다*/
.dotted {border-style: dotted;}        /*점선*/
.dashed {border-style: dashed;}        /*긴 점선*/
.solid {border-style: solid;}        /*실선*/
.double {border-style: double;}        /*이중 실선*/
.groove {border-style: groove;}        /*입체적인 선*/
.ridge {border-style: ridge;}        /*능선효과 선*/
.inset {border-style: inset;}        /*내지로 끼운 선*/
.outset {border-style: outset;}        /*외지로 씨운 선*/
.none {border-style: none;}        /*없음*/
.hidden {border-style: hidden;}       /*표현되지 않음*/
.mix {border-style: solid dashed dotted double;}    /*네 방향으로 각기 다른 모양의 테두리를 적용*/

/*border-width속성: 테두리의 두께를 설정합니다*/
.dottedB { border-style: dotted; border-width: 5px; }        /*픽셀로 크기를 직접 설정합니다*/
.dashedA { border-style: dashed; border-width: thin; }        /*thin, medium, thick등이 있습니다*/
.mix { border-style: solid; border-width: 1px 2px 10px thick; }        /*방향마다 다른 두께의 테두리*/

/*border-color속성: 테두리의 색상을 설정합니다*/
/*border-color값이 설정되지 않으면 해당 요소의 color속성값을 그대로 물려받습니다*/
.red { border-color: red; }
.green { border-color: rgb(0,255,0); }
.blue { border-color: #0000FF; }
.mix { border-color: red green blue maroon; }

/*축약 표현: border속성으로 모든 스타일을 한 줄에 설정할 수 있습니다*/
.good { border: 3px solid teal; }

<마진>

/*패딩과 테두리에서 해왔던 것처럼, 크기를 조절할 수 있고 상하좌우에 해당하는 마진의 크기를 한 줄에 설정할 수 있습니다*/
div.mar {
    margin-top: -25px;
    margin-right: 10px;
    margin-bottom: 30px;
    margin-left: 100px;
}
div.four { margin: 20px 50px 30px 50px; }
div.three { margin: 20px 50px 30px; }

/*magin속성을 auto로 설정하게되면 상위요소의 정중앙에 자동으로 위치하게 됩니다*/
div {
  margin: auto;
  margin-left: auto; 
  margin-right: auto; 
}
/*magin속성을 inherit으로 설정하게되면 상위요소의 margin속성값을 그대로 물려받게 됩니다*/
div.parent { height: 100px; margin-left: 100px; }
div.child { background-color: #FFF8DC; margin-left: inherit; }

<아웃라인>

outline속성은 HTML 요소의 가장 바깥 부분을 둘러싸고 있는 부분으로 border와 마찬가지로 스타일, 두께, 색상을 설정할 수 있습니다. 작성법은 border와 동일하니 예시 코드만 보도록 하겠습니다.

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
p.none {outline-style: none;}
p.hidden {outline-style: hidden;}

p.solidA { outline-style: solid; outline-color: violet; outline-width: 2px; }
p.solidB { outline-style: solid; outline-color: coral; outline-width: 7px; }
p.dashedA { outline-style: dashed; outline-color: violet; outline-width: thin; }
p.dashedB { outline-style: dashed; outline-color: coral; outline-width: thick; }

p { border: 1px solid black; outline-style: dashed; }
p.red { outline-color: red; }
p.green { outline-color: rgb(0,255,0); }
p.blue { outline-color: #0000FF; }
p.invert { outline-color: invert; }

/*축약 표현: outline 속성을 설정하기 위해서는 반드시 outline-style 속성이 먼저 설정되어 있어야 합니다*/
p.good { outline: 3px solid teal; }

위치 속성

<디스플레이>

HTML요소의 display속성값은 기본적으로 display, inline 두 가지가 있습니다. 이 기본값을 display속성을 통해 바꿔줄 수 있습니다.

display속성값 중 inline-block이 있는데요, 인라인-블록으로 설정된 요소들은 인라인 요소처럼 한 줄로 늘어서게 됩니다.

하지만 블록 요소처럼 너비와 높이를 설정할 수 있게 됩니다.따라서 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용됩니다.

li { display: inline; }
a { display: block; }
.inline-block { display: inline-block; }

HTML요소를 숨기거나, 투명도를 조절할 수도 있습니다.

/*숨기기*/
p.none { display: none; }        /*페이지 내에서 영역을 차지하지 않습니다*/
p.hidden { visibility: hidden; }        /*페이지 내에서 영역은 계속 차지합니다*/

/*투명도 조절:0.0부터 1.0까지 조절할 수 있습니다*/
img { opacity: 0.4; }
img:hover { opacity: 1.0; }

<포지션>

position 속성은 HTML 요소가 위치를 결정하는 방식을 설정하는데요, CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 4가지 방식이 있습니다.

static : 기본 설정값으로, 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식입니다.
relative : 해당 요소가 static일 때 결정될 기본 위치를 기준으로 위치를 설정하는 방식입니다.
fixed : 웹 페이지가 스크롤 되어도 화면상의 특정 위치에 고정되게 하는 설정 방식입니다.
absolute : 상위 요소를 기준으로 위치를 설정하는 방식입니다. 만약 상위 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 됩니다.

/*position속성을 부여한 후 top, left, right, bottom과 같은 속성들로 위치를 구체화 하면 됩니다*/
div { position: static; }
div.relative { position: relative; left: 30px; }
div.fixed { position: fixed; top: 0; right: 0; }
div.absolute { position: absolute; top: 50px; right: 0; }

/*z-idex : 포지션에 따라 겹칠 수도 있는 요소들의 쌓이는 스택 순서를 설정합니다. static일 때는 못 써요!*/
/*크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치하게 됩니다*/
.last {
  position: fixed;
  top: 180px; 
  left: 120px; 
  z-index: -1; 
}

<플로트>

float속성은 HTML요소들 끼리 자연스럽게 어울리도록 해 페이지의 레이아웃을 작성할 때 자주 사용됩니다.

만약 아래 코드와 같이 이미지에 left속성값을 주게 되면,

img { float: left; margin-right: 20px; }       /*또는 right*/

이처럼 사진을 붕 띄운 다음에 왼쪽으로 붙이는 것과 같은 효과를 주며, 글과 사진이 겹치지 않고 자연스럽게 함께 나타날 수 있게 됩니다. 그리고 사진이 있는 영역 밑에는 다른 요소들이 표시가 되지 않습니다. 자연스럽게 옆으로 밀리게 되는 것이죠.

그러나 이렇게 float가 적용되면 후에 따라오는 다른 HTML요소들의 위치를 결정하는게 까다로워지는데요, 예를 들어 사진 밑에 글을 표시하고 싶은데 사진이 이미 float가 된 상태라 글이 계속 옆에 오게 되는 것이죠.

이럴 때는 clear속성을 사용하면 됩니다.

p { clear: left; }        /*both, right속성값도 가능*/

위와 같이 처리해주면 더 이상 float가 간섭을 못해, 만약 왼쪽에 float된 요소가 있다면 알아서 줄을 바꿔 왼쪽으로 정렬시킵니다.

float속성이 적용된 HTML 요소가 자신을 감싸고 있는 컨테이너 요소보다 크면 해당 영역을 벗어나 다른 요소에 영향을 주게 되는데, 이럴 때 overflow속성값을 조절해 줌으로써 문제를 해결할 수 있습니다.

/*visible: 기본값, hidden: 튀어나온거 짜르기, scroll: 스크롤, auto: 튀어나오면 스크롤 안튀어나오면 그대로*/
.good { overflow: auto; }

<정렬>

블록(block) 타입의 요소를 정렬하기 위해서 다양한 방법들을 사용할 수 있습니다.

/*maring 사용: width를 사전에 반드시 정의해 줘야 합니다*/
div { width: 300px; margin: auto; }
/*박스 자체를 자동중앙정렬*/
div { margin 0 auto; }

/*position 사용*/
div { width: 300px; padding: 10px; margin: 0; position: absolute; right: 0; }

/*float 사용*/
div { width: 350px; padding: 10px; margin: 0; }
div.left { float: left }
div.right { float: right }

참고 자료

코딩의 시작, TCP School : http://tcpschool.com/css/intro
ofcourse : https://ofcourse.kr/css-course/CSS-%EC%9E%85%EB%AC%B8

'프론트엔드 > HTML&CSS' 카테고리의 다른 글

[CSS] CSS 중급 (2) (0)	2021.10.27
[CSS] CSS 중급 (1) (0)	2021.10.23
[HTML] 기본 태그 총 정리 (0)	2021.10.18

성장하는 개발 일기

[CSS] CSS 기초

기본 문법

기본 속성

박스 모델

위치 속성

참고 자료

'프론트엔드 > HTML&CSS' 카테고리의 다른 글

티스토리툴바

[CSS] CSS 기초

기본 문법

기본 속성

박스 모델

위치 속성

참고 자료

'프론트엔드 > HTML&CSS' 카테고리의 다른 글

관련글

티스토리툴바