즐거운 웹 개발/HTML, CSS

HTML, CSS 기초 (소스코드, 예제 포함) + 초보자용 설명

맨땅 2024. 11. 22. 00:50
반응형

 

1. CSS란?

 

CSS 란 무엇인가? - Web 개발 학습하기 | MDN

CSS (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동할까요? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 CSS에 대한 몇 가지 주요 용어를 다룹

developer.mozilla.org

 

 

1. 파일 만들고 첨부하는 방법(비전공자, 초보도 이해 가능)

  1. (Visual Studio code 에디터 : https://code.visualstudio.com/ 설치 과정은 생략)
  2.  원하는 폴더에 index.html, main.css 파일 생성
  3. 주석처리
    • .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.  박스 디자인을 추가하고 싶을 경우

  1. index.html <p> 태그 아래에 <div class="box">박스</div> 추가
  2. css에 .box class 추가 후 박스 디자인의 style 삽입
  3. 생략가능한 부분이며 그때그때 적용하고 싶으신 스타일이 있으면 검색해서 사용(복붙)하시면 됩니다

3번까지 다 따라오시면 이런 화면이 됩니다

 

 

4.  일부 스타일은 자동으로 부모에서 자식으로 상속됩니다

  1. 쉽게 말하자면 태그 안에 태그를 쓸 수 있는데 그걸 부모, 자식이라고 이해하시면 됩니다
  2. 예를 들어 <div class="custom"><p>기초</p></div> 이렇게 할 경우 custom에 적용된 style이 아래 <p> 태그에도 적용됩니다
    • ex) .custom { font-size: 8px; } 인경우 그 안에 <div>안에 <p> 태그가 몇개가 있던 다 font-size는 8px로 적용됩니다
  3. css에 .box class 추가 후 박스 디자인의 style 삽입

설명을 돕기위한 예시 코드

#index.html
<div class="custom"> <!-- 예시입니다 -->
    <p>기초1</p>
    <p>기초99</p>
</div>


#main.css
.cusom {
	font-size:8px;
}

 

 

 

4.  float 예제 - 항목들 가로로 나란히 배치 

 

한 박스안에 여러개 박스가 들어있는 형태

 

  1. 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;
}

 

 

 

 

 

 

 

반응형