0-1주차(웹개발 종합반)

정길규·2023년 5월 15일
스파르타코딩클럽웹개발 종합반

HTML, CSS 기본내용

HTML은 뼈대, CSS는 꾸미기!

  • HTML은 웹의 뼈대를 잡아주는 구역을 나타내는 코드. 웹의 전반을 HTML을 통해서 적성 할수 있다.
  • CSS는 HTML을 통해 작성된 뼈대의 속성을 선택해 꾸미는 코드.
  • HTML의 style 속성을 통해 할 수 있지만, 긴 세월동안 이것을 한데 모아서 볼수 있는 CSS파일이 탄생함. HTML 코드 내에서 CSS파일을 불러와서 적용.

HTML의 기초

HTML은 크게 head와 body로 구성 됨.

  • head 안에는 페이지의 속성정보를, body 안에는 페이지의 내용을 담음.

  • head 안에 들어가는 대표적인 태그는 meta, script, link, title 등 이 있다.

  • head 안에는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부름. 즉, 눈에 안보이는 정보들을 담음.

  • body 안에 들어가는 대표적인 태그는 아래 코드 내용 등이 있다.

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

코드의 정렬이 제대로 되어 있지 않으면, 코드의 생김새를 파악하기 힘들어 오류 해결하기가 어려워짐.
shift + alt + F 로 영역을 선택하고 적용시 자동정렬 됨.

CSS 기초

head ~ /head 안에 style ~ /style 로 공간을 만들어 작성.
e.g. mytitle이라는 클래스를 가리킬 때, .mytitle{...} 라고 써줘야 한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .mytitle {

        }
        .mybtn {

        }
		.mytxt {

        }
    </style>
</head>
<body>
    <h1 class="mytitle">로그인 페이지</h1>
    <p class="mytxt">ID: <input type="text"/></p>
    <p class="mytxt">PW: <input type="text"/></p>
    <button class="mybtn">로그인하기</button>
</body>
</html>

자주 사용하는 CSS

  • 배경관련
    background-color
    background-image
    background-size

  • 사이즈
    width
    height

  • 폰트
    font-size
    font-weight
    font-family
    color

  • 간격
    margin : 바깥쪽 여백
    padding : 안쪽 여백

  • 이미지 size를 맞춰서 가운데에 넣을때 아래와 같이 사용됨.

background-image: url('');
background-position: center;
background-size: cover;
  • 태그들을 가운데로 정렬할 때 같이 사용된다.
display: flex;
flex-direction: row;  /* row : 가로로 정렬  column : 세로로 정렬 */
align-items: center;
justify-content: center;
/* 아래 같은 양식으로 작성 */
 <style>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
        }
</style>

CSS 파일분리

style ~ /style 부분이 너무 길어지면 보기가 힘들어짐. 확장자가 .css인 파일로 분리 할 수 있다.

<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

위와 같이 따로 css파일을 생성 후 위와 같이 작성하여 다른 곳에 있는 css파일을 읽어올 수 있다.

부트스트랩이란?

잘 꾸며놓은 css파일을 모아둔 것
아래 코드를 통해 내컴퓨터에 있는 css파일이 아닌 웹을 통해 css를 가져온다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

마치며

이번주는 사전캠프 3주차 과정인 웹개발 관련해서 공부하였다. 이때까지 공부했던 언어랑은 많이 다른것 같았다. 이때까지 아무 생각없이 사용했던 웹브라우저들이 엄청 많은 태그들과 다른 코드들로 이루어져 있는걸보고 대단하다고 생각들기도 하였다. 오늘 한것은 ctrl + c, ctrl + v 밖에 없는 것 같긴하지만 그래도 많은 내용을 새로 알게 된것 같다.

profile
정길규
이전 포스트

Python slicing

다음 포스트

2주차(웹개발 종합반)

0개의 댓글