CSS기초(띵동코딩) 1

공부/웹개발 종합(사전준비)

CSS기초(띵동코딩) 1 - 1

뀨뿌뀨뿌 2023. 6. 1. 19:45

1. 웹 서비스 기초

ⅰ. 웹 서비스의 동작원리

브라우저가 하는 일은 요청을 보내고 요청 받은걸 그대로 그려주는 역할을 함
이때, 요청 받은 내용에 들어있는 것이 HTML, CSS, Javascript
HTML은 뼈대, CSS는 꾸미기, Javascript는 움직이기
=> 눈에 보이는 부분을 프론트엔드라고 함

ⅱ. HTML, CSS, Javascript

세 가지를 집 짓는 것에 비교한다면 집의 골조를 세우는 것은 html의 역할이고, 인테리어 하듯 홈페이지를 꾸며주는 것이 css의 역할, 불을 켜고 끄는 등 홈페이지의 동적인 역할은 javascript

2. VS Code

VS Code(Visual Studio Code)란?
✔ Microsoft사가 개발해 무료로 제공하는 개발환경으로, 세계에서 가장 많이 사용 되고 있는 개발 프로그램
✔ 개발 환경이란 코드를 입력하고 실행 시킬수 있는 공간
✔ VS Code를 사용하는 이유
- 무료로 사용 가능
- 메모장보다 가시성이 좋음
- 무료 확장팩 제공 및 사용자 친화적 기능으로 사용성이 좋음
- 개발자 사이에 점유율1위

3. HTML 기초

ⅰ. head - body 구조

웹페이지에서 뼈대를 담당하는 html은 기본적으로 <head> 영역과 <body> 영역으로 이루어져 있음
<head>는 보이지 않는 부분을 설정
<body>는 보이는 부분을 설정

<html>
    <head>
        <!-- 웹페이지 보이지는 않지만, 필요한 설정을 해두는 곳 !-->
    </head>
    <body> 
        <!-- 우리가 웹페이지에서 볼 수 있는 부분을 세팅하는 곳-->
    </body>
</html>

ⅱ.html 주요 태그

html은 태그로 이뤄져 있음
대부분의 태그는 여는태그<태그> 닫는 태그 </태그> 로 이루어져 있음
여는 태그만 존재하는 경우도 있음
자주 쓰는 html 태그

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>사이트 제목</title>
  </head>
  <body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6 h 뒷 숫자가 커질수록 글자 크기는 작아져요.</h3>
    <a href="https://ddingdong.spartacodingclub.kr/"> 하이퍼링크 </a>
    <hr />
    <img
      src="https://ddingdong.spartacodingclub.kr/images/Page/LandingPage/benefit-3-tb.svg"
    />
    <input type="text" />
    <button>버튼입니다.</button>
  </body>
</html>

ⅲ. 로그인 페이지 만들기

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title> 띵동코딩 - 로그인 페이지</title>
    </head>
    <body>
        <h1>로그인 페이지</h1>
        <p> ID : <input type="text"></p>
        <p> PW : <input type="password"></p>
        <button>로그인하기</button>
    </body>
</html>

4. CSS 사용하기

ⅰ. CSS 기본 사용법

태그에 class를 사용하여 스타일을 지정할 수 있음
사용방법
<style>
. 클래스명 {
. . 속성: 값;
. }
</style>
✔ 선택할 클래스(이름): 스타일을 적용할 html 부분을 지정해줌
✔ 속성: 변화줄 스타일의 종류가 무엇인지 적어줌.(크기, 색, 위치 등)
✔ 값: 스타일에 얼마만큼 변화를 줄 것인지 적어줌
❗ 중괄호, 콜론, 세미 콜론을 작성하지 않으면 컴퓨터는 인식을 하지 못함!!

<!-- ex) -->
<style>
	.mytitle{
		color: red;
	}
</style>
....
<h1 class="mytitle">로그인 페이지</h1>

ⅱ. CSS의 부모 - 자식 구조

CSS는 Cascading Style Sheet의 약자, 여기서 Cascading은 폭포수를 뜻함
상위 태그 스타일 설정이 하위 태그까지 영향을 미치게 됨
=> 부모 - 자식 구조라고도 표현함

ⅲ. 자주 쓰이는 CSS

자주 쓰이는 CSS

⭐ 배경 관련

✔ background-color: 배경색을 지정해 줄 때의 속성
✔ background-image: 배경 이미지를 정할 때의 속성
✔ background-size: 배경 이미지 크기를 정하는 속성

⭐ 사이즈
✔ width: 선택한 부분의 너비를 정하는 속성
✔ height: 선택한 부분의 높이를 정하는 속성

⭐ 폰트
✔ font-size: 글자 크기를 정하는 속성
✔ font-family: 글꼴을 정하는 속성
✔ color: 글자 색을 정하는 속성

⭐ 기타
✔ text-align: 블록(덩어리) 요소의 가로 정렬을 정하는 속성
✔ margin: 블록의 바깥쪽 여백을 정하는 속성
✔ padding: 블록의 안쪽 여백을 정하는 속성

ⅳ. CSS 연습해보기

로그인 페이지 글자 뒤에 배경 삽입과 화면의 가운데로 가져오기

<!DOCTYPE html>

