CSS란?
CSS는 Standart for Cascading Style Sheets로 HTML의 시각적인 부분을 구현해주는 언어라고 할 수 있습니다.
CSS의 기본문법
선택자 {
속성: 값;
}
div {
color: red;
}CSS는 기본적으로 선택자, 속성, 값으로 구성되어 있습니다.
선택자, Selector
HTML 요소에서 어떠한 부분을 스타일링할지 정하는 것을 선택자라고 합니다. 보통 Tag, Class, Id를 지정합니다.
Class 선택자 & Id 선택자
.클래스명 {
}
#아이디명 {
}Id는 단 한번만 사용할 때, class는 여러 번 ㅈ사용될 때 사용하는 것이 좋습니다. 하지만 한 번만 사용할 것 같아 id로 정의해 놓고 여러번 사용되는 경우도 있기 때문에 대부분 class로 정의해도 됩니다.
부모 자식 선택자
<div class="container">
<div class="item">
</div>
.container div.item {
}여가서 의문이 들 수도 있는데 item 클래스에 바로 접근하면 되면 된다라고 생각할 수 있지만 class로 바로 접근하면 원하지 않던 엘리먼트가 선택될 수 있으므로 태그.class를 입력하는 것이 바람직한 방법입니다.
CSS 우선순위
Id > Class > Tag
위의 순대로 우선순위가 부여되나. 부조 자식 구조를 구체적으로 적어줄 경우 우선순위가 더 높아지게 됩니다. 우선순위가 높아지게 되면 다른 작용을 하는 스타일이 적용된다고 하더라도 우선순위가 높은 것이 적용이 되게 됩니다.
Layout
Display
display 속성은 CSS에서 레이아웃을 만드는데 많이 사용됩니다.
block, inline, inline-block
- block : block 속성은 대표적으로 div 태그이며 너비가 width가 100%로 정의되어 있습니다.
- inline : 범위가 콘텐츠 사이즈에 따라 자동으로 늘어나게 됩니다. 대표적으로 span 태그입니다.(콘텐츠 사이즈에 따라 엘리먼트 영역이 지정되므로 width, height가 적용되지 않음)
- inline-block : inline과 block 속성의 중간으로 생각하면 됩니다.
하지만 inline-block이 적용된 엘리먼트 사이에는 의도치 않게 4px 정도의 간격이 생기게 됩니다. 그렇기에 100%를 4등분해서 25%씩 한다고 해도 4개가 한줄에 나열되지 않게 됩니다. font-size를 0px로 설정하면 해결이 되지만 font-size는 상속이 되기 때문에 후에 나오는 flex 속성으로 해결하면 됩니다.
- none : 특정 엘리먼트를 가리고 싶을 때 사용합니다. 반응형을 만들 때 주로 사용되며 PC에서는 보이지만 모바일에서는 안보이게 할 때 사용합니다.
Margin, Padding
Margin과 Padding은 엘리먼트 간의 간격을 조절하는데 사용합니다. margin 해당 엘리먼트의 바깥 여백을 padding은 해당 엘리먼트의 안쪽 여백을 지정합니다.
margin-top과 같이 상하좌우 중 한 곳을 선택할 수 있지만 상하좌우를 모두 선택할 때는 시계방향으로 값을 설정합니다.
만약 값을 2개만 입력할 경우 상하 좌우를 서로 다르게 적용되게 합니다.
margin: 20px 20px 20px 20px;(상우하좌)
padding: 20px 20px 20px 20px;(상우하좌)
margin: 20px 20px;(상하, 좌우)Width, Height
width와 hegith는 가로 너비와 세로 길이를 지정하는 속성입니다. display 속성이 inline인 경우는 width와 height를 값을 주어도 적용이 되지 않습니다. width와 height의 값은 주로 px과 %가 사용됩니다. px은 고정적인 값이고, %는 부모의 사이즈에 종속적이기 때문에 둘 다 주의해서 사용해야 합니다.
overflow
자식 엘리먼트가 부모 엘리먼트의 영역을 넘는 경우 지정할 수 있는 스타일입니다. overflow를 hidden으로 줄 경우 overflow된 영역이 hide되고 scroll을 줄 경우 scrolldㅣ 생겨 엘리먼트를 스크롤을 해 활용할 수 있습니다.
Position
Position은 특정 엘리먼트의 위치를 좀 더 자유롭게 옮기고 싶을 때 사용합니다.
absolute
absolute는 절대적인 위치를 잡아 주기 위해서 사용됩니다. absolute는 엘리먼트와 관계없이 원하는 대로 자유롭게 위치를 잡아줄 수 있습니다.
.absoulte-box {
width: 100px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
}absoulte는 top과 left를 넣어서 그만큼 거리를 띄우게 됩니다. absolute의 주의점은 absoulte가 적용된 엘리먼트는 또 다른 레이어를 만들어 그 위에 그리는 레이어로 다른 엘리먼트들에 영향을 주지 않습니다.
relative
absolute는 top과 left를 기준으로 위치를 잡는데 해당 위치를 잡을 때의 기준은 relative로 설정합니다. 초기에 있는 body를 기준으로 레이어를 만들어 그린다면 해당 위치를 계산해야 하지만 relative를 적용하게 되면 동일한 top, left를 이용해서 각기 다른 위치에 absolute를 구현할 수 있습니다.
fixed
fixed는 사용자가 스크롤을 움직여도 고정적으로 엘리먼트를 fix시키고 싶을 때 사용합니다.
보통 사이트에서 메뉴바가 이에 해당 됩니다.
fiexd는 relative에 따라 적용되는 것이 아닌 지금 보이는 화면을 기준으로 위치를 잡는다는 것을 주의해야 합니다.
z-index
여러 개의 레이어를 만들다 보면 엘리먼트끼리 겹칠 수 있기 때문에 z-index를 주어 우선순위를 지정할 수 있습니다. z-index가 높은 값일 수록 위에 오게 됩니다.
position 속성은 엘리먼트 간의 겹치기 쉬운 속성이므로 자주 사용하면 레이아웃이 쉽게 망가지거나 복잡해질 수 있으므로 정말 필요한 부분에서만 사용하는 것이 좋습니다.
border, border-radius, box-sizing
border, border-radius
테두리를 주기 위해서는 border 속성을 이용합니다. border를 사용할 때는 기본적으로 테두리, 두께, 모양, 색상을 입력합니다.
border: 1px solid black;
/* 주로 선은 solid와 dotted가 사용됩니다. */div는 네모난 박스이지만 테두리를 둥글게 하기 위해서 border-radius를 사용해 둥글게 만듭니다. 50%를 준다면 쉽게 원 모양을 만들 수도 있습니다.
border-radius: 20px;box-sizing
padding이나 border 값을 주는 만큼 엘리먼트의 사이즈도 크기가 커지게 됩니다. 예를들어 엘리먼트가 100px일 때 padding을 100px, border를 100px를 주게 된다면 500px이 되게 됩니다.
그렇게 되면 의도와 다른 엘리먼트의 크기가 되기 때문에 box-sizing: border-box를 줍니다.
border-box를 주게 되면 padding, border를 얼마를 주든 border를 넘지 않게 됩니다. 대부분의 엘리먼트를 구성할 때는 box-sizing: border-box를 주는 것이 좋습니다.
