백엔드 개발자가 알아야 하는 기초 CSS
앞선 포스팅에서 백엔드 개발자가 알아야 하는 기초 html을 포스팅했어요.
백엔드 개발자가 알아야하는 기초 HTML
오늘은 기초 HTML 태그에 대해서 다뤄보겠습니다. 사실 저는 백엔드를 준비중이여서 그런지 HTML과 CSS는 매우 어렵다고 느낀답니다..! 기초는 다뤄도 이쁘게 꾸미는거는 정말 신의 영역이라 생각
pongo.tistory.com
CSS 사용법
1. Link Style - HTML에서 외부에 있는 CSS 파일을 로드하는 방식, 가장 일반적으로 사용됩니다.
- html에 link 태그로 css를 연결해주고 사용합니다.
h1 { color: red; }
p { background: blue; }
*{} --> 요소 전체
.class명{} --> 클래스명
#id명{} --> id명
html태그{} -->태그명:first-child -> 태그의 첫번째 요소
nth-child(원하는 요소 순서)
last-child
2. Embedding style - HTML 내부에 CSS를 포함시키는 방식, 매우 간단한 웹페이지의 경우는 문제될 것이 없겠지만 Link style을 사용하는 편이 좋습니다. HTML과 CSS는 서로 역할이 다르므로 다른 파일로 구분되어 작성하고 관리되는 것이 바람직합니다.
- head 태그 안에 style 태그를 사용해줍니다.
<html>
<head>
<style>
h1 { color: red; }
p { background: aqua; }
</style>
</head>
<body>
<h1>Hello World</h1>
<p>This is a web page.</p>
</body>
</html>3. Inline style - HTML요소의 style 프로퍼티에 CSS를 기술하는 방식, JavaScript가 동적으로 CSS를 생성할 때 사용하는 경우가 있습니다. 하지만 일반적인 경우 Link style을 사용하는 편이 좋습니다.
- html 각 태그에 style 태그를 같이 사용해줍니다.
<html>
<body>
<h1 style="color: red">Hello World</h1>
<p style="background: aqua">This is a web page.</p>
</body>
</html>
Selector 셀렉터
CSS(Cascading Style Sheets)는 HTML 요소(Element)의 style(design, layout etc)을 정의합니다. 그리하려면 HTML이 존재하여야 하고 또한 style을 적용하고자하는 HTML 요소를 특정할 필요가 있습니다.
이러한 목적으로 사용되는 것이 셀렉터(Selector)입니다. 즉, style을 적용하고자하는 HTML 요소를 셀렉터로 특정하고 선택된 요소에 스타일을 정의하는 것입니다.
1.전체 셀렉터 (Universal Selector) --> *
- HTML 문서 내의 모든 요소를 선택, html 요소를 포함한 모든 요소가 선택됩니다. (head 요소도 포함된다)
*{
color: red;
}
2. 태그 셀렉터 (Type Selector)
- 지정된 태그명을 가지는 요소를 선택
div{
background-color: red;
}
3. ID 셀렉터 (ID Selector)
- id 어트리뷰트 값을 지정하여 일치하는 요소를 선택, 중복 불가능한 값입니다.
#d1{
color: red;
}
4. 클래스 셀렉터 (Class Selector)
- class 어트리뷰트 값을 지정하여 일치하는 요소를 선택, class 어트리뷰트 값은 중복될 수 있습니다.
.d2{
color: red;
}
id 셀렉터, class 셀렉터 사용법
<div id="d1"></div>
<div class="d2"></div>
5. 후손 셀렉터 (Descendant Combinator)
자신의 1 level 상위에 속하는 요소를 부모 요소, 1 level 하위에 속하는 요소를 자손 요소(자식 요소)라합니다.
자신보다 n level 하위에 속하는 요소는 후손 요소(하위 요소)라 합니다.
div 태그의 후손 요소 중 p 태그를 갖는 요소
div p{
color: red;
}
셀렉터의 종류는 이것말고도 아주 많으니 더 알아보고 싶으신 분들은 검색해주세요!
자주 쓰이는 css 태그
width, height
- 너비와 높이를 나타내줍니다. div나 img에 자주 쓰입니다.
div{
width: 300px;
height: 300px;
}
margin, padding
- 여백을 나타냅니다.
- 4개 방향(top, right, left, bottom)에 대하여 지정이 가능합니다.
div{
margin: 100px; -> div 바깥쪽 공간을 상하좌우100px 떨어져 보여줍니다.
padding: 100px; -> div 안쪽 공간을 100px 떨어져 보여줍니다,
}
4개의 값을 지정할 때
margin: 25px 50px 75px 100px;
margin-top: 25px;
margin-right: 50px;
margin-bottom: 75px;
margin-left: 100px;
3개의 값을 지정할 때
margin: 25px 50px 75px;
margin-top: 25px;
margin-right: 50px; margin-left: 50px;
margin-bottom: 75px
2개의 값을 지정할 때
margin: 25px 50px;
margin-top: 25px; margin-bottom: 25px;
margin-right: 50px; margin-left: 50px;
1개의 값을 지정할 때
margin: 25px;
margin-top: 25px; margin-right: 25px; margin-bottom: 25px; margin-left: 25px;
border
- 테두리 선의 스타일을 지정
- dotted, dashed, solid등 여러 스타일들이 있습니다.
p{
border-style: dotted;
}
postion
- 위치에 관한 스타일을 지정해줍니다.
div{
position: static; -> 기준없음(기본값)
(relative; -> 요소 자기 자신을 기준으로 배치 (자주 사용))
(absolute; -> 부모 요소를 기준으로 배치 (자주 사용))
(fixed; -> 뷰포트 기준으로 배치)
(stickey; -> 스크롤을 내려도 그대로 내려오게 배치)
}
display
- display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티입니다.
div{
display: inline-block; -> div들을 가로로 펼쳐줌
display: flex; -> 기본 방향 row, div를 옆으로 정렬
flex-direction: column; -> 정렬 기준을 세로로 변경
align-items: center; -> 중심 축부터
(flex-end; -> 아래 쪽 부터)
(flex-start; -> 위 쪽 부터)
justify-content: space-between; -> 시작과 끝요소가 가장자리에 붙고 상단의 가로줄에 배치
(space-around -> 시작과 끝요소도 간격)
(space-evenly -> 시작과 끝 모든 요소의 같은 간격)
flex-wrap: wrap; -> 사이즈가 줄지 않으며 다음 줄로 줄바꿈
(nowrap -> 사이즈를 줄여 한 줄에 다 차게합니다, 기본값)
}
text
- 글자에 관련한 스타일을 지정해줍니다.
p{
text-indent: 30px; -> 들여쓰기
font-size: 30px -> 글자 크기
font-weight: bold;
font-style: italic;
text-decoration: underline; -> 밑줄
dotted red;
dash
solid
font-family: 글꼴
}
hover
- 마우스를 올려놨을 때 변경해줍니다.
a: hover{
color: black;
font-size: 20px;
}
아래는 css에 대해서 잘 설명해주는 사이트입니다. 참고해주세요!
CSS3 Syntax | PoiemaWeb
CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을
poiemaweb.com