티스토리 뷰

코딩/스파르타코딩-웹개발

웹개발 1주차 개발일지 (1)- HTML, CSS, 폰트/ 주석/ 파일 분리

김기지 2022. 10. 4. 18:59

◎수업 목표

1. 서버와 클라이언트의 역할에 대해 이해하기

2. HTML, CSS의 기초지식을 이해하고 부트스트랩 활용하기

3. Javascript 기초 문법 익히기

 

○ 서버/ 클라이언트/ 웹의 동작개념

네이버페이지를 해킹해보자

네이버 시작 페이지의 상단 메뉴 중 '사전'을 '안녕'으로 바꾸어보자.

사전에 커서를 댄 후 검사창에 들어가면 페이지의 html속성이 나오는데 그 중 텍스트를 바꾸면 된다.

이 변화가 모든 화면에 표시되는걸까?

아니다.

웹페이지는 서버에서 받은 모든것을 그려주는 것으로 

네이버라는 페이지는 우리가 전원을 끄거나 창을 닫아도 존재하게된다.

따라서 우리가 보는 웹페이지는 각자 부여받은것이다.

 

어떻게 요청한걸까?

서버가 만들어 놓은 "API"라는 창구에 요청을 전송하면 그 정보를 받아 다시 전송하는것이다.

 

 

○ HTML

- 페이지를 구성하는 뼈대

 

HTML파일을 만들어보자.

먼저 파이참을 키고 파일을 하나 생성하면 기초 코드가 나오는데 

창을 띄워보면 본문 페이지에는 아무것도 나오지않고 페이지의 타이틀만 나온다.

 

코드를 보면 <body>안에는 아무 내용도 들어있지 않고 <head>안의 타이틀만 존재한다.

여기서 <body>안에 텍스트를 써주면 창의 본문에 들어있다.

그렇다면 우리는 페이지의 몸통부분에 들어갈 내용은 <body>에, 그 외의 속성은 <head>에 입력하면 된다.

 

●html기본 태그

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

 

기본 태그를 활용하여 간단한 로그인페이지를 만들어보자.

'로그인페이지'는 h1태그로, 텍스트박스는 input태그, 하단의 버튼은 button태그를 이용하자.

<body>
  <h1>로그인 페이지</h1>
  <p>ID : <input type="text"> </p>
  <p>PW : <input type="password"> </p> <!--password타입을 넣으면 입력한 글자가 암호화되어나온다-->
  <button>로그인하기</button>
</body>

○ CSS

-꾸미기

css를 들어가기 전에 알아야되는 속성이 있다.

 

<HTML의 부모-자식 구조>

html태그는 부모-자식구조가 존재한다. 

위 그림에서처럼 감싸고 있는 부모태그와 안에 들어있는 자식태그가 있을때,

부모태그에 css설정을 주면 자식태그도 그 영향을 받는다.

예를 들어, 빨간div태그에 위치를 가운데로 옮기는 설정을 한다면?

초록div태그와 파란div태그도 함께 가운데로 옮겨진다.

이처럼 초록태그에 글자색을 흰색으로 설정한다면 안의 버튼의 글자도 흰색이 된다.

 

● css기초

무엇을 꾸미려면 우선 대상을 부를수있는 명칭이 필요하다.

이는 css selector(선택자) class=""로 명명해준다.

명칭을 달아주었다면 <head>안의 style태그에서 설정을 해주자.

.

 

.

 

아까 만든 로그인페이지에 css를 더해보자.

로그인페이지 박스 안에 텍스트를 추가하고 이미지를 넣었다.

먼저 <div>로 구역을 나누어 로그인페이지 박스를 만들자.

  <div class="mytitle">
    <h1>로그인 페이지</h1>
    <p>아이디, 비밀번호를 입력해주세요</p>
  </div>

명칭도 달아주었다.

 

이제 css설정을 해주자.

먼저 저 박스의 크기가 눈에 보이지 않으므로 배경색을 넣어 확인해보자.

    .mytitle {
      background-color: green;
    }

폭이 페이지에 꽉 차있다.

가로와 세로의 길이를 설정해주고 모서리를 둥글게 만들어보자.

    .mytitle {
      background-color: green;
      width: 300px;
      height: 200px;
      border-radius: 10px;
    }

배경이미지를 넣기 전에 안에 들어있는 내용물의 속성을 설정해주자.

text-align: center;
color: white;

이제 배경색은 필요가 없으므로 빼주고 이미지를 넣어보자.

그런데 이미지를 그냥 넣으면 이미지파일에서의 박스가 위치한 부분만 나오게된다.

이를 설정해 줄 css요소를 넣어주자.

      background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
      background-size: cover;
      background-position: center;

내부여백을 띄어주자.

내부에서 여백을 만들때는 padding, 외부로부터 여백을 만들때는 margin을 사용한다.

    .mytitle {
      width: 300px;
      height: 200px;
      border-radius: 10px;

      text-align: center;
      color: white;

      background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
      background-size: cover;
      background-position: center;
      padding-top: 40px;
    }

○ 폰트/ 주석/ 파일분리

 

●폰트

폰트는 구글웹폰트를 사용한다.

https://fonts.google.com/

 

Google Fonts

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

fonts.google.com

마음에 드는 폰트를 하나 골라 눌러주고 아래로 내리면 stlyes부분에 'Regular+400'옆에있는 플러스버튼을 눌러준다.

옆에 뜬 창에서 글꼴을 설정해주는 속성을 가져오면 되는데, 두 가지 방법이 있다.

① <link>로 연결하기

② @import을 <style>로 가져와서 설정하기

 

①의 경우에는 링크 중 마지막것을 가져와 <style>위에 넣어주면 되고

②의 경우에는 @import값을 가져와 <style>안 맨 위에 붙여준다.

<style>에 *{ }를 쓰고 괄호안에 font-family값을 가져와 붙여주면 폰트가 설정된다.

 

 

● 주석

: 브라우저/컴퓨터가 읽을 수 없도록 하여 실행이 되지 않게하는 것

 

-주석은 언제 사용하는가?

1) 필요없어진 코드를 삭제하는 대신, 임시로 작동하지 못하게 하고싶을 때

2) 코드에 대한 간단한 설명을 붙여두고 싶을 때

 

-단축키 : 주석처리 하고싶은 부분 선택 후 ctrl+/

주석은 html의 부분마다 다르게 생겼으므로 단축키를 활용하는것이 유용하다.

 

 

●파일분리

css요소가 너무 길어질때 파일분리로 코드를 더 깔끔하게 볼 수 있다.

같은 폴더 안에 css파일을 만들어 <style>안의 모든 속성을 넣어준다.

<style>을 모두 지운 후 css파일을 링크로 붙여준다.

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

'코딩 > 스파르타코딩-웹개발' 카테고리의 다른 글

웹개발 2주차 개발일지(2) - Ajax  (0) 2022.10.13
웹개발 2주차 개발일지(1) - JQuery  (0) 2022.10.12
웹개발 1주차 개발노트 숙제 - 팬명록 만들기  (1) 2022.10.08
웹개발 1주차 개발일지(3) - Javascript  (0) 2022.10.07
웹개발 1주차 개발일지(2) - 부트스트랩, CSS복습  (0) 2022.10.06