본문 바로가기
  • GDG on campus Ewha Tech Blog
3-1기 스터디/웹개발 기초

[1주차] HTML, CSS

by naegajoa 2021. 10. 13.


웹 개발 기초 스터디의 첫 주가 끝났습니다! 
스터디원 모두가 수업도 다 듣고 과제 제출도 해준 아주 열정적인 시간이었습니다

이번주에는 생활코딩의 HTML과 CSS수업을 듣고 내용을 정리해 보는 시간을 가졌습니다.

https://www.youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb 

 

WEB1- HTML & Internet

 

www.youtube.com

https://www.youtube.com/playlist?list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B 

 

WEB2-CSS

 

www.youtube.com

 

♥HTML♥

특징♥

1. Hypertext Markup Language

2. CSS, JavaScript와 함께 웹 브라우저를 만드는 데 사용되는 언어

3. 프로그래밍 언어가 아니라 스크립트 언어!

4. 웹 브라우저의 골격 역할을 한다.

5. txt파일에 작성하고 확장자를 .html로만 바꾸어주어도 시행됨!

6. 사용자에게 보여지는 부분을 만듦

7. 서버와의 통신이 있어야 함

 

 

♥HTML의 기본 구조♥

<!DOCTYPE html>                     //html 5 버전으로 작성할 때 사용

<html>

   <head>

   </head>

   <body>

   </body>
</html>
  •  Tag는 대부분<시작>과 </끝>으로 이루어짐
  •  <head></head>사이에는 <title>제목</title>이 들어감(제목은 웹 브라우저의 이름이 됨)  
    ♥<body></body>사이에 들어갈 것들♥
  •  <h1> 글자 크기 </h1>……숫자의 크기가 커질수록 글자 크기 작아짐
  •  <b> 글자 크기 굵게</b>
  •  <i>글자 기울이기</i>
  •  <del>취소선</del>
  •  <mark>하이라이트</mark>
  •  <sub>밑에 조그맣게 표기</sub>……ex)H2O에서 숫자 2
  •  <sup> 위에 조그맣게 표기></sup>……ex)102에서 숫자 2
  •  <blockquote>큰 따옴표</blockquote>
  •  <markquee>글자 오른쪽에서 왼쪽으로 흐르기</markquee>
  •  <p>새 문단</p>
  •  <br>……새로운 줄 생성...if)<br><br>이면 새로운 2개의 줄 생성…<br>은 짝이 아님!
  • <p align = “글자 배치”> 글자 배치 예시 </p>
  •       <p align = “left”> Left </p>
  •       <p align = “right”> Right </p>
  •       <p align = “center”> Centered </p>
  •       <p align = “justify”>  Justified </p>
  • <p style = “ 글자 스타일 ”> 글자 스타일 지정 예시</p>
  • <p style = “font-size:150%”> 폰트의 크기를 150% 확대</p>
  • <p style = “background-color : lightgray”>문단의 배경색을 옅은 회색으로 지정 </p>
  •       <p style = “color : red”> 글자색을 붉은 색으로 지정 </p>
  •       <p style = “padding-left:100px”> 왼쪽으로 100px만큼 여백을 줌</p>
  •       <p style = “padding-bottom:100px”> 아래쪽으로 100px만큼 여백을 줌</p>
  •       <p style = “font-family:궁서”> 폰트의 종류를 궁서체로 설정</p>
  • <ol>

        <li>리스트 1번</li>

        <li>리스트 2번</li>

        <li>리스트 3번</li>

               ……

        <li>리스트 n번</li>

   </ol>……리스트를 순서대로 나열(리스트 앞에 숫자 붙음)

  •  <ul>

          <li>리스트 a</li>

          <li>리스트 b</li>

          <li>리스트 c</li>

                  ……

          <li>리스트 z</li>

     </ul>……리스트를 순서없이 나열(리스트 앞에 〮가 붙음)

  • <img src = “http:// ...... ”> _인터넷에 있는 이미지 삽입
  • <img src = “D:\user ...... ”>_본인 컴퓨터에 있는 이미지 삽입

♥Table Tag♥

예시

