-프론트엔드 공부 02일차-
CSS
기본 문법
단일 속성 지정
선택자 {
속성: 값;
}
다중 속성 지정
선택자 {
속성: 값;
속성: 값;
속성: 값;
속성: 값;
}
CSS 사용 방법
- html 태그 속성에 입력
태그에 CSS 속성이 바로 기록되어 있어, 별다른 지정이나 연결이 필요하지 않음
하지만 가독성이 떨어지고 필요한 태그를 직접 찾아야한다. 즉 유지보수가 불편하다
- <style> 태그에 입력
태그와 CSS 속성이 html 내에서 분리되어 있어 어떤 태그에 CSS 속성을 적용할 지 연결해 주어야 함. 선택자를 이용해 한번에 여러 영역을 지정하거나 수정하는데 유리
- CSS 파일 만들어 불러오기
태그와 CSS 속성이 분리되어 있어 어떤 태그에 CSS 속성을 적용할 지 연결해 주어야 함. 실무에 더 많이 사용하는 방법이다.
- html 태그 속성에 입력
스타일 적용 태그 즉시 확인 가능
한번에 하나의 태그에만 적용 가능
전체 코드 가독성 나쁨
관심사 분리 X
- <style> 태그에 입력
전체 코드 가독성 향상
유지보수 용이
태그와 CSS 연결 필요
관심사 분리 X
- CSS 파일 만들어 불러오기
전체 코드 가독성 향상
유지보수 용이
관심사 분리 O
태그와 CSS 연결 필요
관심사 분리 : 언어를 분리한 폴더를 따로 분리한다는 의미
CSS 선택자
전체 선택자
*{
color: blue;
}
태그 선택자
div {
color: red;
}
class 선택자
.container{
color: black;
}
id 선택자
#userInfo{
color: white;
}
박스 모델
HTML 태그들은 모두 박스 모델로 이루어져 있다.
margin : 박스의 바깥 여백
border : 박스의 기준이 되는 바깥 테두리
padding : 박스의 안쪽 여백
contents : 박스의 내용
박스 모델 화면 표시 방법
border-box
크기 중심이 바깥 테두리(border)
border가 고정됨 -> padding을 이용하면 contents의 크기가 변함
content-box
크기 중심이 내용(contents)
contents가 고정됨 -> padding을 이용하면 border가 크기가 변함
ex)
특정 크기의 택배 상자가 있다고 가정하고 만약 그 박스안에 완충제를 넣는다하면 우리가 박스에 넣을 수 있는 물건의 크기는 줄어들게 된다 -> border-box
물건의 크기를 정하고 그 다음 완충제의 크기를 정한다. 그렇게 되면 택배 상자의 크기가 더욱 커지게 된다 -> content-box
실무에서는 주로 border-box를 많이 사용한다. 하지만 CSS의 기본 값은 content-box이다. 그렇기에 CSS에서 boerder-box를 선언하고 작업을 해야 하는 경우가 많다.
박스 모델 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
/* *{
box-sizing: border-box;
} */
div {
width: 80px;
height: 80px;
border: 1px solid red;
padding: 10px;
}
#contetntBox{
box-sizing: content-box;
}
#borderBox{
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="contentBox">박스 1</div>
<div>박스 2</div>
<div id="borderBox">박스 3</div>
</body>
</html>
박스 모델 예제
*{
box-sizing: border-box;
}
위 코드 같은 경우 전체 태그에 border-box를 적용하고 싶을 때 사용하자
정렬
flex
여러 태그를 하나로 묶어서 정렬
display: flex;
(flex-direction: row; 가 기본 형태이다)
박스를 수평으로 나열
flex-direction: row;
부모 박스의 가로를 기준으로 가운데 정렬
justify-content: center;
부모 박스의 세로를 기준으로 가운데 정렬
align-items: center;
박스를 수직으로 나열
flex-direction: column;
부모 박스의 가로를 기준으로 가운데 정렬
align-items: center;
부모 박스의 세로를 기준으로 가운데 정렬
justify-content: center;
정렬 속성
space-between
아이템 사이에 균일 간격 정렬
space-around
아이템 둘레에 균일 간격 정렬
space-evenly
space-evenly
아이템 사이, 양 끝에 균일 간격 정렬
position
position: absolute
박스의 절대 위치
position: relative
부모 박스 기준으로 상대 위치
position: fixed
화면 기준으로 절대 위치
정렬 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<style>
div {
width: 80px;
height: 80px;
border: 1px solid red;
padding: 10px;
}
.parentBox{
width: 500px;
height: 500px;
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 50px;
}
</style>
</head>
<body>
<div class="parentBox">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
정렬 예제
'프론트엔드 공부 > html 기초' 카테고리의 다른 글
| 07일차 프론트엔드 공부 (0) | 2024.09.04 |
|---|---|
| 06일차 프론트엔드 공부 - 기초 JS 3 (2) | 2024.09.04 |
| 05일차 프론트엔드 공부 - 기초 JS 2 (0) | 2024.09.04 |
| 04일차 프론트엔드 공부 - 기초 JS (1) | 2024.09.04 |
| 01일차 프론트엔드 공부 -HTML의 기초 (1) | 2024.09.04 |