저는 제가 쓰는 블로그를 통해서 제가 전달하고자 하는 정보를 필요로 하신 사람들의 needs를 충족시키고 해결드리기를 바란다.
개발을 시작하고 두번째로 마주하게 된 언어 "CSS"는 무엇일까?
What CSS ?
CSS 는 Cascading Style Sheets 약어이다.
HTML이 사람에 비유해서 '뼈' 정도로 생각할 수 있다면,
CSS는 살 정도로 생각 할 수 있다 사람이 살이 없이 뼈만 있다고 생각해보자 얼마나 징그러울지 우리가 사용하는 웹도 그렇다
CSS 없는 웹 문서는 보기에 좋지 않다
그래서 CSS는 HTML문서를 꾸밀 때 사용하는 스타일 시트 언어이다.
CSS 적용방법
- 외부 스타일 시트 적용하기.
: html 태그에 link 태그를 통해 연결ㅂ
<head><link rel="stylesheet" type="text/css" href="../css/basic.css">
</head>- 내부 스타일 시트 적용
<head>
<style type="text/css">
h1 { color : red};
</style>
</head>- 인라인 스타일 적용
<body>
<h1 style="color : red;">inline style</h1>
</body>- 우선선위 :
브라우저 디자인 정의 -> 외부 스타일시트 -> 내부 스타일시트 -> 인라인 스타일시트
CSS 선택자
- 전체 선택자
: 모든 요소를 선택한다.
*{background : black}
- class 선택자
: 주어진 class 특성을 가진 모든 요소를 선택합니다.
.one{
height :50px;
width 50px;
background : red;
}
- tag 선택자
: 선택한 tag를 지정하여 스타일이 적용됩니다.
div{
height :50px;
width 50px;
background:blue;
}
- id 선택자
: 선택한 id를 지정하여 스타일이 적용됩니다.
#two{
height :50px;
width 50px;
background:blue;
} 
CSS 기본문법
- 선택자는 보통 스타일링 하고 싶은 HTML 요소나 부여한 idㅎ 혹은 class 가 위치합니다.
- 선언부에 여러개의 속성과 속성값이 있을때는 ;(세미클론)으로 구분합니다.
- 각각의 선언은 속성과 속성값을 :(콜론)으로 구분합니다.
- 글자모양
font-weight : 글 두께 -> (ex) font-weigh : bold;
font-style : 글 스타일 -> (ex) font-style: italic;
font-size : 글 크기 -> (ex) font-size : 18px;
line-weight : 줄 높이 -> (ex) line-height;- 문단
color : 글 색깔
text-align : 글 좌우 정렬 * left, center, right, justify
vertical-align : 글 상하 정렬 * top, middle, bottom
text-decoration : 윗줄 * overline, line-through, underline, none- 배경
background: 배경색
background-image : 배경이미지 * url박스모델
-
css 를 구성하는 기본이 되는 개념이다, 설계작 역할을 한다.
-> 실제 우리가 보는 웹사이트 분석시 복잡한 레이아웃으로 보일 수 있지만 사실은 사각형의 집합으로 이루어져있다.
-> 부모자식 관계를 가진다, 사각형이 겹겹이 층을 쌓아 구성되어있다.
-> 이미지가 동그라미일 수는 있지만 브라우저가 크기를 계산할 때는 박스 기준으로 계산된다.
* content : 콘텐츠가 표시되는 영역.
진짜 내용을 담고 있는 핵심 영역이다.
width, height 로 크기 지정이 가능하다.
* padding : 콘텐츠와 테두리(border) 사이의 여백.
* border : padding 과 margin 사이의 테두리.
디폴트값은 0으로, 존재는 하지만 눈에 보이지 않는다.
* margin : 가장 바깥 쪽 레이어.
콘텐츠와 패딩, 테두리를 둘러싸면서 다른 요소 사이 공백 역할을 한다.1. margin
-
요소의 네 방향 바깥 여백 영역을 설정한다.
-
margin-top, margin-right, margin-bottom, margin-left 의 단축 속성이다.
디폴트값은 상하좌우 모두 0 이다. -
자식에게 상속되지 않는다.
-
절대길이와 상대길이 모두 사용 가능하다.
-
한 개의 값 = 모든 네 면의 여백
두 개의 값 = 상&하, 좌&우
세 개의 값 = 상, 좌&우, 하
네 개의 값 = 상, 우, 하, 좌 (시계방향) 순서로 지정한다.
#two{
width: 100px;
height: 100px;
margin-top: 30px;
background-color: cadetblue;
}
.three {
width: 30px;
height: 30px;
margin-top: 40px;
background-color: indianred;
}
2. padding
- 요소의 네 방향 안쪽 여백 영역을 설정한다.
- padding-top, padding-right, padding-bottom, padding-left 의 단축 속성이다.
width: 100px;
height: 100px;
padding-top : 50px;;
background-color: cadetblue;
}
.three {
width: 100px;
height: 100px;
padding : 50px;
background-color: indianred;
}
3. border
3-1. border-style : 요소 테두리 네 면의 스타일을 지정한다.
기본값은 none 이다.
--> none 일 경우에는 선의 굵기와 색을 지정해줘도 보이지 않게 된다.
solid, dotted, dashed, ... 등 많은 키워드 값이 있다.
3-2. border-width : 요소 네 면 테두리의 굵기를 설정한다.
thin, medium, thick 세 가지 키워드를 갖고 있다.
3-3. border-color : 모든 면의 테두리 색상을 설정한다.
3-4. border (단축 속성) : border : 요소의 테두리를 설정한다.
border-style, border-width, border-color 의 값을 설정한다.
스타일을 지정하지 않으면 none 이 되기 때문에 스타일은 필수로 지정하자.
속성의 순서는 상관없다.
3-4.border-radius : 요소 테두리 경계의 꼭짓점을 둥글게 만든다.
css 레이아웃
1. position
- 속성은 태그를 어떻게 위치시킬지를 정의하며, 아래의 5가지 값을 갖습니다.
static: 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해 줄 수 없습니다.
relative: 원래 있던 위치를 기준으로 좌표를 지정합니다.
absolute: 절대 좌표와 함께 위치를 지정해 줄 수 있습니다.
fixed: 스크롤과 상관없이 항상 문서 최 좌측상단을 기준으로 좌표를 고정합니다.
inherit: 부모 태그의 속성값을 상속받습니다.
1-1. static
position 을 아무것도 지정하지 않으면 사용되는 기본 값입니다. position 속성을 static 으로 지정하면 위치가 지정된 것이 아니라 그냥 HTML 문서에 따라 위치가 정해졌다고 보면 됩니다. 기본 값이기 때문에 보통의 경우 잘 쓰이지 않는 값입니다.
div.static { position: static; }
1-2. relative
position 을 relative 로 지정하면 해당 요소가 기본적으로 표시된 위치를 기준으로 새로운 위치를 지정 할 수 있습니다.
이 말을 다른 말로 하면 position 을 relative 로 지정하더라도 top 이나 left 등으로 새로운 위치를 지정하지 않는 이상 기본적으로 표시된 위치와 다르지 않음을 이야기 하는 것입니다.
div.relative {
position: relative;
left: 100px;
top: -100px;
}1-3. absolute
position 을 absolute 로 지정하는 것은 fixed 와 비슷하지만 다릅니다.
무슨 말인고 하니 fixed 는 사용자의 브라우저를 기준으로 위치를 고정시키는 것이지만, absolute 는 해당 요소의 위치가 지정된 부모 요소를 기준으로해서 fixed 시키는 것과 같다고 생각하면 됩니다.
위치가 지정된 부모요소라는 것은 결국 position 속성이 static 이 아닌 다른 값으로 지정 되어야 함을 의미합니다.
div.parent {
position: relative;
}
div.child {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}위 예제의 경우 parent 라는 클래스의 자식 요소인 child 클래스 요소는 parent 와 같은 위치에 같은 크기로 표시 됩니다. 두 div 요소를 겹쳐 놓은 것과 마찬가지입니다.
만약 parent 클래스의 요소의 position 을 fixed 로 지정했다면 child 클래스 요소도 parent 와 마찬가지로 화면을 스크롤해도 항상 같은 위치에서 사용자에게 보여질 것입니다.
1-4. fixed
position 을 fixed 로 지정하면 해당 요소의 위치를 사용자의 브라우저를 기준으로 설정할 수 있습니다. 스크롤을 내려도 항상 같은 곳에 위치하는 상단바, 하단바, 광고 등이 이 속성을 이용하는 것입니다.
이를 위해서는 top, bottom, left, right 등으로 위치를 지정하고 width 와 height 로 요소의 크기를 지정할 수 있습니다.
예를 들어 스크롤을 내려도 하단에 항상 고정되어 있는 하단바를 만들기 위해서는 아래와 같이 position 속성을 사용할 수 있습니다.
div.footer-bar {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 32px;
}
2. display 속성
- display 속성은 요소를 어떻게 보여줄지를 결정합니다 주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다릅니다.
none : 보이지 않음
block : 블록 박스
inline : 인라인 박스
inline-block : block과 inline의 중간 형태
2-1. block
- 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보입니다. 이는 word 같은 문서에서 문단을 표시할 때, 한 문단이 끝난 뒤에 나타나는 요소는 항상 다음 줄에 표시되던 것과 비슷한 맥락입니다.
width, height 속성을 지정 할 수 있으며, block 요소 뒤에 등장하는 태그가 그 이전 block 요소에 오른쪽에 배치될 수 있어도 항상 다음 줄에 렌더링됩니다.
block 요소
<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, <dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>, <pre>, <ul>, <p>, <ol>, <video>block 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.
2-2. inline
- block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없습니다. word 같은 문서에서 볼드, 이탤릭, 색상, 밑줄 등 글자나 문장에 효과를 주기 위해 존재하는 단위라고 할 수 있습니다. 문서에서 특정 부분에 색상을 입힌다고 다음에 나오는 글이 줄바꿈 되지 않듯이 inline 요소 뒤에 나오는 태그 또한 줄바꿈 되지 않고 바로 오른쪽에 표시됩니다.
inline 요소
<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>, <code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>, <button>, <cite>inline 요소들은 위와 같은 요소들이 있으며 위에 나열된 태그들 말고도 많은 태그들이 있습니다.
2-3. inline-block
block과 inline의 중간 형태라고 볼 수 있는데, 줄 바꿈이 되지 않지만 크기를 지정 할 수 있습니다.
좋은 글 잘보고있어요 ~