반응형
1. CSS란?
- Cascading Style Sheet : 스타일 보관파일이라고 이해하시면 쉽습니다
- 자세한 설명은 해당 링크 참고 https://developer.mozilla.org/ko/docs/Learn/CSS/First_steps/What_is_CSS
CSS 란 무엇인가? - Web 개발 학습하기 | MDN
CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동할까요? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 CSS에 대한 몇 가지 주요 용어를 다룹
developer.mozilla.org
1. 파일 만들고 첨부하는 방법(비전공자, 초보도 이해 가능)
- (Visual Studio code 에디터 : https://code.visualstudio.com/ 설치 과정은 생략)
- 원하는 폴더에 index.html, main.css 파일 생성
- 주석처리
- .html : ctrl + /
- .css : ctrl + ?
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link href="css/main.css" rel="stylesheet" /> <!-- 해당 경로에 css 파일 생성 후 이렇게 불러와서 사용하면 됩니다-->
</head>
<body>
<img src="LOGO.png" class="profile" /> <!-- 해당 경로(이 파일이 있는 폴더)에 이미지 넣어주시면 됩니다 -->
<h3 class="title">맨땅에 코딩</h3>
<p id="special" style="color: black" class="content">CSS 파일 첨부 기초</p>
<!-- 위의 코드처럼 css가 인라인 스타일, id, class 이렇게 있으면 우선순위가 인라인 style >> id >> class >> tag 입니다 -->
</body>
</html>
main.css
*css부분 설명을 보고도 잘 이해가 안되신다면 직접 해보시길 권장드립니다
.profile {
width: 100px;
display: block;
margin-left: auto;
margin-right: auto;
}
.title {
text-align: center;
font-size: 16px;
}
/* id : 인라인 스타일 다음으로 css 파일 만들어서 사용하면 우선순위가 제일 높지만 잘 안씁니다 class를 더 사용합니다 */
#special {
text-align: center;
}
/* class : 제일 많이 사용합니다 클래스명 앞에 .을 붙여주시면 됩니다 */
.content {
color: red;
}
/* tag : css 파일 만들어서 사용시 우선순위가 제일 낮습니다 */
p {
color: green;
}
3. 박스 디자인을 추가하고 싶을 경우
- index.html <p> 태그 아래에 <div class="box">박스</div> 추가
- css에 .box class 추가 후 박스 디자인의 style 삽입
- 생략가능한 부분이며 그때그때 적용하고 싶으신 스타일이 있으면 검색해서 사용(복붙)하시면 됩니다
4. 일부 스타일은 자동으로 부모에서 자식으로 상속됩니다
- 쉽게 말하자면 태그 안에 태그를 쓸 수 있는데 그걸 부모, 자식이라고 이해하시면 됩니다
- 예를 들어 <div class="custom"><p>기초</p></div> 이렇게 할 경우 custom에 적용된 style이 아래 <p> 태그에도 적용됩니다
- ex) .custom { font-size: 8px; } 인경우 그 안에 <div>안에 <p> 태그가 몇개가 있던 다 font-size는 8px로 적용됩니다
- css에 .box class 추가 후 박스 디자인의 style 삽입
설명을 돕기위한 예시 코드
#index.html
<div class="custom"> <!-- 예시입니다 -->
<p>기초1</p>
<p>기초99</p>
</div>
#main.css
.cusom {
font-size:8px;
}
4. float 예제 - 항목들 가로로 나란히 배치
한 박스안에 여러개 박스가 들어있는 형태
- float = 뜨다 말 그대로 위에 띄운다는 뜻
- 띄운 항목 아래로 <div> 태그등이 들어가서 뒤에 있어서 안보일수도있다 ex)ppt에서 겹치면 뒤에 있는 요소가 안보이는 것처럼
- 해결방법 -> clear : both (float 다음에 오는 요소에 주면 float 항목 뒤로가서 안보이는 등 에러 현상 해결가능)
- float 쓰고나서 다음에 오는 요소는 clear를 쓰는게 좋다
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link href="css/main.css" rel="stylesheet" />
</head>
<body>
<!-- 모든 <div>는 가로행을 전부 차지한다(=style="display: block") -->
<div class="container">
<div class="header"></div>
<div class="left"></div>
<div class="right"></div>
<div class="footer"></div>
</div>
</body>
</html>
main.css
.header {
width: 100%; /* 부모(상위) 태그 width의 100% */
height: 50px;
background: aquamarine;
}
.left {
width: 20%;
height: 400px;
background: cornflowerblue;
float: left; /* 나란히 왼쪽 정렬 */
}
.right {
width: 80%;
height: 400px;
background: coral;
float: left;
}
.footer {
width: 100%;
height: 100px;
background-color: grey;
clear: both;
}
반응형