CSS(Cascading Style Sheets)
- CSS를 사용하면 HTML 태그에 디자인 적용이 가능.
- 아래와 같이 3가지 스타일로 적용이 가능함
<h1 style="color: red;">CSS 적용</h1>- 빠르고 편함.
- 그러나 스타일을 변경할 때마다 일일히 변경하여야 하기 때문에 추후 유지보수가 좋지 못함.
<style>
h2 {
color: #408090;
}
</style>- html 파일 안에 style 태그를 추가하는 방법(주로 헤더에 하는 듯 함)
- 이 방법 역시 여러 파일에 적용이 불가능하고, 이 때문에 유지보수에 적합하지 않음.
<link href="style.css" rel="stylesheet" type="text/css" />- html 파일과 css 파일을 따로 분리하여 작성하는 방법
- css만 단독으로 변경이 가능하고 이를 통해 여러 html파일을 수정할 수 있으므로 유지보수에 편리
- link: link태그로 사용할 css파일을 링크
- href: href 속성에 css 파일 경로를 작성
- type: link 태그로 연결되는 파일을 명시, css 파일은 항상 text/css
- rel: HTML파일과 CSS파일의 관계를 설명, CSS파일은 항상 stylesheet를 작성
CSS 적용 방법
p{
font-size: 12px;
}- p태그의 폰트 크기를 12픽셀로 변경하는 태그
- 이를 통해 모든 태그에 일괄적으로 적용이 가능함
.className{
font-size: 12px;
}- class 이름을 지정(className 클래스)하여 스타일을 변경
- 이 때는 .을 붙여야 함
#idName{
font-size: 12px;
}- id를 지정하여 스타일을 변경
- 이 때는 #을 붙여야 함
주요 CSS 스타일들
폰트 스타일
#title{
font-family: Georgia, "Times New Roman", Times, serif;
}font-family는 폰트를 지정하는 역할
Georgia, "Times New Roman", Times, serif는,
- 브라우저가 Georgia를 지원하지 않으면 "Times New Roman"을 사용
- 순서대로 브라우저가 지원하는 폰트를 사용
- "Times new Roman"만 쌍따옴표로 감싸져있는데, 폰트 이름에 띄워쓰기가 있으면 꼭 붙여줘야 함
#title{
font-size: 50px;
font-weight: bold;
font-style: italic;
color: red;
/*
color: rgb(255, 192, 203);
color: hsl(4, 82%, 57%);
color: #eb4639;
*/
}- font-size는 폰트 사이즈를 지정
- font-weight는 글씨 두께를 조절
- font-style은 글씨 스타일(이탤릭체)을 설정
- color는 글자 색상을 변경
텍스트 스타일
.center{
text-align: center;
text-indent: 50px;
}- text-align로 텍스트 정렬 가능
- text-indent로 들여쓰기 가능
margin, padding, border
p.example{
width: 273px;
height: 90px;
margin: 50px;
border: 5px solid black;
padding: 50px;
}
p.center{
margin: 50px auto;
}마진 패딩 보더의 개념은 아래와 같음
- margin은 border 외부에 생기는 여백
- border는 테두리
- padding은 border 내부에 생기는 영역
- p.center와 같이 설정하면 위아래는 50px의 마진, 좌 우는 가운데 정렬을 할 수 있음
- margin이나 padding은 아래의 순서대로 적용됨
(margin: top right bottom left;)
* {
box-sizing: border-box;
}- padding 값에 영향을 받지 않고 width만으로 box의 사이즈를 결정하는 방법
body {
color: red;
font-size: 14px;
}
<body>
<p></p>
</body>- 이 경우에는 body의 CSS값이 P에도 상속되어 P의 글자색은 빨간색, 글자크기는 14px가 됨.
- 이 때 p가 본인의 CSS값을 갖고 있으면, p 태그의 CSS가 적용이 됨
p.p-tag {
color: gray;
}
p#third-line {
color: red;
}- p.p-tag는 p태그이면서 p-tag 클래스를 지정
- p#third-line은 p태그이면서 third-line id를 지정
.pre span {
background-color: red;
}
<div class="pre">
<span>pre 안의 span 태그 입니다.</span>
</div>- .pre span은 pre 클래스를 갖는 div안의 span을 지정
- 이와 같이 클래스 내부의 태그를 지정하여 CSS를 적용할 수 있음
CSS 우선순위
CSS의 selector는 우선순위가 존재, 이는 점수로 계산되어짐.
- inline styling: 1000 point
- id: 100 point
- class: 10 point
- tag: 1 point
이미지 넣기
img {
width: 300px;
}
<img alt="HTML" src="https://파일의주소/img.png">- alt: 이미지가 로딩되지 않을 때 대신 로딩할 텍스트
- src: 이미지 파일 경로 혹은 주소
- img의 width를 변경하면 비율에 맞춰서 height도 변경됨
block vs inline
- block 요소는 좌우측에 다른 요소를 붙여넣을 수 없음
(header, footer, p li 태그등이 이에 해당함) - inline요소는 block 요소와 반대되는 개념
(span, a, img 등이 해당)
.inline-p {
display: inline-block;
}
.block-span{
display: block;
}
.hide{
display: none;
}- inline-p class는 block인 요소가 inline으로 변경
- block-span class는 inline요소가 block으로 변경
- hide class는 보이지 않음
position
- position은 총 4개의 값이 있음.
(static, relative, absolute, fixed)
.search {
position: relative;
width: 300px;
}
.search img{
position: absolute;
width: 17px;
top: 10px;
right: 12px;
}- absolute는 부모에 relative가 있어야 적용 가능
(top, bottom, left, right로 위치를 조정할 수 있음) - 예제와 같이 search class의 img의 포지션은 absolute로 설정되어 위로 10px, 오른쪽에서 12px만큼 조정됨
.coupon {
position: fixed;
right: 0;
bottom: 0;
background-color: red;
}- fix는 스크롤 여부와 관계 없이 브라우저 화면 크기만큼 화면 내에서 이동함.
- 쇼핑몰의 쿠폰 기능이 이와 유사함.
display: flex
.wrapper {
display: flex;
justify-content: flex-start; //flex-end
align-items: flex-start; //flex-end
flex-direction: row; //row-reverse column column-reverse
}
.wrapper .yellow{
order: 3;
}- 가로정렬을 수행하는데 flex는 굉장히 유용함.
- justify-content에서 flex-start를 설정하면 오른쪽에, flex-end는 왼쪽으로 정렬을 수행하도록 함(center는 가운데정렬)
- justfy-content: space-around는 자식들의 좌우 마진을 동일하게 설정
- justfy-content: space-between는 끝 여백은 없이 좌우 마진 동일하게 설정
- justfy-content: space-evenly는 짝수값 자식의 여백만 설정
- align-items는 세로 정렬 기준을 정할 때 사용(justfy-content와 유사)
- flex-direction은 요소들을 정렬할 때 사용.
- .wrapper .yellow에 CSS를 부여한 것 처럼 정렬순서를 임의로 변경할 수 있음
'html,css' 카테고리의 다른 글
| HTML 기초 및 여러 태그들 (0) | 2021.12.06 |
|---|