<table>

    <table border =“숫자”>   //숫자는 table 선의 굵기를 나타냄

    <tr> <th> [0][0] </th> <th> [0][1]  </th> </tr>

    <tr> <th> [1][0]  </th> <th> [1][1]  </th> </tr>

    <tr> <th> [2][0]  </th> <th> [2][1]  </th> </tr>

</table>

설명

<tr>은 table row......가로열 만들음

<th>는 table head......칸에 들어갈 내용

<td>는 table data......cell을 만듦

 

♥화면 분할<frameset>♥

예시

<head>

    <frameset cols = “800, *”>                   // *는 나머지 영역 전체를 의미

    <frame src =“ ”>                            // “ ”이 안에 원하는 html 파일의 주소를 넣으면 된다.

    <frame src = “ ”>

    </frameset>

</head>

♥Input♥

예시

1. text 입력

<html>

   <body>

     <form method="get" action="">

     <input type = "text" name="my_id" size = "칸 크기" maxlength ="입력할 최대 길이" value="칸에들어가 있을 내용">

     </form>

  </body>

</html>

 

2. password 입력

<html>

   <body>

      <form method="get" action="">

      <input type = "password" name="my_password" size = "칸 크기" maxlength ="입력 가능한 최대 글자 수" value=“칸에 미리 입력되어 있을 내용">

      </form>

   </body>

</html>
  •   Password type은 입력한 내용이 * 으로 보임

 

3. submit

<html>

   <body>

     <form method="get" action="버튼 누른 후의 모습.html">

     <input type = "password" name="my_password" value=“미리 입력 되어 있을 내용">

     <input type = "submit" value=전송>

     </form>

   </body>

</html>
  •  Submit 버튼이 생김
  •  버튼 누르면 action="버튼 누른 후의 모습.html"에 입력되어 있던 모습으로 화면 전환

 

그 외에도 여러 가지 기능들…

•        Checkbox : 다중 선택

•        Radio : 한가지 선택

•        Submit : 보내기

•        Reset : 리셋

Youtube 링크 걸기

1. 유튜브 영상 밑에 공유하기 클릭

2. 퍼가기 클릭

3. <iframe ……..></iframe>내용 싹 copy해서 붙여넣기

 

<html>♥ html 내용 끝! ♥</html>

♥CSS♥

특징♥

1. html문서의 style을 담당(골격에 살을 입힘)

2. 주석 _ <!-->

3. css파일 없이 css 효과 넣을 수 있음

       <style></style>안에 원하는 것들을 넣으면 됨

           예시

           <head>

               <style>p{font-size : 20px}</style>     //모든 문단의 크기 고정

            </head>

 

5. css사용하기 _ 확장자를 .css로 설정 후, html문서에

<head>

           <link rel = “stylesheet” herf=”파일이름.css”>

</head>

라고 써주면 된다.

 

6. Grouping

1) body {color : red; }               // body에만 적용

2) p {color : red; }                   //모든 문단에 적용

3) a {color : red; }                    //모든 하이퍼링크에 적용

4) h1 a {color : red; }               //h1안에 있는 하이퍼링크에 적용

       

예시

<style>

           P{ color : red; }

</stlye>

 

 

-> 사용 방법_자세하게

1. id를 이용하는 방법 _ 한 개에만 적용됨

2. class를 이용하는 방법 _ 다중 적용

칸 나누기_예시

<div>

           <p> 소제목 </p>

           <span> 글 내용 A</span>

          <span> 글 내용 B </span>

</div>

  •  Div는 공간을 나누기 위한 디자인 적 요소
  •  Span 은 inline으로 줄 바꿈 안 된다

 

<p style = font-size:20px>♥ CSS 내용 끝! ♥</p>

 

 

과제는 노션 과제 제출함에 있습니다 :)

 

 

저작자표시 비영리

'3-1기 스터디 > 웹개발 기초' 카테고리의 다른 글

[웹개발 기초 스터디] Node.js (2)  (0) 2021.11.18
[웹개발 기초 스터디]Node.js (1)  (0) 2021.11.17
[웹개발기초 스터디] Javascipt  (1) 2021.11.14
[2주차] Git : Part2  (0) 2021.11.03
[2주차] Git : Part1  (0) 2021.11.03

관련글

댓글

티스토리툴바