<html lang = "en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>스파르타코딩클럽 | 로그인페이지</title>
   <style>
   .mytitle {
   /* backgroundImage 불러오기 */
   background-image: url('https://static.spartacodingclub.kr/media/main_carousel/1kq0i51tuqc2kfzp.png');
   background-position: center;
     background-size: cover;
     width: 300px;
     height: 250px;
     /* 둥글게 하기 */
   border-radius: 10px
     /* 글자 색 */
     color: white;
     /* 가운데 정렬하기 */
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     .}
     .wrap {
     margin: auto;
     width: 300px;
     }
   </style>
  </head>
<body>
      <div class="wrap">
       <div class="mytitle">
       <h1>로그인 페이지</h1>
             <h3>코딩의 시작, 띵동코딩</h3>
       </div>
       <p> ID : <input type="text"></p>
       <p> PW : <input type="password"></p>
       <button>로그인하기</button>
      </div>
  </body>
</html>

버튼 꾸며주기

<!DOCTYPE html>
  			.
    .mybtn{
      border: none;
      background-color: brown;
      border-radius: 10px;
      color: white;
      width: 300px;
      height: 40px;
    }
  			.
      <button class="mybtn">로그인 하기</button>
			.
</html>

ID, PW 부분 input태그와 그 부분 여백 주기

<!DOCTYPE html>
<html lang="en">
			.
    .loginInput {
      border-radius: 10px;
      height: 20px;
    }
    .inputBox{
      margin-top: 30;
      margin-bottom: 30px;
      margin-left: 20px;
    }
			.
      <div class="inputBox">
        <p>ID : <input type="text" class="loginInput" /></p>
        <p>PW : <input type="password" class="loginInput" /></p>
      </div>
			.
</html>

5. CSS 활용하기

ⅰ.계획세우기

구역을 계획한 후 HTML을 작성하고, CSS를 설정함
- 구역 나누기
  ✔ GNB 구역: 어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴바를 지정
  ✔ 메인 구역: 본문의 주 컨텐츠
  ✔ CTA구역: 사용자의 반응을 유도하기 위한 버튼이나, 배너를 가르킴
- HTML 작성하기
- CSS 설정

ⅱ. 구역 나눠서 클론코딩하기

메뉴바 부분 코딩

<!DOCTYPE html>

<head>

<style>

.gnb {

display: flex;

flex-direction: row; /* 가로로 정렬 */

justify-content: space-between;

align-items: center;

width: 1100px;

height: 60px;

margin: auto;

}

</style>

</head>

<body>

<img

src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg"

</div>

</body>

</html>

메인 부분 코딩하기

<!DOCTYPE html>

<head>

<style>

.gnb {

display: flex;

flex-direction: row; /* 가로로 정렬 */

justify-content: space-between;

align-items: center;

width: 1100px;

height: 60px;

margin: auto;

}

.main {

display: flex;

flex-direction: column; /* 새로로 정렬 */

justify-content: space-between;

align-items: center;

padding-top: 60px;

}

.main > h3 {

font-size: 22px;

font-weight: 500;

line-height: 1.5;

text-align: center

color: #415b6d;

margin-bottom: 10px;

}

.main > h1 {

font-size: 46px;

font-weight: 800;

line-height: 1.4;

text-align: center;

color: #26343d;

}

.main > img {

width: 1100px;

}

hr {

border-top: none;

border-bottom: 0.5px solid lightgray;

}

</style>

</head>

<body>

<img

src="https://ddingdong.spartacodingclub.kr/images/common/logo-tb.svg"

</div>

<hr />

<h3>

매주 월요일, 내 강의실에 찾아오는<br />

온라인 코딩 학습지

</h3>

<h1>띵동코딩이 도착했어요</h1>

<img

src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/hero.png"

</div>

</body>

</html>

스크롤과 관계없이 붙어 다니는 배너 만들기

<!DOCTYPE html>

.......

.cta {

background-color: white;

width: 1200px;

height: 80px;

border-radius: 8px;

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

/* 스크롤에 관계없이 고정시키기 */

position: fixed;

bottom: 20px;

left: calc(50% - 600px); /* position이 fixed일때 가운데로 오게 하기(600px은 가로길이의 절반을 뜻함) */

/* 그림자 효과 주기 */

box-shadow: 0px 0px 10px 0px lightgray;

}

.cta > p {

font-size: 20px;

margin-left: 120px;

font-weight: 500;

}

.cta > p > span {

color: #ff773c;

}

.cta > button {

width: 300px;

height: 60px;

margin-right: 120px;

background-color: #ff773c;

border: none;

border-radius: 8px;

color: white;

font-size: 16px;

font-weight: bold;

/* 마우스 커서 올렸을때 손모양 나오게 하기 */

cursor: pointer;

}

</style>

..............................

</div>

</body>

</html>

폰트 입히기
- 구글 웹 폰트를 통해서 원하는 폰트로 간단히 변경할 수 있음
- 아래의 코드를 <style>태그 안에 넣어주면 폰트 적용이 가능해짐

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
      * { /* 전체 설정하기 */
        font-family: "Pretendard", serif;
      }

저작자표시

'공부 > 웹개발 종합(사전준비)' 카테고리의 다른 글

CSS기초(띵동코딩)2 - 2 (0)	2023.06.03
CSS기초(띵동코딩)2 - 1 (0)	2023.06.02
CSS기초(띵동코딩) 1 - 2 (0)	2023.06.02
웹 개발 종합 2주차 (1)	2023.05.13
웹개발 종합 1주차 (1)	2023.05.10

현재글CSS기초(띵동코딩) 1 - 1

rosie

ㅇㄻ, 코딩부트캠프후기, 항해99장점, 부트캠프추천, 항해99단점, 항해99후기,

Today :
Yesterday :

rosie