[WEB] CSS
CSS 선언 방법
span { color : red; }
- span : selector
- color: property
- red : value
style을 HTML페이지에 적용하는 3가지 방법
1. inline
HTML태그 안에다 적용한다.
<p style="color:red">
2. internal
style 태그로 지정한다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵다. 하지만 별도의 CSS파일을 관리하지 않아도 되고, 서버에 CSS파일을 부르기 위한 별도의 요청이 필요하지 않다.
<head>
<style>
p {
font-size:2em;
color:red;
}
</style>
</head>
<body>
<div>
<p>...</p>
</div>
</body>
3. external
외부파일 .css로 지정하는 방식이다. CSS 코드가 짧지 않으면 이 방법이 가장 이상적이다. 여러 개의 CSS파일로 분리하고 이를 합쳐서 사용하기도 한다. inernal코드와 같은 css코드를 구현하고, style.css와 같은 별도의 파일을 만든다. 이후 아래처럼 link 태그로 추가한다
<html>
<head>
<link rel="stylesheet"href="style.css">
</head>
<body>
<div>
<p>
<ul>
<li></li>
</ul>
</p>
</div>
</body>
</html>
lnline은 별도의 우선순위를 갖지만, internal과 external의 우선순위는 동등하다. 따라서 겹치는 선언이 있을 경우 나중에 선언된 속성이 반영된다.
상속과 우선순위 결정
상속
상위에 설정된 스타일을 하위에서 상속받아쓴다. 재사용측면에서 굉장히 효율적이다
Cascading
CSS는 여러가지 스타일정보를 기반으로 최종적으로 “경쟁”에 의해서 적절한 스타일이 반영된다
-> 똑같은 속성을 파일이나 linine에서 중복되어 정의했거나 다른 selector를 사용했지만 사실상 같은 노드를 가르키는 경우가 있다. 이때, 일정한 기준에 따라서 어떤 정의에 따를 것이냐를 결정하는 것을 경쟁이라 표현한다.
선언 방식에 따른 차이
inline > internal = external 순으로 적용되며 같은 selector라면 나중에 선언한 것이 반영된다.
이때, selector의 표현이 구체적인 것이 있다면 먼저 적용된다.
- body > span (O)
- span (X)
#a{
color:red;
}
.b{
color:blue;
}
div{
color:green;
}
위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가진다.
CSS selector
HTML 요소를 tag, id, html 속성 등을 통해 쉽게 찾아주는 방법이다.
tag로 지정하기
<style>
span{
color:red;
}
</style>
id로 지정하기
<style>
#spantag{
color:red;
}
</style>
<body>
<span id="spantag">...</span>
</body>
class로 지정하기
<style>
.spanClass{
color:red;
}
</style>
<body>
<span class="spanClass">...</span>
</body>
CSS Selector의 활용
#myid{color:red}
div.myclass{color:red}
id, class 요소 선택자와 함께 사용
h1, span, div {color:red}
h1, span, div#id {color:red}
h1.span, div.classname {color:red}
그룹 선택가능
#id span {color:red}
#id > span {color:red}
<div id="id">
<div>
<span></span>
</div>
<span></span>
</div>
- 요소 선택(공백): 자손요소
모든 span 에 red가 적용된다 - 자식 선택( > ): 자식은 바로 하위 엘리먼트를 가르킴
id 바로 하위의 span만 red가 적용된다.
nth-child, nth-of-type
- nth-child(n) : 부모 엘리먼트의 모든 자식 중 n번째
- nth-of-type(n) : 부모 엘리먼트의 특정 자식 태그 요소들 중 n번째
CSS 기본 Style 변경
font 색상
- color : red;
- color : rgb(255,0,0,0.5)
- color : #ff0000
font 사이즈
- font-size : 16px;
- font-size : 1em;
배경색
- background-color : #ff0;
글씨체/글꼴
- font-family : “Gulim”;
- font-family : monospace;
Element가 배치되는 방법 (CSS layout)
엘리먼트가 화면에 배치하는 것을 layout 작업이라고 하고, rendering 과정이라고도 한다.
기본 엘리먼트는 위에서 아래로 배치되는 것이 기본이지만 다양하게 표현 가능하다.
엘리먼트의 크기는 부모의 크기가 기본이다.
Display - block
display 속성이 block 이거나 inline-block 인 경우 그 엘리먼트는 벽돌을 쌓은 블록을 가지고 쌓인다.
이렇게 구현한 코드는 화면의 위에서 아래로 쌓인다. 높이를 지정할 수 있다.
<div>block1</div>
<p>block2</p>
<div>block3</p>
Display - inline
우측 아래로 빈자리를 차지하며 흐른다. inline 속성의 엘리먼트는 높이와 넓이를 지정해도 반영되지 않는다.
Position 속성
엘리먼트가 순서대로 위아래 또는 좌우로 흐르면서 쌓이기만 하면 다양한 배치가 어렵다.
position 속성을 사용하면 상대적/절대적으로 어떤 위치에 엘리먼트를 배치하는 것이 수월하다.
- 특별한 배치를 할 수 있다. 기본 속성은 static으로 순서대로 배치된다.
- absolute는 기준점에 따라서 특별한 위치에 위한다. top/left/right/bottom 으로 설정한다. 기준점을 상위 엘리먼트로 단계적으로 찾아가는데 static이 아닌 position이 기준점이다.
- relative는 원래 자신이 위치해야 할 곳을 기준으로 이동한다. top/left/right/bottom으로 설정한다.
- fixed는 viewpoint 좌측, 맨위를 기준으로 동작한다.
margin
margin 으로 배치가 달라질 수 있다. margin은 상하좌우 엘리먼트와 본인간의 간격이다. 따라서 그 간격만큼 위치가 달라진다.
float
원래 flow에서 벗어날 수 있고 떠다닐 수 있다. float는 일반적인 배치를 벗어나 특별한 배치이다. 따라서 block 엘리먼트가 float 엘리먼트를 의식하지 못하고 중첩되서 배치된다.
box-model
블록엘리먼트의 경우 box의 크기와 간격에 대한 속성으로 배치를 추가 결정한다.
margin, padding, border, outline 으로 생성되는 것이다.
box-sizing과 padding
padding 속성을 늘리면 엘리먼트의 크기가 달라질 수 있는데 box-sizing 속성으로 이를 컨트롤 할 수 있다.
box-sizing 속성을 border-box로 설정하면 엘리먼트의 크기를 고정하면서 padding 만 늘릴 수 있다.
layout 구현 방법
- 전체 레이아웃은 float를 잘 사용해서 2단, 3단 컬럼 배치를 구현한다. 최근에는 css-grid, flex 속성 등 레이아웃을 위한 속성을 사용하기 시작했다.
- 특별한 위치에 배치하기 위해서는 position absolute를 사용하고, 기준점을 relative로 설정한다.
- 네비게이션과 같은 엘리먼트는 block 엘리먼트를 inline-block으로 변경해서 가로로 배치하기도 한다.
- 엘리먼트안의 텍스트의 간격과 다른 엘리먼트 간의 간격은 padding 과 margin 속성을 활용한다.
댓글남기기