#항해99 웹개발 종합반 1주차 회고(1) - HTML, CSS

2022. 10. 18. 01:02

[수업 목표]

서버와 클라이언트의 역할에 대해 이해한다.
HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
Javascript 기초 문법을 익힌다.

1. 서버와 클라이언트란 무엇인가?

클라이언트는 자료를 요청(request)하는 컴퓨터이고 서버는 자료를 그 요청에 응답(respond)하는 컴퓨터이다.

프론트엔드 개발자들은 클라이언트에 노출되는 부분을 개발한다고 할 수 있고, 백엔드 개발자는 유저들에게 보이지는 않지만 그 뒤에서 일어나는 서버에 저장하는 데이터에 함수를 입히고 원하는 기능을 구현하는 개발을 한다고 할 수 있다.

프론트엔드는 좀더 고객친화적이고 디자인요소를 다루는 것이고, 백엔드는 추상적인 것들의 다룬다.

2. HTML (=뼈대)/ CSS(=꾸미기) , boostrap

HTML은 구역과 텍스트를 나타내는 코드, CSS는 잡은 구역을 꾸며주는 것. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생함. HTML 코드 내에 CSS 파일을 불러와서 적용한다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

1) HTML

① HTML은 크게 <head>와 <body>로 구성됨

head안에는 페이지의 속성 정보를, body안에는 페이지의 내용이 들어간다
head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 ( 페이지의 속성을 정의하거나, 필요한 스크립트들을 불러줌. 즉, 눈에 안 보이는 필요한 것들을 담는 것)
아래를 참고해서 필요할 때 찾아서 사용하기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<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>

</html>

※ tip 1 : Pycharm에서 코드 자동정렬 하려면? ctrl+alt+L (맥은 cmd+alt+L)

- 코드를 잘 정렬해야 유지, 보수도 쉽고 협업을 할 때 효율성을 높일 수 있다.

② HTML 부모-자식 구조

html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요! 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받음.

보이는 바와 같이 빨간 <div>를 이동하면 자동으로 초록 파랑<div>도 같이 이동 하게됨.

2) CSS

① CSS 사용

<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성. <body>부분에서 꾸미고자 하는 부분을 'class ="이름"'으로 지정해 주고, <style>아래 부분에 .이름 { ... } 라고 작성 한 뒤 { }안에 꾸며주는 코드를 작성한다.

예시)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | 로그인페이지</title>
    <style>
        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

※ tip2 : 위에 backgroud 와 display 부분은 다음에 필요할 때 복붙해서 쓰도록 한다!

margin과 padding ( → 헷갈리지 말기!) - margin은 바깥 여백을, padding은 내 안쪽 여백을 조절함
만들어둔 박스를 화면 가운데로 가져오려면? width를 주고, margin: auto를 사용하자! 그래도 안되면? display:block을 추가!

 .wrap {
            margin: 10px auto;
            width: 300px;
        }

② CSS 구글 웹폰트 입히기

https://fonts.google.com/?subset=korean 에서 마음에 드는 폰트 선택
폰트 클릭 후 우측 상단 아이콘 에서 Embed 탭 클릭
마지막 link 복사해서 HTML 파일에 붙여주기
CSS 에 *{} 를 통해 전체 페이지에 적용하면 끝

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

예시 ) Jua라는 폰트를 예제로 추가해보면, 아래와 같은 코드를 복사하면 됩니다.

<!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

/* CSS에 이 부분을 추가하면 완성! */
* {
	font-family: 'Jua', sans-serif;
}

※ tip 3 : 주석 달기 (ctrl 혹은 command + / 슬래시 )

주석을 붙여놓으면 브러우저/컴퓨터는 그 부분을 읽지 않음. 주석은 개발자 본인 또는 동료를 위해 사용.

필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
코드에 대한 간단한 설명을 붙여두고 싶을 때 사용

※ tip 4 : 모바일 처리 하는 법

width: 95%;
max-width: 500px;

3) Bootstrap

남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일합니다. 다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐
남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐서 쓰는 게 답
https://getbootstrap.com/docs/5.0/

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

※ tip 5 : 이모티콘 모음 링크 https://kr.piliapp.com/facebook-symbols/

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원

kr.piliapp.com

4회를 수강한 오늘(10/24일) 헷갈렸던 부분 정리 :

기록하기 닫기 버튼 부분 CSS로 가운데다 배치하는 법

먼저 버튼부분을 다시한번 <div>로 묶고 class를 지정해야 했다. 자꾸 이 부분을 까먹는다.

'항해99 개발 일지 > [0주] 웹개발 종합반' 카테고리의 다른 글

#항해99 웹개발 종합반 5주차 회고 - AWS, 가비아 (0)	2022.10.21
#항해99 웹개발 종합반 4주차 회고 - Flask, API (0)	2022.10.20
#항해99 웹개발 종합반 3주차 회고 - Python (0)	2022.10.19
#항해99 웹개발 종합반 2주차 회고 - jQuery, Ajax (2)	2022.10.19
#항해99 웹개발 종합반 1주차 회고(2) - Javascript 기초 문법 (1)	2022.10.19